3Dホームページを作る前に。写真で伝わらない一つを、動かして見せる

3DのWebページを作るなら、まず「写真では伝わりにくいこと」を一つ選び、その部分を動かして見せる設計から始めると、作る目的がはっきりします。商品一つ、操作一つ。料金や説明を残したまま、見る人が何を確かめられるかを考えます。

たとえば、マグを回すと持ち手の形が分かる。椅子を横から見ると、背もたれの角度が分かる。見る角度を選べることで、買う前に確かめられることを増やします。

動かす理由を、商品の疑問から決める

たとえば、手作りのマグを紹介するページを考えてみます。正面の写真だけでは色や模様は伝わっても、持ち手のゆとりや本体との間隔までは分かりにくいものです。そこで「マグを横へ回して、持ち手の立体的な形を確かめる」という操作を検討します。

重さは数値で、持ったときの大きさは使用時の写真で補います。形は3D、寸法は文章というように、伝えたい情報に合う素材をそろえます。

最初は、商品一つの試作を作る

まずは一つの商品だけで試作します。写真と説明に回転操作を加え、どの角度から見せると形を理解しやすいかを比べます。

マグなら、正面・横・斜めの写真と寸法を先に集める。そこから、どの形を表現したいかを制作者やAIへ渡すメモにします。写真から立体を作る場合も、生成した形を実物と照らし、持ち手や底の形が変わっていないかを見る工程が必要です。

制作を頼むメモなら、たとえば次のように書けます。

このマグを左右へ回し、持ち手の形と本体との間隔を横から見られる試作を作りたいです。正面・横・斜めの写真を基準にしてください。寸法と容量は操作領域の外へ置き、3Dを開く前にも読めるようにします。

試作では、実物の写真と同じ角度へ回して比べます。持ち手や底の形が違えば、その部分は修正するか静止写真で見せます。「回ったか」に加え、「確かめたかった形が正しく見えるか」までを完成の目安にします。

Shopifyの公式案内でも、3Dモデルは商品の細部や形を確認するための商品メディアとして扱われています。対応するテーマでは、商品ページへ画像などと一緒に置けます。3Dの使い道を考えるときは、すでにある説明へ何を足せるかが出発点になります。

触らなくても、必要な情報へ進めるようにする

商品を回す前に価格を知りたい人も、写真だけで選びたい人もいます。価格や説明を最初から読める構成にすると、それぞれの順番で商品を確かめられます。

商品名、主な写真、寸法、価格、問い合わせや購入ボタンといった重要情報は、3Dの操作領域とは切り離してすぐに読める場所に配置します。その横で商品を動かせるようにすると、説明を読みながら気になる角度を確かめられます。

読み込み中に見せる写真も用意します。Googleのmodel-viewer公式サンプルには、静止画像を先に表示し、クリックして3Dを読み込む例があります。最初から大きなデータを待たせるか、見たい人が開く形にするか。表示の仕方も体験の一部です。

スマホで、指が止まる場所を確かめる

パソコンの大きな画面で気持ちよく動いても、スマホでは商品が小さすぎたり、指で回すつもりがページをスクロールしてしまったりします。公開前には、見る人と同じ画面で操作します。

見るのは、商品が表示されるまでの待ち時間、何を触ればよいか、触ったあとに説明へ戻れるか。自動回転を加える場合も、商品の形を見る助けになるかを判断します。model-viewerの公式資料は、モデルの複雑さや自動回転が描画の負荷へ影響する点も案内しています。

一度に演出を増やさず、回す操作だけで目的を満たすなら、まずその形で仕上げる。次に加える動きは、足りない情報が見つかってから考えられます。

設計から公開まで学びたい人向けの教材

動く試作を作れても、事業に合う表現を選び、公開して更新するところまで進めたいなら、工程を通して学ぶ方法があります。「AIで作る3Dホームページの教科書」は、ぞろ屋とメルおじによるBrain教材です。

販売案内では、物を主役にする「モチーフ型」、時間や物語を見せる「シネマ型」、触って探してもらう「プレイ型」という教材独自の分け方を使い、目的に合う表現を選びます。設計、試作、カスタマイズから、WordPressでの公開・更新までが学習範囲です。

購入には、制作や公開を進めるAI向けの手順書、共同の質問コミュニティ、サポートページなどが含まれます。3Dパーツ集や表現カタログ、サンプルのダウンロード、画像から3D化するスキルは、レビュー投稿の特典として案内されています。

教材の対象は、WindowsまたはMacのパソコンで作業する人。制作の手順書はCodexとClaude Codeに対応し、解説はCodexを中心に進みます。ファイルを開く、画面を共有する、エラーをAIへ渡すといった操作も使います。AIの利用料、公開用のサーバーやドメイン、必要に応じた画像・動画の生成費は教材代と別です。

2026年10月2日の表示価格は税込29,800円です。購入後の更新版は追加費用なしで受け取れると案内されています。

販売案内には、今あるWordPressのテーマを残し、専用の固定ページへ3Dを加える方法も含まれています。マグなら「持ち手を見せる一ページ」を足す範囲から取り組めます。商品を回す試作から公開・更新まで進めたい人は、この工程を学ぶ候補として販売ページの作例を見比べられます。

参考資料

Brainの販売案内・価格・必要環境・特典は2026年10月2日確認。ShopifyとGoogleの資料は2026年9月22日確認。

• ぞろ屋・メルおじ：AIで作る3Dホームページの教科書の販売案内。学習範囲、購入・レビュー特典、必要環境、価格。
• Shopify：商品メディアの種類。商品ページでの3Dモデルの用途と対応テーマ。
• Google：model-viewer Loading。静止画像の表示、読み込み、描画負荷に関する案内。