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