はじめに
目的
本ドキュメントは、検索キーワード「ホームページ インスタ 埋め込み」を踏まえ、ホームページにInstagramの投稿を見たまま表示する方法をわかりやすく解説します。公式の埋め込みコードの取得から、PCやWordPressへの貼り付け、他人の投稿を使う際の注意点まで順を追って説明します。
読者想定
ホームページを運営している個人や小規模事業者、Web担当者を想定しています。専門知識がなくても実践できるよう、図や具体例を用いて丁寧に解説します。
本ドキュメントで学べること
- Instagram投稿をそのまま表示するメリットと活用例
- 公式埋め込みコードの取り方（PC版）
- HTMLやWordPressへの貼り付け手順
- 著作権や肖像権などの注意点
注意事項
Instagramの仕様や表示方法は変更されることがあります。作業前にアカウントの公開設定や利用ルールを確認してください。
2. Instagramをホームページに埋め込むとは？
Instagramをホームページに埋め込むとは、Instagramの投稿（写真や動画）をそのままWebページ内に表示することを指します。具体的には投稿の画像・動画、キャプション、一部のメタ情報（投稿者名やいいね・コメント数など）がWebサイト上に見えるようになります。
-
どんな見た目になるか：Instagramで見ている投稿と同じようなカード形式で表示されます。画像や動画がそのまま見られ、投稿者のプロフィールへリンクすることが多いです。
-
表示される内容の例：写真や動画、投稿のテキスト（キャプション）、投稿者名、公開されている場合はいいねやコメント数。ライブ更新により元の投稿が編集されると表示も変わります。
-
主なメリット：
- サイトの信頼性向上：実際のユーザー投稿や公式アカウントの投稿を示せます。
- ユーザーの関心を引く：ビジュアルが増えると滞在時間や反応が上がりやすいです。
-
更新の手間が減る：Instagram側で投稿を変えれば自動で反映されます。
-
使う場面の例：商品ページに実際の利用写真を載せたいとき、ブログで関連投稿を紹介したいとき、企業サイトで公式アカウントの投稿を見せたいときなど。
注意点として、埋め込みは基本的に公開設定の投稿が対象です。権利やプライバシーに関する配慮は後の章で詳しく説明します。
3. 埋め込み方法の基本：公式の埋め込みコードを使う
概要
Instagramが公式で提供する埋め込みコードを使う方法は、最も簡単で安全です。特別なツールや有料プラグインは不要で、誰でも無料で利用できます。基本はPCのブラウザでInstagramにログインし、埋め込みたい投稿のコードを取得してホームページに貼り付けるだけです。
利点
- セキュリティ面で安心：公式のため互換性や仕様変更に対応しやすいです。
- 表示が整う：キャプションや投稿者のクレジットが自動で表示されます。
必要なもの
- PCのブラウザ（スマホでも可能ですが、手順は次章で詳述します）
- Instagramアカウントでのログイン
基本の手順（流れ）
- ブラウザでInstagramにログインして、埋め込みたい投稿を開く。
- 投稿右上のメニュー（…）をクリックして「埋め込み」を選ぶ。
- 表示された埋め込みコードをコピーする。
- ホームページのHTML編集画面に貼り付ける。
注意点
- 非公開アカウントの投稿は埋め込めません。
- 他人の投稿を使う場合は、掲載許可を取ることをおすすめします。
4. 埋め込みコードの取得手順（PC版）
ここでは、パソコンのブラウザでInstagram投稿の埋め込みコードを取得する具体的な手順を分かりやすく説明します。
手順（ステップバイステップ）
- ブラウザでInstagramにログインします。アカウントは公開設定である必要があります（非公開アカウントは埋め込み不可です）。
- 埋め込みたい投稿の詳細画面を開きます（投稿をクリックして投稿単体の画面にする）。
- 投稿右上にある「…」メニューをクリックします。
- メニューから「埋め込み」を選びます。
- 表示されたダイアログで「キャプションを表示」のオン／オフを切り替えできます。必要に応じて設定してください。
- 「埋め込みコードをコピー」ボタンを押して、コードをクリップボードにコピーします。
注意点と補足
- スマホアプリからは埋め込みコードを直接取得できません。必ずPCのブラウザで行ってください。
- 非公開アカウントや一部の投稿では埋め込みができない場合があります。その場合は埋め込みメニュー自体が表示されません。
- コピーしたコードはそのままホームページのHTMLに貼り付ければ表示できます。サイズ調整やデザインは貼り付け先で調整してください。
以上の手順で、PCから簡単に埋め込みコードを取得できます。ご不明な点があればお知らせください。
5. ホームページに埋め込みコードを貼り付ける方法
準備
ホームページの管理画面にログインし、編集したいページを開きます。編集モードで「HTML編集」「ソース編集」「コードブロック」などの項目を探してください。コピーした埋め込みコードをすぐ使えるようにしておきます。
共通の貼り付け手順
- 編集画面で表示させたい箇所にカーソルを置く。
- HTML編集モード（ソース表示）に切り替える。
- コピーした埋め込みコードを貼り付ける。
- プレビューで表示を確認する。
- 問題なければ保存し、公開する。
主要サービスでのポイント（例）
- Wix: 「埋め込み」→「カスタムHTML」を追加してコードを貼る。幅を100%にするとスマホで崩れにくいです。
- Squarespace: 「Code」ブロックに貼り付けます。スクリプトタグを含む場合はブロックの設定で許可を確認してください。
- Jimdo/その他のCMS: 「カスタムHTML」や「ウィジェット」へ貼り付けます。テーマによっては専用のウィジェット領域に配置します。
表示確認と公開後のチェック
プレビューでスマホ表示やブラウザを切り替えて確認してください。埋め込みが表示されない場合、広告ブロッカーやブラウザのセキュリティ設定が原因のことがあります。HTTPSサイトでは埋め込み先もHTTPSでないとブロックされる場合があります。
よくあるトラブルと対応
- 何も表示されない：アカウントが非公開の可能性や、広告ブロッカーが原因です。
- サイズが合わない：iframeや div に width:100% を指定し、高さは自動調整できるようにします。
- 反映が遅い：キャッシュやCMSの配信設定を確認してください。
これで基本的な貼り付け作業は完了です。問題があれば、どのサービスで操作しているか教えてください。具体的に案内します。
6. WordPressの場合の具体的な手順
WordPressでは、単一投稿をカスタムHTMLブロックに貼る方法と、投稿一覧（フィード）をプラグインで表示する方法があります。ここでは手順を分かりやすく説明します。
単一投稿を埋め込む（カスタムHTMLブロック）
- Instagramで埋め込みコードを取得します（第4章参照）。
- WordPress管理画面で投稿または固定ページを開きます。
- ブロックエディタで「カスタムHTML」ブロックを追加します。
- 取得した埋め込みコードを貼り付けます。
- プレビューで見た目を確認し、問題なければ公開または更新します。
小技: 古いクラシックエディタを使う場合は「テキスト」タブに直接貼り付けます。
投稿一覧（フィード）を表示する（おすすめプラグイン）
- プラグイン→新規追加で「Smash Balloon Social Photo Feed」を検索してインストール、有効化します。
- プラグイン設定でInstagramアカウントと連携します（ログインして許可を与えます）。
- デザイン（列数や表示数）を設定します。
- 表示用のショートコード（例: [instagram-feed]）をコピーします。
- 表示したいページやウィジェットにショートコードを貼り付けて保存します。
注意点: 非公開アカウントは表示できません。モバイル表示や読み込み速度も確認してください。Smash Balloonは無料版で基本機能が使え、必要に応じて有料版で拡張できます。
7. 他人の投稿を埋め込むときの注意点
概要
他人のInstagram投稿をそのままホームページに埋め込むと、著作権や肖像権の問題が生じることがあります。特に人物の顔や企業の商品が写っている投稿は注意してください。
法的なポイント（簡単に）
- 著作権：写真や動画の権利は投稿者にあります。埋め込みでも商用利用や改変に問題が出る場合があります。
- 肖像権：写っている人の承諾が必要な場合があります。公共の場でも配慮が必要です。
安全な使い方
- 自社アカウントの投稿を使うのが最も安全です。
- 他人の投稿を使う場合は事前に許可を取るか、公式のリポスト機能を使いましょう。
- 商用利用や広告目的では口頭だけでなく書面での許諾を取ると安心です。
実務的チェックリスト
- 投稿者が公開アカウントか確認する
- 使用目的（商用か非商用）を明確にする
- 許可を得た記録（DMやメール）を残す
- クレジット（投稿者名やリンク）を明示する
トラブルが起きたら
投稿者や権利者から削除要請があれば速やかに対応し、必要なら謝罪と削除を行ってください。法的に不安がある場合は専門家に相談してください。
注意を怠ると信頼や損害につながるため、埋め込む前に一手間かけることをおすすめします。
