ECサイトをよくしたいならUIやUXについて考えよう~EC初心者編

「ECサイトの売上を伸ばすにはUIが重要」という話を運営を始めたばかりの人はよく聞くかもしれません。実際にUIはいろんな要素を握っています。

UIは構築の状況にも関わってきますが、これを向上させるとユーザーは快適にサイト内での時間を過ごせるようになります。ここでは「UIとは一体なんなのか？」という初心者から、「ある程度はわかる」という人に向けて、ECでのUIをまとめて解説します。

UIとは「ユーザーインターフェース」のこと

UIとは「ユーザーインターフェース」の略語です。このユーザーインターフェースはECやウエブに限った用語ではありません。実際になんらかの道具などを利用者が使う画面や操作に関わることをUIといいます。インターフェースは直接操作するものに対して使われます。主にユーザーが利用する操作面をユーザーインターフェースといいます。

ネットに限らずいろんな制作の場面で使われます。例えば自動車です。ハンドルやシフトレバー、フロントガラスやミラーなどはUIとして設計者や開発者がユーザーの使い勝手を考えて設計します。

このUIについて考えることはECにとっても、非常に重要なことです。UIはECサイトにとって、ユーザーとのもっとも大きな接点になるからです。

ECサイトではまず会社のアイデンティティを略したCI（Campany Identity-カンパニーアイデンティティ）を意識したデザインを行う必要があります。このCIで考慮した特徴を意識しつつデザインは進みますが、その上でUIの向上については実際に利用者の使い勝手を考えることですすめていきます。

実際に店舗でショップのスタッフがナビゲートしながら買い物することもできる状況とは違い、ECサイトではほぼ見た目が勝負です。

そのため、「ここをクリックしたらどういったページに進むのか」「スクロールしたら情報が出てくる」といったことがわかりやすく一目で理解できるのが優れたUIです。

ユーザーが自分の意思で移動し、どういったページにいるのかわかるなどの要素は非常に重要です。誰もよくわからないお店で、詳細のわからない商品は買いません。これは実物を実際に手に取ることができないオンラインショップであれば、ますますこの傾向が強く現れます。

逆に商品が見やすく陳列され、ガイダンスも行き届いたお店であれば、買い物にきたお客さんは安心して買い物ができます。これと同じように、すべての事柄においてわかりやすく、知りたい情報が取りたいようにとれることがECサイトでは最低限必要なサービスといってもいいでしょう。

ECでのこうしたことを全て握っているのがUIです。使い勝手がよく安心感を与えることも、逆にいろんなものが見難く、使いづらい状態になって不安を増幅させてしまうのもUIにかかっています。

商品の魅力や知名度があったり、SEOや広告によって集客力をあげたとしても、UIがよくないと最終的には購入まで至るユーザーを減らしてしまいます。これでは全てを台無しにしてしまいます。

使いやすさは売上に繋がる

つまりUIを考慮してデザインしていくことはストレートに売上の上昇に直結しています。それではUIで目指すべき使いやすさとは一体何なのでしょうか。

色々な考え方がありますが、まずは「直感的に理解できる」ということが重要ではないかと考えられます。この直感的ということは、近年とても重要なファクターになってきています。

なぜなら、最近は多くのユーザーがスマートフォンでECサイトを見ています。スマホでのサイト閲覧は限られた画面の大きさの中で情報を読み取り理解することが、「ユーザー側」に求められます。その中でユーザーは情報を瞬時に判断し、直感的に操作することが増えているからです。

その中で情報提供する側がサイトの情報として細かく文字でいろんなことを提示しても読むことが困難です。また、スワイプやタップによる操作は、直感的に動作できますが、意外にも細かく動作を指示できないという弱点があります。

そもそもスマホ自体は直感的に操作することを基本に設計されています。そうした基本にECサイトだけ倣わなくても良いという理由は残念ながらありません。直感的に「ここをタップすると、こうしたことができそう」という流れを踏襲して考えられたデザインのほうが当然使いやすくなります。

そのため、以下のような要素がより求められるようになってきます。

• 高い視認性
• 共通認識を持てるサインとしてのアイコンの使用
• タップが必要な要素同士の適度な距離感
• 動作原則に基づいたレイアウト
• 的確な商品のカテゴリー分け

などです。

スマホのUIという点では、いろんなシチュエーションでECサイトを見ている可能性があるということも考慮しなければいけません。つまり、室内に限らず屋外で見ている可能性もあれば、電車などの移動中などいろんな条件下でも視認性のよい見やすいサイトである必要があります。

また、見てなんとなくわかるように検索バーに「虫眼鏡マーク」をつけたり、ログインへの入り口がわかるようにボタンを設置したり、アイコン化するなど工夫が必要です。

使用頻度の高い項目へのリンクはアイコン化して常に画面のどこかに表示したり、目的の商品の大分類をアイコンにして表示する、バーガーメニューの導入などは「ここをタップすれば何かできそう」とイメージしやすくなります。

入力フォームなども、どこに何を入力すべきかわかるなどといったことも重要です。最近の自動入力などもUI向上の一環といえます。

もちろんPC向けのサイトであってもこうした考え方は同様です。画面が大きくなるため、リンクの要素同士の距離感の要素についてはかわりやすいと思います。また画面の配置が横長と縦長といった違いはあります。こうした視点をもつことは、ユーザーのサイト内での操作性を高めます。

