grip space の機能一覧

| フォーム営業・アクセス解析・広告管理をひとつに
Social Feed by grip space
デモ機能料金使い方FAQコラム
ログイン無料で登録
  • 利用規約
  • 特定商取引法に基づく表記
  • 個人情報保護方針
  • 会社概要
© 2026 ibis studio K.K.
マーケティングオートメーションツール grip spaceInstagramウィジェットコラム飲食店のホームページにインスタを載せるなら|置き場所と見せ方
コラム

飲食店のホームページにインスタを載せるなら|置き場所と見せ方

料理の写真は、Instagram がいちばん得意とするものの一つです。だからこそ、飲食店のホームページに Instagram の投稿を並べたくなります。ただ、投稿をすべてトップページに流すと、今日のおすすめの隣に去年の年末年始の営業案内が並ぶ、といったことが起きがちです。この記事では、飲食店のサイトで投稿の一覧が役に立つ場面と、文字で書くべきこと、トップ・メニュー・アクセスの各ページへの置き方、そして Social Feed by grip space の期間とキーワードの絞り込みで「今日のおすすめ」や「季節のメニュー」を出し分ける方法を説明します。埋め込みの基本の流れはInstagramの投稿を自社サイトに埋め込む方法にまとめているので、ここでは飲食店ならではの使い方に絞ります。

更新日:2026年10月12日

シェアXFacebookLINEはてブPinterest
この記事について: Social Feed by grip space の提供元が、2026年10月12日時点の仕様をもとに書いています。絞り込み機能を追加したときのお知らせは機能追加のお知らせをご覧ください。

先に結論: 一覧は「お店の今」を、文字は「営業時間・場所・値段」を伝える

飲食店のホームページを開く人が知りたいことは、大きく2つに分かれます。1つは「今日やっているか」「どこにあるか」「何があって、いくらくらいか」「予約できるか」といった実用的なこと。もう1つは「どんな料理で、どんな雰囲気のお店か」という印象です。

Instagram の投稿の一覧が得意なのは、後者です。最近の料理や店内の写真が並んでいると、お店が今も元気に営業していることが伝わり、行ったときの様子も想像しやすくなります。

反対に、営業時間、定休日、住所、価格、アレルギーの情報、メニューの全体は、ページに文字で書いておくべきものです。キャプションは投稿を開かないと読めず、新しい投稿をすると古い投稿は一覧から押し出されます。W3C のアクセシビリティの解説(Images of Text)も、画像の中の文字ではなく、本物の文字を使うことをすすめています。

伝えたいこと向いている方法
料理の見た目、季節の新メニュー、店内の雰囲気Instagram の投稿の一覧
今日のおすすめ、限定メニュー一覧(期間を短く絞る)と、ページに書く短い文字の両方
営業時間、定休日、臨時休業ページの文字(投稿はすぐ古くなる)
住所、地図、駐車場、最寄り駅ページの文字と地図
価格、コースの内容、アレルギーの情報ページの文字(写真の中の文字に頼らない)

飲食店の投稿を仕分ける

設定を始める前に、自分のアカウントの最近の投稿をざっと見返して、サイトに出したいものと出したくないものに分けてみてください。Instagram から投稿を消す必要はありません。サイトに出す投稿は、ウィジェットごとの絞り込みで選べます。

投稿の種類サイトに出すか理由
料理・ドリンクの写真(今のメニュー)出す飲食店の一覧でいちばん見られるもの
今日のおすすめ・日替わり最近のものだけ出す新しさは伝わるが、すぐ古くなる
季節のメニュー・新メニュー出す今行く理由になる
店内・カウンター・テラス・外観出す使う場面(デート、家族、一人)を想像しやすい
臨時休業・営業時間の変更出さない数日で古くなり、あとから見ると紛らわしい
スタッフ募集出さない(採用ページは別)メニューの隣には合わない

キャプションに目印の言葉を入れる

出し分けの中心になるのが、キャプションのキーワードです。投稿のキャプションに、ほかの投稿では使わない目印の言葉を入れておき、ウィジェットの設定で「含む投稿だけ」または「含む投稿を除く」を選びます。飲食店なら、たとえば次のような目印が考えられます。

目印の例使うページ指定のしかた
#本日のおすすめトップページの「今日のおすすめ」欄含む投稿だけ
#季節のメニューメニューページ含む投稿だけ
#ランチ / #ディナーメニューページのそれぞれの見出しの下含む投稿だけ(ウィジェットを分ける)
#テイクアウトテイクアウトのページ含む投稿だけ
#店内アクセスページ・予約のページ含む投稿だけ
#お知らせトップページの一覧含む投稿を除く(休業の案内などを外す)

