1. ホーム
  2. コラム
  3. AMPでお手軽ビジュアルコンテンツ!注目の新機能AMP storiesとは?

AMPでお手軽ビジュアルコンテンツ!注目の新機能AMP storiesとは?

AMP stories

モバイルでのサイト閲覧が増え、サイト高速化がますます必要とされる時代になりました。
そんな中、モバイル時代の高速化ページ規格、AMP(Accelerated Mobile Pages)プロジェクトが存在感を増し、新機能の追加などさらなる進化を続けています。

その新機能の一つとして、2018年8月16日にAMP stories1.0が公開されました。
以前までは試験中として一般に公開されていませんでしたが、今後Google検索で目にする機会が増えてくると思われます。
本コラムでは、AMPの新しい機能であるAMP storiesがどのようなものなのかご紹介します。
(AMPが何かということについては、過去のコラム「AMP対応ページ作成時の注意・確認点」をご覧ください)

目次
1.AMP storiesとは?
2.AMP storiesの導入方法
3.AMP storiesのメリット・デメリット
4.まとめ

AMP storiesとは?

AMP storiesは、本をめくるような感覚でカルーセル形式の情報を閲覧できるAMPの機能です。
公式サイト

用意した写真、動画が順番に並び、クリック、タップで読み進めることができます。
また、PC、モバイル両対応となっており、ワンソースでマルチブラウザ対応が可能になっています。
リッチな表現を排除し、速度を追い求めていた通常のAMPに対し、写真や動画などのビジュアルコンテンツを活用しているのが特徴です。

そのため、以下のように写真や動画などのビジュアル面を推したコンテンツに向いています。

  • 製品のプロモーション
  • Webカタログ
  • ニュース・トピックス

AMP storiesのサンプルgif

画像:公式サンプルコード実行例

AMP storiesの導入方法

では実際に、AMP storiesがどのようなコードになるのか見てみましょう。
基本のテンプレートとなるコードは下記のとおりです。

<body> <amp-story standalone><amp-story-page id="cover"> <amp-story-grid-layer template="fill"> <amp-img src="" width="720" height="1280" layout="responsive"> <amp-story-grid-layer template="vertical"> <amp-story-page id="page1"> <amp-story-grid-layer template="vertical"> <amp-img src="" width="720" height="1280" layout="responsive"> <amp-story-page id="page2"> <amp-story-grid-layer template="fill"> <amp-img src="" width="720" height="1280" layout="responsive"> <amp-story-grid-layer template="thirds"> <h1 grid-area="upper-third"> <amp-story-bookend src="bookend.json" layout="nodisplay"> </amp-story-bookend></amp-story></body>

ご覧のようにbody内に着目すると、非常にシンプルな作りになっていることがわかります。
そのため、基本的にはamp-story-pageタグの追加、差し替えだけでページの制作が可能となります。

また、公式のチュートリアルが存在し、手順に従うだけでAMP storiesの仕組みを学ぶことができます。
さらには制作開始のためのテンプレートと、サンプルとなる完成品の両方が用意されており、チュートリアルからダウンロードすることで容易に制作ができます。

AMP storiesのメリット・デメリット

AMP storiesがどのようなものなのか紹介したところで、導入するメリットとデメリットをまとめてみましょう。

メリット

  • 読み込みが高速
    通常のAMP同様、読み込みが高速であることからユーザーのストレスを軽減し、ページからの離脱を防ぎます。
  • リッチコンテンツの提供
    写真や動画などのビジュアル面を推したコンテンツを提供できます。
  • シンプルなユーザー体験
    ユーザー操作の簡略化により、コンテンツへの没入感を高めます。

デメリット

  • 長文を読ませることに適さない
    AMP storiesの構造上、長文をスクロールさせて読ませることには適していないため、文章量の多いコンテンツには向きません。
  • 縦長の写真、動画が必要となる
    AMP storiesは縦向きの表示のため、コンテンツも縦長となります。
    写真はともかく、動画といえばYouTubeのような横長の動画が主流なため、素材の用意に苦心するかもしれません。

以上のように、AMP storiesが魅力的であっても、手放しに導入できるというわけではありません。
メリット・デメリット、そしてAMP storiesに適しているコンテンツなのか吟味して、取り入れましょう。

まとめ

いかがでしょうか?AMP storiesについて理解を深めていただけたでしょうか。
AMP storiesは一般に公開されてから日が浅く、なかなか目にする機会がないかもしれません。
しかし、AMP storiesはこれから広まるだけのポテンシャルを大いに秘めています。
もしビジュアルコンテンツの公開を考えることがあれば、本コラムを思い返していただけると幸いです。

■コラム執筆:
デザイン&インテグレーション室 INT2
本澤孝至

RSS