ECサイトは現物の商品を売っている企業にとって、大きな利益を見込めるチャネルの1つです。

サイトのユーザビリティを向上させることで売り上げやCV数の向上を期待できます。

ECサイトにおいてユーザビリティが重要な理由、ユーザビリティの高いWebサイトが持つ特徴を把握しましょう。

満足度が高く利益につながりやすいECサイトを制作するためのポイントや、ユーザビリティ向上に当たる注意点も解説します。

ユーザビリティの意味

「ユーザビリティ（usability）」は直訳すると「使いやすさ」という意味の単語です。

サイトやアプリの制作においても単に使い勝手のよさと解釈している人がいますが、厳密な定義は違います。

ISO（国際標準化機構）によると、特定の状況下で指定された目的の達成に使われるときの有効性や効率・満足度を示す言葉です。

ECサイトやネットショップであれば、商品を買うためにサイトに訪れたユーザーが快適に商品を購入できるかを表します。

Webサイトにおけるユーザビリティを考えるうえでは、消費者の状況に応じたUX（ユーザーエクスペリエンス）が重要です。

ECサイトにおけるユーザビリティの重要性

ネットショップをはじめとしたEC（電子商取引）を利用する顧客の特徴として代表的なのが、「利便性を求める心理」です。

ユーザーが時間や手間をかけずに目的の商品を購入できればリピート率も期待でき、売り上げの向上を見込めます。

しかし現在は多くのECサイトが似たようなジャンルでしのぎを削っている時代です。

初めてサイトを訪れたときに使いにくいと感じた消費者の多くは、購入に至らず他のECサイトに流出してしまうでしょう。

すでに自社のECサイトを利用していた顧客も、より効率よく買い物ができて満足度の高いECサイトに流れる可能性があります。

サイトを立ち上げる場合も既存顧客からの売り上げ向上を図る場合も、ユーザビリティの向上がライバルに差を付けるカギです。

 

ユーザビリティの高いWebサイトの特徴

効率的に目的を達成できて満足度の高いWebサイトには共通した特徴があります。

ユーザビリティの高いサイトが持つ特徴を4つ押さえて、自社のECサイト制作・改善に生かしましょう。

基本の要素を整えるだけでも使い勝手がよくなり「売れるECサイト」に近づきます。

フォントが見やすい

Webサイト内のコンテンツを構成するのは基本的にほとんどが文字です。

訪れたユーザーが簡単に情報をキャッチできる優良なサイトでは、見やすいフォント設定を行っています。

シンプルで可読性が高い種類のフォントが使われていると、テキスト部分の内容がすんなり頭に入ってくるでしょう。

Webサイトで使われるフォントとして代表的なのは、メイリオや游ゴシック・ヒラギノ角ゴシックなどです。

フォントサイズも小さくしすぎず適宜空白行を入れることで、さらにテキストの読みやすさを向上させています。

ナビゲーションが固定化されている

ナビゲーションが固定された設計は、ユーザーが取りたい行動をサポートするために必須です。

多くの人に愛用されているWebサイトでは、ヘッダーやフッターのロゴからトップページにたどり着けます。

上下にスクロールするサイトの場合、各種サービスを案内するナビゲーションバーも固定するのが基本です。

ページ内を移動しても必要な場所にアクセスできる設計のサイトは、ユーザビリティが高いと判断できます。

特にECサイトでは消費者のページ遷移が多くなるため、ナビゲーションの固定は利便性に直結するでしょう。

各種デバイスに対応している

近年はスマホの普及率が上がりWebサイトを訪問する人が使うデバイスの種類が増えました。

ユーザビリティの高いサイトに見られる特徴の1つが、どのデバイスからでも見やすい設計です。

コーディングをする際にレスポンシブデザインを採用すると、デバイスの画面サイズに応じた表示が実現できます。

レスポンシブに対応しているサイトではスマホで文字が小さくなりすぎる心配がありません。

