参考にしたいECサイトのUIデザイン法10選！改善すべきポイントを解説

UIとUXはECサイト設計における重要な要素

売れるECサイト設計において、UIとUXに配慮することが重要です。まずはUIとUXの意味、その具体例について下記で解説します。

UIとは

UIとは「ユーザーインターフェイス（User Interface）」の略です。インターフェースは「接点」を意味し、ECサイトとユーザーをつなぐ役割を果たします。

直接見る画面や操作するボタンなど、ECサイト上で目にするデザイン全般がUIです。ユーザーはUIを通じて商品の閲覧・購入が可能です。

UIの具体例

スマホやタブレット、PC上からECサイトの画面に表示されているものは全てUIに含まれます。ECサイトにおける主なUIは次のとおりです。

UIのデザインが優れているほど、操作性が高くユーザーの購買意欲にもつながります。サイトの見やすさ、購入するまでの手順のわかりやすさ、ユーザーがストレスを感じない操作性などを意識することが重要です。

UXとは

UXとは「ユーザーエクスペリエンス（User Experience）」の略です。UIを接点にECサイトを利用したユーザーが、サイト上で経験する全てのことを指します。

ユーザーが主観的に感じるもの全般がUXです。具体的には下記が挙げられます。

UXの具体例

参考にしたい優れたECサイトのUIデザイン法10選

ECサイトのUIデザイン法10選について、参考にしたいECサイトを用いて紹介します。

1. オブジェクトとインターフェースを近づける

オブジェクトとは、ECサイト上にある「マイページ」や「カート」などの機能のまとまりのことを指します。インターフェースは情報の編集や確認など、ECサイトのサーバーとユーザーをつなぐ接点のことです。

マイページの近くには登録情報編集機能を設け、カートに入ると購入数量を選択できる機能を設けるなど、関連のあるオブジェクトとインターフェースを近くに配置することが重要です。

アスクルでは、商品詳細に入る前の画面で「バリエーション一覧へ」と誘導するボタンがあります。色違いやサイズ違いの商品は、このボタンを押すだけでチェックできて便利です。

出典：アスクル

2. CTAボタンを工夫する

CTAは「行動喚起」と訳されるマーケティング用語で、予約や会員登録などの行動を促すためのボタンをCTAボタンと呼びます。ECサイトの場合「商品・サービス詳細ページ→カート→決済」へスムーズに誘導するためにCTAボタンを工夫することが大切です。

amazonでは、商品ページから決済にいたるまでの導線上にユーザーの操作を邪魔するような広告は配置せず、次になにをするべきかがわかりやすい操作性になっています。

「レジに進む」ボタンは黄色で強調していて、直感的に操作しやすいデザインになっていることもポイントです。

出典：amazon

3. カルーセルを設置する

トップページにカルーセルを使用すると、自動またはクリックした際に画像を左右に切り替えて表示できます。

ユニクロでは、ファーストビューのページにカルーセルを配置し、トレンドのイチオシ商品がひと目でわかるようになっています。画像をクリックするとそのまま商品ページへ遷移できるところも工夫されたポイントです。

出典：ユニクロ

4. カテゴリー一覧を設置する

ECサイト上で販売する商品をカテゴリーに分けて、一覧表示するといいでしょう。

ZOZOTOWNでは、左端にカテゴリー一覧を設置することで膨大な商品の中からユーザーが欲しい商品を見つけやすくしています。わざわざ検索窓に「トップス」や「ジャケット」などと入力する手間が省けて便利です。

出典：ZOZOタウン

5. カテゴリーごとにサムネイルを設定する

カテゴリー一覧をクリックしてそれぞれのページが表示された際、ページごとに合わせたサムネイルが表示されているとわかりやすいです。

BOTANISTでは各カテゴリーページにサムネイルが設定されており、複数のカテゴリーから商品を購入したくなるような工夫がされています。

出典：botanist

6. 商品の詳細表示を可能にする

商品画像を拡大・多角的視点で見られるようにすれば、通販特有の買い物の失敗を防げます。ECサイト最大のデメリットは、商品を手にとって確認したり、試着したりできないことです。

PUMAでは、商品画像をクリックすると自由に拡大縮小できる機能を設けています。また一方向からの画像だけではなく、多方面から撮影した画像を掲載することで、ECサイトのデメリットの対策をしています。

出典：PUMA

7. テキスト入力項目を削減する

商品を購入するまでの手順では、なるべくユーザー自身が手入力する項目を削減しましょう。

ベルメゾンでは、カラー、サイズ、数量など、回答が想定できる項目は選択式にすることでユーザーが入力する手間を省いています。入力ミス防止でトラブル回避につながり、ユーザーにもストレスを与えないのが特徴です。

出典：ベルメゾン

8. 動画で説明する

画像やテキストよりも、動画のほうが伝えられる情報量が多いことは言うまでもありません。

Qoo10では、商品の画像や説明に加えて、You Tubeで商品をレビューしている動画を掲載しています。動画なら商品を使用しているイメージがつきやすく、商品の詳細や実際の使用感が伝わりやすいです。

出典：Qoo10

9. 商品ランキングを掲載する

トップページのような目立つ場所に商品の人気ランキングを掲載することで、ランキングの中から商品を購入してもらえる仕組みができます。

まるごと高知Online Shopでは、トップページに掲載しているランキングの箇所に、購入画面まで遷移できるボタンが設置されています。ユーザー自ら検索してたどり着く商品だけではなく、おすすめを提示してあげることが大切です。

出典：まるごと高知Online Shop

10. ファーストビューで注目をひく

