--- title: "WEBサイトでストーリーが作れる『AMP stories』とは？" date: 2020-10-16 modified: 2024-12-09 canonical_id: amp-stories locale_slug: amp-stories author: "esbasicmath" category: - blog - tutorials tags: - instagram-story summary: "AMPはWEBサイトをスマホ端末でより高速に表示させることができる技術として知られていますが、サイトの高速化だけではなく、Instagramストーリーのようにの縦画面にコンテンツを表示できる「AMPストーリー」という機能があります。今回は、2020年大注目の「AMPストーリー」についてご紹介させていただきます。" draft: false seo: title: "WEBサイトでストーリーが作れる『AMP stories』とは？" description: "AMPはWEBサイトをスマホ端末でより高速に表示させることができる技術として知られていますが、サイトの高速化だけではなく、Instagramストーリーのようにの縦画面にコンテンツを表示できる「AMPストーリー」という機能があります。今回は、2020年大注目の「AMPストーリー」についてご紹介させていただきます。" og_image: "https://embedsocial.jp/hp/wp-content/uploads/2020/09/AMP-Stories.png" og_image_width: 2240 og_image_height: 1260 structured_data: article --- AMPはWEBサイトをスマホ端末でより高速に表示させることができる技術として知られていますが、サイトの高速化だけではなく、Instagramストーリーのようにの縦画面にコンテンツを表示できる「AMPストーリー」という機能があります。今回は、2020年大注目の「AMPストーリー」についてご紹介させていただきます。 ## 目次 1. [AMP Stories とは？](#anchor1) 2. [AMP Stories の導入方法を簡単にご紹介！](#anchor2) 3. [日本・世界の大手メディアなどでの活用事例](#anchor3) 4. [コーディングなしでもストーリーが作れる『EmbedSocial』とは？](#anchor4) 5. [Instagramのストーリーを同期し・オリジナルストーリーの追加も可能！](#anchor5) # AMP Stories とは？ ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-sp-556x1024.jpg) 2018年2月に、Googleは「AMPストーリー」と呼ばれる技術を発表しました。これまでGoogleの検索結果や表示されるWEBページはテキスト情報が中心で、画面の小さいスマホからの閲覧には最適化されていませんでした。そこで、小さいスマホ画面からでも素早く情報を閲覧・選択できるように視覚的なコンテンツをメインとした「AMPストーリー」が開発されました。 **公式アナウンスはこちら** ### 基本構成 「AMPストーリー」のフォーマットは、Insatgramストーリーとほぼ同様です。表示させるコンテンツはスマホの全画面で表示され、タップすることで次の画面・前の画面へと行き来することができます。最後の画面には「ブックエンド」をと呼ばれるリンク先一覧を設定することができるため、任意のページへとユーザーを遷移させることも可能です。 背景に表示させる画像・動画と、前面に表示させるテキストを編集する構成になっています。下記のようなコードで1スライドを表示させることができます。「template」と記載のある部分を変更することでレイアウトをカスタマイズすることができます。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-code-1024x226.png) 下記は、基本的なレイアウトの一例です。 #### Fill スライド全体に画像を表示させる際に使用します。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-layout.001.jpeg) #### Vertical テキストをスライド上部から順に配置させる場合に使用します。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-layout.002.jpeg) #### Thirds テキストをスライド内に分散して表示させたい場合に使用します。スライドを縦に三分割し、指定した位置にテキストが配置されます。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-layout.003.jpeg) ### 表示場所 AMPストーリーに対応させたページは、該当のURLにアクセスした際に通常とは異なる専用ページが表示されます。また、検索結果でもAMPストーリーに対応させたページが専用のウィンドウに表示される場合があります。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-cnn.jpg) ### レスポンシブでの表示 AMPストーリーはスマホでの表示に最適化されているものの、PCから閲覧した際にも大きなストレスなく内容を確認することができます。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp_pc-1024x643.jpg) ### ブラウザへの対応 AMPストーリーはGoogleが中心となって開発しているAMPの技術をもとにしているため、AMPをサポートしているブラウザであれば問題なくコンテンツを表示させることができます。Google Chrome・Firefox・Microsoft Edge・Safari・Operaなど多くの主要ブラウザでの表示が可能です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-browsers-1024x356.png) [https://amp.dev/support/faq/supported-browsers/](https://amp.dev/support/faq/supported-browsers/) # AMP Stories の導入方法を簡単にご紹介！ 最新の技術というと実装のハードルが極めて高そうに聞こえますが、AMPストーリーは複雑なコーディングなしにできるだけ多くの人がよりスマホに最適なコンテンツ配信をできるようにすることを目的として作られているため、基本的なHTML・CSSの知識だけで比較的簡単に実装することができます。 ※ブックエンドの設置にあたっては、基礎的なJavascriptの知識が必要となります。 [こちら](https://amp.dev/documentation/guides-and-tutorials/start/visual_story/setting_up/?referrer=ampproject.org)のリンク先よりテンプレートをダウンロードします。 「Set up your development environment」の項目より「Step 1. Download the code」のリンク先をクリックしましょう。クリックすると自動的にzipファイルのダウンロードが開始します。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-setup-1024x737.jpg) ダウンロードしたzipファイルを解凍し、「pets-completed.html」というファイルをブラウザで開きます。もともと用意されていた画像や文章がストーリー形式でブラウザに表示されているのを確認することができます。 基本的にはこちらのファイルの画像・文章を変更することで内容を作成することができます。テンプレートに依存せずに内容を作成したい場合には、最低限のコードのみが記述された「pets.html」というファイルを利用することも可能です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/amp-files-1024x608.png) ブックエンドも同様に、「bookend.json」のファイルからカスタマイズを行うことができます。 # 日本・世界の大手メディアなどでの活用事例 大手メディアを中心にAMPストーリーは、海外をはじめ国内でも活用され始めています。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/bbc-517x1024.jpg) **BBC NEWS** ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/asahi-521x1024.jpg) **朝日新聞** ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/suntry-519x1024.jpg) **サントリー** # コーディングなしでもストーリーが作れる『EmbedSocial』とは？ スマホに最適化されたコンテンツの表示に大きな効果を発揮するAMPストーリーですが、既存コンテンツの表示にあたってはHTMLを修正するかストーリー表示用の新規ページを作成する必要があります。 一方でEmbedSocialのストーリー機能を活用すると、既存ページ内にストーリーを埋め込むことができ、また表示にあたってもHTMLの修正などなく自動生成されるタグを埋め込むだけで簡単に表示させることができます。 ### SNS投稿埋め込みツール EmbedSocialとは？ ![](https://embedsocial.jp/hp/wp-content/uploads/2020/07/blog_embed_sns.jpg) ソーシャルメディアの投稿・レビューなどを、簡単にWEBサイトに埋め込むことができるSaaS型のウィジェット作成ツールです。全世界で50,000人以上のユーザーが1,000,000以上のウィジェットを作成し活用しております。 InstagramやTwitterから投稿を収集するだけでなく、Youtube・TikTokなどの動画プラットフォームやGoogleマイビジネスの口コミ収集にも対応しています。 キャンペーンや口コミ・更新のいらないメディアとして活用することができ、多様な使い方に対応する充実した機能と簡単な操作性が人気の理由の一つです。 # Instagramのストーリーを同期し・オリジナルストーリーの追加も可能！ ### Instagramストーリーを同期して表示 EmbedSocialとInstagramアカウントを接続することで、Instagramに投稿したストーリー投稿をWEBサイト上に簡単に表示させることができます。一度設定を行うと、その後はInstagramで投稿される度にサイト上でも自動的に表示されます。 収集したストーリーはシステムに保存されるため表示期限である24時間経過後も継続して表示させることができ、一度保存したストーリーは何度でも再活用いただくことができます。 ### 収集したストーリーを自由に組み合わせて表示 ストーリーの組み合わせを変更して、インスタグラムのようにハイライトを作成することができます。システムにアカウントを接続した後は投稿したストーリーが全て保存されるため、全期間のストーリーから組み合わせを選んで新たなストーリーウィジェットを作成することが可能です。 ### オリジナルのストーリーを追加 また、Instagramを経由せず直接ストーリー画像をアップロードすることもできます。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/upload-a-picture-1024x558.png) Insatgramより収集したストーリー画像・アップロードした画像は全てシステムに保存される為、コーディングを行うことなく複雑な組み合わせ・多様なレイアウトで表示させることができるのがEmbedSocialの魅力の一つです。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/09/custom-story-created-1024x691.png) コーディング不要でSNS系動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。 ご興味のある方はぜひ無料トライアルから試してみてはいかがでしょうか？ \[include file='blog\_cta'\]