ECサイト作成講座(第4回)新規・リピーター向けにユーザビリティを考慮したサイト構築方法

前回までの講座では、ECサイト開店準備に関する項目についてご説明してきました。

前回記事はこちら:ECサイト作成講座(第3回)サイト名決定と運営形態の選定

今回の講座からは「ECサイト構築」に関する内容を詳しくご説明していきます。

ページ閲覧におけるユーザーの視覚的動向

どんなに魅力溢れるサイトを制作しても、ユーザーにとって不便で使いづらいサイトは直帰率を高めてしまい、コンバージョン率に大きな影響を及ぼします。

そのようなリスクを最小限抑えるためにも、サイト構成は第一にユーザビリティを考慮する必要があります。ユーザビリティを意識し、なおかつコンバージョンを高めるサイト構成を実現するため、視覚的動向の観点から適切なサイト構成についてご説明していきます。

サイトを訪問したユーザーは一定の視覚的動向を辿ってサイト内を巡回します。

■ファーストビューでは、最もアピールしたいことを置く
まず、画面のファーストビューとなるのは画面中心部です。この部分には、サイトで最も強調したい事項を意識して置くようにしてください。

■セカンドビューとなるグローバルメニューは分かりやすく
セカンドビューとなるのは、サイト上部に位置するヘッダー部分になります。ヘッダー部分にはサイト全体のイメージが掴めるように各コンテンツへのリンクをわかりやすく記載します。一般的には、サイトの各カテゴリへのリンクメニュー(グローバルメニュー)が配置されてくる場所です。

左上部にはロゴを設置し、必ずロゴにはアンカータグでトップページへのリンクを設定するようにします。

■Z型パターンの視点移動に沿ってコンテンツ配置
上記2つの要素を見た後、ユーザーは基本的に「Z型」に視点移動をさせていくと考えられています。(F型というパターンもありますが、基本的な流れは似ています)

そのため、Z型の視点移動の始まりとなっているサイト上部には、重要度やおすすめ度の高いコンテンツを配置しておくことが大切です。また、サイト下部のフッター付近には、全ページ共通となるショッピングガイドなどを配置するようにします。

このようなページ構成とすることで、ユーザーの視覚的動向に適応したアピールができると共に、SEOの観点からも検索エンジンはページの内容(ソース)を上から下へと読み込んでいきますので、各ページのオリジナル性が強調されSEO上位表示に有利な状況となります。

■リピートユーザーの視覚的動向は「一点集中型」
また、新規ユーザーとリピートユーザーの視覚的動向には大きな変化があります。

新規に訪問して来たユーザーは、商品・サービスについて「まず知りたい」とうニーズが高いため、基本情報や商品一覧など全体的な情報を見ます。

一方、サイトに何度か訪れているリピーターは、基本的な商品・サービス情報については把握しているため、「具体的に探して、買いたい」というニーズが高くなっています。そのため、商品カテゴリー、検索、おすすめランキングなどに視覚を集中させるという特徴があります。

トップページ構成とサイトの最適化

前項でご説明した、ユーザーの動向に適応するサイト構成とは別に、以下のような項目に関してもサイト設計段階で検討&対策しておく必要があります。中でもトップページはサイトの顔となる部分ですので、より慎重に構成を考えるようにしましょう。

■記載情報の選定(トップページ)
基本的なサイト情報はテキストにまとめ、アピールしたい項目に関しては画像を用いてデザイン化していきます。また、トップページは各ページへのアクセス起点(始まり)となる場合が多いので、記載する情報は厳選するようにしましょう。

トップページ記載の情報が多すぎるとユーザーを困惑させてしまい、少なすぎると情報の物足りなさやサイトの寂しさをユーザーに感じさせてしまいます。バランスが大切です。

■更新コンテンツの導入(トップページ)
定期的に更新が行える「お知らせ」や「新商品情報」などの更新コンテンツをトップページに導入することによって、ユーザーに対して「しっかり運営されているサイト」と認識させることが出来ます。更新性を感じさせることで、活気のある生きたサイトを演出することができます。

■ディスプレイ解像度の最適化(全ページ共通)
サイトの横幅サイズ(width)はユーザーが使用する利用環境を意識して決定します。現在では、1024×768px以上のディスプレイ解像度が主流となっていますので、それ以下の横幅に設定すると、両サイドの余白部分が大きく間延びしてしまいます。

ユーザーからのパッと見の印象が寂しくなってしまいますし、ユーザビリティの面からも好ましくありません。また、ホームページ全体の配置については基本的に「中央寄せ」が良いでしょう。

■フォントサイズの最適化(全ページ共通)
フォントサイズの最適化もユーザビリティを考慮したサイト構成において必須となる項目です。現在、フォントサイズの指定はpxを使った方法とemを使った方法がありますが、今後はemを使った指定が主流となってきそうです。

また、Wordpressでサイト制作を行う場合には、ブラウザや表示サイズに合わせてフォントサイズを自動最適化する「FitText」という便利なプラグインが便利でしょう。

まとめ

今回の講座でご説明したようなユーザビリティを意識したサイト構成は、つい後回しになってしまいがちでは無いでしょうか。しかし、最終的にホームページからの成約・売上アップにつなげていくためには大切な要素です。

集客対策やデザインに凝り過ぎる前に、ユーザー視点に立ち返ってサイト構成を考えていきましょう。

Photo : Tsahi Levent-Levi


著者: マケスタ運営スタッフ

マーケスタイル(通称:マケスタ)の運営事務局です。ホームページ運営に基礎から応用まで、役立つ内容を分かりやすくご紹介していきたいと思います。
また弊社では、Webから集客・売上アップに必要となる制作やコンサルティング業務なども行なっております。ご興味ありましたら下記のお問合せフォームよりご連絡ください。