SNS-005 公開  更新

投稿の埋め込み型 SNS

SNSの最新の投稿を写真のグリッドで並べ、アカウント名と発信している内容を添えて、アカウントのページへつなぐ設計です。
読み込みの途中や、読み込めなかったときの表示も用意します。

ワイヤーフレーム(PC)

投稿の埋め込み型 SNS PC版ワイヤーフレーム

ワイヤーフレーム(SP)

投稿の埋め込み型 SNS SP版ワイヤーフレーム

SP版の特徴

  1. 投稿を2列×2段の4件に減らす:6件を並べると写真が小さくなり、縦にも長くなりすぎるためです。
  2. 「Instagramで見る」を見出しの下に移す:見出しの右に並べると、アカウント名が折り返して読みにくくなるためです。

採用前の判断ポイント

向いているケース

  • 新作・施術の例・店内の様子など、写真で伝わる投稿をこまめに更新している
  • サイトの更新が追いつかない日々の情報を、SNSで出している
  • サイトを見た人に、アカウントのフォローまで進んでもらいたい

向かないケース

このワイヤーの特徴

日々の更新を、サイトの中で見せる

SNSの最新の投稿を並べ、サイトの更新が追いつかない日々の情報を見せています。
新作や店内の様子が分かると、今も活動していることが伝わります。

投稿の日付と本文の冒頭を、写真に添える

写真だけでなく、投稿日と本文の冒頭を2行まで添えています。
いつの、何の投稿かが分かります。

読み込みの途中と、読み込めないときを用意する

読み込み中は写真の形だけの枠を出し、読み込めなかったときはアカウントのページへのリンクを示しています。
外部のサービスから読み込む部分が、空白のまま残らないようにしています。

アカウントのページへ、はっきりつなぐ

見出しの横とグリッドの下に、アカウントのページを開くボタンを置いています。
気になった読み手が、そのままフォローへ進めます。

制作時のよくある失敗

公式の埋め込みを、いくつも読み込む

投稿ごとに公式の埋め込みを読み込むと、ページの表示が遅くなることがあります。
件数をしぼるか、写真を取り込んで軽く表示する方法を検討します。

古い投稿が、最新として並んでいる

更新が止まると、何か月も前の投稿が並び続けます。
更新の頻度が低い場合は、この型を使わずにフォローの導線だけにします。

読み込めないときに、空白が残る

外部のサービスの都合で読み込めないと、枠だけが空いて見えます。
読み込めないときの文とリンクを用意します。

営業時間や料金などを、SNSの投稿だけに任せる

大切な情報がSNSにしかないと、検索やサイトの中で見つけにくくなります。
変わらない情報はサイトに書き、SNSは日々の更新に使います。

よくある質問

公式の埋め込みと、写真の取り込みのどちらがよいですか?

公式の埋め込みは手軽に始められる一方、読み込みが重くなりやすく、外部のサービスへ閲覧の情報が送られる場合もあります。
写真を取り込んで表示する方法は軽くしやすい反面、仕組みづくりと各サービスの利用条件の確認が必要です。

何件くらい表示すればよいですか?

PCでは6件前後、SPでは4件前後が、写真の大きさと縦の長さの釣り合いを取りやすい目安です。
それ以上はアカウントのページで見てもらう形にします。

ギャラリーとは、何が違いますか?

ギャラリーはサイトの中で写真を見比べてもらう場所で、この型はSNSの日々の更新を見せてアカウントへつなぐ場所です。
施工例などを整理して見せたい場合は、ギャラリーのほうが向いています。

同じパーツのPattern

SNSの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開