デバイスの種類別にページの幅を決めていれば、スマホで横スクロールしなければならないといった手間もなくなります。

デザインに統一感がある

サイト全体で統一されたデザインもユーザビリティの高いサイトが持つ特徴です。

コンテンツごとにデザインの違いがあるとユーザーが混乱しやすく、使い勝手が悪くなってしまいます。

多くのユーザーを集めるWebサイトでは各ページでデザインを統一しているのが一般的です。

特にリンクテキストは一目でページが遷移すると分かるように、どのサイトでもスタイルを統一しています。

ECサイトであれば購入やお気に入りへの追加といったボタンの位置も、全ページでそろえたい要素です。

 

ユーザービリティテストで問題点を確認

自社のECサイトでユーザビリティ対策が正しくされているのか判断するには、「ユーザビリティテスト」が有効です。

CV数や直帰率といった定量的なデータだけではユーザビリティを測れません。

ユーザビリティテストは「ユーザーテスト」とも呼ばれており、第三者から協力を得て行います。

利用者の生の声からサイト設計やサポートに関する不満を把握できるのが、ユーザビリティテストを行うメリットです。

大まかには次のような手順でテストを実施します。

1. モニターの選出
2. シナリオの作成
3. ユーザビリティテストの実行

モニターは5名ほどで十分なデータを得られるため、テスト実施の目的を考えて候補者を絞りましょう。

シナリオとは「サイトを訪れてから商品を探すフロー」「カートに入れてから決済までのフロー」などです。

細かく指定しすぎずモニターの行動にある程度自由度を持たせた方が、リアルな結果を得られます。

テストの結果と定量的なデータを組み合わせて、サイト改善の施策を考えましょう。

 

ECサイト制作の事例はこちら

 

ECサイトのユーザビリティを考える際のポイント

ユーザビリティが高いWebサイトに共通するポイントと併せて考えたいのが、ECサイト特有の特徴です。

どのようなポイントを押さえておくとユーザーの利便性・満足度の向上につながるかを見ていきましょう。

ファーストビューの印象は良いか

「ファーストビュー」とは消費者がサイトを訪れて始めて見る画面です。

ページを遷移したりスクロールしたりせず目に入るサイトの印象は、離脱率に大きく影響します。

ファーストビューでユーザーが判断するのはサイトの使いやすさや訴求力です。

フォントの設定やレイアウト・アピールしたい商品の情報など、訪問直後に見えるデザインに気を配りましょう。

十分に自社のECサイトの魅力を伝えるにはキャッチコピーも重要です。

社内にコピーを作れる人材がいないのであれば、外注も活用して消費者を引きつける文言を考える必要があります。

ユーザーの動線を考えているか

ECサイトを訪れるユーザーの行動は状況によって異なります。

同じカテゴリーの商品を検索する・類似したアイテムを見に行くなど、動線を意識したデザインを取り入れましょう。

例えば「2カラムレイアウト」では検索結果で表示される一覧の横に、カテゴリーを選べるサイドバーの表示が可能です。

ユーザーは検索した商品の一覧に欲しいものがない場合、サイドバーから別のカテゴリーに移動できます。

ECサイトはコラム型コンテンツなどのWebサイトに比べて情報量がかさみがちです。

動線を考えた設計をすることでユーザーは必要な情報にアクセスでき、満足度が高まります。

商品を探しやすいか

ECサイトを訪れるユーザーのゴールは欲しい商品を購入することです。

目的となるアイテムを簡単に探し出せなければ、満足度が上がらないばかりか利用されなくなる可能性もあります。

サイト設計をする際は「商品の探しやすさ」を重要視しましょう。

多様なジャンルのアイテムを扱っている場合は、まずジャンルごとの分類が欠かせません。

カテゴリーごとに陳列棚へ商品を並べていくイメージで整理を進めます。

