ECサイトを立ち上げる、あるいは改善するとき、ユーザーが使いやすく商品の魅力が伝わるデザインにすることが大切です。

そこでこの記事ではECサイトの「デザインのチェックリスト」をご紹介します。

この記事を読んだ人がよくダウンロードしている資料

ECサイトのデザイン 20のチェックリスト

まずはチェックするべき20の項目を「デザインの方向性」「ヘッダー」「サイドバー」「トップページ」「カテゴリーページ」「商品詳細ページ」「カートページ」「ランディングページ」「スマホサイト」の9つに分けて確認してみましょう。

• デザインの方向性
  • ベースにしたい色は決まっているか
  • フォントは決まっているか
• ヘッダー
  • サイトロゴは入っているか
  • 主要ページに誘導するメインメニューは入っているか
• サイドバー
  • 商品カテゴリーはあるか
  • キャンペーンページへの誘導はあるか
• トップページ
  • 何を販売しているサイトかひと目で分かるか
  • 検索窓は置かれているか
  • 商品に合ったレイアウトになっているか
• カテゴリーページ
  • おすすめ商品は掲載されているか
  • 新商品、セール商品は分かりやすくなっているか
• 商品詳細ページ
  • ユーザーにとって必要な情報が網羅されているか
  • 関連商品へのリンクはあるか
  • カートボタンは分かりやすいか
• カートページ
  • 別ページへの誘導はないか
  • 不親切な表記はないか
• ランディングページ
  • 集客経路は明確か
  • 商品の紹介から購入までが1ページで完結しているか
• スマホサイトの構成を作る
  • 文字サイズは適切か
  • 必要な情報は掲載されているか

１つひとつ確認してみましょう。

デザインの方向性

サイト全体に統一感が生まれるように、方向性を決めておきましょう。

• ベースにしたい色は決まっているか
  全体の色合いはサイトや商品の印象を大きく左右します。店舗や商品パッケージなどでベースとしている色がある場合は、それらの色をベースにサイトのデザインを作ることで統一感が生まれます。
• フォントは決まっているか
  フォントもサイトの印象に大きく関わります。大きく分けて明朝体かゴシック体かに分かれます。

ヘッダー

ヘッダーはサイト全体に表示れるうえに、サイトにアクセスした人の全員に目に入る部分です。ユーザーが使いやすいサイトになるように、必要な情報をしっかりと選んで配置しましょう。

• サイトロゴは入っているか
  ヘッダーにはサイトのロゴを入れるのが基本です。全ページのヘッダーにロゴを表示しておくことで、どのページからアクセスしてきた人にも必ずサイトのロゴを見てもらうことができます。あわせてメルマガなどのトップにも表示することでユーザーにサイトを覚えてもらえるようにしましょう。
• 主要ページに誘導するメインメニューは入っているか
  ロゴと同じく、サイトのヘッダーに主要ページへのリンクをおいておくことで、どのページからも簡単に各ページに移動することができます。ただしリンクが多いとヘッダーがごちゃごちゃしてしまうため、ページを整理して必要最小限のページにしぼりましょう。

サイドバー

サイドバーはサイトのデザインにもよりますが、多くのサイトで全ページに常に表示しています。ヘッダーと同じく、ユーザーが素早く必要な情報にアクセスするのを助けるような情報を配置しましょう。

• 商品カテゴリーはあるか
  取り扱っている商品の種類が多い場合、ユーザーはカテゴリーごとに商品を探すことが多いです。サイドバーに商品カテゴリーの一覧を表示しておくことでどのページからでも商品が探しやすい状態にしておきましょう。また、カテゴリー名の横にカテゴリーごとのアイコンを表示しておくと購入率上がるとされているため、できるだけアイコンも表示するようにデザインしましょう。
• キャンペーンページへの誘導はあるか
  サイドバーは基本的にサイトの全ページに表示されるため、キャンペーン情報などの重要なお知らせが表示しやすいデザインにしておくのがおすすめです。

トップページ

トップページはサイトに興味を持ってくれた人の多くがアクセスするページです。サイト・商品の魅力がしっかり伝わるデザインにしましょう。

• 何を販売しているサイトかひと目で分かるか
  サイトのキャッチコピーや取り扱い商品など、どんな商品を取り扱っていて、サイトの強みが何なのか一目で分かるようにしておきましょう。
• 検索窓は置かれているか
  ファーストビューに検索窓を置くと購入率が高くなるとされています。実際、ECサイトにアクセスする人は商品を探している場合がほとんどなので、すぐに検索できるほうがユーザーにとって使いやすいはずです。
• 商品に合ったレイアウトになっているか
  トップページの構成は取り扱っている商品に合わせましょう。大きく分けると「単一の商品を取り扱っている」のか「様々な商品を取り扱っている」のかによってレイアウトは異なります。取り扱っているのが単一の商品であれば、商品の特徴やお客様の声などをトップページで説明しましょう。様々な商品を取り扱っている場合はおすすめ商品や新着商品、セール情報などが分かりやすいレイアウトにしましょう。

カテゴリーページ

カテゴリーページは商品を探している人がアクセスするページなのでとても重要なページです。ユーザーが求めている商品を素早く見つけられるようなデザインにしましょう。

• おすすめ商品は掲載されているか
  おすすめの商品や売れ筋の商品が一目で分かると、ユーザーが商品を選びやすくなります。
• 新商品、セール商品は分かりやすくなっているか
  新商品、セール商品「NEW」や「SALE」などをつけておくとユーザーが商品を見つけやすくなります。

商品詳細ページ

商品詳細ページは商品の魅力を伝え、購入するかどうかを決めるための重要なページです。

• ユーザーにとって必要な情報が網羅されているか
  どんな商品なのか、使用感はどうか、実際に購入したユーザーの声など、ユーザーが購入を検討するうえで必要だと思われる情報を網羅したページにしましょう。
• 関連商品へのリンクはあるか
  アクセスしたページの商品にあまり興味がなかった場合も、関連商品へのリンクを貼っておくことでユーザーの離脱を防ぐことができます。同じカテゴリーの人気商品や、よく一緒に購入されている商品などのリンクを貼っておきましょう。
• カートボタンは分かりやすいか
  購入しようとしているユーザーにとってカートボタンが分かりにくいのは非常にストレスになります。できるだけ目立つ色で目につくところにカートボタンを設置しましょう。

カートページ

カートページにアクセスするユーザーは、すでに欲しい商品が決まっています。スムーズに決済が進められるようなシステムとデザインになるようにしましょう。

• 別ページへの誘導はないか
  カートページでの離脱を防止するためには、別ページへのリンク等は外しておきましょう。
• 不親切な表記はないか
  ユーザーに分かりにくい表記や不安を感じさせる要素があると、購入をためらってしまう原因になります。

ランディングページ

ランディングページを作成するかどうかは取り扱っている商品や企業ごとの戦略によりますが、広告の運用を行う場合や、販売に力を入れたい商品、キャンペーンがあるときには、専用のランディングページの作成も検討してみましょう。

• 集客経路は明確か
  ランディングページを作成してもページへの流入がなければ意味がありません。Web広告と併用する一般的ですが、その他の経路でもかまいませんので、必ず事前にどのような手法で集客するのかを決めておきましょう。
• 商品の紹介から購入までが1ページで完結しているか
  ランディングページでは他ページに誘導せず、ページ内で購入まで完結させましょう。そのほうが購入に繋がりやすく、どれくらい購入につながっているかの分析もしやすくなります。

スマホサイト

スマホでアクセスした場合のサイトのデザインにも注意しましょう。ただし、サイトのテンプレートなどを使用する場合は、自動でスマホ用にレイアウトを調整してくれることが多いので、サイト制作の進め方に合わせてスマホ用のデザインを作成するかどうかを検討しましょう。

• 文字サイズは適切か
  スマホはパソコンに比べて目の近くでしようするため、文字サイズは小さめに設定することが多いです。レイアウトとの兼ね合いもありますが、読みやすさを最優先に適切な文字サイズに設定しましょう。
• 必要な情報は掲載されているか
  スマホ画面は小さいため、必要に応じてコンテンツを省略する場合があります。このときに会員登録ボタンやトップページへのリンクなど、本来必要な情報まで消してしまうことがあります。必要な情報がきちんと掲載されているか、デザインの段階でしっかりチェックしましょう。

まとめ

ECサイトの「デザインのチェックリスト」をご紹介しました。サイトデザインはユーザーの印象や使いやすさを大きく左右します。定期的に見直して改善していきましょう。

＼ この記事を読んでいる方におすすめ！ ／