このボタンをクリックしたらどうなるのか、このページはサイトのどの部分なのか、サイトのどこにどんな情報があるのか、それらをユーザーが一瞬で理解できるような設計をすることが求められます。ユーザーの脳内で複雑な処理をさせてはいけません。ユーザーが少しでも複雑さや難解さを感じてしまうと、もっとわかりやすいサイトを利用しようと離脱してしまいます。

つまり、UIデザインの目指す最終地点は、ユーザーにストレスを与えないことです。次は何をしたら良いのかわからないという状況は、ユーザーにとってストレスです。購入までの動線が複雑だったり、広告に邪魔されたりすることもストレスの原因となります。

労力を使うことなく、煩わしさがなく、快適な購入体験ができ、また買いたいと思ってもらえるようなUIデザインを目指しましょう。

ECサイトのUIデザインを改善する方向性

ECサイトのUIデザインはどのようにして改善していけば良いのでしょうか。下記では、ECサイトのUIデザインを改善する方向性について解説します。

直感的な操作ができるようにしよう

はじめてECサイトに訪問したユーザーが迷うことなく、直感的に操作できることを目指しましょう。

操作性が簡単であることが求められます。少しでも複雑なデザインにしてしまうと、ユーザーにストレスを与える原因となってしまいます。

サイトの信頼性を向上させよう

ECサイトで購入されるには、ユーザーからの信頼性が重要です。怪しいと思われてしまうと、たとえそのECサイトに魅力的な商品があっても購入することを躊躇してしまいます。

会社概要や、特定商取引法に基づく記載、プライバシーポリシーなど、ユーザーが少しでも不安を持った際に、すぐに情報を確認できるような設計にしましょう。

商品の使用イメージを持たせよう

長い文章よりも、画像や動画の方が直感的に商品について理解できます。アパレルなら着用写真、家具なら配置された写真などを載せて、使用イメージをユーザーに持ってもらいましょう。

統一感のある配色にしよう

デザインは、商品を目立たせるためできるだけシンプルにすることを心がけましょう。配色に統一感があることで、ユーザーに親近感を持たれやすいです。

ECサイト全体のメインカラーを統一することで、ECサイトのブランディングの向上にも繋がります。カラーの配色で基本となる黄金比率は、ベースカラー70%、メインカラー25%、アクセントカラー5%と言われています。

重要な情報を一目でわかるようにしよう

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

特に伝えたい事項は、ECサイトのトップページの上部に設置するなどして、ユーザーの視線に自然と入り込むように設計しましょう。

配置に一貫性を持たせよう

一貫性があるECサイトはユーザーにとって使い勝手が良く、信頼性も向上します。

サイト全体や個別ページのデザインをはじめとして、商品写真の明度や彩度、角度、大きさを揃えたり、文章表現の型を同じにしたりすることで、ユーザーに一貫性のあるECサイトだと認識してもらえます。

各種デバイスに対応させよう

2015年4月21日、Googleはモバイルフレンドリーアップデートを行いました。このアップデートは、スマホでの閲覧に適していないページの表示順位を下げるものです。ユーザーはスマホからサイトにアクセスすることが多いため、スマホに対応をしているサイトを上位表示することが狙いです。スマートフォンは世帯当たりの普及率が最も高い情報通信機器となっており、経済産業省の調査レポートでも現代は「スマートフォンを第一に想定したコンテンツやサービス作りが重要な時代」とされています。（出展：総務省「令和2年通信利用動向調査」、経済産業省「令和3年度電子商取引に関する市場調査報告書」）スマホ・タブレット・パソコンなど、機器に合わせて最適なデザインが表示できるよう、レスポンシブWebデザインで制作しましょう。端末別に画面を生成・切り替えるプログラムを作成する必要がなくなり、ユーザーにとっても自分の端末で最適なUIが表示されます。

ECサイトのUIデザインの改善の手順

ECサイトの改善の方向性を理解したら、実際にUIデザインを改善していきましょう。下記では、ECサイトのUIデザインの改善の手順を解説します。

現状の課題を発見する

UI向上の最初のステップは、まず現状調査を行なってUIのどの部分に課題があるのかを探す作業です。

ユーザーを迷わせたり考えさせたりしないことが、UIデザインの目指すゴールですので、特に初めて使用するユーザーの視点に立って課題を発見することが大切です。

客観的な視点を取り入れるために、ユーザビリティテストを行うことも効果的です。一般の利用者に協力してもらい、ECサイトで商品を購入するまでの様子を観察して課題を発見する手法です。

普段ECサイトを目にしている運営者は、サイトの仕様に慣れているため、新規ユーザーがどこで躓くのかを客観的に把握しにくい立場にいます。このようなテストは、はじめて利用する人を対象に行うため、運営者には気づかない新たな課題が出てくる可能性があります。

下記の点に注意しながら課題を発見していきましょう。

ユーザーのサイト滞在時間はどのくらいか。
離脱率の高い箇所はどこか。
商品紹介文や商品画像はわかりやすいか。
余計な作業をすることなく、スムーズに目的の情報まで辿り着けるか。

改善案を考える

課題を発見できたら、次は課題を解決するための改善案を考えましょう。

