【売れる！】ECサイトのデザインとUI/UXを考慮した設計

今回の記事では、これからECサイトをはじめる方や、運営している方向けに「売れるECサイト」のデザインとUI/UXを考慮した設計について解説します！
ポイントを抑えることでユーザーに喜んでもらえ、さらに売り上げもアップするECサイトになること間違いなしです。
ぜひ最後までご覧ください。

それではどうぞ！

ECサイトデザインで抑えるべき基本ポイント

まず、ECサイトのデザインでは3点のポイントをしっかり抑えておきましょう。

スマホとPC両方を意識したレスポンシブ

ここ数年でスマホの普及率がぐっと上がりました。
皆さんも、ECサイトで何か購入するときにはスマホを利用することが多いですよね？
スマホファースト、というような言葉も出てくるくらいスマホで見たときのサイトの見た目は重視されています。
そのため、これからのECサイトでは、PCだけでなく、スマホでも見やすいレスポンシブデザインにすることをおすすめします。
レスポンシブデザインとは、デバイスの幅ごとで、見やすいように自動で表示を切り替える仕組みをもったデザインのことです。

レスポンシブ参考：MYMETHOD

ユーザーに伝わりやすいシンプルなデザイン

シンプルなデザインにすることで、コンテンツを見やすく、情報を捉えやすくなります。
特にECサイトで大事にしたいのは情報整理なので、ECサイトはシンプルなデザインに向いています。
さまざまな商品を取り扱うECサイトは情報の整理がされていないと何がどこにあるのかわからない状態になりユーザーの離脱にもつながります。
また、シンプルなデザインは飽きにくく、長い目で見ておすすめしたいデザインの1つです。

スターバックス コーヒー ジャパン

スターバックスのオンラインストアはとても整理されていてシンプルなデザインなので、しっかりと商品を探すことに集中できます。

スターバックス コーヒー ジャパン

NIKE（ナイキ）

ナイキのオンラインストアもシンプルなデザインで人気ですよね。商品数が多いからこそ情報量を抑えてシンプルな構成にすることでユーザーも迷いにくく、購入までたどり着きやすいです。

NIKE（ナイキ）

商品購入までの導線を考慮したデザイン

ECサイトは商品購入がゴールになると思います。
そのため、導線を意識して、購入まで導くことが大切です。
詳しくは以下の章で解説しているのでご覧ください！

購入までの導線が分かりやすいか

売れるデザインはUI/UXがポイント【6つ】

売れるデザインにはUI/UXが大事だと言われています。
なぜ、売れるためにはUI/UXが大切なのでしょうか？
答えは「使いやすさ・分かりやすさ」にあります。
UI/UXで抑えるべきポイントを解説していきます。

購入までの導線が分かりやすいか

UI/UXが優れているECサイトはユーザーが迷うことなく商品を選び、カートに入れ、購入までを自然な流れで実行することができます。
難しいことをする必要はなく、まずはシンプルに構成してみましょう。

• ユーザーを案内するためのナビゲーションを設置

  パンくずリスト、ヘッダーメニュー、フッターメニューなど。

  パンくずリスト：現在自分がサイト内のどこにいるか把握でき、迷子にならないようにしています。

  ヘッダーメニュー：検索窓やカテゴリ一覧、マイページ、カートなどのリンクを設置し、ユーザーがいつでも目的のページにたどり着けるように助けています。

  フッターメニュー：各ページのリンクを網羅的に設置して、知りたい情報を探しやすくします。重要なページへのバナーやSNSのリンクなども載せることで、サイトやブランドの全体像を素早く把握することができるようになります。

• 商品ページを充実させる

  商品ページの情報が少ないとユーザーは商品について知ることができず、離脱に繋がります。
  SEOの観点でも商品ページについて以下で解説しています。
  SEO観点での商品ページ

• トップページに戻れる導線を設ける

  ヘッダーのロゴにトップページのリンクを設定するのが一般的です

• カートに入れた後の情報入力を簡潔に

  不要な情報入力がないようにし、一度入力した情報はアカウントに保存して、次も使えるようにするなどの工夫をしてあげましょう

視認性の高さ

視認性とは、何かを目で見た際にそれが持つ意味を正しく理解できるかどうかの度合いです。
視認性をアップするためには、サイトを利用するユーザーのことを理解する必要があります。

文字サイズや余白の検討

サイトのメインのターゲット層が20代の場合と60代の場合では最適な文字サイズも変わってきます。
20代は比較的小さめの文字サイズが見やすく感じますが、60代は大きめのサイズが見やすいと感じます。
それぞれの利用層に合った見やすいサイズを検討する必要があります。

デザイン性が高いことは視認性アップにはつながらない

いくらデザイン性が高くかっこいいサイトでも、どこに何の情報があるのか分からなければ視認性の高いサイトとは言えません。
視認性の高いサイトにするためにはあくまでデザインは補足的なものと捉えておくのが良いでしょう。

例えば、以下の画像を見て、1と2どちらのデザインが分かりやすいと感じますか？
1のデザインは縦書きでおしゃれで秋っぽさを感じます。
しかし縦書きなので、右下のようにテキストが長くなると大事な商品画像が見えなくなってしまいますね。
商品名も長くなると読みにくいです。
一方で、2のデザインはシンプルで商品名と値段の情報がすぐに目に入ります。
文字数が増えても特に問題ないようです。
このように、ECサイトの特性を理解した上でデザインをして視認性を高めることが大切です。

サイト内の情報整理

ECサイトでは商品カテゴリ分けがサイトの使いやすさに直結しているため、とても重要です。
まずはECサイトに出している商品がどのように求められているのか理解することが大切です。

基本的なカテゴリ分けは以下です。

• 種類別で分ける

• 価格帯で分ける

• 使い方で分ける

• メーカーや、ブランドで分ける

• 人気ランキングで分ける

• 色やサイズで分ける

カテゴリはだんだんと細分化されて階層になっていくと思いますが、一番上のカテゴリは、需要の大きいものにしましょう。
アパレルのECサイトで最初から洋服の色でカテゴリ分けされているところはないですよね。
まずは、どんな洋服か（トップス、アウター、パンツ、スカート…）種類で分ける方がユーザーも選びやすく探しやすいです。

その他にユーザーの需要を分析してそのECサイトならではのカテゴリ分けを入れると良いでしょう。
色々なECサイトを見てみると面白いカテゴリ分けがあるかもしれません。

• 性別で分ける

• 期間限定や、イベントで分ける

• 使用シーンで分ける

• メーカーや、ブランドで分ける

• プレゼント用で分ける

LATCHの法則で情報整理

「LATCH」という有名な情報整理の方法があるので簡単にご紹介いたします。
各単語の頭文字をとって「LATCH」です。
LATCHの法則を使ったECサイトの機能も合わせて紹介しているので参考にしてください。

ECサイトでよく利用される分類はCategoryやHierarchyです。

Categoryは、ECサイトでメインで使われている分類方法です。
皆さんはECサイトで商品を探す場合、その探しているもののカテゴリページに移動しますよね。
Categoryは、自由度が高いので、ECサイトによってさまざまなカテゴリ分けが存在しています。

また、Hierarchyは近年「レコメンド機能」で利用されています。
「レコメンド機能」というと分かりにくいですが、ユーザーの閲覧履歴や購入履歴からおすすめの商品をピックアップすることです。
Amazonでも購入履歴や、カートに入っている商品を元に、別の商品を紹介する機能があります。

LATCHによって情報を整理するだけでなく、価値ある情報を届けられるようになりました。

商品情報は豊富に

ユーザーに役立つ情報はなるべくすべて掲載するようにしましょう。
サイズ、寸法、価格、材質、決済方法などすべてが購入の判断材料です。
特にアパレルECサイトでは、寸法が重要です。実際の商品を見ることができないため、大きさを知ることのできる情報は入れるべきです。
他にも洗濯方法や、ポケットの個数、裏地の有無なども記載があるとよい購入の判断材料になりますね。

SEO観点での商品ページ

商品ページはECサイトの中で一番重要なページです。
ユーザーが検索して直接商品ページから流入してくる場合もあります。
そのため、しっかりと商品ページでSEOも気にして情報を充実させましょう。

• h1タグには商品名、ブランド名を入れる

  h1タグとは、ページ内の一番大きい見出しを意味するタグです。ユーザーは商品名やブランド名を検索して流入してくることが多いため、h1の中身を分かりやすい状態にしておく必要があります。

• サイズが大きすぎる画像を使わない

  綺麗な商品画像を使いたいからといって、サイズが大きすぎる画像を使うのはページの読み込みスピードが低下してしまうためSEO的によくありません。画像は圧縮して適切なサイズにしましょう。600～1200pxあれば十分きれいに見えます。

• オリジナリティのあるコンテンツを入れる

  オリジナリティのあるコンテンツはGoogleの検索エンジンに評価されやすいです。コンテンツの例としては、よくある質問や、レビュー機能、商品を実際に使用している動画などです。よくある質問などは簡単に導入でき、ユーザーの購入をサポートすることができますので是非検討してみてください。

• 商品説明のテキストにキーワードを入れる

  商品説明のテキストにはユーザーが気になるような、検索しそうなキーワードを入れておくことが大切です。例えば、ダイエット向きのサプリメントであれば、「ダイエット＋お手軽」のようなキーワードを入れてみましょう。ユーザーが普段どんなキーワードで検索しているか調査してみるとさらに良いかもしれません。

商品画像を豊富に

購入前に実際の商品を見たり触ったりできないのがECサイトの弱点です。
そのため、どんな商品なのか、どんな質感なのかがわかるような商品画像をできるだけ多く入れておくことが大切です。
色々な角度から撮影した商品を載せたり、アパレルのECであれば、実際に洋服を着用している画像を入れることでユーザーは実際に自分が使っているイメージを膨らませることができます。
他にも家具やインテリアであれば実際の部屋に置いているような画像が必須です。
アパレル参考：TAKEO KIKUCHI（タケオキクチ）
インテリア参考：ニトリネット

ブランドイメージとの統一感

ブランドイメージと、ECサイトに統一感を持たせることも重要です。
可愛いらしい商品を売っているブランドのECサイトが、かっこいいデザインだと訪れたユーザーは違和感を覚え、離脱に繋がってしまいます。
「そのブランドらしさ」を感じさせる統一感のあるECサイトにすることで、コンセプトなどが伝わりやすくなり、ブランドの価値アップにもつながります。

参考：gelato pique（ジェラートピケ）

例えば、可愛らしいルームウェアやぬいぐるみ、小物で人気のgelato pique（ジェラートピケ）のECサイトを見てみましょう。
ジェラートピケは、着る人それぞれのライフスタイルに喜ばれるアイテムを “ファッションのスウィーツ”として 表現したルームウェアブランドです。
gelato pique（ジェラートピケ）全体がふんわりとしたパステルカラーで構成され、フォントも丸みを帯びたものを使用しています。
コンセプトにある “ファッションのスウィーツ”というのをカテゴリのデザインに落とし込んでいるところも世界観が表されています。
（1つ1つスイーツの材料やスイーツの写真が使われていてとてもかわいらしい…）

愛されている人気ブランドになったのは、このような細かな世界観づくりがブランドのイメージと統一されている、というところも大きいと思います！

購入率を上げるコツ【4選】

続いて、購入率を上げるために、どのようなことを意識すればよいのか解説します！
大きく分けて4つのコツがあります。

イメージが伝わる商品画像

商品画像は以下の3つのポイントを押さえて選定しましょう。
！綺麗なものを用意することでその商品の魅力を最大限に伝える
！暗い写真や異なるイメージを与えてしまう写真は使わない
！余計なものは写さない
左の写真は全体が暗く、画質も悪いです。また、右下に何かがぼけて写ってしまっています。
もしも映り込みがあった場合は、撮りなおすかPhotoshopなどでレタッチする必要があります。
レタッチをする場合は、是非以下のブログを参考にしてみてください！
【パターン別】写真レタッチの方法まとめ【Photoshop】
また、実際の商品内容に含まれないものが写真に入っている場合、「買ったらそれもついてくる」という勘違いを防ぐために補足説明が必要になるケースもあります。

自分でECサイトを見ているときにも、他の企業はどのような画像を使っているのか意識してみるとよいです。

トップページから商品にたどりつきやすく

トップページでは特に商品にたどり着きやすくしてあげましょう。
よくECサイトのトップページに置かれているコンテンツは以下です。

• おすすめ商品

  ユーザーがお気に入りしている商品を元に、関連する商品を表示しているECサイトも多いです。

• 人気ランキング

  人気ランキングは、多くのユーザーが購入している証明となり、中にはランキングから選んで商品を買う人もいます。

• 新着商品

  最近の新しい商品を知ることができるのでリピーターに喜んでもらえるコンテンツです。アパレルのECサイトではこのコンテンツを入れているところが多いです。

• カテゴリや検索バー

  商品を探す時に使われるためトップページに配置することが多いです。

• セールやキャンペーン情報

  お得な情報をトップページで載せて、ユーザーを引き込む狙いがあります。

• 急上昇、特集

  時期に合わせて購入が多くなるアイテムや特集を組むことにより、ユーザーに目当ての物プラスで購入を促すような狙いがあります。

CTAボタンは押しやすさを意識

まずCTAというキーワードについて解説します。
CTAとは、Call To Action(コール トゥ アクション)の略でサイトに訪問したユーザーが具体的な行動を起こすように誘導することをさします。
ECサイトであれば、「購入する」ボタンや「カートに入れる」のボタンが主なCTAボタンです。
つまり、ECサイトでCTAが押しにくいのは致命的です。
ボタンのテキストを明確にし、押すことでどうなるのかを示しましょう。
CTAボタンが目立つようにすることも重要です。
目立たせたいボタンにはアイコンをつけたり、影で立体感をつけて押せるボタンということを分かりやすくしてあげるのがおすすめです。

離脱を防止、回遊させる工夫

離脱を防ぎ、サイト内を回遊させるために色々な工夫を施しているECサイトは数多くあります。
Amazonを例に紹介します。

Amazonの商品ページ例

例えばAmazonでは一覧ページ、詳細ページに工夫が施されています。
例えば「マウス」で検索した検索一覧ページでは、スクロールして商品を見ていると途中に「高評価」「開催中のタイムセール」といった見出しがついた商品スライダーが出てきます。

高評価の商品ということは、多くのユーザーが購入していて使いやすい、というイメージがあるので良い商品がないかついチェックしてみますよね。
また、開催中のタイムセールというほうも、安く買える商品がないか気になってチェックしてみますよね。
こういった、ユーザーが商品を探す行動から逸れずに他のおすすめも掲載することでサイトの回遊も促しています。

一覧ページの中の商品から詳細ページにいくと、今度は「よく一緒に購入されている商品」「こちらもおすすめ」「類似商品と比較する」「星4つ以上」といったコンテンツが出ています。

商品を検討している段階のユーザーにとっては、効果的なおすすめで、商品を探す時間が伸びるためサイトの滞在時間も長くなります。

参考になるECサイト集【7選】

ECサイトを新しくつくる上で、色々なECサイトを見ておくことをおすすめします。
今回は参考になる綺麗なECサイトをまとめているサイト集を紹介します！
今まで解説してきたUI/UXのポイントについて、それぞれのサイトではどのように工夫されているのか気にしながら見てみると、いろいろな発見が得られると思います！

SANKOU!

SANKOU!SANKOU!は、幅広いジャンルのWebサイトが掲載されているのでとても探しやすく、よくチェックされているサイト集です。お気に入り機能があるので、気になったサイトはお気に入りしておくとよいです。

Web Design Clip

Web Design ClipWeb Design Clipは日本のサイトだけでなく世界中のサイトも掲載しているので世界のデザイントレンドもチェックすることができます。
海外のギャラリーサイトだと英語で書いてあったりするので日本語のサイトでどちらもチェックできるのはありがたいですね。

