ECサイトのデザイン〜「ユーザビリティ」を意識したWEBデザインで売れるサイトを目指そう

ECサイトのデザインとひと言でいっても、関連するものがいろいろあり、複雑です。

ポイントとして、しっかりと効果を求めるのであればECサイトに求める外観のデザインの基本は、アート性よりも「わかりやすさ」が必要です。この「わかりやすさ」というキーワードは構造的なデザインについても同じことがいえます。

「わかりやすさ」を前提にした上でどういったレイアウトを採用するかを検討し、企業や商品のイメージを演出できるかがECサイトのデザインにおける使命です。ここでは「わかりやすい、使いやすいECサイトのデザイン」について解説します。

見せ方の基本は整理整頓

あくまで使いやすさが大事

ECサイトのデザインで常に意識する必要があるのが『ユーザーにとっての使いやすさ』、つまり「ユーザビリティ」です。

「オンラインショップを作ろう」と意気込んでいる段階でユーザーの使い勝手を左右する部分をしっかりと考えて組み込んでいくことは最初に当たる大きな壁です。

なぜなら、これが実際に考え始めると、何も書いてない画用紙をいきなり渡されて“好きに書いていいよ”と言われた気分になることも少なくないからです。いったいどこから手をつけるべきか悩んでしまいます。

WEBデザインは基本的に自由度が高いデザイン領域です。平面を基本的に利用しますが、音声も動画も利用できます。今ではいろいろなデザインが可能になってきました。一方でネットショップということだけで言えば、それほど専門の知識も必要とせず、簡単に始めることもできます。幅は広く、底は深くなっています。

簡単にできる手段として、ECサイトによく利用されているカートASPがあります。日本の代表的な存在とも言えるカートASPのカラーミーショップを使用しても、テンプレートが豊富に用意されており、無料で利用できるものを選んでもいくつもデザインの種類があります。結局、どのテンプレートを利用するか選び出すだけでも大変です。

先のことを考えて、よりカスタムしやすいからと無料で利用できるオープンソースのECパッケージであるEC-Cubeや、プラグインの豊富なコンテンツマネージメントシステムであるWordPressでの構築を選べば、さらにやらなければいけないことは増えます。

実際のところ、デザインはいくらでもやりようがあるのです。だからこそ、迷いやすくなります。そうした時に何をすればいいのかわからなくなった場合は、まずは自分がユーザーになったつもりで考えてみることからスタートしてみるということが必要です。そうすると、自然とどうなっていると使いやすいか考えるようになります。

結果的に「あまりゴチャゴチャしたデザインになっていると見難いな」ということに気づきます。機能も余計な便利機能は画面内のノイズになる場合もあります。本当に必要なものだけで最初は十分です。

実際にギャラリー的にデザインのよいサイトを集めたまとめサイトなどでは、そういったわかりやすいサイトが並んでいます。それは理にかなっているからです。

このような進化が進んだことで、結果的にWEBデザインでは、タイポグラフィーと呼ばれる文字の形（フォント）の持つイメージを重視して、絵や写真をあまり使わず、シンプルに企業やブランド、メッセージなどの持つイメージを想起させるようなデザインが注目されるようになってきています。

タイポグラフィは意味を文字で具体的に伝えながら、視覚的なインパクトも残せます。そのため、現在のスマホで気軽に調べながら、どんどん違う情報に飛んでいく使い方のニーズと表現の充足を満たせるデザインにとっては非常に相性がよく、注目されている領域です。

まずは商品を系統ごとに分類して見せよう

WEBで情報を掲示していくうえで重要なのは、目的の情報の探しやすさです。この法則はECサイトでも同じことです。ではECサイトのデザインで探しやすくするということはどういうことをすればいいのでしょうか。

まずは商品の分類をしっかりとおこなうことです。ECサイトに訪問するユーザーの目的は欲しい商品を購入したり、それについて知ることだからです。

商品がただ整然と並んでいるだけで、隣り合っている商品に関連性がない状態であれば、欲しいものを探すのに手間がかかります。逆にしっかり分類しておけば、近くにあるものに興味をひかれる可能性が出てきます。

結果的に、こうした分類の整理が少しだけスペックや単価の高い商品をプレゼンテーションする機会になったり、併せて必要な商品を購入するきっかけになる可能性もあります。

配置の基本は最初は大きく、中身ほど細かく

