Instagramのリールをホームページに表示する方法｜リールだけ・リールを除く
Instagram でリールを中心に発信していると、「サイトにもリールを並べたい」「逆に、サイトには写真だけを出したい」という場面が出てきます。この記事では、Social Feed by grip space の「リールの扱い」の設定で、リールだけを表示する方法とリールを除く方法を説明します。あわせて、リールがサイト上でどう見えて、どう再生されるのか、うまく出ないときに何を確かめればよいかもまとめました。
更新日：2026年10月12日
リールの設定は3つから選ぶ
ウィジェットの「設定・プレビュー」を開くと、「表示する投稿を絞り込む」の中に「リールの扱い」があります。選べるのは次の3つです。
| リールの扱い | サイトに出る投稿 | 向いている使い方 |
|---|---|---|
| すべて(初期設定) | 写真、カルーセル、動画、リールを新しい順にすべて | Instagram のプロフィールと同じ並びを見せたい |
| リールを除く | リール以外(写真、カルーセル、リールではない動画) | 写真中心のギャラリーにしたい、動きのあるものを減らしたい |
| リールのみ | リールだけ。写真とカルーセルは出ない | 「動画で見る」コーナーを作りたい、リールの発信をサイトでも見せたい |
「リールの扱い」は、「動画投稿も表示する」にチェックが入っているときだけ表示されます。動画をオフにした場合の扱いは、後の「動画をオフにするとリールの指定は『すべて』に戻る」で説明します。
なぜわざわざ「リール」と「動画」が分かれているのかというと、Instagram の API が返す投稿の形式では、リールも通常の動画も同じ「VIDEO」になるからです。そこで Social Feed では、投稿がどこに公開されたかを表す別の情報(media_product_type。値は FEED、REELS など)を一緒に受け取り、REELS と示された投稿をリールとして扱っています。
リールだけを表示する手順
- 管理画面のウィジェット一覧で、リールを出したいウィジェットの「設定・プレビュー」を開きます。ほかのページ用の設定を残したい場合は、先に「複製」で新しいウィジェットを作ってから開くと安全です。
- 「動画投稿も表示する」にチェックが入っていることを確かめます。入っていないと「リールの扱い」が出てきません。
- 「表示する投稿を絞り込む」の「リールの扱い」で「リールのみ」を選びます。
- プレビューで、リールだけが並んでいることを確かめます。プレビューは、サイトに配信するときと同じ判定で絞り込んでいます。
- 「クリック動作」を選びます。サイトの中で再生したいなら「拡大表示」、Instagram のアプリやサイトで見てもらいたいなら「Instagramを開く」です。
- 「設定を保存」を押します。サイトに貼ってあるタグはそのままで、次の表示から新しい設定になります。
まだサイトにタグを貼っていない場合は、設定の下にある「WEBサイトにタグを設置」のタグをコピーして、リールを出したい位置に貼ります。サービスごとの貼り方は、WordPress、STUDIO、Wix、Shopify、ペライチの各記事にまとめています。
リールを除いて写真だけにする手順
手順はリールだけのときと同じで、「リールの扱い」で「リールを除く」を選びます。これで、リールと判定された投稿だけが外れます。
ただし、「リールを除く」で外れるのはリールだけです。リールではない通常の動画の投稿があれば、それは残ります。動画もまとめて外したい場合は、「動画投稿も表示する」のチェックを外してください。こちらはリールも含めて、すべての動画の投稿を外します。
| やりたいこと | 設定 |
|---|---|
| リールだけ外し、写真・カルーセル・通常の動画は出す | 動画: オン / リールの扱い: リールを除く |
| 写真とカルーセルだけにする(動画は一切出さない) | 動画: オフ(リールの扱いは自動で「すべて」) |
| 写真1枚の投稿だけにする | 動画: オフ / 「複数枚投稿(カルーセル)も表示する」: オフ |
| リールだけにする | 動画: オン / リールの扱い: リールのみ |
動画をオフにするとリールの指定は「すべて」に戻る
「動画投稿も表示する」のチェックを外すと、「リールの扱い」の項目は画面から消え、その設定は「すべて」に戻ります。動画をオフにした時点でリールも含めた動画はすべて出なくなるので、リールの指定を残しておく意味がないためです。
この扱いは管理画面だけでなく、サイトに配信するときにも同じです。動画がオフのウィジェットでは、以前に保存した「リールのみ」が残っていても「すべて」として扱います。以前は、「リールのみ」のまま動画をオフにすると、リール以外も動画も出せずに何も表示されない、ということが起こり得ました。2026年10月12日の修正で、そうならないようにしています。
もう一度リールを絞り込みたいときは、「動画投稿も表示する」にチェックを入れ直してから、「リールの扱い」を選び直してください。チェックを入れ直しても、前に選んでいた「リールのみ」や「リールを除く」には戻らず、「すべて」から始まります。
リールはサイトでどう見えるか
設置する前に、見た目の決まりを知っておくと、置き場所やレイアウトを選びやすくなります。
- 一覧では正方形の静止画: グリッドでもスライダーでも、1投稿は正方形の枠に入ります。縦長のリールは、カバー画像(サムネイル)の上下が切れて正方形に収まります。一覧の中で動画が自動で動くことはありません。
- 再生できるものには再生マーク: サイト上で再生できる動画には、タイルの中央に再生マークが付きます。
- 拡大表示で再生: 「クリック動作」が「拡大表示」なら、タイルを押すとページの上に拡大表示が開き、動画を再生します。ブラウザは音の出る自動再生を止めることが多いため、ミュートで自動再生を始めます。操作バーが付くので、訪問者が音を出したり、一時停止したりできます。
- スマートフォンでもページの中で再生: iPhone などでも全画面に切り替えず、拡大表示の中で再生するよう指定しています。動画の高さは画面の高さの6割までに収まります。
- キャプションといいね数: 「拡大表示(ライトボックス)に出す情報」で、キャプションといいね数を出すか選べます。拡大表示の下には「Instagramで見る」のリンクが付きます。
一覧に並ぶのは静止画で、動画のファイルはタイルを押して拡大表示を開いたときに読み込みます。リールをたくさん並べても、ページを開いただけで動画ファイルをまとめて読み込むことはありません。ただし、スライダーは送った先が空白に見えないように、並べた投稿の画像を最初にすべて読み込みます。グリッドは、最初の1段分だけを先に読み込み、残りは画面に近づいてから読み込みます。リールを多く並べるときは、表示件数を必要な分だけにしておくとページが軽くなります。
再生マークが付かないリールがある理由
同じリールの一覧の中で、再生マークが付くものと付かないものが混ざることがあります。これは不具合ではなく、Instagram の API の仕様によるものです。
Meta の開発者向け資料(IG Media)には、投稿に著作権のある素材が含まれる場合は、動画本体の URL(media_url)が返されないと書かれています。例として挙げられているのが、リールの音源です。動画本体の URL が無いと、Social Feed ではそのリールをサイト上で再生できません。そのため、そうしたリールには再生マークを付けず、拡大表示ではカバー画像を静止画として出し、「Instagramで見る」のリンクから Instagram で再生してもらう形にしています。
音楽などの音源を使ったリールをサイトに出すときの考え方は、Instagramの写真を自社サイトに載せるときの著作権・肖像権の「リールの音源にも注意」で扱っています。気になるリールがある場合は、キャプションのキーワードで、そのリールだけを外す方法もあります。
リールを見せるレイアウトの選び方
| 置き方 | おすすめの設定 | 理由 |
|---|---|---|
| トップページの「動画で見る」コーナー | スライダー / リールのみ / 表示件数は6〜10件ほど | 横に送って見てもらう形が、縦に長くなりがちなページを圧迫しない |
| ギャラリーページ | グリッド / リールのみ / 列数3〜4 | 一覧で選んでから再生してもらえる |
| フッターや狭い枠 | スライダー / 列数を少なめ | 正方形のタイルが小さくなりすぎないようにする |
| 写真を主役にしたい商品ページ | グリッド / リールを除く | 動画のサムネイルが混ざらず、見た目がそろう |
暗い色の背景にリールの一覧を置く場合は、「文字色」を「明るい色(暗い背景向け)」にすると、アカウント名や投稿数が読みやすくなります。リールの一覧と写真の一覧を両方出したい場合は、ウィジェットを2つ作り、それぞれ「リールのみ」と「リールを除く」にして、別の位置に貼ります。作れるウィジェットの数は、フリープランが1つ、ライトプランが3つまで、スタンダードプランは無制限です(<a href="/function/widget#wig-price">料金表</a>)。
ほかの絞り込みと組み合わせる
「リールの扱い」は、ほかの絞り込みと同時に使えます。条件はすべて満たした投稿だけが残ります。
- 期間: 「リールのみ」と「30日以内」を組み合わせると、最近のリールだけを出せます。キャンペーン中だけ新しいリールを見せたいときに使えます。
- キャプションのキーワード: 「リールのみ」にして、キャプションに「#商品紹介」を含むものだけ、のように絞れます。逆に「含む投稿を除く」で、サイトに出したくないリールだけを外すこともできます。
- 表示件数: 絞り込んだあとで、表示件数の分だけ並べます。表示件数を10件にしていても、条件に合うリールが4本しかなければ4本だけです。
キーワードの書き方や、部分一致になる点などの細かい決まりは、特定のインスタ投稿だけをサイトに表示する方法で詳しく扱っています。
リールが出ない・思ったとおりにならないとき
| 症状 | 確かめること |
|---|---|
| 「リールの扱い」の項目が見当たらない | 「動画投稿も表示する」のチェックが外れている。チェックを入れると表示される |
| 「リールのみ」にしたら何も出ない | 期間やキーワードの絞り込みで、条件に合うリールが0本になっていないか。期間を「制限なし」、キーワードを空欄にして確かめる |
| リールのはずの投稿が「リールを除く」で残る | Instagram からリールである情報が返らない投稿は、通常の投稿として扱う。古い投稿などで起こることがある |
| リールを再生できない(再生マークが無い) | 音源など著作権のある素材を含むリールは、Instagram の API が動画本体を返さない。「Instagramで見る」から再生してもらう |
| 新しく投稿したリールが出ない | フリープランはサイトへの反映が1日1回(設定を変えて保存したときはすぐ反映)。有料プランはすぐ反映 |
| タイルを押しても何も起きない | 「クリック動作」が「何もしない」になっていないか |
ウィジェットがまったく表示されない場合は、リールの設定より前に、非公開になっていないか、タグが消されていないかなどを確かめます。順番はInstagramの埋め込みがサイトに表示されない原因と直し方にまとめています。
できないこと
次のことは、Social Feed ではできません。設置の前に知っておいてください。
- 一覧の中で動画を自動再生すること(一覧は静止画で、再生は拡大表示の中だけです)
- リールを縦長のタイルで並べること(タイルは正方形です)
- 音を出した状態で自動再生を始めること(訪問者が操作バーで音を出します)
- ストーリーズやライブ配信を表示すること
- 他人のアカウントのリールや、ハッシュタグで集めたリールを表示すること(表示できるのは、連携した自分のプロアカウントの投稿だけです)
- リールの再生回数をサイト側で集計すること(管理画面で見られるのは、ウィジェットの表示数です)
よくある質問
Q. リールの設定は、フリープランでも使えますか。
A. 使えます。リールの扱いを含め、絞り込みはどのプランでも同じように使えます。プランで違うのは、ウィジェットの数、表示できる投稿の数、月の表示数、サイトへの反映の速さ、「Powered by Social Feed」表記の有無です(フリープランでできること・できないこと)。
Q. 設定を変えたら、サイトに貼ったタグを貼り直す必要はありますか。
A. ありません。同じタグのまま、保存した設定で表示されます。フリープランでも、設定を変えて保存したときはすぐに反映されます。
Q. リールを Instagram で再生してもらいたいのですが。
A. 「クリック動作」を「Instagramを開く」にすると、タイルを押したときに新しいタブで Instagram のその投稿が開きます。拡大表示のままでも、下の「Instagramで見る」から移動できます。
Q. リールとフィードに両方シェアしたリールは、どちらとして扱われますか。
A. Instagram の API がリールとして返した投稿は、リールとして扱います。Social Feed が自分で動画の長さや縦横比を見て判断しているわけではありません。
Q. 個人アカウントのリールも出せますか。
A. 出せません。連携できるのは Instagram のプロアカウント(ビジネスまたはクリエイター)だけです。切り替え方はプロアカウントへの切り替えをご覧ください。
まとめ
リールだけを出すなら「リールのみ」、写真を主役にするなら「リールを除く」か、動画そのものをオフにします。動画をオフにするとリールの指定は「すべて」に戻るので、リールを絞り込み直すときは動画をオンにしてから選び直してください。サイト上の一覧は正方形の静止画で、再生は拡大表示の中でミュートから始まります。音源の関係で再生できないリールがあることも、あらかじめ知っておくと安心です。
機能と料金の全体はSocial Feed by grip space の紹介ページで確認できます。フリープランはこちらから登録してすぐに使えます。
参考にした資料
Meta for Developers「IG Media」 https://developers.facebook.com/docs/instagram-platform/reference/instagram-media/
Meta for Developers「Instagram API with Instagram Login」 https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/
