2026年8月3日

WordPressのSketchfab（3Dモデル）を埋め込む方法

メディア・画像

はじめに

ここでは、Sketchfabというオンラインプラットフォームを利用して、WordPressサイト上で3Dモデルやアニメーションをインタラクティブに表示する方法について説明します。Sketchfabは、3Dアーティストが作品を共有し、世界中のユーザーと交流できる素晴らしいツールです。さらに、SketchfabのAPIを使用することで、そのコンテンツをWordPressサイトに簡単に統合することができます。

この記事では、具体的なステップとともに、Sketchfabのコンテンツを安全かつ効果的にWordPressに埋め込む方法をお伝えします。3DモデリングやCGIアートに関心があるユーザーだけでなく、ウェブ開発者やコンテンツマネージャーにとっても有益な情報を提供します。

症状・背景

このテーマが必要になる主な場面:

オンラインギャラリーを運営し、3D作品を展示したい場合
ビジネスの製品説明ページにインタラクティブな製品モデルを追加したい場合
3DゲームやVRコンテンツのデモをウェブサイトで紹介したい場合
技術的な記事やブログポストに視覚的に豊かな図解を提供したい場合

手順・設定方法

ステップ1: Sketchfabアカウントと公開APIキーの準備

# Sketchfabでアカウントを作成またはログインします。
https://sketchfab.com/register

# 画面右上の「アカウント」から「APIキー」を選択し、新しい公開APIキーを作成します。

ステップ2: WordPressにSketchfabのJavaScriptを追加する

# WordPressのテーマファイルを編集し、<head>タグ内またはフッター（</body>タグ直前）に次のスクリプトを挿入します。
https://sketchfab.com/static/embed.js

# 以下のように具体的なコード例を追加:
<script src="https://sketchfab.com/static/embed.js"></script>

ステップ3: Sketchfabの3Dモデルを埋め込むHTMLタグを作成する

# WordPressの投稿ページまたはテンプレートファイル内で、次のスクリプトを使用してSketchfabの3Dモデルを表示します。
<div id="sketchfab-model-id"></div>
<script type="text/javascript">
  var modelId = 'model-id-here'; // Sketchfabで取得したモデルID
  var apiKey = 'your-public-api-key'; // ステップ1で作成した公開APIキー

  sketchfab.initViewer(document.getElementById("sketchfab-model-id"), {
    modelId: modelId,
    apiKey: apiKey,
    AR: true, // AR機能を有効にする場合はtrue
    ARMode: 'any', // 複数のARモードを指定する場合、カンマ区切りでリストアップ（example: 'any','camera','image')
    ARInstructions: "Point your phone's camera to start!", // AR開始時の指示文
  });
</script>

ステップ4: モデルIDと公開APIキーの確認

# SketchfabのモデルページからURLをコピーし、その中の「model-id-here」を更新したモデルIDに置き換えます。
https://sketchfab.com/models/model-id-here

# 公開APIキーはSketchfabアカウントで取得したものを使います。公開APIキーが適切に設定されていることを確認してください。

注意事項

<実践的な注意点1>: Sketchfabのモデルを表示する前に、必ずそのコンテンツが著作権侵害やプライバシー問題などを引き起こさないか確認してください。
<実践的な注意点2>: JavaScriptエラーが発生しないよう、SketchfabのJavaScriptファイルへの参照と埋め込みコードのインラインスクリプトの両方が正しく設定されていることを定期的にチェックすることをおすすめします。
<セキュリティ上の注意>: 公開APIキーは秘密に保つことが重要です。公開APIキーが不適切な場所で使用されないよう、適切な権限管理とアクセス制御を行ってください。
<パフォーマンス/運用上の注意>: Sketchfabの3Dモデルを大量に表示する場合や、複雑なモデルを使用する場合は、ページロード時間が長くなる可能性があります。ユーザー体験を改善するために最適化が必要になることがあります。

まとめ

1. Sketchfabアカウント作成: Sketchfabでアカウントを作り、必要に応じて公開APIキーを発行します。

2. JavaScriptの追加: WordPressテーマまたは投稿ページにSketchfabのJavaScriptファイルへの参照を追加します。

3. HTMLタグの設定: 3Dモデルを表示するためのHTMLタグと埋め込みスクリプトを作成し、適切な場所に配置します。

4. IDおよびキーの確認: 使用するすべてのIDとキーが正しく設定されていることを定期的にチェックします。

5. パフォーマンス最適化: モデル数や複雑さによってはページロード時間が長くなる可能性があるため、必要に応じて最適化を行います。

Post Views: 8