宇宙のような世界観を再現できる！パーティクルを使ったホームページのデザイン事例13選

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

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

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

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

1. Deutser

http://www.deutser.com

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

2. MRAssociates

https://www.mrassociates.org

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

3. サーモマグ

http://thermomug.com

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

4. Peter Stojakovic

http://www.stojakovic.co

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

5. FF91

https://www.ff.com/en/

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

6. Digital Design Days

http://www.ddd.it/en

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

7. Shift Agent

http://www.siftagent.com

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

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

https://recruit.japanmedical.jp

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

9. VOID

http://void.hi-res.net

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

10. Seven Brief Lessons On Physics

http://www.sevenbrieflessons.com

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

11. Double Pi

http://doublepi.me

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

12. Brandify

http://www.brandify.com

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

13. ZEPPERIN

http://zeppelin.co.jp

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