今回は、ネットショップ（ECサイト）におけるウェブページデザインのポイントについてお伝えしていきます。通常のホームページ制作と通じるところもありますが、ネットショップの場合は、商品ページという特殊なページがあり、さらに最もページ数が多くメインコンテンツであるという特性を持っています。
そして、商品ページがもたらすコンバージョンがホームページの存在意義の根幹であることから、ネットショップのページデザインには工夫が必要です。
以前、「ウェブデザインについてはあまり触れない」と書きながら、またまたウェブデザインについての話題であることをご容赦ください…（「ウェブデザインについての手書きのすすめ」について→「ウェブデザインにも自然や手書きの要素を」）
ネットショップは、商品を販売することを目的としたサイトです。この特性を持ったウェブページデザインのポイントは「ページアクセスの直後の印象」によって、そのページを読み進めてもらえるかという点や商品購入に繋がるかといったポイント、そして商品の使用感などの臨場感の演出などだと考えています。
実際に商品を手にとって確認することができない「ネットショップ」だからこそ、通常の店舗販促以上の演出が必要になると考えることができます。
ECサイトのページデザインの特性
さて、一般的にブランディングを目的としたコーポレートサイト、ブランドサイトと、インターネット上の小売販売に特化したECサイト、ネットショップでは、全体的なウェブデザインやページデザインの特性が異なります。
ウェブのフィールド以外でも、メーカーと小売業では、建物の作りが違うようにやはりホームページ制作においても多少業種に合わせた仕様、デザインが必要になります。
企業の公式ホームページであれば、特に業種に合わせたWebデザインが必要ということもありませんが、ECサイトであれば若干そうした要素が必要になります。
ネットショップ・ECサイトの最大の目的は掲載商品を販売すること
ネットショップ・ECサイトの最大の目的は掲載商品を販売することです。
優れたデザインによって、ブランディングによる付加価値をつけるという面は極めて少なく、ユーザーに対して「伝える軸」となる面が異なります。メーカー直販サイトにおいても、掲載情報の工夫が必要になります。
単純に「キレイなWebデザインであれば物が売れるか？」ということを考えてみると、写真の綺麗さが若干きれいになったからといって、それで販売数が劇的に向上するとは考えられません。
そうしたWebデザインの「キレイ要素」よりも、販売につながる「設計」や「導線設計」という意味でのデザインのほうが重要になります。なお、こうしたデザインの考え方は、ネットショップでは顕著ですが、通常の企業の公式ホームページ制作でも同様に重要です。
商品購入に繋がること
ショップページの商品詳細ページに掲載する情報はすべて、最終的なコンバージョン、つまり商品購入に繋がるものでなくてはなりません。
ネットショップ（ECサイト）の存在意義は、そのネットショップで実際に商品購入が行われること以外にほとんどありません。
ネットショップが実店舗と連動している場合はまた少し取り扱いが異なりますが、「ネットショップ単体」の運営の場合は、店舗認知などが目的ではなく、商品のインターネット販売自体のみが目的であり、唯一のコンバージョンです。一般的な企業ホームページ制作におけるコンバージョンへの工夫とは大きく異なるものになります。
もちろんサイト構造としてECサイト全体の作りも、実店舗と同じように外観から内装、商品陳列、レジまでの誘導・決済方法など、すべての構造を考えて構築する必要があります。
商品購入に繋がるWebデザイン
この時に必要になるのは、それぞれの作りの美しさではありません。
商品購入に繋がるWebデザインが必要です。
特に商品ページに記載する内容、設置する画像のWebデザインについても、キレイさではなく「商品購入につながるような設計」を重点的に検討する必要があります。
ショップページのデザイン自体は極めて重要なものですが、「キレイに見えるデザイン」を重視して、それが売上に直接貢献する割合は極めて低いでしょう。
ページアクセスの直後の印象
ネットショップにおいて重要なのは、ページアクセスの直後の見た目のデザインです。商品詳細ページに移った時に最上部に表示される印象が最も重要になります。
そしてそれは美しさではなく、ファーストコンタクトの「アイキャッチ」として、ページ下部を読みたくなるような、商品の概要と質感が伝わる画像などです。
最初のわずか一秒程度で、掲載商品の詳細に関心を抱くことができるか、という点を重視してデザインする必要があります。
ネットショップの商品詳細ページのコンテンツヘッダー
ネットショップ（ECサイト）の商品詳細ページのコンテンツヘッダーにおいては、「読み進めてもらうためのデザインの工夫」をしていくことが重要になります。
こうしたコンテンツヘッダーでユーザーの関心を獲得することは非常に大切です。
ネットショップと実店舗との大きな違いとして、「すぐに離れることができる」というポイントがあります。「手に取る商品」と同じような表示ページをすぐに変えることもできますし、「お店」であるネットショップそのものからも離脱して別のネットショップに移ることもできます。
ウェブでの再検索によって、実際の店舗よりも短い時間で、他の店舗、他店舗の商品情報へとユーザーは移動していきます。
「商品を比較する」というユーザー行動が推測されるため、コンテンツヘッダーを見ただけですぐに比較の対象外とされてしまうような無機質なページデザインを避け、ユーザーの短時間での離脱を防ぐことがネットショップのデザインでは重要になるでしょう。
アイキャッチ画像やキャッチフレーズ
ベネフィットを伝えるためのアイキャッチ画像など、アイキャッチ性の高いページデザインやググッとそそるキャッチフレーズなどによって、ページの離脱を防ぐことがネットショップの商品ページでは重要になるでしょう。
商品ページにおいても、まずはページ上部が表示されるため、その下の本文を読み進めてもらえるようなページづくりが必要です。
キャッチフレーズなどの工夫
小売店舗などでは実店舗でもPOPなどの販促方法があるように、ウェブにおいても事実としての商品の情報だけでなく、商品画像とそれにプラスアルファのキャッチフレーズなどの工夫が必要です。
ネットショップのページづくりにおいて、製品スペックなどの「データ」としての情報以外にも、キャッチフレーズなどの工夫を施すと理想的です。
その際に色彩バランスや文字の大きさも影響はしてきますが、それはデザイン性を重視するよりも、伝わりやすさを重視するべきだと考えています。
ページ最上部にキャッチフレーズ付きの「わかりやすい」デザインの画像などを設置
近年、活字離れの時代と言われています。
ウェブユーザーは、X（Twitter）などのマイクロブログでの文字数程度は読み慣れているものの、少し長文の文章はある程度の関心を持った後でないと、読み進めない傾向にあります（弊社のコンテンツはテキストだらけですが…）。
そのため、まずはページアクセス時のページ最上部にキャッチフレーズ付きの「わかりやすい」デザインの画像などを設置するとよいでしょう。
その際は、デザインとして見た目の美しさよりも、商品そのものが持つ、「使いやすさ・使用感・質感」などの表現が重要になります。
ポイントは臨場感
ECサイトのページデザインにおいて最も重要なのは、商品そのものが持つ、「使いやすさ・使用感・質感」などの表現であり、実店舗さながらの臨場感です。ECサイト（ネットショップ）におけるページ作り・Webデザインのキーポイントは、美しさ・秀逸さというよりも臨場感であると考えることができます。
ネットショップと実店舗では、認知度・信用力にも差が出ますが、「ユーザー対商品」という面でネットショップと実店舗の決定的な差は、情報量です。
これは言語情報としての情報量ではなく、実際に商品を手にとって質感などを五感で感じることができる実店舗の商品に対しての、ネットショップの商品ページの情報量の少なさを意味しています。
掲載商品の使用感を示した文章や画像
スペックや仕様などの事実的情報のみでは、ユーザーに対して商品の印象を伝えることはできません。
その際に要となるのが、ネットショップでの掲載商品の使用感を示した文章や画像です。
その他、使用感を示すための動画の挿入するなどの工夫をこらすと、より一層臨場感を伝える事ができるでしょう。
文章、画像、動画といった種類を問わず、いかに現実世界で商品を手にとるような臨場感を、商品ページで生み出すことができるかがポイントになります。
ネットショップの商品ページは何度も改良していく必要がある
こうしたネットショップにおけるウェブページデザインの工夫は一度でバッチリ決まるものではありません。効果測定をして検証しながら仮説を立て、何度も何度も改良していく必要があります。それはSEOなどのページへの集客面だけでなく、ページコンテンツの臨場感を高め、商品購入というコンバージョン率を高めるための改良も含まれています。
デザインを改良するのに時間や費用がかかるという理由で、ページデザインの改良に歯止めがかかってしまうことは、ECサイト・ネットショップ運営にとって致命的です。
画像の差し替えやテキストのリライトはもちろん、SEOやコンテンツページのレイアウトの調整も含めて、なるべく改良しやすいCMSを選択し、最高のページを目指して改良を続けていくのが望ましいでしょう。
（初回投稿日 2016年1月28日）