目印は、店名を付けるなど、ふだんの文章で使わない言葉にすると、意図しない投稿が混ざりにくくなります。すでにある投稿にも目印を足したいときは、Instagram でキャプションを編集します。Instagram のヘルプ(既存のInstagramの投稿のキャプションを追加、編集、削除する)によると、手順は次のとおりです。

  1. 目印を足したい投稿を開き、右上の「…」(オプション)をタップします。
  2. 「編集」を選びます。
  3. キャプションに目印の言葉を足し、「完了」をタップして保存します。

キーワードの一致の細かい決まり(部分一致、大文字と小文字、全角の「#」の扱い、区切りは半角カンマ)はキャプションのキーワードで絞り込む方法にまとめています。飲食店でつまずきやすいのは、「#ランチ」と書いたつもりで「#らんち」と書いてしまう、といった表記のゆれです。ひらがなとカタカナは別の文字として扱われるので、投稿する人の間で表記をそろえておいてください。

ページごとの置き方

埋め込みタグは1行の script タグで、貼った位置にそのまま一覧が出ます。ページごとに違うウィジェットを貼れば、それぞれ違う投稿を出せます。飲食店のサイトなら、次の割り振りがひとつの目安です。

ページ出す投稿ページ内の位置見た目の目安
トップページ最近の料理と店内(お知らせは除く)営業時間・場所・予約ボタンのあとグリッド・3〜4列・6〜12件
トップページの「今日のおすすめ」欄#本日のおすすめ・30日以内短い文字のおすすめの隣グリッド・3列・3〜6件
メニューページ#季節のメニュー など文字のメニューの下スライダー、または短いグリッド
アクセスページ#店内・外観住所・地図・行き方の下スライダー
コース・宴会のページコース料理・個室・貸切の様子内容と予約の案内のあとグリッド・3列・6件

ページの数だけウィジェットを作るか、同じタグを使い回すかは、プランのウィジェット数と相談して決めます。作り方と複製の手順はページごとに違うインスタ投稿を見せる方法をご覧ください。

トップページ: 営業の案内のあとに置く

トップページの最初の画面では、どんなお店か、どこにあるか、今日開いているか、予約や注文のボタンを先に見せます。写真の一覧をスクロールしないと営業時間にたどり着けないのは不親切です。

一覧はその下に置きます。ここで役に立つのが「含む投稿を除く」です。休業の案内や営業時間の変更の投稿に「#お知らせ」と入れる習慣にしておけば、トップページの一覧からはまとめて外せます。期間は「90日以内」にすると、季節外れの投稿が並ぶのを防げます。

アカウントの見出し(アイコン、アカウント名、投稿数、フォローボタン)を出しておくと、Instagram のアカウントもすぐ見つけてもらえます。

「今日のおすすめ」を出す: 期間30日以内とキーワード

日替わりや本日のおすすめは、新しいほど価値があり、古くなると誤解のもとになります。そこで、キーワード「#本日のおすすめ」の「含む投稿だけ」に、期間「30日以内」を組み合わせます。絞り込みは、指定したものをすべて満たす投稿だけが残るので、「目印があって、しかも30日以内の投稿」だけが並びます。

件数は3〜6件くらいにとどめ、ページには「本日のおすすめ」の見出しと、文字で書いた短い説明を添えます。一覧の投稿が少ない日でもページが寂しくならないよう、文字の側で補うイメージです。30日以内に目印のある投稿が1件もないと一覧は空になるので、更新の頻度が低いお店は「90日以内」にしておくと安心です。

プランによる反映のタイミング。有料プラン(ライト・スタンダード)では、新しい投稿がすぐサイトに反映されます。フリープランでは、読み込んだ一覧を最長24時間保存してから新しくするため、朝に投稿した「本日のおすすめ」がその日のうちにサイトに出ないことがあります。キャプションに目印をあとから足した場合も同じです。毎日のおすすめをサイトで見せたいなら、有料プランが向いています。仕組みはサイトのインスタが更新されないときの確認点で詳しく説明しています。

メニューページ: 文字のメニューが先、写真はあと

メニューページは、料理の写真がいちばん役に立つページです。料理名と説明だけで迷っている人も、写真があれば決めやすくなります。ただし、メニュー表を画像にして貼るのではなく、料理名と価格は文字で書き、一覧はその下に置きます。

ランチとディナー、料理とドリンク、のようにメニューが分かれているなら、見出しごとにウィジェットを分け、それぞれ「#ランチ」「#ディナー」などの目印で絞り込むと、見出しの内容と写真がそろいます。季節のメニューを入れ替えるときは、ウィジェットのキーワードを「#秋メニュー」から「#冬メニュー」に書き換えるだけで、ページの一覧も入れ替わります。季節の目印を使う場合は、期間を「1年以内」か「制限なし」にして、季節の初めに投稿した写真が早く消えないようにします。

古い投稿には、今と違う価格や、もう出していない料理が写っていることがあります。季節の目印で絞っておけば、終わったメニューを一覧から外しやすくなります。

アクセスページ: 外観と店内で「ここだ」とわかるように

初めて来る人にとって、お店の外観や入口の写真は道案内の一部です。アクセスページでは、住所、地図、最寄り駅からの行き方を文字で書いたうえで、その下に「#店内」「#外観」などの目印を付けた投稿をスライダーで並べます。スライダーは写真を1列に並べ、左右に送って見る形式なので、地図の下に置いてもページが長くなりすぎません。

絞り込みのレシピ

絞り込みは、リールの扱い(すべて / リールを除く / リールのみ)、複数枚投稿(カルーセル)を表示するか、動画投稿を表示するか、期間(制限なし / 30日以内 / 90日以内 / 1年以内)、キャプションのキーワード(含む投稿だけ / 含む投稿を除く)の組み合わせです。飲食店でよく使う組み合わせを表にしました。

ねらいキーワード指定期間リール
トップの一覧(お知らせを外す)#お知らせ, #臨時休業含む投稿を除く90日以内すべて
今日のおすすめ#本日のおすすめ含む投稿だけ30日以内すべて
季節のメニュー#冬メニュー含む投稿だけ1年以内すべて
ランチのページ#ランチ含む投稿だけ制限なしすべて
アクセス・席の様子#店内, #外観含む投稿だけ制限なしリールを除く
調理の様子を動画で(空欄)—90日以内リールのみ

キーワードは半角カンマで区切ると複数指定でき、どれか1つでも含めば当てはまります。1つのウィジェットで選べるのは「含む投稿だけ」か「含む投稿を除く」のどちらか一方です。設定したら「設定・プレビュー」の画面で、思った投稿が並んでいるかを確かめてください。

湯気や焼き目、注ぐ瞬間のように、動きのある料理はリールが向いています。リールだけの一覧や、リールを外した写真だけの一覧の作り方はInstagramのリールをホームページに表示する方法をご覧ください。

お店のサイトになじませる見た目の設定

  1. 文字色: 落ち着いた暗い色のサイトなら「明るい色(暗い背景向け)」を選びます。アカウント名や投稿数の文字が背景に沈みません。
  2. クリック動作: 「拡大表示」にすると、サイトを離れずに写真を大きく見てもらえます。拡大表示ではキャプションといいね数を出すかを選べ、複数枚投稿は「拡大時に全枚数を送る」にすると2枚目以降も見られます。
  3. 余白とウィジェット幅: 料理写真は、画像間の余白を少し空けると1枚ずつが引き立ちます。ウィジェット幅を0にすると、置いた場所の幅いっぱいに広がります。

貼るタグ

管理画面の「WEBサイトにタグを設置」にあるタグを「コピー」し、一覧を出したい位置に貼ります。タグは次のような形の1行です(URL はウィジェットごとに違います)。

<script type="text/javascript" src="https://(管理画面に表示されるURL)"></script>

WordPress なら「カスタムHTML」ブロックに貼ります。手順と、保存したらタグが消えるときの原因はWordPressにInstagramの投稿を表示する方法にあります。

写真を載せる前に確かめたいこと

お客様が写っている写真や、カメラマンに撮ってもらった料理写真は、Instagram に載せていてもサイトに出す前に確認しておきたい点があります。考え方はInstagramの写真を自社サイトに載せるときの著作権・肖像権にまとめています。気になる投稿は、目印を入れて「含む投稿を除く」で外すこともできます。

公開前のチェックリスト

  1. 営業時間、定休日、住所、価格がページに文字で書いてある。
  2. トップページの最初の画面に、予約や注文のボタンがある。一覧はその下にある。
  3. 休業の案内などの投稿が、トップページの一覧から外れている。
  4. 「今日のおすすめ」欄の一覧が、30日以内の目印つきの投稿だけになっている。
  5. メニューページの一覧に、もう出していない料理や古い価格の写真が並んでいない。

よくある質問

グルメサイトや予約サイトのお店のページにも貼れますか?貼れるかどうかは、そのサイトが script タグを入れられるようにしているか次第です。入れられない場合は、自分のホームページに一覧を置き、グルメサイトや予約サイトへのリンクを添えてください。

お客様が投稿した、お店のハッシュタグ付きの写真を並べられますか?できません。Social Feed で表示できるのは、連携した自分のプロアカウントの投稿だけです。ハッシュタグで他人の投稿を集める機能はありません。

複数の店舗があります。店舗ごとにアカウントがあるならそれぞれ連携してウィジェットを作れます。1つのアカウントで投稿しているなら、「#〇〇店」のような目印で店舗ページごとに出し分けられます。1つの一覧に2つのアカウントの投稿を混ぜることはできません。

貼ったのに何も出ません。公開・非公開の状態と、絞り込みで投稿が0件になっていないかをプレビューで確かめてください。それでも出ないときはInstagramの埋め込みがサイトに表示されない原因と直し方を順に確認してください。

まとめ

飲食店のホームページでは、Instagram の一覧に「お店の今」を、ページの文字に営業時間・場所・価格を任せるのが基本です。キャプションに「#本日のおすすめ」「#季節のメニュー」「#お知らせ」のような目印を入れておけば、期間とキーワードの絞り込みで、トップ・メニュー・アクセスの各ページに合った投稿を出せます。まずは無料で登録してプレビューで絞り込みを試し、ページごとに分けたくなったら料金プランをご覧ください。製品の紹介はSocial Feed by grip spaceのページにあります。

参考にした資料

Instagram ヘルプセンター「既存のInstagramの投稿のキャプションを追加、編集、削除する」 https://www.facebook.com/help/instagram/1490745927855762

W3C Web Accessibility Initiative「Images of Text」 https://www.w3.org/WAI/tutorials/images/textual/

Meta for Developers「IG Media」 https://developers.facebook.com/docs/instagram-platform/reference/instagram-media/

Social Feed by grip space「料金プラン」 https://marketing-labo.jp/function/widget#wig-price

この記事をシェアするXFacebookLINEはてブPinterest

Instagram の投稿を、タグを貼るだけで自社サイトに表示できます。
フリープランならクレジットカード登録なしで、無料ではじめられます。

無料で登録Social Feed について見る

ほかの記事

  • 美容室・サロンのホームページにInstagramを表示する|スタイル写真を予約ページへ

    美容室・サロンのホームページにInstagramのスタイル写真を表示する方法。スタイリスト名やメニュー名をキャプションの目印にして担当者別・メニュー別に出し分け、予約の導線のそばに置きます。

    記事を読む →
  • 採用サイトに社内のInstagramを載せる|カルチャーを伝える見せ方と写真の同意

    採用サイトにインスタの投稿を載せて職場の雰囲気を伝える方法。採用用のウィジェットを分ける手順、置き場所と設定、社員の写真の同意、職業安定法の「的確な表示」との関係まで説明します。

    記事を読む →
  • Instagramをホームページのどこに置くか|トップ・フッター・会社概要の使い分け

    インスタの投稿一覧をホームページのどこに置くか。トップ・フッター・会社概要など置き場所ごとの向き不向きと設定、置いたページ数だけ増える表示数、レイアウトのずれ(CLS)への配慮を説明します。

    記事を読む →
  • インスタ埋め込みのデザインをサイトに合わせる|グリッドかスライダーか、列数・余白・文字色

    Instagramの埋め込みをサイトのデザインになじませる方法。グリッドとスライダーの選び方、列数・余白・最大幅の決め方、暗い背景での文字色、フォローボタンの色、スマホでの確かめ方まで。

    記事を読む →
  • インスタを埋め込むとサイトは重くなる?|読み込むものと表示速度の確かめ方

    Instagramの埋め込みでホームページの表示速度はどう変わる?ウィジェットが読み込むもの、画像の遅延読み込みの仕組み、PageSpeed Insightsと開発者ツールでの確かめ方、軽くする設定を説明します。

    記事を読む →
  • インスタをサイトに埋め込むとSEOに効果はある?|正直なところ

    Instagramの投稿一覧をサイトに埋め込んでもSEOの直接の効果はほとんどありません。Googleの公式文書と実際の仕組みから、検索エンジンに見える部分・見えない部分と、検索に強くする方法を解説します。

    記事を読む →