Instagram の投稿をホームページに自動で並べる

公開 2026-09-24

Instagram に毎日のように投稿しているお店は、写真はたくさんあるのに、ホームページの写真は作ったときのまま、ということがよくあります。投稿のたびにホームページの写真を差し替えるのは手間で、続きません。

このガイドでは、Instagram のアカウントを FormEdge と連携して、最新の投稿をホームページに自動で並べるまでの手順を説明します。一度つないでおけば、Instagram に投稿するだけでホームページの写真も新しくなります。例に使うのは、季節の花束やアレンジメントを毎日 Instagram に載せている、個人経営の花屋です。

これまで Instagram だけで発信してきたお店がホームページを持つとき、最初に置きたいのがこの Instagram の投稿の並びです。営業時間や地図、問い合わせフォームのそばに日々の写真が並ぶことで、「いまのお店」が伝わるページになります。

先に全体像をつかむ

やることは 3 つです。

1. FormEdge の管理画面で、Instagram のアカウントを連携する
2. ホームページに「Instagram」ブロックを置いて、列の数と並べる件数を決める
3. ページを公開する

ここまで済めば、あとは何もしなくて大丈夫です。Instagram に新しく投稿すると、FormEdge が定期的に自動で投稿を読み込み、ホームページの並びも新しい投稿に入れ替わります。

用意するもの

• Instagram のプロアカウント — 「ビジネス」か「クリエイター」のアカウントです。個人用のアカウントのままでは連携できません。プロアカウントへの切り替えは無料で、Instagram のアプリからできます（切り替え方は Instagram のヘルプで確認してください）
• FormEdge のワークスペースと、Instagram を並べたいページ — ページがまだ無い場合は、先に 1 ページのホームページを作っておきます（この記事の最後から無料で始められます）
• スタータープラン以上のプラン
• 連携の操作は、ワークスペースのオーナーか管理者が行います

手順

1. 管理画面で Instagram を連携する

   FormEdge の管理画面で、右上のアカウントメニュー（人のアイコン）を開き、「Instagram 連携」を選びます。

   「Instagram アカウントを連携する」を押すと Instagram の画面に移るので、つなぎたいアカウントでログインし、FormEdge からのアクセスを許可します。FormEdge が読み取るのは投稿の写真などで、Instagram に投稿したり、アカウントの設定を変えたりはしません。

   FormEdge に戻って「@アカウント名 を連携しました。」と表示されれば連携は完了です。連携の直後に投稿の読み込みが 1 回行われるので、すぐに次の手順に進めます。

2. ページに「Instagram」ブロックを置く

   Instagram の投稿を並べたいページを編集画面で開き、「ブロックを追加」から「Instagram」を選びます。置いた直後から、連携したアカウントの最新の投稿がタイルで並びます。

   ブロックの設定では、次の 3 つを決めます。

   設定	選べるもの	置いた直後
   列数(PC)	2〜4 列	3 列
   列数(スマホ)	1〜3 列	2 列
   表示件数	1〜12 件	6 件

   表示件数は、パソコンとスマートフォンのどちらの列数でも行が埋まる数を選ぶと、きれいに並びます。行の途中で途切れる数には「（端数が出ます）」と添えてあるので、目安にしてください。

   置く場所は、お店の紹介のすぐ下や、営業時間・アクセスの前がおすすめです。花屋なら「最近の花束」のような見出しの下に置くと、何の写真かがひと目で伝わります。

3. ページを公開する

   ページを公開します。すでに公開しているページにブロックを足した場合は、変更を公開し直して反映させます。

   公開したページを開いて、投稿が並んでいること、タイルを押すとその投稿の Instagram が開くことを確かめてください。スマートフォンでも、列の数が思ったとおりになっているかを見ておくと安心です。

   この記事の手順どおりに作った見本は、こちらで実際に開けます。架空のお店のページで、並んでいる投稿は見本用に連携した Instagram アカウントのものです。

4. ChatGPT や Claude から置く場合

   ChatGPT や Claude と FormEdge を MCP でつないでいるなら、ブロックを置くところは AI に頼めます。

   ただし、Instagram の連携そのものは AI にはできません。 手順 1 の連携は、先に管理画面で済ませておいてください。そのうえで、次のように頼みます。

   貼り付ける指示文

   コピー

   FormEdge のホームページに、Instagram の投稿を 3 列で 6 件並べるブロックを追加してください。
   場所は、お店の紹介のすぐ下にして、上に「最近の花束」という見出しを付けてください。

   AI がページの下書きにブロックを足します。プレビューで確かめてから公開してください。AI とのつなぎ方は、使っている AI ごとのガイドで説明しています。

   • ChatGPT を使っている方は ChatGPT でホームページを作成する手順 の手順 2・3
   • Claude を使っている方は Claude でホームページと問い合わせフォームを作る手順 の手順 2・3

ホームページでの見え方

• 最新の投稿から順に、正方形のタイルで並びます
• タイルを押すと、その投稿の Instagram のページが新しいタブで開きます（ページの編集画面の中では開きません）
• 動画やリールの投稿は、サムネイルの画像で並びます。ページの上で動画は再生されません
• 投稿の文章（キャプション）はページには出ません。文章やコメントは、タイルから開いた Instagram で読んでもらう形です
• 新しい投稿は、定期的に自動で読み込まれて並びに加わります。投稿した直後は、ページに出るまで少し時間がかかることがあります

写真だけが並ぶので、ブロックの上に「最近の花束」「今週入荷した花」のような短い見出しを付けておくと、見る人に伝わりやすくなります。

よくつまずくところ

ホームページがまだ無いとき

Instagram だけで発信してきたお店なら、まずは 1 ページのホームページを作って、この記事の Instagram ブロックを置くところから始めるのがおすすめです。お店のこだわり、営業時間と地図、問い合わせフォームを 1 枚にまとめ、日々の写真は Instagram の並びに任せます。

ページの作り方は、1 ページのホームページの作り方にまとめています。ChatGPT や Claude にチャットで頼んで作ることもできます。