ECサイトのデザインは商店やスーパーの陳列棚をイメージするとわかりやすいかも知れません。スーパーの商品棚は通常、肉なら肉の棚に、調味料なら調味料の棚に集積されています。そのうえでそれぞれが何の分類のコーナーなのか大きな文字で提示されています。

それぞれの商品を見てみると、まずはその商品が何なのかがわかるようなパッケージになっています。そのうえで、情報が詳細になっていくに従って、文字のスペースも小さくなっています。これは、WEBページ内のデザインでも同じことが言えます。まずは一目みて、その商品が何であるかわかるように大きく掲示します。その後、少しずつスペースやフォントのサイズは小さくすると良いでしょう。

興味のあるものは小さい文字でも読んでくれますが、最初の段階では、人間は勝手に頭の中で検索して必要なもの、自分の探し物に一致したものをピックアップしているに過ぎません。

最初から細かい文字で情報を列挙すると、何も読んでくれないまま、サイトから離れていく人が増えます。逆に大きな文字や絵ばかりだと何が重要なのかわからず、メリハリのないデザインになります。こうしたフォントや絵のサイズをバランスよく配置することを心がけましょう。

商品のイメージに合わせた色づかいは守ろう

それでは少し基本的なテクニックの話をしていきましょう。まずは色づかいです。色はシンプルですが、イメージを喚起させる重要な要素です。

色づかいは見た人がイメージを持つことにとても大きな影響力があります。また、色はその色を見ただけで、ある程度、共通した認識を持ちます。

例えば

赤→熱い・辛い・エネルギッシュ

青→冷たい・さわやか・リラックス

黒→権威・信頼感・伝統

などです。

つまり、自ずと扱う商品や企業の演出したいイメージによって色使いは決まります。たとえばアイスクリームをメインに扱っているサイトで強く濃い赤が主体だったら、なかなか食欲をそそりません。もちろんイチゴアイス専門店などでは別ですが、配慮は必要です。

逆に激辛担々麺のサイトが薄いパステルブルーだったらどうでしょうか。これも激辛担々麺の印象がよくわからなくなって強烈な違和感があります。

こうした色の持つ心理的なイメージを守ることは、サイトのデザインにとって基本的なことであり、とても大切なことです。もちろん例外はありますが、基本を守った上での意外性です。

アパレルなのか食品なのか、雑貨なのか、いずれにせよイメージにあった商品に合わせた色の選択をしましょう。また写真などの画像データも統一感を持たせることが重要です。アングルなどを揃えるだけでサイトの印象が変わります。

写真の画像加工などについては以下の記事も参考にしてください。

【参考】ECサイトの商品写真、画像加工のポイントはわかりやすさ

無難すぎても印象は残らない

上の話を読んで、「じゃあ無難に色はそれほど協調せず、白やイメージのない程度でいいや」と考える人もいるかもしれません。「イメージは商品自体がもってるから」という考え方です。

しかし、こうした策は、必ずしも安全策にはなりません。サイトに訪れたユーザーは視覚が頼りです。つまり、そこで印象に残すことは商品を買ってもらうことにとってとても大事な要素なのです。その場面で色の持つ力を使わないという選択肢はないでしょう。

また、逆に一般的な色の持つイメージのセオリーに乗っかり過ぎると、競合が多い場合は埋もれてしまいます。ここで無難すぎない色のイメージを印象づけることができれば、ユーザーに強烈な印象を残すことができます。情報として特徴をしっかりとプレゼンテーションすることはECサイトにとって非常に重要です。

こうしたことは実験的に試すこともできます。実際のお店よりオンラインショップが有利なのは色のイメージパターンを簡単に試すことができることです。実店舗であれば、営業を始めてしまったら、内装の色を塗り直すのは、休業により売上現象を起こし、かつとても費用がかかりますが、WEBであれば簡単に全体の色調から細かいパーツまで比較的簡単に変更することができます。こうした機能を積極的に使ってみましょう。

色の使い過ぎには注意

「いろいろなイメージを想起させたい」と考える人もいます。そこは扱う商品のイメージもあるので一概に否定はできませんが、商品が見難くなってしまう可能性があります。また、複数の色を使う場合はバランスを考慮して色を配置しないと、見ているだけで疲れるサイトが出来上がります。

そうなると「使いやすい」という根本的な基本から逸れてしまいます。あくまで基本の色は決めた方がよいでしょう。

また、企業のイメージをプレゼンテーションする場でもあるので、コーポレートカラーなども意識するべきです。

