ウェブストーリーの作成に関するベスト プラクティス

読者の関心を維持するために、ウェブストーリーの作成に関するベスト プラクティスをお試しください。まず、重要ベスト プラクティスに取り組むことをおすすめします。時間があれば、推奨ベスト プラクティスもお試しください。

ストーリーテリング

ストーリーテリングに関する重要ベスト プラクティス
動画をメインにする 文字や画像よりも動画のほうが関心を引きつけます。できるだけ動画をメインに使用し、画像と文字で補足してください。

ストーリーテリングに関するその他のベスト プラクティス

ストーリーテリングに関する推奨ベスト プラクティス
自分の視点を持ち込む 事実だけでなく意見も共有し、自分のストーリーの主人公になって、共感が得られるようにしてください。
ナラティブ アークを持たせる ページごとに次が気になるストーリーに仕上げます。コンテキストとナラティブをストーリーに持たせ、ユーザーをストーリーに引き込みましょう。最後まで見てよかったと思えるストーリーにしてください。

デザイン

デザインに関する重要ベスト プラクティス
文字数を減らす 文字ばかりのページが続くのを避けてください。1 ページあたりの文字数を全角で約 140 文字（ツイートの長さ）に減らすことを検討してください。
読めないテキストを作らない ページ上の他のコンテンツがテキストの邪魔をしないようにしてください。画像に埋め込まれたテキストなどは使用せず、デバイスのサイズに合わせて拡大縮小されてもテキストが読めるようにしてください。
テキストがはみ出ないようにする ウェブストーリーのテキストすべてを読者から見えるようにしてください。画像に埋め込まれたテキストなどは使用せず、デバイスのサイズに合わせて拡大縮小されてもテキストがはみ出ないようにしてください。
アニメーションは注意深く使う アニメーションを使ってストーリーに命を吹き込んでください。気を散らすアニメーションの使用やアニメーションの繰り返しは、煩わしく感じられるので避けてください。

デザインに関するその他のベスト プラクティス

デザインに関する推奨ベスト プラクティス
ウェブストーリー向けの行動を促すフレーズを使用する Instagram、Snapchat、YouTube などのソーシャル プラットフォーム用に作成されたストーリーをリメイクする場合は、そのプラットフォームに固有の行動を促すフレーズを削除してください。ウェブストーリーで示された行動をユーザーが起こせるようにしてください。
全画面の動画と画像を使用する 全画面のアセットをストーリーに使って、読者の没入感を高めてください。
低解像度の画像や動画、ゆがんだ画像や動画を使用しない 高画質の画像を使用し、画像を縦表示に変換するときには注意してください。
カバーページにロゴを追加する ブランドの高解像度のロゴを使用してください。
動画を短くする 1 ページあたり 15 秒以下、長くても 60 秒以下にするようおすすめします。
音声を付ける 音量のバランスがとれていて高品質な 5 秒以上の音声クリップを使用し、話していることが聞き取れるようにしてください。
動画のみのストーリーの場合、自動的に進むようにする 動画ベースのウェブストーリーは自動的に進むようにすると、リラックスした状態で見てもらえます。

SEO

SEO に関する重要ベスト プラクティス
高品質なコンテンツを提供する どんなウェブページでもそうであるように、最も重要なのはユーザーにとって有益で興味深いコンテンツを提供することです。物語を完結させ、ストーリーテリングに関するベスト プラクティスに従うことで読者の関心を高めてください。
タイトルは短く タイトルは全角 45 文字未満にしてください。35 文字未満のわかりやすいタイトルの使用をおすすめします。
Google 検索がストーリーを発見できるようにする ストーリーに noindex 属性を設定しないでください。この属性を設定すると、Google がそのページをインデックスに登録しなくなり、Google で表示されなくなります。さらに、サイトマップにウェブストーリーを追加してください。Search Console でインデックス カバレッジ レポートとサイトマップ レポートを開けば、Google がウェブストーリーを発見できるかどうかを確認できます。
ストーリー自身を正規とする すべてのウェブストーリーは正規である必要があります。各ウェブストーリーに自身の URL に対する link rel="canonical" が指定されていることを確認します。例: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
メタデータを付ける

ウェブストーリーが AMP ストーリーのメタデータに関するガイドラインに従うようにしてください。ウェブページで通常行っている次のようなマークアップを行ってください。

SEO に関するその他のベスト プラクティス

SEO に関する推奨ベスト プラクティス
構造化データを追加する Google 検索がウェブストーリーの構造と内容を認識できるように、ウェブストーリーに構造化データを追加することをおすすめします。
画像に代替テキストを設定するストーリーを検出されやすくするために、画像に代替テキストを設定することをおすすめします。
ストーリーをウェブサイトに統合する

可能なら、ウェブストーリーをホームページやカテゴリページからリンクするなどして、ウェブストーリーをウェブサイトに組み込むことをおすすめします。たとえば、旅行の目的地に関するウェブ ストーリーで、すべての旅行記事を列挙したページがある場合は、そのカテゴリページでウェブ ストーリーもリンクします。www.example.com/stories のような特別なランディング ページ（ホームページなどの主要なページからもリンクされる）も意味があります。
AMP ストーリー ページ アタッチメントを使用する AMP ストーリー ページ アタッチメントを使用すると、ウェブストーリーといっしょに追加情報を表示できます。これは、ウェブストーリーに表示されるコンテンツに関する追加情報、詳しい内容、続きの内容を提供する場合に役立ちます。
動画に字幕を追加する 読者がストーリーを理解しやすいように動画に字幕を追加してください。字幕は、動画に組み込んだり、他のコンテンツに重ねたりせず、画面からはみ出ないようにしてください。
動画のみのストーリーを最適化する

セマンティック HTML を使用して、ウェブストーリーを作成することをおすすめします。ただし、一部のウェブストーリー エディタ ツールを使うと、ストーリーのエクスポートで各スライドを動画ファイルにする際に、テキストがすべて動画に組み込まれてしまいます。この場合には、動画内で表示されるテキストを amp-video 要素の title 属性として、そのまま追加することをおすすめします。繰り返しになりますが、この方法はウェブストーリーでセマンティック マークアップを使用できない場合にのみ使用してください。
横向き表示のサポートを追加する パソコン版の Google 検索の検索結果にウェブストーリーが表示されるようにするには、横向き表示のサポートを追加してください。

技術

技術に関する重要ベスト プラクティス
有効なストーリーにする ウェブストーリーは必ず有効な AMP ページにしてください。無効な AMP に起因する問題を回避するには、AMP 検証ツールを使用してストーリーをテストし、検出されたエラーを修正してください。
ポスター画像にテキストを含めないでください。 テキストを画像に組み込んだまま使用しないでください。ユーザーが検索結果でストーリーのプレビューを見るとき、ストーリーのタイトルを邪魔する可能性があります。タイトルが読みにくい場合、ユーザーが続きを読む可能性は低くなります。
適切なサイズとアスペクト比のポスター画像を使用する <amp-story> poster-portrait-src 属性にリンクされた画像を、640x853 ピクセル以上、アスペクト比 3:4 にしてください。
ロゴに適切なアスペクト比を指定する <amp-story> publisher-logo-src 属性にリンクされたロゴ画像を、96×96 ピクセル以上、アスペクト比 1:1 にしてください。

技術に関するその他のベスト プラクティス

技術に関する推奨ベスト プラクティス
og:image を使用する ストーリーを検出されやすくするために、og:image を <meta> タグに含めることをおすすめします。

その他の参考資料

前へ
Google でウェブ ストーリーを有効にする
次へ
ウェブ ストーリーのコンテンツ ポリシー