ホームページリンクを開いたときのファーストビューの場所に、インパクトのあるデザインを施すとユーザーの注目をひきつけられます。

Mr.CHEESECAKEでは、ファーストビューにチーズケーキの写真を大きく載せ、あえて無駄な情報を一切省いています。まずは視覚的にユーザーを誘致し、購買意欲をかきたてることも重要な戦略です。

出典：Mr.CHEESECAKE

売れるECサイト作りのためのUI/UX改善チェックリスト

売れるECサイトを作成するためのUIやUXの改善点を、チェックリストにまとめています。次の9つの項目をチェックし、ECサイトの改善にお役立てください。

• 信頼して商品を購入できるか
• 直感的に操作できるか
• 商品画像が豊富に使用されているか
• 配色に統一感があるか
• モバイルフレンドリーになっているか
• 似た情報や関連情報はグルーピングされているか
• グルーピングした情報を整列して配置しているか
• 各情報の配置に統一性・一貫性があるか
• 重要な情報がひと目でわかるか

信頼して商品を購入できるか

ユーザーは、信頼できるECサイトかどうかを重要視しています。ECサイトは実際に手に取れない商品を購入し、ネット上で完結するやりとりのため不安がつきものです。

会社概要や、キャンセル規定、返品方法、利用規約など、ユーザーが信用できる情報を記載するといいでしょう。

直感的に操作できるか

ECサイトのデザインは、初めて利用するユーザーも迷わず商品購入までたどり着けるように、直感的に操作できることが重要です。ユーザーに何も考えさせないことこそUIの真髄といえます。

購入までの動線が複雑だったり、広告に邪魔されたりすると離脱の原因になるため、重要なリンクやボタンにアクセスしやすいことも確認しましょう。

商品画像が豊富に使用されているか

ECサイトは、写真や動画をみて商品を使うイメージができるかがポイントです。アパレルなら着用写真、家具なら配置された写真など、実際に使用しているイメージをユーザに持ってもらうことが大切になります。

配色に統一感があるか

ECサイトをデザインする開発者はカラーを多用したくなりますが、できるだけシンプルな配色にすることが望ましいです。

あらかじめメインカラーを含めて3色〜4色程度に決めておくと、統一感が出て見やすくなります。ベースカラー70%、メインカラー25%、アクセントカラー5%の配分を目安にするといいでしょう。

モバイルフレンドリーになっているか

ECサイトのデザインは、最もユーザー使用率の高いスマホから見たときのデザイン性にこだわるべきです。より多くのユーザーに利用してもらうためには、スマホやタブレット・PCなど各種端末に対応したレスポンシブデザインを導入することもおすすめです。

レスポンシブデザインを導入した際も、必ずスマホから実機テストをおこない、表示崩れがないかを確認しましょう。

似た情報や関連情報はグルーピングされているか

似た商品情報や関連情報をグルーピングする「近接」という手法があります。関連する情報を近くにおくことで、見やすさUPにつながるのでおすすめです。

グルーピングした情報を整列して配置しているか

カテゴリ分けした情報はサイト上にバラバラに配置するのではなく、整列して並べることが大切です。きれいに整理されたサイトは見やすく、操作性も増すため購買につながりやすくなります。

各情報の配置に統一性・一貫性があるか

デザインに統一性・一貫性があるECサイトはユーザーにとって使い勝手がよく、リピートにも繋がります。

デザインだけでなく、文章の表現を合わせたり、同じ色やモチーフを繰り返し設置したりすることが大切です。

重要な情報がひと目でわかるか

重要な情報は大きく表示したり強調させたりして、コントラストをつけることが大切です。見やすさが損なわれない程度に、伝えたい情報は目立たせるといいでしょう。

まとめ

売れるECサイトを作成するには、UIとUXに配慮することが重要です。適切なデザイン法で作成・改善し、多くのユーザーを誘致できるサイト作りを目指しましょう。
ECサイト作成に不安があるなら、専門家に依頼するのもひとつの解決策です。

比較ビズは、多数のECサイト制作会社の中から自社にぴったりの業者を探せる無料の比較サイト。2分ほどで必要な情報を入力すれば、自社のサイトを作成してくれる会社を比較できます。

ECサイト制作をプロにお願いしたい方は、ぜひ一度比較ビズを利用してください。

監修者のコメント

SeekNext合同会社

代表 兼 CEO　佐藤 潤嗣

福岡県のホームページ制作会社代表。福岡県出身。趣味はフットサル。システム会社、ホームページ制作会社に勤務した後、SeekNext合同会社を立ち上げる。福岡を中心に全国のサイト制作・運用に携わっている。中小企業はもちろん大手企業との制作実績あり。制作したホームページは100件以上。SEO対策やSNS運用でも実績あり。動画制作や名刺・チラシ・パンフレット・パッケージデザインなども手がける。

詳しく見る

ECサイトのUIデザインは商品の購入を左右するとても重要な要素になります。記事に掲載されているようなUIデザインを意識してECサイトを制作することで、売れるECサイトになる可能性が高まります。

それ以外にも、プロ観点から考えると、サイトの速度も意識して欲しいと考えています。サイトの表示速度が1秒から3秒になると直帰率が32%増加すると言われています。上記の傾向はECサイトだと顕著に現れてきます。

そのため、「多数の画像を使用するカルーセル」や「容量の重い動画」を使用する際は、どのページにどんな形で導入するかなどの緻密な設計を行うことも重要な作業になってきます。特にオリジナルデザインでのECサイトを制作したいと考えているときは必須で考えないといけません。

オリジナルデザインにおけるサイト設計に関しては、初心者の方には難しい作業になるかと思いますので、専門家に相談することをおすすめしています。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。