視覚的階層は、ECビジネスにとって重要なウェブサイトデザインの１要素です。それは、レイアウトやデザインを構造化して、ユーザーエクスペリエンスの入り口を強調し、最適化したナビゲーションフローを作成する方法を指します。
サイトページに重要なデザイン要素をいくつ並べたとしても、それらを効果的に整理しない限り、ほとんど役に立ちません。以下に、より多くの訪問者を顧客に転換できるよう、視覚的階層を改善するための主要な戦略を説明します。
まずはカスタマーエクスペリエンスにおける雰囲気を醸し出すのに有効な、色彩心理学を理解しましょう。特定の色の組み合わせが視覚的階層構造の効果を高めたり、逆に損ねる場合があることも知っておかなければなりません。
色のコントラストは、訪問者の注目を集めて、強調したい要素に向かって目線を自然に誘導するのに有効です。ここで具体的な色の組み合わせにまで言及するのは避けますが、たとえばContent Creator Appなどの優れたツールを利用すれば、2〜3色の美しい色彩配合を作成する方法について知ることができます。
ユーザーエクスペリエンスの入り口を明示する視覚的デザイン要素の1つが「強調」です。色、サイズ、またはその両方を使用してウェブページのデザインを強調することができます。
たとえば、暗い背景のページの最前面に、1つだけ明るいアイテムがあると、人の目はその明るい要素に引き付けられます。もしページ上にユーザーの視線が向かう複数のアイテムがある場合は、1つのアイテムのサイズを大きくすることも「強調」の意味で有益です。
配列やリズムは、ページ上のある要素から次の要素に進むようにユーザーの動きを作るデザイン要素です。
典型的なEC商品のランディングページにおける主要要素と言えば、商品の写真、説明、仕様、レビュー、お客様の声などが含まれます。多くの場合、高品質の画像が関心と注意を得る出発点になります。Nielsen Norman groupによると、米国の人々はFパターンまたはZパターンでウェブページに目を通す傾向があります。これらのパターンは他の多くの国でも一般的ですが、読み方向が異なる文化圏では多少の差異があります。
余白もデザインの背景と考えてください。画家は作品を描くときにキャンバスが必要ですが、ウェブページ作成者も同様です。
重要な要素に目を向けてもらうためには、適切な余白が必要なのです。コンテンツと画像を無造作に押し込めば、読者は閉口してそのページから目を離してしまうでしょう。
セラーがウェブページ上の視覚的階層を最適化するために取ることができる最も効果的なアプローチは以上です。実店舗で、商品のパッケージが購入行動において重要な役割を果たすのと同様に、ネットショップでの質の高い視覚化は、訪問者の注意を引き付け、購入に向けたステップの前進に貢献します。