ストアのアバブザフォールドを設定・最適化する
ストアとは、ブランドや商品を表示できるAmazon内の厳選されたリンク先です。各ストアには、ブランドの商品を紹介し、ショッピング体験を向上させる、さまざまな機能を含めることができます。この記事では、ストアの「アバブザフォールド」セクションについて、重要である理由と役立たせる方法について説明します。
印刷や記事の世界では、「アバブザフォールド」という用語は、ニュースレター刊行物の上部、または新聞では実際に折られた紙面の上にあるコンテンツのことを指して使われます。デジタルの場合(今回の場合はストア)、この用語は購入者が最初にページを訪問したときに画面上ですぐに目にするコンテンツを指します。
アバブザフォールドは、ブランドや商品を紹介する機会であり、お客様によい第一印象を与えるのに役立つ場所でもあります。また、サイトで購入者がほとんどの時間を過ごす場所でもあります。
ストアのアバブザフォールドの主なコンポーネント

- ヒーロー
- ロゴ
- ナビゲーションバー
- タイルセクション
ヒーロー
ヒーローは、各ページの上部に表示されるビルボードディスプレイで、ブランドを紹介し、詳細を確認するためにスクロールを続けるようお客様を促すのに役立つ理想的な場所です。

ロゴ
これは、ブランドのロゴを表示するように設計されたウィジェットで、ナビゲーションバーにあります。

メニューまたはナビゲーションバーは、ストア全体で購入者の過程を案内するマップです。

タイルセクション
ナビゲーションバーのすぐ下にあるタイルは、ブランド独自の販売プロポジションや、競合他社と差別化を図れる、ブランドや商品が提供する特有のメリットを表示するのに最適な場所です。

ストアクリエイティブガイドラインを確認して、ページセクションとタイルの要件を把握してください。
効果的なアバブザフォールドセクションを設計するためのポイント
1.ブランドと商品の利点を紹介する
アバブザフォールドで魅力的なライフスタイル画像、色彩、動画などのデザイン要素を活用して、全体的なブランドアイデンティティを伝えましょう。

商品に焦点を合わせたアバブザフォールドセクションの場合、ヒーローは商品を表示し、ナビゲーションバーのすぐ下のタイルには、商品の実用性を説明するコピーとCTA(コールトゥアクション)が含まれている必要があります。現実的な環境で商品を表示しながら、購入までのクリック数を減らす、ショーケース画像を含めることもよい方法です。

商品をカテゴリー別に分けることにより、ストアのページとサブページを確立して整理し、お客様の負担を軽減することができます。カテゴリーページは、お客様がストアを閲覧する大きな動機となります。このため、少なくとも3つのページがあるようにすることをお勧めします。
ナビゲーションバー用にカテゴリーを作成するときは、お客様を圧倒させないよう、タイトルをできるだけ短くしてください。カテゴリーのタイトルが長いと、表示されるカテゴリー数も少なくなります。
モバイルでは、ナビゲーションバーの表示が異なることに注意してください。デスクトップでは、ナビゲーションバーは水平方向にレンダリングされます。モバイルでは、ストアのすべてのページとサブページを表示する垂直のドロップダウンメニューとして表示されます。

3.要素の詰め込みすぎを避ける
ヒーローとタイルセクションにデザイン要素やテキスト要素を追加しすぎないようにしましょう。ストアの見た目がスッキリしているほど、より効果的になります。ヒーロー内の不要なテキストやナビゲーションバーの下のタイルなど、メッセージやショッピング体験から注意を奪う可能性のある要素を削除してください。

4.すべてのテキストが判読できる
優れたカスタマーエクスペリエンスを維持するには、ヒーローとタイルのロゴとテキストが読みやすくなっているかを考慮しましょう。
ロゴに小さなテキストがあると、特にモバイルデバイスでは読みにくい場合があります。デスクトップで読みにくいテキストは、モバイルではほぼ確実に判読できません。この場合、ロゴはヒーローにのみ配置し、ナビゲーションバーで非表示にすることを検討してください。