色は単色でも表現できますが、それが組み合わさることで、さらにいろんなイメージを表現できる可能性があることも覚えておきましょう。

いろいろなサイトを参考にしてみよう

なんでも0からスタートしようと考えると、果てしないことを考え出してキリがありません。まずはいろんなECサイトを見てみることでそこから得るものもあります。

眺めていくと、扱う商品によって傾向が見えてくるかもしれません。たとえばポップにデザイン性を高める傾向にあるのは美容やアパレルなどのファッション系のサイトです。逆に学校などの教育機関や病院、金融などでは、重厚で清潔感のあるイメージのサイトが多くなります。

大手サイトも意外に参考になる?!

ECサイトを作ろうと意気込む中で参考になるサイトを探そうと思うと、「たくさんありすぎて、どのサイトが参考になるのか」、あるいは「自分が参考にしているサイトは本当にデザイン的によく作られているのか不安になる」なんてこともあるでしょう。

そんな時はまずAmazonや楽天などのモールと呼ばれる大手ECサイトを見てみるとよいでしょう。

Amazonは実は基本に忠実に構成されています。つまり、陳列も大から中、小へと情報が流れていくようになっています。オススメ表示のアルゴリズムなどで、簡単には導入できないような技術も使用されていますが、“なぜ、この位置にこの表示があるのか？”などを考えてみると自分で作る時に参考になります。

楽天についてはそのデザインについて、“ゴチャゴチャしている”など批判的なものも多くあります。ただ、よく見てみると、出したい情報が繰り返され、強烈にユーザーに刷り込みをしています。これを真似をするのは美的センス的にもなかなか難しいサイトですが、購入への欲求をかなりストレートに訴求してきます。よいところとよくないところも含めて一度分析してみることは無駄ではありません。また、“こういうサイトはいやだな”という感覚も重要です。

EC大手のサイトは、ノウハウの蓄積や技術への予算投入を繰り返して運営されています。それだけ、たくさんの人が利用し洗練されてきているということがいえます。そうしたノウハウを上手く拝借することも重要です。

近い商品を扱う他社のオンラインショップは参考になる

商品が被っている企業のページであれば、参考にする以前に、気になって何度も見てしまうかもしれません。実際に先行する同業者のサイトは参考になることがたくさんあります。また、複数の同業者ページを見ると共通点を見つけることもあります。

その場合、商品の販売の中で、必要性があってそうしたデザインになっているということがあります。そうした事柄を発見した場合は迷わず取入れましょう。

しかし、なかには「あそこもやっているから」と惰性で取入れているような場合もあります。これは必ずしも正解ではありません。制作した人は特に意図が無い可能性もありますし、不必要なものはわざわざ取入れる必要はありません。

また、こうした場合、注意しなければいけないのは、他者と自社で訴求しているユーザーが違う可能性があるということです。その場合、いくら寄せたデザインにしたとしても的外れになっているかも知れません。

それであれば、異業種でも同じような客層のECサイトを参考にするのも選択肢の一つです。同じマーケットニーズを担うわけですから、そのサイトがもし人気のあるサイトなのであれば参考にする価値は格段に高くなります。

デザイナーへ依頼する意味は大きい

ECサイトの初期デザインや、更新は自ら勉強すれば構築の方法次第では可能です。もちろん最初は苦労しますが、PCやWEBの知識を身につけている人であれば、全くできないということはない作業です。

そんな人にとっては“別に専門職に頼まなくても問題ない”と思うでしょう。しかし、その構築や変更にかかった時間や試行錯誤に対するコストはどうなるのでしょうか。

そう考えると、専門のWEB制作会社やデザイナーと連携することで得られるメリットは計り知れません。

ECサイト自体は常にブラッシュアップを求められます。その度に自ら調べて、悩みながら更新していくのは大変な負荷がかかります。

プロの力は「よりふくらみのあるECサイトを作る大きな助け」になるでしょう。

もちろん、全てを任せきりにするのではなく、自社内のスタッフと外部の制作会社が共同のチームとして作り上げて、自身の意図や思いをしっかりと反映させていくことが重要です。

その結果、他社に差をつける、より魅力的なECサイトのデザインが出来上がります。ぜひ思いのこもったECサイトづくりに挑戦してください。

サポートが必要な場合は弊社にご相談ください。ブランディングを視野にいれたECサイトの構築を一緒に目指しましょう。