優れたウェブストーリーを作成するためのベストプラクティス

ウェブストーリーはタップ可能で簡単に共有可能な没入型ストーリーテリング形式で、AMP フレームワークのサブセットを使用して構築されています。ウェブストーリーは、クリエーターとサイト運営者にとって、視覚的にリッチで魅力的なモバイルファーストのエクスペリエンスが詰まったコンテンツを全画面で構成するチャンスです。

ウェブストーリーはスナッカブルで、読者はマイクロモーメントでさっと噛り付けることを好みます。地下鉄の電車を待つ合間、またはコーヒーを注文する合間に、コンテンツの消費を凝縮することができます。満足感のあるスナッカブルなウェブストーリーを作成するためのベストプラクティスに従って、噛むたびに魅力的なコンテンツを確保しましょう。

概要

満足感のあるスナッカブルなウェブストーリーを作成するための主なポイントを以下に示します。

• 完全で興味深いストーリーを提供します。
• 高品質の画像やキャッチコピーを使ってカバーページのインパクトを最大化します。
• ユーザーの画面にぴったり収まる動画や画像を使ってビジュアル化します。
• 特にビジュアルな画像を使用すると、少ない要素で多くを語ることができます。テキストは 1 ページ当たり 10 語未満に維持するように心がけましょう。
• 動画を使用する場合は、短い動画が最適です。15 秒未満に維持するようにしましょう。
• ユーザーや状況によっては、消音で閲覧する必要もあります。動画にキャプションを追加して、コンテンツをインクルーシブにしましょう。
• 読者にタップするものを提供します。平均 10〜20 ページの長さであれば、ほとんどの作者が良いストーリーを提供できます。
• アニメーションや埋め込みを過度に使用せず、トランジションのタイミングに注意します。

ストーリーを理解する

ストーリの導入を計画し、弧を描いて、完全なストーリーを作り上げます。伝えたいことを理解したら、それを分割します。ウェブストーリーのページごとに、ほかのページとまとまりのある 1 つの主旨を伝えるようにします。

味わいのあるコンテンツ

各ウェブストーリーは最低 4 ページ、理想的には 30 ページ未満である必要があります。ウェブストーリーはわかりやすく、消費しやすいものである必要があります。必要であれば、30 ページを超えてもかまいません。

魅力たっぷりのパッケージ

カバーページはウェブストーリーのパッケージです。これがユーザーが最初に閲覧するものであり、ユーザーがそれを開かなければ、カバーページしか見られることはありません。したがって、魅力的である必要があるのです！有用なカバーページには、ユーザーの目を引く画像と記憶に残る短いタイトルの 2 つの要素が含まれます。

画像

全画面に収まる高画質のポートレート画像または動画を使用します。ファビコンやロゴを含めて、ファンにあなたのブランドであることを伝えましょう。

タイトル

明確ですっきりとしたタイトルを付けます。理想は、10 語未満（40 文字未満）といったところです。作者とサイト運営者名を含め、ストーリーの日付が重要であれば、公開日も追加しましょう。

ブランドと日付

読者はウェブストーリを公開した人と公開された日を知る必要があります。カバーページにブランドの属性と公開日を含めましょう。こうすることで、信頼を築き、ユーザーがコンテンツを気に入れば、ロイヤルティも生まれます。イタリア旅行に関する CNN のウェブストーリーは、ストーリーを誰が公開したのか、どれくらい前に公開されたのかが一目でわかるようになっています。

視覚的なご馳走

注目を引く品質の高いビジュアルと簡単にさっと読めるテキストでリーダーを引き込みましょう。主に高画質の動画と画像を使用しますが、意味のある場所にパッとするアニメーションを加えましょう。

すべての画像と動画は、意味をなす場合に最小限のレターボックスを使用して画面全体に表示する必要があります。

動画

動画は、読者に非常に魅力的なものです。ウェブストーリーにはできる限り多くの動画を絶対に含めると良いでしょう。動画は 15 秒未満にすることを目指し、それよりも長い動画がある場合は、分割することを検討してください。

ウェブストーリーはポートレートモードで表示されるため、以下のことに留意してください。

• 可能な限りハイエンドのモバイルデバイスで撮影された動画であること。
• 480p で撮影されていること。
• 1 秒あたり最低 24 フレームで撮影されていること。

コンテンツがアクセシブルであることを確認してください。下部にテキストやキャプションを挿入するスペースを設けられるように動画のサイズを調整します。すべての読者が動画コンテンツを聞けるまたは聞きたいわけではありません。

画像

最適な解像度（828 x 1792）の全画面ポートレート表示画像を使用してください。

ランドスケープのクロップ写真は避けましょう。

クロップに注意する

重要なことに焦点を維持しましょう。気が散る原因となる不要な要素を切り取り、主題に焦点が当てられた完全な写真を使用してください。一部のデバイスでは、画像の上下が切り取られる可能性があるため、適宜テストするようにしてください。

やるべきこと	やってはいけないこと
この画像は、ページコンテンツと整列するように切り取られており、主旨を補助しています。	このクロップでは、読者の焦点がどこに充てられるべきなのか、画像が伝えようとしている主旨が何なのか明確ではありません。

テキスト

テキストに可読性があることを確認しましょう。最低サイズ 24 のフォントを使用すべきですが、できる限り大きく読み取り可能なサイズにするようにしてください。ストーリーページの背景や画像と対照的なテキストの色を使用しましょう。テキストのみの画像や動画を含めてはいけません。

やるべきこと	やってはいけないこと
ハイコントラストで文字を読みやすくします。	コントラストが少ない場合、文字や画像がブレンドしてしまうため、文字が読みにくくなり、ストーリーを読み続けるのが困難になります。
テキストをハイライト表示することで、文字を目立たせ、ストーリーへのフォーカスが維持しやすくなります。	ごちゃごちゃした画像の上に明るい色のテキストを使用すると、文字が読みづらくなります。

一口サイズの語

テキストは盆盛りではなく一口サイズで表示するようにしましょう。ページ当たり 200 文字以下に制限してください。

詳細を食材リストのように扱って利用できる状態にはしておきますが、ユーザーが求めた場合にのみ表示されるようにしましょう。長文のコンテンツはページの添付として含めます。ページ添付はさらに詳細があるということをユーザーに伝える手段であり、ユーザーが興味があれば、上にスワイプして表示することができます。

文章の長いテキストコンテンツをどうしてもページに使用しなければならないこともあります。こういった文章がストーリーの合計ページ数の 10% 以上を占めないようにしてください。

やるべきこと	やってはいけないこと
不可欠なテキストのみを表示するようにします。タイプサイズを変化させたりやスタイルを使ってテキストのブロックを分割することで、にばらつきがあると、可読性が高まります。	このような長文は読みにくく、ストーリーへのエンゲージメントを低下させてしまいます。

アニメーション

アニメーションは、静止画像に動きを加えるなどの目的をもって行われた場合に食欲をそそる要素となります。フライイン、回転、またはフェードインの効果を使って、画像やアセットをアニメーションさせることができます。

やるべきこと	やってはいけないこと
この例のモーションは、主旨を補助し、ページに動的な要素を追加します。	この静的ページには機能性がありますが、読者をさらに引き込む機会に欠けています。

ただし、アニメーションを使いすぎれば、その味わいがなくなってしまうため、控えめに使用するようにしましょう。1 つの風味をたくさん追加するのではなく、アニメーションを控えめに使用してスパイスを利かせましょう。

タイミングで決まる

ページは完成された状態に素早く変化する必要があります。アニメーションが再生しているがために、ユーザーが次のページにタップして移動できないことがあってはいけません。ただし、早すぎてもいけません！スタイルとページ表示時間をうまく組み合わせて配信することが重要です。たとえば、単純なアニメーションには 500 ミリ秒がかかりますが、背景画像へのパン表示にはより長い時間がかかります。

モーションを使ってクリエイティブ性を高めることを検討してください。複数のオブジェクトを 1 つの効果で同時に動かすのではなく、順にアニメーションさせることができます。要素にさまざまな効果や再生時間を適用することで、まとまりのあるアニメーションを作ることができます。

完璧なペアリング

アニメーションのスタイルとストーリの外観のペアリングを行いましょう。提供されているウェブストーリーのアニメーションライブラリを使用して、コンテンツから注意をそらすことないスタイルと強度の組み合わせを見つけてください。

さらに食欲を与える

サードパーティコンテンツの埋め込み、追加情報の添付、および新しい場所へのリンクなどにより、トピックをさらに探るための手段を提供しましょう。

戦略的な埋め込み

埋め込みは、関連性があり、好感が持てるように政治された場合に、さらなる次元を提供します。関連するコンテンツを埋め込みとともに含めることで、ストーリーとの統一感を持たせることができます。埋め込みのインタラクティビティを有効化する必要がある場合があります。

やるべきこと	やってはいけないこと
このページの埋め込みは、ほかのレイアウトに溶け込んでいます。見出し、日付、および背景がビジュアル性を高めています。	ページに埋め込みだけを配置すると、未完成でストーリー全体に溶け込んでいないように見えます。

追加コンテンツを添付する

関連コンテンツを添付に追加して、ウェブストーリーをシンプルに維持しましょう。こうすることで、ストーリーをさらに掘り下げて読みたいと思う読者はそうすることができます。追加コンテンツが関連ページに添付されていれば、読者はストーリー内を移動しやすくなります。

添付は、長文のテキストに使用できます。またはストーリーにハイライト映像が含まれる場合、全映像を添付として含めることができます。

新しい場所へのリンク

ウェブストーリーページのあらゆる場所にリンクを追加することができます。リンクをタップするとツールヒントが表示され、ユーザーにリンクがどこに通じているのかを知らせることができるため、ストーリーから移動する前に、アクションを確認させることができます。

やるべきこと	やってはいけないこと
このページのリンクは明確に示されており、関連するコンテンツで囲まれています。ストーリーのナビゲーションに干渉しません。	このページのリンクはナビゲーションを完全にブロックしてしまっています。読者は、前のページまたは次のページに簡単に移動することができません。

サイズ、場所、およびリンクが表示される頻度については、戦略的に検討するようにしてください。タップ可能な要素が多すぎれば、ナビゲーションがわかりにくくなり、読者に葛藤が生まれてしまいます。

コーディングまたは作成

ウェブストーリーは、ゼロからハンドコーディングするか、作成ツールを使って構築することができます。

ウェブストーリーをハンドコーディングする場合は、AMP フレームワークを使ってゼロから構築することになります。まずは、初めてのウェブストーリーを作成するから始めてください。ウェブストーリーが完成したら、有効な AMP であることを確認しましょう。AMP Validator を使用してテストすることができます。詳細は、ウェブストーリーの技術情報を参照してください。

• Written by @CrystalOnScript