宇宙のような世界観を再現できる!パーティクルを使ったホームページのデザイン事例13選
今まで*「パーティクル」*を使ったWebデザインに出会ったことはありますか?
パーティクルとは粒子のことです。
Webデザインにパーティクルを取り入れることでまるで宇宙空間にいるかのような無重力を想像させることができます。
最近では、マウスを動かすとその方向にパーティクルが集まったり、パーティクル同士を線で結んでサイエンスを想像させるようなデザインのWebサイトも増えてきました。
今回は、パーティクルを使ったホームページのデザイン事例をご紹介します。
パーティクルを使ったホームページ
1. Deutser
ヒューストンとロサンゼルスに拠点を構えるクリエイターとコンサルタントの総合代理店Deutserのホームページです。
真っ暗な背景に星のようなパーティクルがあり、マウスを動かすことで空間がマウスに合わせて動きます。
2. MRAssociates
イギリスで不動産事業を行なっているMRAssociatesのホームページです。
パーティクルを線で結んだ幾何学的な模様が、ふわりふわりと空間を浮遊します。
3. サーモマグ
ステンレス製で保温・保冷に優れたサーモマグのホームページです。
パララックスを取り入れたホームページの一部にパーティクルを取り入れています。
4. Peter Stojakovic
セルビアのデザイナーPeter Stojakovicさんのホームページを見てみましょう。
球体をかたどったパーティクルが、マウスの動きに合わせてくるくると回るような動きをします。
5. FF91
人工知能を使った電気自動車を開発しているシリコンバレーのスタートアップ企業Faraday Futureのホームページです。
ファラデーの電磁誘導の法則が社名に由来しているだけあり、パーティクルを使って科学的な世界観を演出しています。
6. Digital Design Days
イタリアのミラノで毎年開催されているデザインアワードDigital Design Daysのホームページです。
粒子状ではなく正四面体を使ったパーティクルを採用している点がとってもユニークです。
7. Shift Agent
トロントにあるスタートアップ企業Shift Agentのホームページをご覧ください。
宇宙空間を模したフラットなデザインの中でマウスを動かすとパーティクルも反応して動きます。
8. 日本メディカル株式会社 採用サイト
https://recruit.japanmedical.jp
医療系のベンチャー企業日本メディカル株式会社の採用サイトを見てみましょう。
グリーンの線とパーティクルが、健康科学のイメージとマッチングしています。
9. VOID
ロンドンのEleven 11が展開する「無から有を生み出す」イメージサイトVOIDを見てみましょう。
天の川のような流れるパーティクルが印象的なホームページです。
10. Seven Brief Lessons On Physics
http://www.sevenbrieflessons.com
Penguin Booksから発売されている書籍*「Seven Brief Lessons on Physics」*の公式ホームページです。
物理学に関する7つの教訓というタイトルがパーティクルのイメージとマッチしています。
11. Double Pi
ブラジルのインタラクティブデベロッパーGuilian Drimbaさんのポートフォリオサイトです。
まるでブラックホールに吸い込まれるかのような奥行きのあるパーティクルアニメーションを採用しています。
12. Brandify
デジタルマーケティングプラットフォームサービスを提供しているBrandifyのホームページです。
パーティクルを繋げた多面体がくるくると動き、さまざまな機能が繋がって付加価値を提供するイメージを表しています。
13. ZEPPERIN
表参道に拠点を構えるクリエイティブカンパニーZEPPERINのコーポレートサイトです。
マウスを動かすと、その部分だけにパーティクル同士を結ぶ線が現れます。
まとめ
パーティクルを使うと、まるで宇宙空間を浮遊しているような不思議な世界観を演出することができます。
今回ご紹介したサイトをご覧いただいて、*「こういうホームページはどうやって作ればいいのか」*と思った方も多いのではないでしょうか。
Particleを実装する方法として、以下のようなプラグインを入れるのが簡単です。
実現したい世界観がご自身の志向と合っているのであれば、ぜひパーティクルをWebデザインに取り入れてみてください。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コーポレート
- コーポレートとは、日本語の「企業」のことです。インターネット上で「コーポレートサイト」という場合は、企業のホームページであることを表します。また、コーポレートは接頭語として使われることが多く、「コーポレートガバナンス(企業内統制)」などのように、他の単語と組み合わせて使うことが多いようです。会社そのものを指すことが多い「カンパニー」とは使い方が異なります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング