あらゆるウェブサイトに使える新しいInstagram Storyウィジェット：テンプレートとデモ

当社のStoryウィジェットは、ウェブサイトの訪問者を惹きつける一番のお気に入りの方法のひとつだと、お客様からよく言われます。

StoriesをInstagramとまったく同じように表示したいと考える多くのユーザーから、EmbedSocialのレイアウトのおかげで、Storiesのコンテンツを美しく表示し、本物の顧客体験を通じてブランドメッセージを強化できたという声をいただいています、とCustomer Success ManagerのMarijaは説明します。

シンプルなコードを使ってウェブサイトにStoryウィジェットを設置するのがどれほど簡単か、ユーザーは本当に言葉を失うほど驚かれます。Instagram Storyのレイアウトは、画像、動画、テキストを美しくアニメーション化されたビジュアルの流れにまとめ上げ、お客様の注目を一瞬で引きつけます。ユーザー曰く、それはカスタムコンテンツを完全に次のレベルへと引き上げ、丁寧に作り込まれたあらゆるウェブサイト体験に完璧に溶け込むそうです。しかも、それを実現するのにAdobe Photoshopのようなツールを使う必要すらありません。ユーザーは本当に気に入ってくれています！

Marija Vlasceva、EmbedSocial Customer Success Agent

そこで私たちは、現在のユーザーと未来のユーザーを驚かせようと、より多くのカスタマイズ機能を備えた、より優れた超モダンなバージョンのStoryテンプレートを開発することにしました。

私たちは、古いレイアウトを一新し、ウィジェットにさらにモダンなデザイン要素を加えることに注力しました。一番の目標は、ユーザーが自分のウェブサイトで見せたい、埋め込みたいと思えるような、美しく個性的なStoryウィジェットを作ることでした。

さらに、コードにいくつかの改善を施し、どのユーザーでもカスタムCSSを適用できる柔軟性を持たせ、ウィジェット全体の要素を標準化することで、レイアウトが統一された構造を持てるようにしました。

このプロジェクトを率いたのは、当社の開発者であり、以前はCustomer Successチームでも働いていたNevrieです。

Storyテンプレートのこの刷新を任せるのに彼女こそ適任だと私たちは考えました。なぜなら、彼女はクライアントの考え方や、ユーザーがStoryウィジェットに何を求めているのかを完全に理解しているからです。そして、その判断は正しかったのです。

UXデザイナーとFront End Developerの意見を組み合わせると、まさに本音のブレインストーミングになりました。

「古いレイアウトを改良するか、それともまったく新しいものを作るか」という戦いが繰り広げられました

二人とも妥協を許さなかったため、10種類の新しいウィジェットレイアウトをゼロから作るという結論に落ち着きました。

• Stories Widget用のレイアウト5種類
• Gallery Story Widget用のレイアウト5種類

さあ、始めましょう！これらのウィジェットは現在ご利用いただけ、すべての有料プランに含まれています。

新しいStoryウィジェットのデザインプロセス

この生まれ変わりに取り組んだのは、長い1か月でした。

この刷新は、いくつかのシンプルなステップに分けられました。

1. 当社のUXデザイナーAngelaが、さまざまなテンプレート案のグラフィックデザインを担当
2. Nevrieがフィードバックを行い、次の問いに答えます。「ユーザーはこれをクリックしたくなるだろうか？」
3. Angelaがそのフィードバックを反映
4. 最終デザインをもとに、Nevrieがウィジェットを制作

このプロセスは申し分なく機能しましたが、ひとつの課題が残っていました。それは、ウィジェットがあらゆるデバイスで美しく見えるようにすることです。

Nevrieの言葉を借りれば、こうです。

誰かのウェブサイトに埋め込まれるウィジェットに取り組むのは非常に重要な作業でした。なぜなら、そのウィジェットを使うのがどんなブランドになるのか、事前には分からないからです。モバイルデバイスやさまざまなデスクトップパソコンで、どのように表示されるのかも分かりません。結局のところ、どんなデバイスを使っても、ウィジェットがなめらかに表示されるようにする必要がありました。

1か月を経て、Nevrieはその成果に大満足だと語り、ユーザーもきっと気に入ってくれると確信しています！

そして、その理由は私たちにもよく分かります。

最終的な成果を、実際の動きとともに以下でご覧ください！

新しいSingle Storyウィジェット

以下は、新しいsingle-storyウィジェットのショーケースです。これらのウィジェットは、最新のStoryとそのスライドを、Carousel、Swiper、Slider、Popover、Highlightといったモダンなレイアウトで表示します。新しいテンプレートそれぞれの詳細は次のとおりです。

Carousel ウィジェット

用途： 商品専用ページやホームページに最適

特徴：

• レスポンシブで、Storyのスライドをフル表示
• 表示したいStoriesを選択可能
• ドラッグ＆ドロップでStoryの表示順を並べ替え
• メディアの並び順オプション
• AMP Storyフォーマット
• Storiesをライトボックスで表示
• 各Storyメディア、またはすべてにCTAボタンを追加
• ウィジェットの末尾にBookendを使用
• ウィジェットのタイトルとナビゲーションを表示
• 新しい画像や動画を自動同期
• レイアウト、フォント、カラー、ウィジェットのタイトルを変更
• カスタムCSSエディター
• Storyの有効期限が切れた後もウィジェットを表示

Swiper ウィジェット

用途： ホームページやランディングページで映えるモダンなレイアウト

特徴：

• レスポンシブな「Instagram風」のスワイプアップ体験
• 表示したいStoriesを選択可能
• ドラッグ＆ドロップでStoriesの表示順を並べ替え
• メディアの並び順オプション
• AMP Storyフォーマット
• 各Storyメディア、またはすべてにCTAボタンを追加
• ウィジェットの末尾にBookendを使用
• ウィジェットのタイトルとナビゲーションを表示
• 新しい画像や動画を自動同期
• レイアウト、フォント、カラー、ウィジェットのタイトルを変更
• カスタムCSSエディター
• Storyの有効期限が切れた後もウィジェットを表示

Slider ウィジェット

用途：サイドバーやブログコンテンツに最適

特徴：

• レスポンシブな「Instagram風」のスワイプアップ体験
• 表示したいStoriesを選択可能
• ドラッグ＆ドロップでStoryの表示順を並べ替え
• メディアの並び順オプション
• AMP Storyフォーマット
• 各Storyメディア、またはすべてにCTAボタンを追加
• ウィジェットの末尾にBookendを使用
• ウィジェットのタイトルとナビゲーションを表示
• 新しい画像や動画を自動同期
• レイアウト、フォント、カラー、ウィジェットのタイトルを変更
• カスタムCSSエディター
• Storyの有効期限が切れた後もウィジェットを表示

Popover ウィジェット

用途： すべてのウェブページに適用可能。通常はフッターにコードを埋め込み、固定のフローティングバナーとして最新のStoryをすべてのページに表示するために使われます

特徴：

• フローティングのStoryウィジェットで、クリックすると、おなじみのソーシャルメディアのスワイプ体験を提供
• 表示したいStoriesを選択可能
• ドラッグ＆ドロップでStoryの表示順を並べ替え
• メディアの並び順オプション
• AMP Storyフォーマット
• 各Storyメディア、またはすべてにCTAボタンを追加
• ウィジェットの末尾にBookendを使用
• ウィジェットのタイトルとナビゲーションを表示
• ポップアップの表示位置とタイムアウトを変更
• 新しい画像や動画を自動同期
• レイアウト、フォント、カラー、ウィジェットのタイトルを変更
• カスタムCSSエディター
• Storyの有効期限が切れた後もウィジェットを表示

デモ：

Highlight ウィジェット

用途： Popoverと同様に、このレイアウトはサイドバー、特定の商品ページ、説明文の中、その他、Storyの小さめのバージョンを表示し、クリックすると全画面で起動させたいといった、独創的な配置に使えます

特徴：

