Instagramをホームページのどこに置くか｜トップ・フッター・会社概要の使い分け

先に結論: 置き場所ごとの早見表

共通しているのは、「そのページで訪問者がいちばんしたいこと」の邪魔をしない位置に置く、という考え方です。Instagramの一覧は、ページの主役ではなく、主役を裏づける資料として働かせると効果的です。

置き場所を決める前の3つの問い

1. そのページに来る人は、何をしに来たのか。会社を知りたい人、住所を調べに来た人、商品を比べている人で、写真に求めるものは違います。
2. 一覧を置くと、大事な情報が下に押し下げられないか。スマートフォンでは、写真の一覧が画面の数枚分の高さになることがあります。
3. そのタグは何ページに表示されるのか。表示数は、ウィジェットが表示されるたびに1回と数えます。全ページに出る場所に置くと、それだけ表示数を使います。

Social Feed の埋め込みタグは、<script> タグ1行です。タグを置いた位置にそのまま一覧が描画されるので、「どのページの、どの見出しの下に貼るか」がそのまま置き場所になります。同じタグを複数のページに貼ることも、ページごとに別のウィジェットを用意することもできます。

トップページ: 最上部ではなく、中盤から下へ

トップページは、初めての訪問者が「この会社(お店)はちゃんと動いているか」を判断する場所です。最近の投稿が1〜2行並んでいるだけで、更新が続いていることが伝わります。

置く位置。会社の説明、主な商品やサービス、問い合わせボタンのあとに置くのが基本です。ページの最上部(メインビジュアルのすぐ下)に置くと、いちばん伝えたい内容が下に押し下げられます。フッターの直前や、お客様の声と最後の問い合わせボタンのあいだも、よく使われる位置です。

高さに気をつける。Social Feed は、設置先の実際の幅に合わせて列数を自動で減らし、写真1枚の幅が100pxを下回らないようにします。たとえば4列・12件のグリッドは、パソコンでは3行ですが、多くのスマートフォンの幅では3列になり、4行に増えます。トップページで件数を多く見せたいときは、高さを1行分に抑えられるスライダーを選ぶ方法があります。

見出しを付ける。アカウントの見出し(アイコン・名前・投稿数・フォローボタン)を表示すると、何の一覧かがひと目でわかります。フォローボタンの文言と色は変えられるので、「最新情報をフォロー」のように、フォローすると何が届くかを書くのもよいでしょう。

フッター: 狭い幅に合わせて小さく

フッターに置くと、サイトのすべてのページに一覧が出ます。訪問者がどのページで読むのをやめても、最後にInstagramへの入口が目に入るのが利点です。ページのいちばん下にあるので、本文を押し下げることもありません。一方で、フッターならではの注意点があります。

グリッドの場合、1行目の画像はすぐに、2行目以降はスクロールして近づいたときに読み込みます。スライダーは横に送ったときに空白が見えないよう、並んでいる画像をすべてすぐに読み込みます。フッターに置くスライダーの件数を抑えるのはそのためです。フリープランでは、一覧の下に「Powered by Social Feed」の表記が入ります。フッターの貼り方はサービスごとに異なるので、WordPressやShopifyの記事をご覧ください。

会社概要: 人と場所を写真で見せる

会社概要や「私たちについて」のページは、訪問者が「どんな人がやっているのか」を確かめに来る場所です。オフィスや工房、店内、社内行事、仕事の途中の様子などを投稿しているなら、文章の説明を写真で裏づけられます。

1. 置く位置: 会社の沿革や考え方を書いた文章のあと、問い合わせへの案内の前。文章で語った内容のすぐ下に、写真の一覧が来るようにします。
2. 設定の目安: グリッド・3列・6件。投稿をクリックしたときの動作は「拡大表示」にし、キャプションを表示します。写真の背景にある話が読めるのが、このページでは大切です。
3. 絞り込み: アカウントに商品の告知やセールの投稿が多いと、会社の説明と合わなくなります。社内の様子の投稿にキャプションの目印を付け、「含む」で絞り込んだ別のウィジェットを用意します。

社員が写った写真を並べる場合は、サイトにも表示されることについて了承を得ておきましょう。採用ページに置く場合の考え方は採用サイトに社内のInstagramを載せる、肖像権の考え方はInstagramの写真を自社サイトに載せるときの著作権・肖像権にまとめています。

そのほかの置き場所

店舗・アクセスのページ。住所、営業時間、地図、電話番号といった、訪問者が探しに来た情報を先に置き、その下に一覧を置きます。外観や店内の写真があると、初めて来る人の不安を減らせます。

商品・サービスのページ。説明と購入・申し込みボタンのあとに、キーワードで絞り込んだスライダーを置きます。表示されるのは自社アカウントの投稿だけで、他の人が投稿した写真は集められません。お客様の写真を紹介したいときは、許可を得て自社アカウントから投稿してください。

ブログ記事の最後。読み終えた人に「続きはInstagramで」と案内する位置です。フッターにも一覧があるなら、記事の最後には置かず、どちらか一方にします。

問い合わせフォームの上には置かない。フォームの手前に、クリックしたくなる写真の一覧があると、送信までの流れを止めてしまいます。置くなら、送信後の完了ページのほうが向いています。

ページごとに違う投稿を出すには、ウィジェットを分けて絞り込みを変えます。手順はページごとに違うインスタ投稿を見せる、キーワードの決め方は特定のインスタ投稿だけをサイトに表示する方法をご覧ください。

表示数は、置いたページ数だけ増える