任意のワードで検索されたとき表示される一覧では、アイテムの情報を記載するフォントサイズも大切です。

その商品が何なのかが分かる文言は大きめに・詳しい情報は小さめに設定すると、目的の商品を見つけやすくなります。

 

ECサイトのユーザビリティ向上に不可欠な要素

実際にECサイトを設計したり改善したりするとき、必ず考えたい要素が4つあります。

ユーザビリティを考えるポイントと絡めてそれぞれの項目を見ていくと、利益が上がるECサイトを作れるでしょう。

各要素がなぜ重要なのかも理解していれば対策の方向性が定まりやすくなるはずです。

サイト内検索機能

ECサイトを訪れるユーザーのほとんどが検索機能を使うといっても過言ではないでしょう。

フリーワードでの検索結果には商品の一覧だけでなく、何件ヒットしたのかという情報も必要です。

同じワードでも絞り込みや他のジャンルでの検索ができる機能もあると、目的のアイテムにたどり着きやすくなります。

欲しい商品の情報にアクセスできなければ消費者のストレスがたまり、ユーザビリティも下がってしまう点に注意が必要です。

すでにECサイトを運営している場合も定期的にテストを行い、検索機能に問題がないかをチェックしておきましょう。

簡潔な購入プロセス

ECサイトで売り上げを向上させるカギは「ユーザーが購入に至るまでのハードルを下げること」です。

カートに商品を入れてから購入確定までのプロセスが複雑だと、面倒に感じて買うのをやめる人が増えます。

ポイント使用や配送方法の指定などユーザーにとって必要な項目は入れなければなりませんが、その他は最小限にすべきです。

購入手続きに入る前にユーザーが目にする価格情報も、離脱を防ぐために重要なポイントになります。

送料や手数料などが追加され購入を決めたときより合計金額が上がれば、高いと感じて購入をやめる人もいるでしょう。

最初から送料込みなどトータルの料金を明示した方が簡潔であり、スムーズな購入につながります。

分かりやすい商品情報

ECサイトを訪れるとき欲しい商品が最初から決まっていて、詳しい情報を知っている人は多くありません。

サイト内の情報だけでどのようなアイテムなのか把握できるように、分かりやすい商品情報の記載を心掛けましょう。

商品に関する情報や魅力・注意点はもちろん、送料や取得できるポイント・届くまでの日数といった付加情報も欠かせません。

アイテム紹介のページにまとめて記載すると、購入前に必要な情報を1度で得られます。

また自社からリリースしているアイテム以外を売る場合は、公式情報をしっかり調査したうえでの記載が必要です。

魅力的な商品画像

優良な商品をそろえていてもサイト上に表示される画像に魅力がなければ、ユーザーの購買意欲をかき立てられません。

商品紹介には画質がよく魅力的な画像を用意する必要があります。

例えばアパレルブランドのショッピングサイトなら、服単体の写真だけでなくモデルの着用画像も必要です。

アイテムのアピールポイントが存分に伝わるよう、モデル選びや角度の調整をして魅力的な商品画像を撮影しましょう。

ただし画面上の印象をよくするために色相を加工しすぎると、実際の色と違ったというクレームにつながります。

商品そのものの魅力を引き出す画像の作成が基本です。

 

ECサイト制作の事例はこちら

 

優良ECサイトの例

自社でECサイトを運用するに当たって成功を収めたサイトの事例は有用なソースです。

実際に多くのユーザーを集め売り上げを伸ばしている優良ECサイトを3つ確認して、対策に役立てましょう。

自社で取り入れられる施策があるかどうかもチェックしておくと、ユーザビリティ向上の施策を決定しやすくなります。

GU

GUはUNIQLOの運営企業ファーストリテイリングが展開する、低価格が売りのファストファッションブランドです。

実店舗で取り入れる戦略の元にもなっている自社ECのサイトには、シンプルで使いやすい工夫が盛り込まれています。