「動作原則に基づいたレイアウト」については、もし、みなさんがサイトを開いた時に「どういった感じで視線を動かすか」、「どういった配置にしていると操作がしやすいか」といったことを考慮したレイアウトのことです。こうしたことは文化背景にある程度支配されます。スマホやPCであれば、横書きを基本にしているという刷り込みがあります。そのため目線が自然と左上に向き、右下へと移動していくという人がほとんどではないでしょうか。もちろんこれが縦書きカルチャーであったなら右側上部から始まり下へ動き、左に順にずれていくという動きだったでしょう。

こうした文化背景の共通性に関わる考察はとりあえず置いておいても、とにかくECサイトを閲覧中の人の目線の動きは左上から右へうごき下へ下がっていきます。

これはZ型の配置などと呼ばれることもあり、必要な情報の重要度順にZに配置していくというものです。最近ではスマホの動作にあわせてもっとシンプルにI型という考え方もあります。

Z型でポイントになりやすい場所は最初の左上、視点が止まりやすい右上、そして最下部などです。こうした導線にはあまり逆らわずに必要なものを順番に配置すると、ユーザーは自然に対象物に集中できます。逆にこれを守らないと違和感を感じやすく「UIの良くないサイト」ということになるでしょう。

カテゴリーの分類はUIにとって基本的なことです。欲しい商品や情報を探しにくいサイトはそれだけでUIが悪いと判断されます。的確な分類のされたサイトはそれだけで快適さが変わってきます。

他にも文章や文字の大きさ、背景色、表示の順番など、UIの評価に影響を与えることは少なくありません。

安心感を高めよう

UIが快適であれば買い物中に安心感があります。また、必要な情報、例えばいろんな角度から撮影された写真や、どういったプロセスや材料で作られているのかなど、質感のわかる情報の補助にたどり着きやすい、あるいは盛込まれた項目があるなどすれば安心感はさらに高くなり、購入への障壁はどんどん下がっていきます。

実際に、ネットショッピングでは最初に購入してもらうことが障壁になります。これをいかに小さくできるかが重要ですが、そうした点の多くをUIが握っているといえます。UIを改良していき、安心感を高めることができるかが売上アップに確実に繋がっています。そして、そこで重要なのは「お客様に寄り添えるか」ということです。

こうした視点はなんらかのツールを盛り込む時にも持つ必要があります。売り込みとして　UIを向上させるとしているツールは数多く存在しますが、実際のところはどうなのかしっかりと考えてください。導入する場合は内容をしっかりと確認し、意味や意図がユーザーに理解できるものである必要があります。

UIの先にはUXがある

UIとよく併記されることの多いUXという言葉があります。これは「User Experience-ユーザーエクスペリエンス」の頭文字を取った略称です。訳はユーザー体験となります。ECサイトではこのサイト内に訪問して、購入し商品が届いて使い始めるまでの体験によい印象を持つほどよいと言われています。

ECサイトのUIはこのUXを高めるためにあるといえます。ECサイトのUIがよくできており、その他の配送やパッケージなどでも感動を与えることができれば、そうしたユーザーはよりそのサイトや企業、商品について肯定的な印象を持つことでしょう。

このようにUXをあげていくことは優良顧客を生み出し、ブランディングにも繋がる部分です。そのためにはよく考えられたUIが欠かせません。ECサイトのUIでは新規ユーザーの購入障壁を下げるだけでなく、リピーターを作り、優良顧客へ導くためにも欠かせない要素と言えるでしょう。

テストでは実際にユーザーになってみる

それでは、UIもUXもよりよいものにしていくためには何が必要でしょうか。まずは実際に1ユーザーになって違和感を探ってみることです。もし違和感があれば、それの原因を突き詰めてみてください。

また、分析も役に立ちます。どこでサイトを離脱したのかをよく観察してみてください。もし集中して離脱するポイントが見つかれば、そうした点に問題があります。カートに入れてからの離脱などが多い場合も決済などのプロセスに問題があるために起こります。

こうした問題の解決を難しくするのは、顧客目線になりきれないことが原因になることもあります。事業者とユーザーという関係性を離れて可能な限りユーザー目線になり、それを改善する姿勢を持つことも忘れずに持ちましょう。

こうした問題を考える時にはカスタマージャーニーマップも役に立ちます。

【参考】ECサイトでのカスタマージャーニーマップの役割と使い方

また、中には自由度の低いASPを使っているなどで、どうしても技術的に解決できないという場合もあるかも知れません。機能的に対策できないなどの場合は、改修時に押さえるべきポイントとして情報をストックしておきましょう。

こちらの記事ではUIという観点でデザインを進めることについて解説してますので、合わせて参考にしてください。初期の段階から可能な限りUIを考えていきましょう。

【参考】ECサイトのデザイン~まずは「ユーザーがわかりやすく」を意識しよう

使い勝手を考慮したサイトの構築は、専門業社に任せきりでは魅力が伝わりきらず、かと言って、自力では、技術的に限界を感じやすくなるパターンを多く見ます。

しっかりと意図を汲み取り制作してくれる専門家とプロジェクトを進めるのが、結局は一番効率的で経済的、かつ結果もついてきます。弊社では随時、ブランドを高めるECサイト作りを行っています。その経験から、UIについても考慮した制作が実施できます。もし、サイト制作の業者選びで迷っているのであればぜひご相談ください。