#5 「これからのWeb Stories」
今回のテーマはAMP Stories改め、Web Stroiesです！日本国内ではまだ事例が少ないものの、海外ではニュースサイトなどで使われ始めています。
10月に開催されたAMP Fest 2020の話なども交えながら、これから追加される予定のコンポーネントや、使いどころについてお話ししました！
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは。
- 加藤
- こんにちは。
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのPodcastです。本日の司会は設計チームの橋本が務めさせていただきます。ゲストは加藤さんです。よろしくお願いいたします。
- 加藤
- よろしくお願いいたします！
- 橋本
- はい、早速ですが今日はWeb Storiesについて聞いていきたいと思います。
- 加藤
- はい。橋本くんはちなみにWeb Storiesで作られたページ見たことありますか。
- 橋本
- いやぁ、正直に言うとまだないですね。
- 加藤
- そうですよね。実は私もほとんどないんですけど…。念のためWeb Storiesが何かっていうところから話すと、AMPを活用して画面全体を画像やテキストなどのコンテンツだけで構成したWebページのことです。InstagramやYouTubeに出てくるストーリーをイメージしてもらえればいいと思います。ユーザーが画面をタップするとページ全体が左にスライドしていって特定のコンテンツを一連の流れ、「ストーリー」として伝えることができる新しいコンテンツの形ですね。もともとはAMP Storiesっていう名前だったんですけど、割りと最近Web Storiesに変わりました。
- 橋本
- このストーリーという名前やUI自体は普及していて、あとWeb Storiesも名前は聞いたりするんですけど、その実際のコンテンツっていうのはあんまり見ないですよね。
- 加藤
- そうなんですよね。まぁ、アメリカとかインドとかだとWeb Storiesで作られたコンテンツがGoogle検索の結果にカルーセルで表示されたりするんだけど日本ではまだその機能が実装されていないので、Web Storiesを公開しただけではだめで積極的にプロモーションしないと世間一般には広がらないといった状況ですね。 実装の話をすると、1つのストーリーを表す
<amp-story>コンポーネント、ページを表す<amp-story-page>コンポーネント、配置するコンテンツのレイアウトを制御する<amp-story-grid-layer>コンポーネントが基本セットになってます。最終的に表示する画像やテキストは最後の<amp-story-grid-layer>の中に配置していくという仕組みになってます。 - 橋本
<amp-story-page>を複数増やしてストーリーを作っていく感じですね。<amp-story-grid-layer>はなんかそのまま画像のレイヤーだとか、文字のレイヤーとして使えるので、結構直感的に記述できて作りやすいんじゃないかなって自分的には思いますね。- 加藤
- そうですね。あとは、Web Storiesの特徴としてストーリーの最後にブックエンドっていう特殊なページを追加することもできます。ブックエンドを使うとユーザーがストーリーをすべて読み切った後に関連する別のストーリーだったりとか、関連リンクなどをコメントできたりします。ブックエンドのページは
<amp-story-bookend>っていう専用のコンポーネントを使うんですけど、実際に表示する内容は外部のJSONファイルで管理されてますね。 - 橋本
- なるほど。
- 加藤
- ちなみに国内の事例だと、半年くらい前にpixivさんが、ユーザーが投稿した作品をWeb Stories化する取り組みを行っていて、とてもいいなと思いました。
- 橋本
- そうですね。自分は絵を描くことが趣味なんですけど、そういう意味でpixivさんはよく絵の参考だったりとか好きな絵師さんの作品を見るのに利用させてもらってます。それで、このWeb Storiesによってそのユーザーの投稿作品を見せるっていうこの取り組みは自分が今まで知らなかった素晴らしい絵師さんだとかその素敵なイラストとかに出会うきっかけっていうのを少しでも増やす機会になってるっていう風に思いましたし、何よりイラストっていう鑑賞物なので、見栄えも良いしで相性が良いなって思うんですよね。
- 加藤
- そうですね。Web Storiesは特徴として画像や動画を画面全体で用いているのでユーザーからするとすごく見応えのあるコンテンツなんですよね。そういう意味でいうと背景にどんな画像や動画を敷くかっていうところは良いストーリーを作るための大きなポイントになってくるんじゃないかと思います。
- 橋本
- そうですね。自分の方で以前Google developers blogの「ユーザーはモバイルウェブのタップ可能なストーリーがお好き」っていうタイトルの記事を読んだことがあって、そこの中でアメリカのスマートフォンユーザーのほとんどが少なくとも週に1回ストーリーを見ていたりだとか、またスクロールする記事よりもWeb Stories形式を好むということが書いてあって、その話から実際に通常のWebページとWeb Storiesのページとでどのくらいのコンバージョンの差が出るのかなっていうのが1つ気になったんですけど、なんかAMPって確かデータ解析とかができたと思うんですけど、Web Storiesでも同じように解析ってできましたよね。
- 加藤
- 解析はできますね。AMPでアクセス解析をするときはAMP Analyticsっていう専用のコンポーネントがあるのでそれを使います。AMP Analyticsの中にはWeb Stories用のイベントが多く用意されてるのでWeb Storiesについてもかなり柔軟に計測ができますね。たとえばストーリーが開かれた回数だったりとか、タップ率、ストーリーの読了率、平均滞在時間などを測れるのでそれをもとに解析するといいかもしれません。マーケティング的な意味合いだとWeb Storiesはデフォルトでシェアボタンが表示されるようになってるので、気に入ったストーリーはSNSでシェアしたりとかプロモーションもしやすいんじゃないかなと思ってますね。
- 橋本
- ですね。ストーリーのUI自体はやっぱInstagramとかで慣れてる人が多いので、そのSNSのシェアとかで浸透して一気に普及するかもしれないですね。
- 加藤
- そうですね。
- 橋本
- 日本国内では、まだこのWeb Storiesって普及してないと思うんですけど、海外では何か動きがあったりするんでしょうか。
- 加藤
- それでいうと、10月にAMP Fest 2020っていうカンファレンスがオンラインで開催されたんですけど、その中で今後のWeb Storiesについてもいくつか触れられていたので紹介したいと思います。1つ目はWeb Storiesで使えるコンポーネントのバリエーションが増えることですね。もともとAMPページではAMPから提供されているコンポーネント以外の機能をユーザーに提供するのが難しかったんですけども、Web Storiesページでクイズや投票を行ったりとか、あとは360度の全天球コンテンツを表示したりするためのWeb Stories専用のコンポーネントが提供されるようになるみたいですね。
- 橋本
- 今までのWeb Storiesってそのただストーリー調だけって感じがあったんですけど、今回のそれでクイズみたいな遊びのコンテンツができるって言うのはすごい面白そうだなって思いました。あと、その投票やアンケートみたいなものっていうのは今後いろんなところで使われていきそうですね。
- 加藤
- そうですね。ただ見るだけじゃなくてユーザーがアクションをするっていうところは大きな変化かなと思います。あとはストーリーの中の1ページとして全画面の広告を挟める仕組み、いわゆるマネタイズなども考えられているみたいです。ストーリーを見てる途中に関連する広告が出てきたら自分だったらこうなんか勢いでタップしちゃいそうだなーってちょっと思ってます。
- 橋本
- そうですね。なんか全画面広告ってなるとちょっと驚いちゃいますね。
- 加藤
- うん。2つ目はBento AMPですね。橋本くんはBento AMPってご存知ですか。
- 橋本
- はい。えっと簡単にいうと、AMPページではない普通のWebサイトでもAMPのコンポーネントが使えるっていう取り組みですよね。
- 加藤
- そうですね。AMPページでしかAMPコンポーネントを使えないのではなくて通常のWebページでも部分的にAMPコンポーネントを使用する、つまりHTMLフレームワークとしてのAMPを目指してるっていう話がありまして、Web Storiesはすでに
<amp-story-player>っていうコンポーネントを使うと非AMPページにもWeb Storiesを埋め込むことができるんですよね。なので、前回のPodcastで紹介したPortal要素なんかと組み合わせて、通常ページからシームレスにWeb Storiesページに遷移できたりなんかしたらいいなって思ってます。 - 橋本
- そうですね。そういった新しい機能の組み合わせ、良いところをどんどん組み合わせていってより良いユーザー体験をお届けできたらいいなって思いますね。
- 加藤
- そうですね。最後に海外ではWeb Storiesをブラウザ上でドラッグ&ドロップで作って、ホスティングまでできてしまうっていうツールが出ていたりします。あとはWordPress上でもWeb Storiesが簡単に作れるプラグインをGoogleが提供し始めたりもしています。テンプレートがたくさん用意されてるので、ユーザーはテンプレートを選んでコンテンツをはめ込んでいくだけでWeb Storiesを公開できるっていう仕組みがすでにできあがっている状態ですね。
- 橋本
- あー、いわゆるノーコードってやつですね。なんかその話で結構日本と海外ではだいぶギャップがあるなっていうのを感じたんですけど、そのAMP Storiesだった時はどちらかというとAMPの1コンポーネントとして開発者がなんか高速なモバイルページを作るためのものという印象があったんですけど、AMPという冠を取ってWeb Storiesという名前に変わったり、誰でも簡単に作れるようになったことでより一般的になってきているなーって思いました。
- 加藤
- まさにおっしゃる通りだと思いますね。 ただ逆に言うと、Web技術を知らない人でも公開ができてしまうっていうのは意図せずシンタックスエラーを生み出してしまったりとかアクセシブルではないコンテンツを公開できてしまうっていう危険性があるんですけど、AMPプロジェクトはその辺もちゃんと考えていて、AMPコンポーネントを使えば意図しなくてもデフォルトでアクセシブルになるような仕組みを作れるようにアクセシビリティにはより一層力を入れていくって話もされてましたね。
- 橋本
- なるほど。ただ便利な機能を提供するってだけじゃなくて、しっかりそのアクセシビリティだとか対応すべきところは対応してるってのはやっぱさすがとしか言いようがありませんね。 ちなみにこのAMP Fest 2020っていうのはアーカイブ配信されてるんでしょうか。
- 加藤
- そうですね。YouTubeに公開されているので良かったらぜひ見てみてください。
- 橋本
- はい、見てみます。Web Storiesは個人的に今流行りのWeb技術だと思うので、今後アンプ関連の動向は追って行こうと思います。
- 加藤
- はい！
- 橋本
- というわけで今回のミツエーテックラジオではWeb Storiesについてお話ししました。誰でも作れるということはこれからもっとWeb Storiesを見る機会が増えてくるし、見つけやすいようにブラウザ側もどんどん変更を入れてくるかもしれないですね。今回の話を通して、加藤さんとしては今後どういったコンテンツに活用できそうだと思いましたか。
- 加藤
- んー、そうですね、名は体を表すってよく言いますけど、やっぱり「ストーリーズ」なので一連の流れのようなものを構成できるコンテンツがマッチしてるんだろうなとは思いますね。たとえば特定のテーマに関するWeb連載記事なんかは記事詳細ページの他にもWeb Stories用のページをインデックスとして作成しても良さそうだなと思います。記事の情報は記事詳細ページとして別にあるので、記事を公開したことをフックにある程度自動化なんかもできるんじゃないかなと思います。あとはカウントダウンするようなコンテンツとかも面白そうですよね。まぁ年末が近付いてますけど、毎日1ページ追加されるようなストーリーがあったりなんかしたら見に行っちゃうかもなぁって個人的には思ってます。
- 橋本
- いいですね。自社で運用しているブログなんかにも活用できそうですしこれまでのブラウジングとは一味違ったそのユーザー体験を提供できるので、今後Web Storiesを使ったいろんな見せ方を模索していきたいですね！
- 加藤
- そうですね！
- 橋本
- 最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。またこのポッドキャストは、Apple Podcast、Google Podcast、Spotifyで配信していますので、お好みのプラットフォームでフォローいただけると最新のエピソードをすぐ視聴できます。こちらも是非ご活用ください。それでは今日はこの辺で！ありがとうございました！
- 加藤
- ありがとうございました！