1.BOTANIST（ボタニスト）

引用：https://botanistofficial.com/

ポイント：メインビジュアル

メインビジュアルに背景を映り込ませた泡を表示させることで、透明感のある印象的なキービジュアルになっています。

2.Alphane Labs

引用：https://solutions.alphanelabs.com/

ポイント：3Dモデルを使用した製品イメージ

訴求したい製品の3DモデルをWeb上に表示し、稼働する動きを見せたり、様々な角度から表示することで、ユーザーに商品の特徴を直感的に説明することができています。

3.アプリファクトリーはるni株式会社

引用：https://haru-ni.net/

ポイント：3Dモデルを使用したコンテンツ

Webページ上に3Dモデルを表示し、ドラッグで180度回転して閲覧することができます。サイトのコンテンツを3Dモデルの中に表示することで、ビジュアルを見せながら会社内容を伝えることが可能です。

4.株式会社日本テレビアート

引用：https://www.ntvart.co.jp/

ポイント：3Dモデルをクリックして拡大

メインビジュアルに3Dモデルのアニメーションを使用し、さらに浮いている写真をクリックすることでその写真を拡大することが可能です。一般的なギャラリーの形よりも印象的に事例を見せることができます。

5.株式会社サイトスコープ

引用：https://sitescope.co.jp/

ポイント：3Dで動くマスコットキャラクター

マスコットキャラクターを3Dで各所に設置し、動かすことで魅力的に見せています。キャラクターモデルに3Dを使用することで、様々な角度、動きでキャラクターを見せることが可能です。

6.ポーラ 母の日広告

引用：https://www.pola.co.jp/special/o/wecaremore/mothersday/

ポイント：3Dを使用したスクロールアニメーション

母の日の花束をイメージした3Dモデルがスムーズに動くキービジュアルが印象的なサイトです。スクロールでコンテンツを読み進めることができ、メッセージを印象的に伝えることができます。

7.株式会社ボックス・ワン

引用：https://box1.co.jp/

ポイント：パララックスな3Dアニメーション

マウスオーバーやスクロールでパララックス表現を取り入れた3Dアニメーションが印象的なサイトです。会社のサービスやキャッチコピーに合わせたアニメーションを採用することで、何をしている会社なのかをわかりやすく表現しています。

8.新潟日報メディアネット

引用：https://www.niigata-mn.co.jp/

ポイント：CMSで更新可能な螺旋状のギャラリー

弊社へご依頼いただき制作したコーポレートサイトです。写真を螺旋状に配置し、クリックで拡大することができます。さらに、Wordpress上で写真の順序を変更したり追加することができ、簡単に更新できるようになっています。

9.インディゴ白書

引用：https://45r.jp/ja/indigo-hakusho/

ポイント：巻物風の横スクロールアニメーション

巻物の3Dモデルから横スクロールのコンテンツにつなげることで、和風な雰囲気のWebサイトになっています。GSAPなどのライブラリも併用することで、通常のWebサイトにはない見せ方ができています。

10.Junni is…

引用：https://next.junni.co.jp/

ポイント：インタラクティブな3Dキャラクターアニメーション

メインビジュアルにキャラクターを大きく乗せ、スクロールによって様々な効果を付与した印象に残るWebサイトです。キャラクター自体の動き以外にも、マウスによって3D空間の要素を操作でき、触っていて楽しいWebページになっています。

Three.jsを使うと、高度な3D表現やアニメーション表現が可能になり、没入感あるインタラクションを実現しやすく、豊富なドキュメントと事例で導入・拡張も容易です。

Three.jsを学ぶ際は、まずこうした実際の参考サイトを確認し、どのような動きができるのか・自分のサイトにとって効果的かを理解することが近道です。本記事を参考に、ぜひWeb制作に活かしてみてください。

もし 「Webサイトに3Dアニメーション演出を取り入れたい」「ユーザー体験を高めるサイトを作りたい」 といったご要望がありましたら、ぜひお気軽にドコドアまでお問い合わせください。