より多くの顧客と売上を獲得するためのホームページに最適なレイアウト設計階層

オンラインストアをレイアウトすると、さまざまな疑問が生じます。 あなたのホームページは、 あなたのオンラインストアで最高のもの、画像スライダー、ショッピングカートボタン、製品のサムネイルとボタン、メールマーケティングのサブスクリプションフォームなどのコンポーネントを使用します。

それぞれが不可欠ですが、ホームページがサイトで最も頻繁にアクセスされるページであることを考慮して、より多くの顧客を獲得するためにそれらをどのように編成しますか? 最もクリエイティブで成功したeコマースストアのいくつかを見ると、標準のレイアウト階層がわかり、これらの各コンポーネントがホームページのどこに配置されるかを示すテンプレートのようなものが生成されます。

ホームページの上部から始めて、下に向かっていきます。 より多くの顧客を獲得するためにホームページの最適なレイアウト設計階層について学ぶために読んでください。

左または中央のロゴ(およびヘッダーコンポーネント)

ホームページのヘッダーもサイト全体に及ぶため、これらのモジュールについては慎重に検討する必要があります。 ヘッダーの目的は、サイトの内容をすばやく人々に示し、コンテンツを検索するための最も高機能なボタンとフィールドのいくつかをユーザーに提供することです。

ロゴ

ロゴの場所

ロゴから始めます。 うまくデザインされたロゴはここで最も価値がありますが、ヘッダーの左上隅の中央に配置されることを確認する必要があります。 人々は左から右に読み、ロゴは通常、サイトが提供するものについてのアイデアを与えます。 ロゴで会社をすぐに説明できない場合は、ロゴの下または横に短いキャッチフレーズを含めます。

検索バー

検索バーの重要性

各eコマースサイトは、それ自体が小さな検索エンジンです。 顧客のXNUMX人が彼の名前をスティーブンと呼び、ネックレスを探してホームページにアクセスした場合、彼は必要なものを見つけるためのオプションをいくつかしか持っていません。

XNUMXつ目の効率の悪い方法では、メニューナビゲーションカテゴリのXNUMXつをクリックします。 XNUMXつ目の方法は、通常、ユーザーを適切なページにすばやく移動する方法で、検索バーです。 検索バーがスライダーの下に隠れている場合、または検索バーがサイドバーに沿ってどこかに配置されている場合、単純な検索を実行するためだけに、顧客に混乱をふるいにかけることを強制します。

これをヘッダーに配置して明確にします。

ショッピングカートのアイコンとボタン

2015 06-01-11.25.00 AMでのスクリーンショット

非常に多くのオンラインストアがショッピングカートアイコンをサイトの右上隅に配置しているので、ほとんどの顧客がショッピングカートの内容を見つけるためにそこを直視していると想定できます。

残念ながら、通常、ショッピングカートモジュールに関して、テーマやeコマースプラットフォームが提供するものは何でも手に入りますが、デザインを変更するための市場にいる場合のガイドラインは次のとおりです。

  • ショッピングカートアイコンを含める
  • サイトの任意のページからのワンクリックチェックアウトを提供するリンクまたはアイコンを組み込む
  • ショッピングカート内のアイテム数を示す数字を表示します

配送のお知らせ

2015 06-01-11.25.09 AMでのスクリーンショット

緊急性を生み出す美しい方法は、ユーザーが一定量の製品を購入した後、送料無料またはその他のインセンティブを提供することです。 このようなものを戦略に含めることを選択した場合、ウェブサイトのヘッダーで発表を行うことが不可欠です。

上のスクリーンショットは、Kutoa会社があまり多くのスペースを取らずに配送ポリシーを説明する方法の良い例を示しています。

季節のバナー

これは上記で説明した配送ポリシーに似ていますが、季節限定のプロモーションや特別セールを開催している場合、このことについて人々にどのように期待しますか? ヘッダーに小さなプロモーションバナー用のスペースを確保します。 このように、休日が巡ってきたら、グラフィックをドロップし、プロモーションが終了するまでそのままにしておきます。

ログイン/登録ボタン

これはeコマースホームページの主力のXNUMXつです。 ログイン/登録リンクをヘッダーに明確に表示します。 それは顧客のためのシームレスなチェックアウトプロセスを作成し、顧客情報の一部を収集できます。

適切なタブを備えたナビゲーションメニュー

メニュー項目は、実行するビジネスの種類に完全に依存しますが、ホームページ階層に含める必要があることは明らかです。 最善の戦術は、顧客が最初に移動する場所を書き留め、それに基づいてメニュー項目を選択することです。 主にシャツを扱っていますか? 最初のメニュー項目のXNUMXつを、最も人気のあるシャツへの直接リンクにします。

