LeonardAI/Bard/Spline/webflowといったツールを使用して3Dのデモサイトを作りました。
3Dを使用したウェブサイトは作り手が少ない点や大企業しか採用していない印象が強いです。
近年海外の高品質なホームページ(ウェブサイト)はかなりの確率で3D要素を取り入れています。
今後マーケティング面でも重要な要素となりそうですね。
今回の記事は、クライアントとなる方以外に、
同業の方にも有益な情報になるかも知れません。
もし役に立ったなと思ったらいいねいただけますと幸いです。
さて、今回はSplineの使用感を含め
3Dを使用したウェブサイトなどのお話ができたらと思います。
今回作成した3DツールのSplineを使用したデモサイトです。
https://glasses-spline.webflow.io/
3Dソフトというと、Maya,Blender,Cinema4Dなどが有名ですが、
SplineはWeb上でモデリングを行えるツールとして、
2021年頃？に登場したばかりのツールになります。
Spline
初期のSplineでは描き出せるフォーマットはweb上で埋め込めるURL、動画と画像のみでしたが、最近では（2023年12月現在）まだ制限はあるものの、GLBやGLTFなどの書き出しを可能としており、AR with Appleの書き出し方式も実装されているので、将来的には完全にweb上で操作できるwebアプリ用のメイン3Dツールになりそうです。
という作業時間短縮の流れです。
Splineを操作するのは初めてでしたが、他の3Dソフトを操作するよりは気軽でした。
気軽の意味は、ソフトを立ち上げて数秒待つ無駄な時間がないので、Webブラウザですぐに操作ができるという点です。
今回のプロジェクトは月の成分で作成したメガネフレームというコンセプトにしたので、強く、軽く、かつセルロイドや鼈甲よりも高価な素材である、という設定です。
このように多くのラフデザインが湧いて来ますが、
イメージに近しい画像を選定し、これをモデリングすることにします。
さてさて、AI生成画像は、当然のように0から作成されたものではなく、過去に存在したデータを組み合わされて可視化されたもの、、、
という概念ですが、将来的には著作権などの影響がでてくるのではないかと私は考えています。
とはいえ、このように沢山のデザイン案を作るためにはどのくらいの労力がかかったのか？
かつては一枚に付き半日以上かかったのではないでしょうか。
Splineの特徴は、以下のとおりです。
Splineは、3Dモデルの作成やアニメーションの制作に利用できます。
以下のような用途に適しています。
高解像度の3Dオブジェクトや複雑なアニメーションを作成すると、パフォーマンスが低下する場合がありますし、ブラウザで表示させる場合は当然読み込み量など気にする必要はあります。
さて、Splineは以下のような3D
を作るのは簡単にできます（30分ほど）が、今回のようにある程度リアルなメガネをモデリングするにはそこそこ時間がかかりました。（元々3Dソフト経験がありますが、1日くらいかかりました）
周りにある金属の球体のマテリアルなども複雑に使用することで、リアリティーを高めることが可能です。
今回はメガネと球がぶつかると、物理演算で球を弾き飛ばすような制御をしました。
単純なアニメーションではなく、相互作用のあるインタラクション・ゲーム性のあるコンテンツもできるのだと感じました。
今回のテキストは完全に某アニメから引っ張って来ました。
ご了承ください
Splineはhtmlベタ打ちでも、wordpress、Framer、Studioといったコンテンツ管理システムやフレームワーク上でも実装できますが、今回はwebflowを使用しました。
2023年10月にwebflowの機能が大幅バージョンアップされSplineと統合したということで使用感を試したかったのです。
リアルタイム反映していないんじゃない？疑惑
今回はwebflowでsplineの実装を行いましたが、Splineで作成していたモデリングやインタラクションにおいて、なんどか修正しながら作業をしましたが、なぜか更新されないケースが多く、かなりの時間のロスがありました。
Splineはまだ開発中のツールであるため、致し方ないのかなと思いつつ・・・・・・
この辺りがリアルタイムで反映されると便利だなと思いました。
＊）この反映を強制的に行うためにした解決方法は、Splineのファイルを適宜複製し、他の名前、他の埋め込みURLを排出し、そのURLを組み込む、ということでした。
この方法であれば確実に更新されましたが、どなたか逆に原因やもっと良い解決策を知っていたら教えていただきたく。
インタラクションの干渉に関して
Spline内でもweb用のインタラクション、アニメーションを作成することができます。
この場合、webflowでも同じようなインタラクションをつけると、当然干渉します。
今回のデモサイト内で説明すると、眼鏡のフレームの色を変える箇所はWebflow単体では実現できないため、Splineで作成しています。
メガネの回転やテンプル（つる）の開閉はwebflowでつけているため、どちらか一方で完結できるとより効率的ですね。
またモバイルで閲覧する場合、マウスダウンとスクロールが共存すると、どちらかが動かないなどといった干渉を散見しました。
(＊2023年12月現在)
早く正式製品版になることを願っています。
Web制作における3Dの活用
WebサイトやWebアプリにおいて、3Dの活用が進んでいますが、Splineは、WebサイトやWebアプリ、ネイティブアプリなどに3Dコンテンツを簡単に埋め込むことができるため、Web制作における3Dの活用を促進すると考えます。
2000年代初頭においてweb3Dと呼ばれる技術が出現しましたが、ブラウザ上にいくつかのプラグインをインストールする必要があったため、ブラウザ依存や利用者へのハードルが高かったように思います。
また当時のネットワーク回線の貧弱さによって簡易な3Dオブジェクトしか見せられなかったのです。
近年以下の要因で3Dを用いたWebが増えてきています。
１ ハードウェアの進化
スマートフォンやパソコンなどのハードウェアの性能が向上しています。そのため、3Dコンテンツを快適に表示できるようになりました。
２ JavaScriptの進化（WebGL）
JavaScriptは、Webページに動的な機能を追加するために使用されるプログラミング言語です。
近年、JavaScriptの機能が向上したことで、3DコンテンツをWebページに埋め込むことが容易になりました。
３ 3D制作ツールの普及
3D制作ツールの価格や操作性難易度が低下したことで、3Dコンテンツを作成する人が増えています。
| 利用シーン | 操作難易度 | ツール |
| Web | 初心者～中級者 | Spline、Blender、Three.js、Babylon.js |
| ゲーム | 中級者～上級者 | Autodesk Maya、Autodesk 3ds Max、Unreal Engine、Unity |
| 映画 | 上級者 | Autodesk Maya、Autodesk 3ds Max、SideFX Houdini、The Foundry Nuke |
3Dコンテンツは、従来の2Dコンテンツに比べて、よりリアルで没入感のある体験を提供することができますし、より複雑な情報をわかりやすく伝えることができます。
3Dコンテンツは、従来の2Dコンテンツに比べて、より印象に残りやすいため、マーケティング効果の向上が期待できます。
具体的な例としては、以下のようなものが挙げられます。
2015年頃から自動車メーカーのWebサイトでは、3Dモデルを使用して、自動車のデザインや機能をわかりやすく紹介するケースが増えて来ています。
例えば、360度回転する3Dモデルを使用して、webサイトやARを使って新型車の内装や外装を詳細に紹介することで、
今までの写真以上に実物へのリアリティーを感じさせることができたり、3Dで見せることで高級感を加味し出す効果があります。
Teslaの3Dサイト
Panasonic 3Dモデルを使用しての、360度の電気設備BOX
リモワの商品カスタマイズを3Dで
静止画のロゴではなく、自社のロゴを3D化して
インパクトを打ち出し、ブランディングしたコーポレートサイト
それぞれの情報を閲覧するにはこの車を所定の場所に動かさないといけないという、
使い勝手無視のインタラクティブ性を駆使した個人サイト
それでも同じようなコンセプトでウォー⭕️ー探しや、謎解き要素、ゲーミフィケーションを取り入れたサイトを作りつつ、マーケティングに使えそうです。
実際このレベルのサイトでCMS機能（ニュース・ブログ・商品更新機能）も実装した場合、
納期は約3週間程度でできると思います。(まちがいなく早いですね)
3Dの素材がある場合、ない場合で開きはありますが見積もり金額がどのくらいになるのか？
気になる方は以下からお気軽にご相談ください。
発注有無に関わらず、相談会は何度でも無料です。
今回はSplineを使用してデモサイトを作ってみましたが
今後も引き続きインパクトのあるものを発信していけたらと思います。
また会いまshow.
