pixivでプロダクトマネージャーをしているmu-koです。
pixivでAMP Storiesを作成し、2019年末にリリースしました。今回はAMP Storiesの概要をご紹介します。
開発者向けの記事は別途公開予定です。
Click here for English version.
pixivとは
pixivはクリエイターがイラスト・マンガ・小説を投稿し、声援をもらうことができるサービスです。 2019年9月時点で登録ユーザーは4,000万ユーザーを超え、投稿作品数は8,500万作品あります。また、最近は日本以外の国からの登録が増え、今では約70％を占めています。
AMPやAMP Storiesについて
AMP（Accelerated Mobile Pages）とは
AMPとは、Googleが中心となって作られた、ウェブサイトを高速に表示するためのフレームワークです。 AMPコンテンツのメリットを1つご紹介します。AMPコンテンツがGoogle検索結果に表示されてユーザーがリンクをタップした場合、Google AMPキャッシュからページが取得されるため、ページが高速に読み込まれやすくなります。
AMP Storiesとは
AMP Storiesとはユーザーが全画面で閲覧を楽しめるストーリー形式のコンテンツです。ユーザーはStories内でタップすることでページ内容を高速に切り替えられます。 また、AMP Storiesのフォーマットはどなたでも利用できるように無料で公開され、どのサイトでも導入できます。
以下のページでAMP Storiesの詳細が紹介されています。
Web Stories - amp.dev
pixivのAMP Storiesについて
pixivには様々な作品が投稿され、これらの作品にはハッシュタグが付けられています。 そこで、pixivのハッシュタグごとの週間人気イラストを表示するAMP Storiesを作成しました。
実際のAMP Storiesは以下のURLから確認できます。
オリジナル 週間人気イラスト (2020/01/04 ~ 01/11) - pixiv
また、クリエイターの方々が意識しなくても作品が多くのユーザーに届くことや、作品の主題がAMP Stories上でしっかりと伝わることを考えて作成しました。 AMP Storiesの担当デザイナーの発表資料もありますので、ご興味のある方はぜひご覧ください。
リリース後の結果
- AMP Storiesを閲覧したユーザーのうち約35％がイラスト作品画面へ遷移
- AMP Storiesを閲覧したユーザーのうち約61％が最後のページまで閲覧
多くのユーザーが今回作成したAMP Storiesに興味を持ったことで、今回の結果が出たと考えています。
AMP Stories導入のメリット
1. Google DiscoverやGoogle検索にAMP Storiesが表示される可能性があること
米国など一部の地域では特定条件下でAMP StoriesがGoogle検索上に表示されます。pixivでは英語版のAMP Storiesを用意することで、米国などでpixivのコンテンツが表示されることを期待しています。
また、今後は日本にも横展開される可能性が高いと考えられます。そのため、pixivユーザーの作品をより多くの方に届けるチャンスが増えることを期待できます。
2018年の記事になりますが、以下の記事でGoogle検索時におけるAMP Stories導入のメリットについて説明されています。 developers-jp.googleblog.com
2. ストーリー開発のフォーマットが整っていること
ストーリー形式のコンテンツをサービスに導入するために自社で1から開発する必要がありません。
すでにAMP Storiesのフォーマットや開発ドキュメントが用意されているため、どなたでもストーリー形式のコンテンツを作成しやすい環境が整っています。
また、AMPには1,000人を超えるコントリビューターがいて、フォーマットがアップデートされていくメリットがあります。
3. マネタイズ可能であること
AMP StoriesにはStory Adsというものが用意されていて、ストーリーの途中で全画面広告を設置できます。
以下のページで全画面広告入りのストーリーの例を見れます。
AMP Stories導入の流れ
- チュートリアルを参考にAMP Storiesを試しに作成したり、その他の記事を読んで内容理解
- 仕様やデザインの決定
- 開発
- アナリティクスや構造化データの設定
- リリース
注意点としては以下の2つがあります。
- 「アナリティクスや構造化データの設定を行うこと」
- 「サービス内にAMP Storiesへの内部リンクを用意すること」
AMP Stories導入で参考にした記事
チュートリアル記事
まず、AMP Storiesのチュートリアル記事をおすすめします。 AMP Storiesがどういうものかをざっくり把握することができます。 また、チュートリアルはすでに日本語翻訳されていますので、日本語で記事を読むこともできます。
ベストプラクティス
テキストや画像・動画の表示方法、アニメーションの使い方の良い例と悪い例が紹介されています。 実際にAMP Storiesを作る前にこの記事を読むことをおすすめします。
アナリティクスの設定方法
AMP Storiesを公開した後、どのように閲覧されているかを確認し、次の改善案を考えるためにアナリティクスを設定する必要があります。
AMP Storiesではページビューとイベントを使い分け、閲覧情報を記録します。 特にAnalytics for your AMP Stories – The AMP Blogはいつイベントを飛ばすかの参考になりました。図解もされていて非常に分かりやすい記事になっています。
構造化データなどの追加
同じ内容でAMPページと非AMPページが存在する場合はcanonicalやamphtmlを設定します。
また、AMP Storiesでも検索エンジン向けに構造化データを設定できます。 構造化データは構造化データテストツールから確認できます。pixivのAMP Storiesの構造化データはこちらから見れますので、ぜひ確認してみてください。プレビューボタンをクリックすることで、Google検索上でどのように表示されるかを確認できます。
記事についての構造化データ - Google Developers developers.google.com
その他
開発者向けになりますが、各コンポーネントの詳細は以下のドキュメントから確認できます。
最後に
AMP Storiesはモバイルユーザーに最適化された表示形式でページを高速に切り替えることもでき、さらに多くのサイトで利用される可能性があると思います。 AMP Storiesを簡単に作れるサービス（MakeStories beta）も出てきていますので、ぜひ1度AMP Storiesを作って体験してみてください。
何かご質問がありましたら、以下のサービスからご連絡お願いします。
採用情報