MUUUUU.ORG

MUUUUU.ORG
MUUUUU.ORGでは、クオリティが高く、縦に長いサイトが掲載されています。一番下までいったらまた読み込まれてコンテンツが表示されるので下にスクロールする動きだけで多くのサイトをチェックすることができます。

Choicely

ChoicelyChoicelyは、通常のサイト種類ごとのカテゴリ分けだけではなく、色ごとにもまとめられています。またこちらも海外のサイトが掲載されているのがポイントです。

S5-Style

S5-StyleS5-Styleも掲載数が多く、お気に入り機能もあります。ページの横のところに、ページの一番上、一番下に移動できるボタンがあり、真ん中はページネーションのようです。
こちらのサイトも下にスクロールする動きだけで多くのサイトをチェックすることができます。

Web Design Garden

Web Design GardenWeb Design Gardenは、検索のナビゲーションが他よりも充実している印象をうけます。業界や、サイトの印象別に探すことができ、とても検索しやすいです。ただ、あまりECサイトの掲載数は多くないので、他と合わせてチェックしてみるのがよさそうです。

81-web.com

81-web.com81-web.comは、SPレイアウトとPCレイアウトを簡単にチェックすることができます。使用しているフォントなども知ることができるのでもしデザインで使おうとしているフォントがあればどのようなところで使用しているのかチェックしてみましょう。

ECサイトのデザイントレンド【3選】

ECサイトにもデザインのトレンドがあります。
今回はギャラリーサイトでよく見るデザインを3選紹介いたします。

スプリットスクリーンレイアウト

スプリットスクリーンレイアウトとは、画面を２分割にし、それぞれに別の情報を映すデザインです。
片方に画像、もう片方にテキストというような見せ方ができ、表現の幅が広がることがメリットです。
また2つの商品を対比のように見せることも可能です。

カリオモンズコーヒーロースター
カリオモンズコーヒーロースターでは常に左側にコーヒーを淹れている画像が写っています。
右側はコンテンツが流れ、どこか落ち着いた雰囲気のあるサイトになっています。
レスポンシブデザインとも相性がよく、そのまま横になっていたレイアウトを縦積みにするだけであまり印象も変わらずに簡単です。

巨大なタイポグラフィ

大きい文字サイズを使い、サイトにインパクトを与えるデザインで、ECサイトだけでなくWebサイトのトレンドデザインとして人気です。
基本、海外サイトなどではアルファベットが用いられていますが、日本語にしてもインパクトを与えられること間違いなしです。

Props
Propsのサイトのようにメインビジュアルで巨大タイポグラフィのデザインが使用されることが多いです。
インパクトが大きく、つい目を引きますね。

画像のギャラリー表示

メインビジュアルに画像がランダムに表示されたギャラリーのようなデザインのECサイトもトレンドです。
商品の画像をギャラリーのように表示することでユーザーの目を引きます。
大きさはサイトそれぞれですが、大きく3つほど画像を設置すると1枚1枚の魅力が引き立ちます。
小さく複数枚設置すると、色々な画像のイメージが入ってきて賑やかな印象です。

和牛焼肉 牛兵衞
和牛焼肉 牛兵衞では、料理の画像をランダムにギャラリー表示し、スライドで複数枚表示することで実際の料理のイメージを湧かせます。
おいしそうな写真で購入してみようかなという気持ちになりますね。

まとめ

最後までご覧頂きありがとうございました！
売れるECサイトのポイントはつかめましたか？
まずは、分かりやすく使いやすいECサイトを目指して分析、改善を重ねていくことが重要です。
他にもブログ内であげていたポイントをしっかり押さえればリピートのユーザーができ、ECサイトが成長していくこと間違いなしです。

BRISKのブログでは、他にもWordPressでECサイトをつくる方法など紹介しています。
是非ECサイトをこれから作ろうと思っている方はチェックしてみてください。
WordPressを使ったECサイトの作り方やメリット・デメリットを解説

また、ECサイトの構築についてお悩みの方は是非こちらからお気軽にご相談ください！
ECサイト制作ならBRISKにお任せ！