• フローティングのStoryウィジェットで、クリックすると、おなじみのソーシャルメディアのスワイプ体験を提供
• 表示したいStoriesを選択可能
• ドラッグ＆ドロップでStoryの表示順を並べ替え
• メディアの並び順オプション
• AMP Storyフォーマット
• 各Storyメディア、またはすべてにCTAボタンを追加
• ウィジェットの末尾にBookendを使用
• ウィジェットのタイトルとナビゲーションを表示
• ポップアップの表示位置とタイムアウトを変更
• 新しい画像や動画を自動同期
• レイアウト、フォント、カラー、ウィジェットのタイトルを変更
• カスタムCSSエディター
• Storyの有効期限が切れた後もウィジェットを表示

single-storyウィジェットをさらに詳しくご覧になるには、下記のリンクからライブデモをチェックしてください。

デモ：Single Storyウィジェット →

新しいGalleryウィジェット

EmbedSocialのプラットフォームでは、異なる日付のStoriesを組み合わせ、複数のStoriesを表示するギャラリーとして1つのウィジェットを作成できます。ウィジェットの見た目をスタイリングするために、以下から選べる新しいテンプレートをご用意しました。

Slider Gallery

用途： ブログコンテンツやサイドバーで、実用的な事例やユーザー生成コンテンツを表示

特徴：

• レスポンシブで次世代のスライドショー体験
• ギャラリー内の各Storyメディア、またはすべてに1つのCall to Actionボタンを設定
• ギャラリーに表示したいStoriesを手動で選択
• Storiesとメディアの並び順を選択
• サムネイル、スライダー、動画の自動再生オプション
• ページネーション、ナビゲーション、日付、ユーザー名の表示オプション
• スライダーのレイアウト、タイトル、サイズ、フォント、カラーを変更
• カスタムCSSエディター

Highlights Gallery

用途： 商品ページや、クリックすると全画面で開く小さめのStoryウィジェットが必要なサイドバーに最適

特徴：

• レスポンシブなInstagram風のハイライト体験
• ギャラリー内の各Storyメディア、またはすべてに1つのCall to Actionボタンを設定
• ギャラリーに表示したいStoriesを手動で選択
• サムネイルの数を選択
• ライトボックス、サムネイル、スライダー、動画の自動再生オプション
• ページネーション、ナビゲーション、日付、ソース画像、ユーザー名の表示オプション
• スライダーのレイアウト、タイトル、サイズ、フォント、カラーを変更
• カスタムCSSエディター

List Gallery

用途： Highlightsと同様に、商品ページでのアップセルやクロスセル、またはユーザー生成コンテンツの表示に最適

特徴：

• レスポンシブなInstagram風のハイライト体験（縦型）
• ギャラリー内の各Storyメディア、またはすべてに1つのCall to Actionボタンを設定
• ギャラリーに表示したいStoriesを手動で選択
• サムネイルの数を選択
• サムネイル、ライトボックス、動画の自動再生オプション
• ページネーション、ナビゲーション、日付、ユーザー名の表示オプション
• スライダーのレイアウト、タイトル、サイズ、フォント、カラーを変更
• カスタムCSSエディター

Swiper Gallery

用途： 視覚的に魅力的なホームページやランディングページ向けのモダンなレイアウト

特徴：

• レスポンシブなスライダー体験
• ギャラリー内の各Storyメディア、またはすべてに1つのCall to Actionボタンを設定
• ギャラリーに表示したいStoriesを手動で選択
• サムネイル、ライトボックス、動画の自動再生オプション
• ページネーション、ナビゲーション、日付、ソース画像、ユーザー名の表示オプション
• スライダーのレイアウト、タイトル、サイズ、フォント、カラーを変更
• カスタムCSSエディター

Carousel Gallery

用途： ホームページや商品専用ページに最適

特徴：

• レスポンシブなスライダー体験
• ギャラリー内の各Storyメディア、またはすべてに1つのCall to Actionボタンを設定
• ギャラリーに表示したいStoriesを手動で選択
• サムネイル、ライトボックス、動画の自動再生オプション
• ページネーション、ナビゲーション、日付、ソース画像、ユーザー名の表示オプション
• スライダーのレイアウト、タイトル、サイズ、フォント、カラーを変更
• カスタムCSSエディター

ご覧のとおり、これらはすぐに使える状態になっています。