アクションとボタンがオーバーレイされた画像またはスライダー

CTAスライダー

画像スライダーはヘッダーの真下にあり、商品の素晴らしい写真を共有する方法として機能します。 ただし、画像のみのスライダーは役に立ちません。 人気の高い商品やプロモーションにユーザーを誘導する行動を促すフレーズやボタンを組み込みます。

スライダーにXNUMX枚またはXNUMX枚のスライドを含め、独自の戦略に応じてスライドを変更します。

製品のサムネイルグリッドまたはスライダー

スライダーまたはグリッドとしてのサムネイル

挽き目 Shopify ブログは選択肢が多すぎると顧客を混乱させる方法を説明しています、それらをあなたのウェブサイトを去るか、またはより少ない購入をするように押します。 ホームページでは画像スライダーのすぐ下に商品グリッドが必要ですが、XNUMXつまたはXNUMXつ以上のアイテムを詰め込むことについてXNUMX度考えてください。

メールマーケティングサブスクリプションフォーム

今後のプロモーションやニュースレターを送信するためのメールを収集することは、顧客を維持し、顧客を継続的に維持する最も簡単な方法のXNUMXつです。 これは、ニュースレターのサインアップがホームページのどこに位置するかという点で、人気のあるeコマースストアが異なる分野のXNUMXつです。 ただし、XNUMXつの結論は明らかです。人々にサインアップしてもらいたい場合は、ホームページにサインアップフォームを配置する必要があります。

最初の方法は、ヘッダーにあるサインアップフォームでユーザーをヒットすることです。 これは、ニュースレターが高品質のコンテンツを提供し、すぐにそれを宣伝することに恥ずかしさを感じないことを前提としています。
ヘッダーにサインアップを追加する

他のストアは、ニュースレターのサインアップフォームを共有するときにサイドバーまたはフッターを好みます。 オンラインストアでは、通常、フォームがページの下部近くに配置され、メールをあまり送信しないことがわかりました。 彼らは時々プロモーションを送信するためにメールを集めようとしているだけです。
2015 06-01-11.25.39 AMでのスクリーンショット

私のお気に入りのメール取得戦術はポップアップフォームです。このフォームは、ユーザーが数秒間サイトにアクセスした後に表示されます。 これらは通常、最も多くのサブスクリプションを生成し、顧客が見返りとして何かを受け取ったことを明確に示すことができます。
ポップアップ

サイドバーまたはグリッドベースのレイアウト?

サイドバーは、重要性の低いコンポーネントを統合するユニークな機会を提供すると同時に、それらに値する露出を提供します。 同様の方法は、グリッドレイアウトと呼ばれるものです。ここでは、ホームページ全体に、正方形のモジュールが互いに積み重ねられたやや市松模様のパターンが含まれています。

グリッドベースのレイアウト

サイドバーに含めるいくつかの固体コンポーネントは何ですか?

  • ブログへのボタンまたはリンク
  • プロモーションまたは季節のバナー
  • メディアリンク
  • ソーシャルモジュールまたはリンク
  • About usウィジェットまたはサイトの概要を説明する領域

最新のつぶやき

フッター

大部分の顧客はフッターに移動しませんが、重要であるが緊急性の低いリンクがいくつか必要です。

フッター

必要なアイテムのいくつかを忘れやすいので、完璧なeコマースフッターを作成するのは面倒な作業であることがよくあります。 ここにあなたが始めるためのリストがあります:

  • お問い合わせリンク
  • メールリンク
  • 電話番号
  • 注文状況リンク
  • FAQリンク
  • ソーシャルボタン
  • 保証リンク
  • プライバシーポリシーリンク
  • ブログリンク
  • 配送情報リンク
  • 情報リンクを返す
  • 企業情報リンク
  • 求人リンク

効果的なeコマースホームページ階層を生成することは芸術ですが、ほとんどの顧客をコンバージョンに導く領域を少し理解して理解することで、ホームページを活動のハブに変えることができます。 とはいえ、このリストに含まれる他のアイテムについて考えた場合は、コメントを残してください。

フィーチャー画像のカーツ クリスバニスター

カタリン・ゾルジニ

私はウェブデザインのブロガーで、数週間かけて苦労してこのプロジェクトを始めました。 最高のeコマースプラットフォーム 自分のため。 私の現在をチェック トップ10のeコマースサイトビルダー.