Katapick

Trend / 3D / Interactive

3D・インタラクティブなWebサイト参考集

WebGL・Three.js の3D表現、スクロール連動のアニメーション、マウスに反応する演出など、動きで体験を作るWebサイトを集めた特集です。

いまの3D・インタラクティブサイトの傾向4 points

  1. 01スクロール量にカメラや3Dモデルを連動させ、ページを読む操作そのものを“物語を進める”操作にする。
  2. 02Lenis などの慣性スクロールと組み合わせ、動きの重さや速度までブランドの手触りとして設計する。
  3. 03重い演出の前後に静かなテキストの区間を置き、読ませる場所と見せる場所を切り分ける。
  4. 04モバイルでは演出を簡略化し、同じ体験を軽い表現に置き換えて読み込みを守るサイトが多い。

3D・インタラクティブサイトについてよくある質問

3Dやスクロールアニメーションが参考になるサイトは？

Katapickの「3D・インタラクティブ」特集で、公開18か月以内のサイトを掲載しています。各サイトの解説に、使われている技術や動きの仕組みをまとめています。

インタラクティブなサイトを作るときの注意点は？

演出の重さで読み込みが遅くならないよう、モバイルでの簡略化や prefers-reduced-motion への配慮、テキスト情報の確保を合わせて設計するのが一般的です。