インスタ埋め込みのデザインをサイトに合わせる｜グリッドかスライダーか、列数・余白・文字色
Instagramの投稿一覧をサイトに貼ったら、「なんとなく浮いて見える」「スマホで見ると窮屈」と感じることがあります。原因の多くは、写真の並べ方、列数と余白、文字の色が、置いたページに合っていないことです。この記事では、Social Feed by grip space の表示設定を使って、埋め込みをサイトのデザインになじませる手順を説明します。グリッドとスライダーのどちらを選ぶか、列数・余白・最大幅をどう決めるか、背景が暗いページでの文字色、フォローボタンの色の選び方、そしてスマホでの見え方の確かめ方までを、管理画面の表記に沿ってまとめました。埋め込みの基本の流れはInstagramの投稿を自社サイトに埋め込む方法で紹介しているので、ここでは見た目の調整に絞ります。
更新日：2026年10月12日
先に結論: 決める順番
見た目の設定は項目が多いので、次の順に決めると迷いにくくなります。前の項目が決まると、後の項目の答えがほぼ決まるからです。
| 順番 | 決めること | 決め方の目安 |
|---|---|---|
| 1 | 置く場所 | ページの本文の幅いっぱいか、サイドバーやフッターのような細い枠か |
| 2 | レイアウト | 一覧として見せるならグリッド、場所を取りたくないならスライダー |
| 3 | ウィジェット幅(最大幅) | 置く場所の幅に合わせる。迷ったら本文の幅と同じにする |
| 4 | 列数と表示件数 | グリッドは「列数×行数」で件数を決める。スライダーは列数が1画面に見える枚数 |
| 5 | 画像間の余白 | サイトのほかの画像一覧やカードの間隔にそろえる |
| 6 | 文字色と文字サイズ | 置くページの背景の明るさで文字色を選ぶ |
| 7 | アカウントの見出しとフォローボタン | 見出しを出すか、ボタンの色をサイトのアクセント色に寄せるか |
設定画面の右側には「プレビュー(実寸)」があり、変えた設定はすぐにプレビューへ反映されます。保存する前に、ここで見た目を確かめながら進めてください。
調整できる項目と初期値
「設定・プレビュー」の「表示設定」で変えられる見た目の項目は、次のとおりです。
| 項目 | 選べる値 | 初期値 | 効くところ |
|---|---|---|---|
| レイアウト | グリッド / スライダー | グリッド | 投稿の並べ方 |
| 表示件数 | 1件からプランの上限まで | 16件 | 並べる投稿の数(フリー16件・ライト30件・スタンダード50件まで) |
| 列数 | 1〜8 | 4 | 横に並ぶ枚数。タイルの大きさもこれで決まる |
| 画像間の余白(px) | 0〜40 | 4 | タイルとタイルの間隔 |
| 文字サイズ(px) | 10〜24 | 14 | アカウント名・投稿数・フォローボタンの文字 |
| ウィジェット幅(px) | 0〜2000 | 1500 | ウィジェット全体の最大幅。0にすると置いた場所の幅いっぱい |
| ホバー時アイコン | 表示する / なし | 表示する | マウスを重ねたときの暗い重ね表示とアイコン |
| 文字色 | 濃い色(明るい背景向け) / 明るい色(暗い背景向け) | 濃い色 | アカウント名・投稿数・クレジット表記 |
| アカウント情報を表示 | オン / オフ。アイコン・アカウント名・投稿数を個別に選べる | オン(3つとも) | 一覧の上の見出し |
| フォローボタン文言・ボタン色 | 自由な文言 / 色を選ぶ | 「フォローする」/ #d62976 | 見出しの右端のボタン |
タイルの形は正方形で固定です。縦長や横長の写真は、正方形に収まるように中央で切り抜かれて表示されます。商品の全体を見せたい写真は、Instagramに投稿するときに正方形の中に主役が収まる構図にしておくと、サイトでも切れずに見えます。また、ウィジェットには背景色が付いていないので、置いたページの背景がそのまま透けて見えます。文字のフォントも置いたページのものを引き継ぎます。
グリッドかスライダーか
| グリッド | スライダー | |
|---|---|---|
| 並び方 | 列数ごとに折り返して、行と列で並べる | 1行に並べ、左右にスライドして送る |
| 送り方 | スライドはしない。ページを下へ読んでいく | 左右の矢印で送る。スマホでは指で横に動かせる。端で矢印を押すと反対の端へ戻る |
| 縦に取る場所 | 件数÷列数の行数ぶん | タイル1段ぶんだけ |
| 向いている場所 | Instagram専用の紹介ページ、トップページの中ほど、店舗やギャラリーのページ | トップページの区切り、記事の下、フッターの上など、場所を取りたくないところ |
| 見せ方の印象 | 一覧性が高く、雰囲気がまとめて伝わる | 「ほかにもある」ことが伝わり、ページが長くならない |
迷ったら、一覧を眺めてもらうこと自体が目的ならグリッド、ほかの内容を読む途中で目に入ればよいならスライダーを選びます。スライダーは送らないと先が見えないので、見てほしい投稿が先頭に来るようにしておくと効果的です。並ぶのは新しい順なので、先頭に出したくない投稿は絞り込みで外せます(キャプションのキーワードで絞り込む方法)。
列数とタイルの大きさ
グリッドでもスライダーでも、タイル1枚の大きさは「ウィジェットの幅 − 余白の合計」を列数で割って決まります。スライダーの場合は、列数が「1画面に並ぶ枚数」になります。つまり、列数を増やすほどタイルは小さくなり、減らすほど大きくなります。
スマホでは列が自動で減ります。置いた場所の実際の幅で計算して、タイル1枚が100pxを下回るときは、設定した列数を上限に列を減らします。画面の幅ではなく、ウィジェットが置かれた枠の幅で判断するので、サイドバーや2段組みの細い枠でも同じように働きます。たとえば列数4・余白4pxで、置いた枠の幅が343pxのスマホなら、4列だとタイルが100pxに届かないため3列で表示されます。画面の向きや幅が変わったときも、その都度計算し直します。
| 置く場所の例 | 列数の目安 | 表示件数の目安 |
|---|---|---|
| 本文の幅いっぱい(パソコン) | 4〜6列 | 列数の2〜3倍(例: 4列なら8件か12件) |
| サイドバーなどの細い枠 | 2〜3列 | 列数の2〜3倍(例: 3列なら6件か9件) |
| スライダーで本文の幅いっぱい | 4〜5列 | 8〜12件 |
| スライダーでスマホ中心のページ | 2〜3列 | 6〜9件 |
グリッドで表示件数が列数で割り切れないと、最後の行だけ右側が空きます。整った四角に見せたいときは、表示件数を列数の倍数にしてください。ただし、スマホで列が自動で減ると割り切れなくなることがあります。4列で12件なら、3列になっても12件で割り切れるので、4列と3列を行き来する設置先では12件や24件がきれいに収まります。
余白と最大幅、中央寄せ
余白はサイトのほかの一覧にそろえる。「画像間の余白」は、タイルとタイルの間隔です。0にすると写真が隙間なくつながり、12px以上にすると1枚ずつが独立した写真のように見えます。ページ内に商品一覧やブログのカードがあるなら、その間隔と同じ値にすると、ウィジェットだけが浮いて見えるのを防げます。
ウィジェット幅は「最大幅」。「ウィジェット幅」に入れた値より置いた場所が広いときは、その幅で止まります。置いた場所のほうが狭いときは、その幅いっぱいまで縮みます。0にすると、いつも置いた場所の幅いっぱいに広がります。初期値の1500pxは多くのサイトの本文より広いので、実際には「置いた場所の幅いっぱい」と同じように見えます。
狭くしたときは中央に置かれます。ウィジェット幅を置いた場所より狭くしたときは、左右の余りが均等になるように中央に配置されます。たとえば本文の幅が1100pxのページで、写真を少し小さめに見せたいときは、ウィジェット幅を900pxにすると、左右に100pxずつ空いた状態で真ん中に並びます。見出しや本文を左寄せにしているページで左端をそろえたいときは、ウィジェット幅を0にして、置いた枠の幅で調整してください。
文字色: 暗い背景のページでは「明るい色」に
「文字色」は、一覧の上に出るアカウント名と投稿数、フリープランなどで一覧の下に出る「Powered by Social Feed」の色を決めます。写真そのものの見た目は変わりません。
| 選択肢 | アカウント名の色 | 投稿数・クレジットの色 | 向いているページ |
|---|---|---|---|
| 濃い色(明るい背景向け) | #2a2f36 | #6b7480 | 白や薄いグレー、薄いベージュなど明るい背景 |
| 明るい色(暗い背景向け) | #ffffff | #c8ced6 | 黒や紺、濃いグレーなど暗い背景、写真を敷いたセクション |
文字の読みやすさは、文字と背景のコントラスト比で確かめられます。ウェブアクセシビリティの国際的な指針であるWCAGの達成基準1.4.3では、通常の文字は4.5:1以上が求められています。上の色で計算すると、白い背景に「濃い色」の投稿数(#6b7480)は約4.74:1で基準を満たします。一方、ほぼ黒(#1a1a1a)の背景に同じ色を置くと約3.68:1で足りません。同じ背景に「明るい色」の投稿数(#c8ced6)を置くと約10.99:1になります。背景が暗いのに文字色を初期値のままにしていると、アカウント名がほとんど読めなくなるので、暗いページに置くときは必ず切り替えてください。
中間の明るさの背景でどちらも読みにくいときは、置く枠の背景だけを白か濃い色にするか、見出しをオフにして写真だけを並べます。
アカウントの見出しとフォローボタン
「アカウント情報を表示」をオンにすると、一覧の上にアイコン、アカウント名、投稿数、フォローボタンが1行で並びます。アイコン・アカウント名・投稿数は、それぞれ出すかどうかを選べます。ページ側に「Instagram」などの見出しをすでに付けているなら、アイコンとアカウント名だけにして、投稿数を外すとすっきりします。写真だけを並べたいときは、見出しごとオフにします。
ボタンの色は白い文字で読める色に。フォローボタンの文字はいつも白です。初期値の#d62976は、白い文字とのコントラスト比が約4.73:1で、通常の文字の基準4.5:1を満たします。サイトのアクセント色に合わせて変えるときは、白い文字が読める濃さの色を選んでください。たとえばオレンジの#f09433は、白い文字とのコントラスト比が約2.34:1で、ボタンの文字が読みにくくなります。明るい色をアクセントにしているサイトでは、その色を少し濃くした色をボタンに使うのが無難です。コントラスト比は、色の値を入れると計算してくれる確認ツールで手軽に確かめられます。
「フォローボタン文言」は自由に変えられます。初期値の「フォローする」のままにしておくと、英語のページでは自動で「Follow」になります。「Instagramを見る」「最新情報はこちら」のように変えた場合は、どの言語のページでもその文言のまま表示されます。
クリックしたときの動作とホバー
「クリック動作」は、ページを離れずに見せるなら「拡大表示」、Instagramへ誘導するなら「Instagramを開く」、写真を飾りとして並べるなら「何もしない」が向いています。
「ホバー時アイコン」を「表示する」にすると、マウスを重ねたときに写真が少し暗くなり、アイコンといいね数・コメント数が出ます。「何もしない」を選ぶ場合は、押せそうに見えないよう「なし」にしておくのがおすすめです。
スマホでの見え方を確かめる
設定画面のプレビューは、パソコンの画面での実寸です。スマホでの見え方は、実際に貼ったページで確かめてください。
- タグを貼ったページを公開し(または公開前のプレビューを開き)、スマホで表示します。
- 列数が何列になっているかを見ます。タイルが小さすぎると感じたら、設定の列数を減らします。
- グリッドなら、最後の行に空きができていないかを見ます。空いているときは表示件数を調整します。
- スライダーなら、指で横に動かせるか、矢印が写真の大事な部分にかかっていないかを見ます。
- アカウント名とフォローボタンが1行に収まっているかを見ます。窮屈なときは、文字サイズを小さくするか、投稿数を外します。
- 投稿を押して、拡大表示が画面に収まるか、閉じられるかを確かめます。
Wix、STUDIO、Googleサイトのように埋め込みが枠の中で表示されるサービスでは、ウィジェットではなく枠の高さで見え方が決まる部分があります。それぞれWix、STUDIO、Googleサイトの記事で、枠の高さの決め方を説明しています。
置き場所別の設定例
| 置き場所 | レイアウト | 列数・件数 | 余白 | そのほか |
|---|---|---|---|---|
| トップページの中ほど | グリッド | 4列・8件 | 4〜8px | 見出しはアイコンとアカウント名だけ。クリックは拡大表示 |
| トップページの区切り | スライダー | 5列・10件 | 0〜4px | 見出しはオフにして、ページ側で見出しを付ける |
| Instagram紹介ページ | グリッド | 3列・12件〜 | 2〜4px | 見出しをすべて表示し、フォローボタンをアクセント色に |
| サイドバー | グリッド | 3列・6件 | 2〜4px | ウィジェット幅0。文字サイズを12px前後に |
| 暗い色のフッター | スライダー | 4列・8件 | 4px | 文字色を「明るい色(暗い背景向け)」に |
ページごとに設定を変えたいときは、ウィジェットを複製して置き場所ごとに使い分けます。手順はウィジェットを複数作る方法をご覧ください。
仕上げのチェックリスト
- 置く場所に合ったレイアウトを選んだ
- グリッドの表示件数が列数の倍数になっている(スマホで列が減ったときも確認した)
- 余白がサイトのほかの一覧の間隔とそろっている
- 暗い背景のページでは文字色を「明るい色」にした
- フォローボタンの色で白い文字が読める
- スマホで列数、見出しの1行、拡大表示を確かめた
- 正方形に切り抜かれても大事な部分が切れていない
よくある質問
写真の角を丸くしたり、枠線を付けたりできますか?タイルの形と角の丸み(わずかに丸い角)は固定で、設定では変えられません。変えられるのは、この記事で紹介した項目です。
グリッドで「もっと見る」ボタンを付けられますか?ありません。グリッドは表示件数ぶんを並べます。続きを見てもらいたいときは、フォローボタンでInstagramのアカウントへ誘導するか、スライダーを使ってください。
設定を変えたら、貼ったタグを貼り直す必要はありますか?ありません。「設定を保存」すると、次にページを開いたときから新しい見た目で表示されます。フリープランでも、表示の設定はすぐに反映されます。
まとめ
インスタの埋め込みをサイトになじませるには、置く場所を先に決め、そこからレイアウト、最大幅、列数と件数、余白の順に決めていくのが近道です。スマホでは列数が自動で減るので、件数は列数が減っても割り切れる数にしておくと整って見えます。暗い背景のページでは文字色を「明るい色」に切り替え、フォローボタンには白い文字が読める色を選んでください。まずは無料で登録して、プレビューで見た目を試せます。プランごとの違いは料金プラン、製品の紹介はSocial Feed by grip spaceのページにあります。
参考にした資料
ウェブアクセシビリティ基盤委員会(WAIC)「達成基準 1.4.3: コントラスト (最低限)を理解する」(WCAG 2.1 解説書の日本語訳) https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html
Social Feed by grip space「料金プラン」 https://marketing-labo.jp/function/widget#wig-price