これが意味するのはただ1つ。行動を起こすときだ、ということです！ あなたのStories向けのすべてのGalleryテンプレートのデモを、以下でチェックしてください。

デモ：Stories Galleryテンプレート →

新しいウィジェットの活用シーン

ご覧のとおり、Storyテンプレートにはそれぞれ独自の活用シーンがあります。どのデザインがあなたのウェブサイトのインターフェースに最も合うかは、あなた次第です。

ご検討いただけそうな、いくつかの提案をご紹介します。

ホームページ

Instagram Storiesは、ホームページにぴったりのコンテンツです。これは最新のフォーマットの1つであり、ウェブデザインをはるかにエンゲージングでモダンな段階へと引き上げ、ウェブ訪問者にやり取りできる、よりユニークな要素を提供します。

商品ページ

Popoverテンプレートを使ったStoryウィジェットの好例です。このフローティングウィジェットは、商品に関するコンテンツをStoryレイアウトで表示し、お客様に新鮮でユニークな形でエンゲージし、購入にもつながる体験を提供します。

ランディングページ

この例では、カテゴリーページに埋め込んだHighlights galleryウィジェットをご紹介します。これは、このページを訪れたユーザーが、より没入感のあるフォーマットで簡単に閲覧し、エンゲージできる商品Storyのショーケースです。その結果、Call to Actionオプションをクリックし、商品を購入してもらえる可能性が高まります。

すでに自分のウェブサイトでこれらのウィジェットを思い描いているなら、下にスクロールして、どうやって始められるのかを確認してください。

なお、EmbedSocialのプラットフォームは常に最新のInstagram APIの変更に対応しています。つまり、ユーザーは引き続きInstagramを使って、ウェブサイト上でInstagramのfeedやStoriesを生成・表示できるということです。

新しいテンプレートを使い始める

新しいテンプレートは、すでにすべてのEmbedSocialユーザーにご利用いただけます。今すぐ適用してウェブサイトに埋め込むには、以下のステップに従ってください。

1. EmbedSocialアカウントにログインします
2. Storiesを生成するために、Instagramプロフィールと連携しているFacebookアカウントを接続します（まだウィジェットを作成していない場合）
3. Widgetsに移動し、Instagramプロフィールを選んで、「Create widget」をクリックします
4. 編集画面で「Layout & Design」オプションに移動し、ウィジェットをカスタマイズします
5. 「Layouts」設定にすべてのテンプレートがあり、自分に最も合うStoryテンプレートを選択できます
6. 右上のHTMLコードをコピーし、ウェブサイトのbodyセクションに貼り付けます

新しいウィジェットがどこにあるかが分かるスクリーンショットはこちらです。Settingsパネルで「Layout and Design」トグルを開き、「Layouts」でドロップダウンから新しいテンプレートを選んでください。変更内容は、すぐに左側の「Preview」セクションに表示されます。すでに埋め込み済みのウィジェットに変更を適用するには、「Save」をクリックするだけです。

Gallery Widgetsについても同じステップを繰り返しますが、1点だけ例外があります。Widgetsの代わりに、左側のメインメニューからGalleryメニューに移動してください。

今日からウェブサイトにInstagram Storiesを埋め込む方法については、スクリーンショット付きの詳しいステップバイステップのチュートリアルをご用意しています。

ご注意ください。 EmbedSocialは、Instagram storiesを生成する機能を備えた最初のプラットフォームです。新しいウィジェットはすべて、JavaScriptやiframeの埋め込みに対応したあらゆるWebベースのアプリ、eコマースプラットフォーム、WordPressのようなあらゆるウェブビルダーで、シームレスに動作します。

次回予告…

私たちの取り組みはまだ終わりません。

オールインワンのEmbedSocialツールに向けた、私たちのロードマップの次の予定をちょっとだけ覗いてみてください。

• アップロード機能の改善
• さまざまなソースのStoriesを1つのウィジェットにまとめる柔軟性をもたらす、より優れたモデレーション
• 新しいHighlightsウィジェット

私たちは、ウィジェットをさらに改善するためのご提案をぜひお聞きしたいと思っています。お気軽にご連絡ください。

それまで、楽しい埋め込みを！