今まで「パーティクル」を使ったWebデザインに出会ったことはありますか?

パーティクルとは粒子のことです。
Webデザインにパーティクルを取り入れることでまるで宇宙空間にいるかのような無重力を想像させることができます。
最近では、マウスを動かすとその方向にパーティクルが集まったり、パーティクル同士を線で結んでサイエンスを想像させるようなデザインのWebサイトも増えてきました。

今回は、パーティクルを使ったホームページのデザイン事例をご紹介します。

パーティクルを使ったホームページ

1. Deutser

1_deutser.jpeg
http://www.deutser.com

ヒューストンとロサンゼルスに拠点を構えるクリエイターとコンサルタントの総合代理店Deutserのホームページです。
真っ暗な背景に星のようなパーティクルがあり、マウスを動かすことで空間がマウスに合わせて動きます。

2. MRAssociates

2_mrassociates.jpeg
https://www.mrassociates.org

イギリスで不動産事業を行なっているMRAssociatesのホームページです。
パーティクルを線で結んだ幾何学的な模様が、ふわりふわりと空間を浮遊します。

3. サーモマグ

3_thermomug.jpeg
http://thermomug.com

ステンレス製で保温・保冷に優れたサーモマグのホームページです。
パララックスを取り入れたホームページの一部にパーティクルを取り入れています。

4. Peter Stojakovic

4_peter.jpeg
http://www.stojakovic.co

セルビアのデザイナーPeter Stojakovicさんのホームページを見てみましょう。
球体をかたどったパーティクルが、マウスの動きに合わせてくるくると回るような動きをします。

5. FF91

5_ff91.jpg
https://www.ff.com/en/

人工知能を使った電気自動車を開発しているシリコンバレーのスタートアップ企業Faraday Futureのホームページです。
ファラデーの電磁誘導の法則が社名に由来しているだけあり、パーティクルを使って科学的な世界観を演出しています。

6. Digital Design Days

6_ddd.jpeg
http://www.ddd.it/en

イタリアのミラノで毎年開催されているデザインアワードDigital Design Daysのホームページです。
粒子状ではなく正四面体を使ったパーティクルを採用している点がとってもユニークです。

7. Shift Agent

7_shiftagent.jpeg
http://www.siftagent.com

トロントにあるスタートアップ企業Shift Agentのホームページをご覧ください。
宇宙空間を模したフラットなデザインの中でマウスを動かすとパーティクルも反応して動きます。

8. 日本メディカル株式会社 採用サイト

8_japanmedical.jpeg
https://recruit.japanmedical.jp

医療系のベンチャー企業日本メディカル株式会社の採用サイトを見てみましょう。
グリーンの線とパーティクルが、健康科学のイメージとマッチングしています。

9. VOID

9_void.jpeg
http://void.hi-res.net

ロンドンのEleven 11が展開する「無から有を生み出す」イメージサイトVOIDを見てみましょう。
天の川のような流れるパーティクルが印象的なホームページです。

10. Seven Brief Lessons On Physics

10_sevenbelief.jpeg
http://www.sevenbrieflessons.com

Penguin Booksから発売されている書籍「Seven Brief Lessons on Physics」の公式ホームページです。
物理学に関する7つの教訓というタイトルがパーティクルのイメージとマッチしています。

11. Double Pi

11_doublepi.jpeg
http://doublepi.me

ブラジルのインタラクティブデベロッパーGuilian Drimbaさんのポートフォリオサイトです。
まるでブラックホールに吸い込まれるかのような奥行きのあるパーティクルアニメーションを採用しています。

12. Brandify

12_brandify.jpeg
http://www.brandify.com

デジタルマーケティングプラットフォームサービスを提供しているBrandifyのホームページです。
パーティクルを繋げた多面体がくるくると動き、さまざまな機能が繋がって付加価値を提供するイメージを表しています。

13. ZEPPERIN

13_zepperin.jpeg
http://zeppelin.co.jp

表参道に拠点を構えるクリエイティブカンパニーZEPPERINコーポレートサイトです。
マウスを動かすと、その部分だけにパーティクル同士を結ぶ線が現れます。

まとめ

パーティクルを使うと、まるで宇宙空間を浮遊しているような不思議な世界観を演出することができます。

今回ご紹介したサイトをご覧いただいて、「こういうホームページはどうやって作ればいいのか」と思った方も多いのではないでしょうか。
Particleを実装する方法として、以下のようなプラグインを入れるのが簡単です。

実現したい世界観がご自身の志向と合っているのであれば、ぜひパーティクルをWebデザインに取り入れてみてください。