GLBをWebサイトに埋め込むなら、Googleが公開しているWebの部品「model-viewer」を使うのが手軽です。ページに読み込み用のscript要素を1行足し、model-viewerのタグのsrc属性にGLBの場所を書いてcamera-controls属性を付ければ、見る人がマウスや指で回せる3Dがページに出ます。
この記事では、GLBをWebに置く3つの方法の違い、model-viewerで埋め込む手順と主な属性の役割、表示されないときの直し方、スマートフォンでの見え方、作品が増えたときの並べ方を順に整理します。HTMLのコードそのものは、版の番号まで正しいものを公式のドキュメントからコピーするのが確実なので、この記事では属性の名前と役割を説明し、コードは公式のページへのリンクで示します。model-viewerの仕様は、2026年11月時点の公式のドキュメントで確かめた内容です。
※現在のFigmeeが提供しているのは、描いたイラストから作るフィギュア風画像、3Dモデルデータ（GLB / 3MF）、3Dモデルの回転動画です。実物の3Dプリント注文は準備中（Coming Soon）です。また、写真や写真のように見える画像は3Dにできません（描いた絵が対象です）。
GLBをWebページに置く方法は何がある？
GLBを見る人のブラウザで回してもらう方法は、「自分のサイトに埋め込む」「作ったサービスの共有リンクを渡す」「3D共有サイトに置いて埋め込む」の3つです。自分のサイトの中に、自分のデザインで置きたいならmodel-viewerでの埋め込みが向いています。
| 方法 | 自分のサイトの中に出せるか | 手間 | 容量の考え方 | 向いている人 |
|---|---|---|---|---|
| model-viewerで埋め込む | 出せる | HTMLを書き足す・GLBをサーバーに置く | 置いたGLBをそのまま読むので、軽くするのは自分 | ポートフォリオのサイトを持ち、HTMLを直せる人 |
| Figmeeの共有リンク | 出せない（リンクを渡す） | 作品の画面でスイッチを入れるだけ | 気にしなくてよい | Figmeeで作ったモデルをすぐ見せたい人 |
| Sketchfabなどの共有サイト | 埋め込み用のHTMLを貼れば出せる | アカウント作成・アップロード | サイトの上限に従う | 複数のソフトで作ったモデルを1か所にまとめたい人 |
Sketchfabでは、モデルのページのビューアの下にある埋め込み（Embed）のボタンから、自分のページに貼る埋め込み用のHTMLを取り出せます。非公開やパスワード付きのモデルも埋め込めると案内されています（出典: Sketchfab Help Center「Embedding your 3D models」、2026年11月時点）。共有リンクで見せる手順と、公開すると見えるものは3Dモデルをネットで公開する方法にまとめています。
model-viewerとは？
model-viewerは、Googleがオープンソース（Apache License 2.0）で公開しているWebの部品で、ページにタグを1つ置くだけで3Dモデルを表示し、回せるようにします。読めるのはglTFとGLBだけで、公式のFAQは今後もこの形式だけに対応すると書いています（出典: model-viewer FAQ、2026年11月時点）。
- 読み込み方：公式のREADMEにある、
type="module"を付けたscript要素をページに貼ります。読み込み先はGoogleのCDN（ajax.googleapis.com）で、URLの途中に版の番号が入ります。npmでは@google/model-viewerという名前で配られています（出典: model-viewerのREADME、2026年11月時点）。 - 版：2026年11月7日時点のnpmの最新版は4.4.0です（出典: npm「@google/model-viewer」）。
- 対応ブラウザ：READMEは、常に更新されるブラウザ（Chrome・Firefox・Safari・Edgeなど）のパソコン版とスマートフォン版について、直近2つのメジャーバージョンに対応するとしています。
FigmeeのGLBは、形と色（テクスチャ）を1つのファイルにまとめたものなので、画像を別に置く必要がなく、GLBを1つアップロードすれば足ります。GLBそのものの仕組みはGLBファイルとはで、どんな絵が3Dに向くかはイラストを3D化する方法の全体ガイドで説明しています。
埋め込む手順は？
GLBを用意して軽くする、サーバーに置く、読み込みの1行を足す、タグに属性を書く、パソコンとスマートフォンで確かめる、の5段階です。HTMLを直せるサイトなら、最初の1体は30〜50分ほどが目安です。
- GLBを用意して軽くする（10〜30分）：Figmeeなら作品の画面の「保存」から「3Dモデル（GLB）」を選びます（保存に追加のトークンはかかりません）。読み込みが遅くなりそうなら、テクスチャの縮小・ポリゴンの削減・圧縮の順で軽くします（手順はGLBを軽くする方法）。
- GLBをサーバーに置く（5分）：ページと同じサーバー（同じドメイン）にアップロードするのが簡単です。別のドメインに置く場合は、そのサーバーがCORSのヘッダーを返す設定にする必要があります（下の「読み込みが遅い・表示されないときは？」）。
- 読み込みの1行を足す（2分）：公式のREADMEにあるscript要素をコピーし、版の番号（例: 4.4.0）を入れて、ページのheadに貼ります。
- タグを置いて属性を書く（5分）：表示したい場所に
model-viewerのタグを置き、srcにGLBのURLを、altに作品の説明を書き、camera-controlsを付けます。そのほかの属性は下の表から選びます。タグの書き方の例はmodel-viewerのドキュメントにあります。 - パソコンとスマートフォンで確かめる（5分）：回せるか、読み込み中に何が出るか、スマートフォンでページを縦にスクロールできるか、色と光り方が思ったとおりかを見ます。
よく使う属性は次のとおりです（出典: model-viewerのドキュメント、2026年11月時点）。
| 属性 | 役割 | 補足 |
|---|---|---|
src | 表示するGLBのURL | glTF・GLBだけに対応 |
alt | モデルを説明する文 | 画面を読み上げて使う人にも伝わるように、何の作品かを一言で書く |
camera-controls | マウスや指で回せるようにする | 公式は、ほぼ常に付けるよう説明している |
auto-rotate | 自動で回す | 回り始めるまでの待ちは既定で3000ミリ秒（auto-rotate-delay）。速さはrotation-per-second |
poster | 読み込みが終わるまで出す画像 | 公式のFAQは、モデルに切り替わっても違和感の無いポスターを常に使うよう勧めている |
loading | いつ読み込むか（auto・lazy・eager） | 既定のautoは、画面に近づいたときに読み込む。eagerはすぐ読み込む |
camera-orbit | 最初のカメラの向きと距離 | 既定は「0deg 75deg 105%」（横の角度・縦の角度・距離） |
touch-action | スマートフォンでのスクロールとの関係（pan-y・pan-x・none） | 既定のpan-yは、縦のスクロールを残したまま横の操作で回せる |
shadow-intensity | 足元の影の濃さ | 0で影を消す |
exposure | 明るさ（露出） | 明るすぎる・暗すぎるときに調整する |
ar | 対応する端末でAR表示を出す | 端末ごとの条件があるので、ほかを整えてから試す |
FigmeeのGLBには動き（アニメーション）が入っていないので、model-viewerのアニメーションの属性は使いません。ポーズを変えることもできないため、キャラクターの見せたい向きはcamera-orbitで最初のカメラの位置を決めて合わせます。
読み込みが遅い・表示されないときは？
何も出ないときは、GLBのURL、置き場所のドメイン（CORS）、読み込みの1行の3つを順に疑います。表示はされるが様子がおかしいときは、下の表の症状から探します。
| 症状 | よくある原因 | 直し方 |
|---|---|---|
| 何も表示されない | srcのURLの間違い、読み込みの1行が無い・版の番号の誤り | ブラウザの開発者ツールのコンソールとネットワークの表示で、GLBとスクリプトが読めているかを見る |
| 別のドメインに置いたGLBだけ読めない | CORSで止められている | GLBを置いたサーバーが、ページのドメインを許すCORSのヘッダーを返すように設定する（公式FAQ） |
| パソコンのファイルを直接開くと出ない | ブラウザが、ファイルとして開いたページからの読み込みを止めることがある | ローカルのサーバーか、実際のサーバーに置いて確かめる |
| 表示までが長い | GLBが大きい | テクスチャから順に軽くする。posterで読み込み中の見た目を整える |
| 圧縮したGLBが出ない | meshoptで圧縮した | model-viewerはmeshoptのデコーダーが既定で有効になっていない。Dracoで圧縮し直すか、meshoptDecoderLocationを設定する |
| 縁が金属のように光る | GLBの材質のメタリック（Metallic）が高い | Blenderで材質のメタリックを下げて書き出し直す（下の説明） |
CORSの説明は公式FAQの「Why am I getting CORS errors?」に、デコーダーの既定の読み込み先はドキュメントのdracoDecoderLocation・meshoptDecoderLocationの項にあります（いずれも2026年11月時点）。
最後の「縁が光る」は、Figmeeで作ったGLBで起こりやすい症状です。FigmeeのGLBは材質のメタリック（Metallic）が高い設定で書き出されていて、Figmeeのビューアではメタリックを0にして表示しています。そのため、同じGLBでもmodel-viewerなどのほかのビューアでは、彫りの縁が金属のように光って見えることがあります。気になるときは、Blenderで読み込んで材質のメタリックを0に近づけ（メタリックの入力に画像がつながっているときは、そのつながりを外してから値を変えます）、GLBとして書き出し直してから、置き先で光り方が変わったかを確かめます。Blenderへの読み込み方はFigmeeのGLBをBlenderに読み込む手順にまとめています。
スマートフォンでも回せる？
回せます。model-viewerはスマートフォンのブラウザにも対応していて、camera-controlsを付ければ指でドラッグして回せます。気をつけるのは、ページのスクロールとの取り合いとメモリの2つです。
- スクロールとの取り合い：
touch-actionの既定のpan-yでは、縦に指を動かすとページがスクロールし、横に動かし始めるとモデルが回ります。noneにするとモデルの上ではページがスクロールしなくなるので、モデルを画面いっぱいに置くときは、見る人がページの先へ進めなくならないかを確かめます。 - メモリ：大きなテクスチャは、ファイルとしては小さくても表示するときにメモリを多く使い、スマートフォンでは重くなる原因になります。縦横の解像度を下げると効きます（詳しくはGLBを軽くする方法）。
ar属性を付けると、対応する端末ではAR表示（カメラ越しに3Dを置いて見る表示）を始められるようになります。AndroidのScene Viewerには、ファイルの大きさや三角形の数などの推奨値と、使える拡張の条件が公開されているので（出典: Google ARCore「Scene Viewer」、2026年11月時点）、AR表示まで使うときは、その条件に合わせたGLBで試します。
作品が増えたときの並べ方は？
1ページに何体も並べると、そのぶん読み込みとメモリが増えます。一覧のページには作品ごとに静止画（ポスターと同じ画像）を並べ、3Dは作品ごとのページに1体ずつ置く形にすると、一覧が重くなりにくいと考えられます。
- 一覧は画像、詳細は3D：一覧から作品のページへ移ったところで、回せる3Dを見せます。
- 1ページに複数置くなら：既定の
loading（auto）は画面に近づいたときに読み込むので、下のほうのモデルは見る人がそこまでスクロールしてから読まれます。すべてにposterを付けておくと、読み込み前でも並びが崩れません。 - 元のイラストと並べる：3Dの横に元の絵を置くと、どの絵から立体になったかが伝わります。
自分のサイトを持っていない場合や、まとめて見せる場所が欲しい場合は、Figmeeのクリエイターページ（マイページで公開の設定をオンにすると、公開した作品が並ぶプロフィールのページ）も使えます。ポートフォリオ全体の組み立て方はイラストレーターのポートフォリオの作り方で、GLBを人に渡して見てもらう方法は無料で3Dモデルを見る方法5選で紹介しています。
よくある質問
WordPressなどのブログサービスでも使えますか？
使えるかどうかは、そのサービスでscript要素を含むHTMLを書けるかで決まります。書けないサービスでは、model-viewerは使えない場合があります。そのときは、Sketchfabの埋め込み（Sketchfabのヘルプは、WordPressなどへの貼り方も案内しています）か、共有リンクを貼る方法を選びます。
見る人はGLBを保存できてしまいますか？
ページに表示するために、GLBのファイルは見る人のブラウザへ送られます。そのため、URLが分かれば保存できる前提で置いてください。依頼して描いてもらった絵から作ったモデルなら、公開してよいかを先に描いた人に確かめます（考え方は依頼したイラストを3Dにしてよいか）。
料金はかかりますか？
model-viewerはオープンソースで、使うこと自体に料金はかかりません。GLBを置くサーバーの費用は、使っているサービスによります。Figmeeでは、3Dモデルの生成に5トークンを使い（アカウントにつき最初の1体は無料）、GLBの保存に追加のトークンはかかりません。
まとめ
GLBをWebサイトに埋め込むなら、model-viewerが手軽です。GLBを軽くしてサーバーに置き、公式のREADMEから読み込みの1行をコピーし、src・alt・camera-controlsを基本に、posterやauto-rotateを足していきます。表示されないときはURL・CORS・読み込みの1行を、縁が光るときは材質のメタリックを確かめます。スマートフォンでは、スクロールとの取り合いとテクスチャの大きさに気をつけます。
自分のキャラクターを回せる3Dでポートフォリオに置きたいときは、Figmeeで描いた絵から3Dモデルを作り、GLBを保存して、この記事の手順で埋め込んでみてください。