置き場所を決めるときに、必ず見積もっておきたいのが表示数です。表示数は「見た人の数」ではなく、ウィジェットがページに表示された回数です。同じ人が5ページ見て、5ページすべてに一覧があれば5回です。すべてのウィジェットの合計を、プランの月の上限(フリー3,000回、ライト30,000回、スタンダードは無制限)と比べます。

見積もりは、アクセス解析の「ページ別の閲覧数」を使うと簡単です。月のサイト全体の閲覧数が8,000回、そのうちトップページが2,000回、会社概要が500回のサイトを例にすると、次のようになります。

フッターに置くと、サイト全体の閲覧数がほぼそのまま表示数になり、トップページにも別の一覧を置けば、トップの閲覧数の分がさらに加わります。上限を超えても月末までは表示を続けますが、2か月続けて超えると翌月から表示を止めます。上限の80%と100%に達したときはメールで知らせます。プランごとの詳しい決まりはInstagramウィジェットを無料で使うと料金プランをご覧ください。

レイアウトのずれ(CLS)に配慮する

ページを読んでいる途中で、あとから表示されたものに押されて文章やボタンの位置が動くと、読みにくく、押し間違いの原因にもなります。Googleのweb.devの解説「Cumulative Layout Shift(CLS)」では、CLSを、ページのライフサイクル全体で発生した予期しないレイアウトシフトの最大のまとまりを測る指標と説明し、0.1未満に収めることを目安としています。測るときは、モバイルとデスクトップのそれぞれで75パーセンタイルを見ることが推奨されています。また、ずれの原因として、サイズが不明な画像や動画、既存のコンテンツの前に動的に追加された要素などが挙げられています。

Social Feed の一覧で起きること。一覧の写真の枠は、画像が読み込まれる前から正方形の大きさで確保されます。そのため、画像の読み込みで一覧の高さが変わることはありません。一方で、一覧そのものはタグのスクリプトが動いたときに作られるので、それまでの間は、一覧の分の高さはページに確保されていません。

web.devの「Cumulative Layout Shift の最適化」では、あとから挿入されるコンテンツには min-height でスペースを予約する方法があること、予約できない場合はページの下部に置くと影響を抑えられることが説明されています。置き場所の観点からは、次のように考えるとよいでしょう。

1. ページの最上部に置かない。上のほうに挿入されたものほど、下にある多くの内容を動かします。トップページでも中盤から下、またはフッターに置くと影響が小さくなります。
2. 高さが読みやすい形を選ぶ。スライダーは1行で、高さがほぼ写真1枚分です。グリッドは幅によって行数が変わるため、高さの見積もりがしにくくなります。
3. スペースを予約する場合は控えめに。サイト作成サービスで一覧を囲む要素に min-height を指定できるなら、スマートフォンで実際に表示された高さを目安にします。列数は幅に合わせて変わるため、大きすぎる値にすると、パソコンで余白が空きすぎます。
4. 公開後に確かめる。スマートフォンでページを開き、一覧が表示されたときに、その下の文章やボタンが大きく動かないかを見ます。

置き場所を決めるチェックリスト

1. そのページで訪問者がいちばんしたいこと(読む、調べる、申し込む)の邪魔をしない位置にある。
2. スマートフォンで見て、一覧の高さが長すぎない。
3. フッターに置く場合、幅に合わせて列が減ったときの見え方を確認した。
4. 背景が暗い場所では、文字色を「暗い背景用」にした。
5. ページの内容と合わない投稿は、キャプションのキーワードで外した。
6. 置いたページの閲覧数を合計し、プランの表示数の上限に収まる。
7. 同じ写真の一覧が、1つのページに2回並んでいない。
8. ページの上のほうに置いておらず、表示されたときに下の内容が大きく動かない。

よくある質問

Q. トップページとフッターの両方に置いてもよいですか?
A. 置けます。ただしトップページでは同じような写真が2回並ぶことになり、表示数もトップの閲覧数の分だけ増えます。トップに置くなら、フッターの一覧は別のウィジェットにして件数を少なくするなど、見せ方を変えると重複が目立ちにくくなります。

Q. サイドバーに置けますか?
A. 置けます。サイドバーは幅が狭いので、列数は自動で減ります。2〜3列・6件ほどのグリッドにすると収まりがよくなります。スマートフォンではサイドバーが本文の下に回るテーマが多いので、そちらの見え方も確認してください。

Q. 置き場所を変えたら、タグを発行し直す必要はありますか?
A. ありません。同じタグを新しい場所に貼り、古い場所から外すだけです。設定を変えたいときは、タグはそのままで管理画面の設定を変えれば、そのタグを貼ったすべての場所に反映されます。

Q. どの置き場所がよく見られているか比べられますか?
A. ウィジェットを置き場所ごとに分けておけば、各ウィジェットのカードに出る「表示回数(30日)」で比べられます。クリック数など、表示数以外の分析の機能はありません。

まとめ

Instagramの一覧は、トップページなら中盤から下、フッターなら小さく1行で、会社概要なら文章のあとに拡大表示つきで置くのが基本です。どこに置く場合も、そのページで訪問者がしたいことの邪魔をしないことと、スマートフォンでの高さを確かめることが大切です。表示数は置いたページ数だけ増えるので、全ページに出るフッターは見積もりを先に済ませてください。ページの上のほうに置かないことは、レイアウトのずれ(CLS)を抑えることにもつながります。無料で登録すれば、管理画面のプレビューで設定を試してから貼れます。製品の紹介はSocial Feed by grip spaceのページにあります。

参考にした資料

web.dev「Cumulative Layout Shift(CLS)」 https://web.dev/articles/cls?hl=ja

web.dev「Cumulative Layout Shift の最適化」 https://web.dev/articles/optimize-cls?hl=ja

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