課題を解決する際に参考とすべきものは、競合他社のECサイトです。競合他社は自社と同じようなターゲットを設定しており、競合他社のECサイトも同じようにUIの改善に日々努めています。

特に検索結果で上位に出てくるECサイトや、誰もが知っているような大手のECサイトを調査してみましょう。自社サイトで商品を購入するユーザーは、すでに大手ECサイトを利用している人も多いと考えられますので、大手ECサイトのユーザビリティよりも劣っていると、ユーザーは「なんとなく使い辛い」と感じてしまうでしょう。

ただし、大手ECサイトは大きな資金を投じて、ユーザビリティを独自に高めている場合もあります。全てを上回ることは難しいかもしれませんが、費用対効果を考えて、より最適な改善案を見つけましょう。

改善計画を立て実行する

改善案が決まったら、改善計画を立てて、実際にUIデザインをより良いものへと改善するプロジェクトを始動させましょう。プロジェクト管理では、WBS（Work Breakdown Structure：作業分解構成図）を作成しましょう。WBSとは、プロジェクトの作業を段階的に細かなタスクに分解して、進捗を管理する手法です。粒度や順序をそろえたツリー構造のタスク表を作ります。

WBSを作成することで、やるべき作業が明確化され、タスクのスケジュールを組むことができます。

改善後の状態を評価する

改善計画に基づき、WBSに記載の作業が完了したら、再びテストを行い、改善の効果をチェックしましょう。

サイト滞在時間や離脱率などの変化を改めて計測し、実際にどう変化があったのかを評価します。

評価した結果、更なる改善が必要なら再び改善案を練り、改善計画を立てて実行しましょう。UIデザインはPCDAサイクルを回すことで、徐々に改善されていきます。

ECサイトのUIデザインを改善する具体例

ECサイトによって改善すべき項目は異なります。しかし、多くのECサイトで共通するUIデザインの重要項目も存在します。下記では、ECサイトのUIデザインにおける具体的な重要項目について紹介します。

ファーストビューで惹きつける

ユーザーがはじめてサイトに訪れたときに、魅力的なデザインであると感じさせることが大切です。

第一印象が大切なことは、人間関係でもECサイトでも同じです。ECサイト全体的な視覚の印象を良くして、サイト滞在時間を延ばしましょう。

ユーザーの動きに沿った配置

マイページには登録情報編集機能を設ける、商品にカートを入れると購入数量を選択できる機能を設けるなど、ユーザーが次にどういう動きをするか予測して機能や導線を考えることが重要です。

視覚的にインパクトのあるCTAボタンを作成する

CTAとは、「Call To Action」の略で、ECサイトの場合、ユーザーに商品の購入を促すことを指します。

CTAボタンとは、ECサイトにおいてユーザーのクリックを促し、コンバージョンへと導くためのボタンです。CTAボタンは視覚的にインパクトを与えることで、クリックされやすくなります。

カルーセルで注意を引く

カルーセルとは、画像などのコンテンツをスライド表示させる手法のことです。「スライダー」と呼ばれることもあります。

カルーセルは、限られた場所で複数のビジュアルをユーザーに訴求するために使用されます。ファーストビューにカルーセルを設置することで、多くの情報をユーザーに届けることができます。

商品を拡大表示できるようにする

商品画像を拡大・多角的視点で見られるようにすれば、通販特有の買い物の失敗を防げます。

一方向からの画像だけではなく、多方面から撮影した画像を掲載することで、ECサイトのデメリットの対策となります。

EFO対策を行う

EFOとは、「Entry Form Optimization」の略で、入力フォーム最適化を指します。顧客が商品を購入するまでのプロセスにおいて離脱を防ぐためには、EFO対策が必要不可欠と言われています。

商品を購入するまでのプロセスにおいて、なるべくユーザー自身が手入力する項目を削減しましょう。例えば、性別を聞く場合は、「男性」「女性」と直接入力するのではなく、ラジオボックスを用いてどちらか選択するだけにするとよいでしょう。

入力ミス防止でトラブル回避につながり、ユーザーにもストレスを与えない入力フォームを目指しましょう。

動画で流れを解説する

画像やテキストよりも、動画のほうが伝えられる情報量が多いので、動画があればユーザーに商品の魅力をより伝えることができます。

文章で全ての情報を説明すると、ユーザーにエネルギーを使わせてしまいます。動画を用いることで、音声と映像の両方で訴えることができるので、よりイメージが湧きやすくなるでしょう。

ECサイトのUIデザインまとめ

このブログでは、UIの基礎知識から、UIデザインを改善するための方法や具体例について解説しました。

ユーザーはECサイト内の検索窓にてキーワードを打ち込み、検索結果に表示された商品からユーザーの目的とする商品を見つけます。

しかし、もしユーザーの目的とする商品が見つからなかった場合、再度検索窓にキーワードを打ち込み、検索結果を表示することになります。このような検索の手間を省くサービスが「リッチサジェスト」です。リッチサジェストは、たった1文字入力するだけで検索候補を即時に提案します。検索し終える前に検索候補が表示

されるため、何度も検索結果を表示する必要はありません。 ECサイトは探す、見るの繰り返しになるため、良い検索体験を提供するには「リッチサジェスト」がおすすめです。

カテゴリー: UI, UX, コラム, 基礎知識