Apple・Stripe のような動く3Dを自分のサイトに。Three.js を書かずに <model-viewer> だけで GLB を表示する最短ルート。
Apple の iPhone 紹介ページ、Stripe のトップ、最近のSaaSのランディングページ。共通しているのは「3Dが動いている」こと。視線を引きつけ、ブランド感を一段引き上げるための定番手法ですが、自分で実装するには Three.js / React Three Fiber の学習が必要でした。
Image2GLB は3D素材の生成側に特化し、Web 配信は Google 製の <model-viewer> に任せるアプローチ。これにより Web デザイナーが Three.js を書かずに3D化を完結できます。
実際に作れる3Dモデルのサンプル
下のビューアはマウス/タッチでぐるぐる回せます。すべて Image2GLB の AI で生成済みのサンプルです。
サンプル3Dモデル 操作可能な3Dビューアを準備中
サンプル3Dモデル 操作可能な3Dビューアを準備中
サンプル3Dモデル 操作可能な3Dビューアを準備中
Image2GLB の早見表
| できること | 写真・イラスト・AI生成画像1枚から、テクスチャ付きの3Dモデルを自動生成 |
|---|---|
| 無料で試せる量 | 登録で60クレジット(標準品質1体+STL書き出し分)。クレジットカード不要 |
| 有料プラン | 月額980円から(500クレジット/月)。いつでも解約可 |
| 1体あたりの消費 | 標準品質 37クレジット / 高品質 72クレジット |
| 所要時間 | 標準品質でおおむね3〜5分 |
| 入力できる画像 | PNG / JPEG / WebP(20MBまで)。テキストからAIで元画像を作ることも可能 |
| 出力形式 | GLB / STL / 3MF / Unity用ZIP / Webゲーム用ZIP |
| 使える端末 | PC・iPhone・Android のブラウザ。アプリのインストール不要 |
| 言語・決済 | 画面・サポートとも日本語。日本円(税込)のカード決済 |
| できないこと | リギング(骨入れ)やアニメーションは付きません。人物の顔の再現や細い部品は苦手です |
よくある質問
- Q. Three.js を書く必要はありますか?
- 不要です。<model-viewer> が回転・ズーム・AR表示まで全部やってくれます。
- Q. ファイルサイズはどれくらいですか?
- 標準品質で 2〜10 MB。LCP に影響しないよう、`loading=lazy` + Draco 圧縮の併用がおすすめ。
- Q. SEO に影響しませんか?
- <model-viewer> の `alt` 属性に説明文を書けば検索エンジンが内容を解釈できます。