シングルカラムで表示されるファーストビューでは新商品の情報をピックアップしており、新鮮な印象で訪問者を逃しません。

ヘッダーにはロゴの横に「WOMEN」「MEN」「KIDS・BABY」とカテゴリーが分かりやすく表示されています。

パソコン版では検索フィールドを押すとトレンドのハッシュタグが出る仕様です。

さらに店舗情報を検索できるボタンもヘッダーに設定されていて、他のチャネルと連携する工夫も取り入れられています。

ZOZOTOWN

ZOZOTOWNは若い世代を中心に人気を集めている、女性向けアパレルのECモールです。

自社ECよりも情報量が多くなりがちなファーストビューも、2カラムで整理された印象を作っています。

大きなカテゴリーが設定されたヘッダーの下に、先行予約やキャンペーンなど注目のトピックを表示しているのが特徴です。

タイムセールの情報・クーポン情報も目に入りやすい場所に配置されています。

トップページで気になる情報をチェックした後、ブランドやカテゴリーに移動できるサイドバーも魅力です。

動線を考慮した案内がユーザビリティを高め、アパレルECモールで大きなシェアを誇る売り上げにつながっています。

THE COFFEESHOP

THE COFFEESHOPは日本だと珍しいスペシャルコーヒーの専門店です。

オンラインショップでも日常的に楽しめる自家製焙煎豆から、ギフト用のアイテム・定期便まで幅広いサービスを扱っています。

商品紹介だけでなく「コーヒー診断」など、ユーザーの興味を引くコンテンツは他のECサイトには少ない特徴です。

ファーストビューはシングルカラムながらも、複数のジャンルから商品を探せる利便性を備えています。

フリーワードでの検索機能はありませんが、カテゴリーに移動すれば目的の商品が見つけられるため十分でしょう。

定期便のページでは開始日程や配送スケジュールといった重要事項を上部に置いています。

コース選択の部分でも価格はもちろん目安量やおすすめしたい層も記載されており、コースを選びやすい仕様です。

ユーザビリティ向上に取り組む際の注意点

サイトの外観は自社ブランドのイメージを大きく左右するため、美しいデザインは重要です。

しかしデザイン性を意識しすぎて視認性が悪くならないように注意しなければなりません。

ヘッダーやナビゲーションバーに使うフォントも、中身のテキストと同じく見やすい種類を選ぶ必要があります。

配色も視認性を意識して決めましょう。あまりにもカラフルだと目移りして目的の情報へアクセスしにくくなります。

かといってシンプルさを追求するあまりインパクトの薄い色ばかりを使うのもおすすめできません。

商品情報をメインとしつつ、重要な部分には目立つ色を使うといったバランスが重要です。

自社内でサイトをデザインするのが難しい場合は、目指すイメージを決めたうえで外注も活用しましょう。

 

ECサイトのユーザビリティで悩んだら

売り上げ向上を図るうえでECサイトのユーザービリティ向上の施策は欠かせません。

しかし自社の強みを最大限に生かすサイト設計と、ユーザーの利便性を高める作り方の両立は簡単ではありません。

ユーザビリティに関する悩みがあるならコンサルティングサービスの活用がおすすめです。

デジマクラスではECサイトの開設や既存サイト改善に当たって、ユーザビリティ向上の相談を受け付けています。

「売れるECサイト」を実現するための施策を一緒に考えていきましょう。

 

ECサイト制作の事例はこちら

 

まとめ

インターネットの普及率が上がった現在、ECサイトは販売利益を増やすために欠かせないチャネルです。

ユーザビリティを高めることで競合との差別化を図れ、新規顧客の獲得や既存顧客の囲い込みにつながります。

効率よく目的を達成できるWebサイトの特徴やユーザビリティ向上のポイントを押さえ、自社のECサイト運営に生かしましょう。

よりスピーディーにユーザビリティを高めたいなら、成功事例やコンサルティングサービスを活用するのがおすすめです。