インスタグラムの投稿をデザインに埋め込む方法|デザイン例も紹介

最近はInstagramの埋め込みを活用したwebサイトが増えています。

視覚的に情報が入ってくるため、ユーザーがサイトを見やすい・集客率を上げられるといった効果が期待できます。

今回はインスタの埋め込み方法から、デザイン性に優れた、インスタ投稿を活用しているwebサイトまで、詳しく紹介していきます。

インスタグラムの埋め込み方法3選

まずはインスタ投稿を埋め込む方法を3つ紹介しながら、投稿を横並びにして表示させる方法についても説明していきます。

インスタグラムの HTMLコードをコピーする方法

インスタグラムの投稿には1つ1つにHTMLコードが付与されており、そのコードを使って埋め込みをします。

方法は簡単で、

1. インスタ投稿に表示されている「…」ボタンをクリックし、「埋め込み」を選択
2. 表示されたHTMLコードをコピーして、サイトに貼り付け

の2ステップで完了です。

とても簡単で、無料で埋め込みをすることができますが、

• 投稿が削除されたら表示されなくなる
• 1つ1つ手動で行う必要があるため、埋め込み枚数が多いと大変
• デザインを選択することができない
• ストーリーズは埋め込みができない

といったデメリットもあるため、注意が必要です。

インスタグラムのAPIを利用する方法

インスタグラムのAPIを利用して、自分のアカウントの投稿を埋め込むことが可能です。

多くの機能を使うためにはインスタグラムの審査を通過する必要があります。

審査なしでも利用することができますが、その際には

• 読み込みは最新の20件のみ
• 扱えるユーザーは10人までで、扱うユーザーの承認が必要

といった制限があります。

外部のツールを使用する方法

API対応の埋め込みツールを使う方法です。

有料の場合が多く、月々の出費としては数千円から数万円まで様々です。

難しいコーディングの必要がなく、デザインが豊富で、中にはストーリーズを載せられるものもあるため、自身のwebサイトに合った埋め込みツールを選ぶことが大切です。

埋め込んだ画像を横並びで表示させる方法

普通にインスタグラムの画像を埋め込みすると、縦並びに埋め込みされます。

これを横並びに表示させるには、サイズを小さくしてから横並びにする設定を行う必要があります。

通常の埋め込みサイズは658pxに設定されていますが、これを好みのサイズに変更します。

次に、埋め込み画像を表(テーブル)として設定していきます。

設定方法は

<table>(表開始)
	<tr>(1行目開始)
		<td>(1つ目のデータ開始) 1つめの埋め込みコード</td>(1つ目のデータ終了)
		<td>2つめの埋め込みコード</td>
	</tr>(1行目終了)
	<tr>(2行目開始)
		<td>3つめの埋め込みコード</td>
		<td>4つめの埋め込みコード</td>
	</tr>(2行目終了)
</table>(表終了）

と、コードを入力することで設定することが可能です。

埋め込みインスタグラムの活用方法

インスタグラムを埋め込むことで、どのような活用の仕方があるのかについて、紹介していきます。

ユーザー巻き込み型のイベント会場化する

商品を利用した様子や、実際の会場の様子などをハッシュタグをつけて投稿してもらうことで、一般の人の投稿の様子を受けて、他のユーザーに興味を持ってもらう効果が期待できます。

1つのハッシュタグを使うことで様々な性別・年代のユーザーが一体となってイベントに参加している気分になり、サイトの活性化に繋がります。

ボタンを設置して、購買行動に直結させる

埋め込みをしたインスタグラムの投稿にCTAボタンを設置することで、ユーザーを消費行動へ誘導することができます。

投稿に「予約する」「購入画面へ」などのボタンを設定し、リンク先を予約ページや商品購入ページへ設定します。

例えば、沖縄の写真を載せて「予約する」ボタンを設置、クリックすると沖縄旅行の予約ページへリンクするというように設定しておくことで、ユーザーが実際に目にしたものをすぐに予約できるため、予約率を上げることが期待できます。

インスタが埋め込まれているサイト5選

インスタを埋め込みながら、デザイン性にも優れたサイトを5つ紹介していきます。

インスタを埋め込む際には、ぜひ参考にしてみてください。

マイベーグル

「#マイベーグル」というハッシュタグを使って、様々な画像の埋め込みしています。

必要最低限の埋め込みにし、他の投稿はインスタグラムへ誘導することで、サイトがスッキリとしていて見やすいデザインとなっています。

実際に買ってアレンジしている人の投稿を載せることで、見たユーザーの購買意欲を誘っています。

modest – Men’s & Women’s Clothing

こちらは画像を埋め込むのではなく、取り扱いブランドをクリックするとインスタグラムに移動するという仕様です。

取り扱いブランドが多いからこそ、インスタグラムの画像を埋め込みすると、ユーザーが必要としていない情報が入ってしまう可能性があるため、このように活用することで、ユーザーが必要としている情報のみを表示させることができます。

GiFUMATiC

「#ギフマチック」というハッシュタグを使って、岐阜の魅力を伝える観光系のサイトです。

実際に訪れた人や地元の人が撮った写真のため、リアルな様子が伝わってきます。

それぞれの投稿のいいねやコメントの数が表示されるようにしてあるのが特徴的です。

株式会社アミューズ

「#アミュキャラぬい撮り」のハッシュタグを使って、ぬいぐるみの魅力を伝えるページになっています。
可愛らしいぬいぐるみの日常がたくさん載っていて、つい長時間見てしまいたくなるようなページになっています。

京都 田中長奈良漬店

自身が運営するインスタグラムの写真を埋め込みしているパターンです。

おすすめ情報や、最新の情報をいち早く載せることができるというメリットがあります。

カーソルを合わせると「詳細を見る」という表示がでるようになっていて、サイト全体がスッキリとしたデザインになっています。

まとめ

インスタグラムの埋め込み方法

1. インスタグラムの HTMLコードをコピーする
2. インスタグラムのAPIを利用する
3. 外部のツールを使用する

埋め込みインスタグラムの活用方法

• ユーザー巻き込んだイベント会場化する
• ボタンを設置して、購買行動に直結させる

インスタグラムの利用率は高く、埋め込みをすることで、ユーザーが親近感を覚えたり、集客率・購買率を上げる効果も期待できます。

ぜひ今回紹介した方法を使って、インスタグラムを活用してみてください。