目次
Webサイトやアプリ設計の過程で、よく耳にするのが「UI」や「UX」という言葉です。「UI（またはUX）の改善を図る」などと言うものの、そもそも、この2つの言葉の意味や違いが「いまいち、よく分からない」という方も多いのではないでしょうか。そこでこの記事では、UIとUXの違いやデザインスクリプトについて、具体的な例を交えながら紹介します。
UI（ユーザインターフェース）とは
UI（ユーザーインターフェース）は、直訳すると「ユーザーとの接点」です。パソコンやスマホなどで目にする、あるいは実際に触れる、さまざまなフォントやボタンなどを指します。UI最大の目的は、「使いやすさ」を実現することです。UIデザインが悪いと、使いづらく感じるだけでなく、ユーザーの離脱を生み、購買などの目標とする行動を妨げかねません。
このような事態を避けるために、UIデザインでは、以下のような改善を施していきます。
- 入力補助があり情報入力が簡単でスムーズ
- 見やすいフォントサイズやサイトデザイン
- 導線やボタンを簡単に見つけられる
UIデザインの改善例：入力補助があり情報入力が簡単でスムーズ
例えば、会員サイトやオンラインショップなどを利用する際には、ユーザーの氏名や住所などを記入する必要があります。しかし、入力フォームが小さかったり、必要以上に文字での説明が多かったりすると、非常に使いづらく感じるでしょう。
そのため、以下のような施策を行うことが多いです。
- 入力フォームやボタンを押しやすい大きさに変更
- 必須項目にはマークをつけるなどで視覚的に強調
- 入力例をプレースホルダーで表示
- 注釈は入力エリアのすぐ近くに配置
入力補助やガイドを施すことで、簡単かつスムーズな情報入力が可能となります。
UIデザインの改善例：見やすい文字サイズやパーツデザイン
「文字が小さすぎて、読みづらい」「不要なリンクやバナーが多く、最も伝えたい部分が見えづらくなっている」このような場合も、早急に改善すべきUIといえます。改善策としては、見やすい文字サイズに調整したり、文字と背景のコントラストを高めること、動線やリンクが視覚的にすぐ認識できるようにすること、明確なテキスト表現などが挙げられるでしょう。また、最も伝えたい部分が強調されるように、不必要なパーツは思い切って取り外すことも大切です。
さらに、パソコンとスマホとで、文字サイズやパーツを最適化することで、デバイスを問わず使いやすいUIを実現できます。
UIデザインの改善例：導線やボタンを簡単に見つけられる
プロダクトやサービスが魅力的であっても、分かりにくい導線やボタンによって、「どうすれば買える（使える）？」とユーザーを悩ませてしまう場合があります。ユーザの購買意欲は少しの手間で下がってしまうため、せっかく購買意欲がわいても離脱する原因になりかねません。そのため、「Z型」や「F型」など、ユーザーの支援の動きを予測し、その終着点にクリックボタンを設置すると良いでしょう。また、ボタンは直感的に「押す」ことを認識できるようなデザインを施すと、「ユーザーにとっての良いUI」となります。
UX（ユーザエクスペリエンス）とは
UX（ユーザーエクスペリエンス）は、直訳すると「ユーザーの体験」です。
UIを起点として、商品やサービス全体から得られる感情的・物理的体験を指します。例えば、スマホを使っているときに見たり触れたりするのが「UI」、そこから得られる「動作が重い/軽い」「操作性が良い/悪い」といった体験が「UX」です。
つまり、UIはUXを構成する一部分ということです。UXを改善するためには、UIを改善するだけでは不十分な場合があり、時にはサービス全体を見直す必要も出てきます。
UXの改善例：ユーザの状態に合わせて最適な提案をしてくれる
Webサイトに訪問するユーザーの中には、自らのニーズをハッキリと認識している方もいれば、漠然としたニーズを抱えて「何をどうすればいいか」と答えを求めている方もいます。前者であれば、最短距離で目的のものが見つかる、あるいはそれ以上に良いものを提案してくれると、そのWebサイトに対する満足感を得られるでしょう。
一方、後者であれば、新しい発見や面白いものの提案によって、自らのニーズが明確化すると、「有益な情報を得られた」という経験が残ります。
例えば、Amazonでのレコメンドシステムや、購入履歴を元にしたリピート購入アラートなどが挙げられます。このように、ユーザーの状態に合わせて最適な提案ができるようにすることも、UX改善で大切となる考え方です。
UXの改善例：商品の注文から配送までのプロセス視化
オンラインショップなどでは、商品の注文から配送までのプロセスを「いかに分かりやすく、ユーザーに伝えられるか」で、安心感や信頼感が変わってきます。
例えば、Amazonでは注文後、「いつ発送され、今どこを配送中か」を注文履歴などから確認可能です。自社にとっては当たり前で合っても、ユーザにとっては不安に感じることはさまざまです。良いUXを実現するためには、このようなプロセスを可視化し、いつでも確認できるようにデザインすると良いでしょう。
UXの改善例：決済や会員登録プロセスの短縮や簡易化
Webサイトやアプリの操作で最も煩わしく感じやすいのが、決済や会員登録のプロセスです。ユーザーの離脱を防ぎ、良いUXを提供するためには、このプロセスにおける短縮や簡易化が重要になってきます。このプロセスの短縮でトレンドになったのが、「ゲストとして購入する」というUXデザインです。ユーザーは購入をスムーズに体験でき、個人情報の登録も抵抗なく行うことができます。それ以外にも、「IDはメールアドレスにする」「任意の項目は登録後に記載してもらう」なども魅力的なUX改善例です。すでにユーザーが持っている各種SNSやGoogleなどのアカウントとの紐づけを可能にすれば、ワンクリックだけで済みます。
最近では、Amazonアカウントを使用して、独自オンラインショップで購入手続きが可能になるAmazon Payも良く見かける様になりました。このような改善策を講じることで、ユーザーの負担を減らし、登録や購買といった目的の行動を完了まで導くことが可能です。
UIとUXの違いを総まとめ
ここまで紹介したUIとUXの違いを、2つの視点から改めて振り返ってみましょう。
UXは目的でありUIは手段
UXは、分かりやすい・使いやすいといった体験の末に、購買や登録などの行動を完了させることが目的です。一方で、UIはその目的を達成するために用いられる、手段の1つになります。
UXは差別化でありUIは最適化
昨今、デザインツールの普及により、いわゆる「デザイン性の高さ（見た目の良さ）」による差別化は難しくなりました。サービスや商品の値段・機能の違いも、さほど大きいものではありません。そこで重要視されるようになったのが、「UX」です。他社と異なるUXを提供することで差別化を図り、購買や登録など目的とする行動へ繋げるようになりました。例えば、Amazonは他のECサイトと異なり「翌日に届く体験」を作り上げ、大きな差別化を実現しています。
一方で、UIは、「対象とするユーザーに合わせて、UXを最適化する手段」です。当然、似たUXを提供する競合がいる場合、業界のベストプラクティスとして模倣されます。UIは競合優位性ではなく、ユーザ体験の最適化プロセスにおける施策の1つとして考えておきましょう。
UI・UXの改善プロセス-デザインスクリプト
UIやUXの改善は、ユーザーの離脱を最小限にとどめるためにも、なるべく早急に対応する必要があります。そんなとき、活用したいのが「デザインスクリプト」です。改善策の検討から検証までにおける5つのステップを、5日間で行う方法となります。
Understand（理解）
まずは、現状のどこに問題があるかを抽出し、その原因を分析します。UXに関わる多様な部門のメンバーが集まり、さまざまな視点から分析・情報共有することが大切です。
Diverge（発散）
分析した結果から、どのような改善策を講じれば良いか、アイデアを出し合います。できるだけ多くのアイデアを出しながら、紙とペンで改善策を視覚化していきましょう。
Decide（決定）
視覚化したアイデアを見比べながら、どの改善策をプロトタイプに昇華していくか決定します。このとき、最終的に実現したいUXを念頭に、アイデアを絞っていくことが大切です。
決定後は、ユーザーの利用をイメージしたストーリーボードを作成していきましょう。
Prototype（プロトタイプ）
ストーリーボードを元に、プロトタイプ（試作品）を制作。通常、プロトタイプには忠実度によって3つの段階があります。しかし、デザインスクリプトでは、すぐにユーザーテストができる段階のプロトタイプを作成する必要があるため、注意が必要です。
Validate（検証）
作成したプロトタイプを使用し、ユーザーテストを実施していきます。そこで得られたフィードバックを分析し、UI・UXの改善に反映させます。
UIとUXの違いは目的か手段かの違い
UIはUXを構成する一部分であり、UXを実現するための手段の1つです。Webサイトやアプリ制作において、UI・UXの重要性は以前よりも増しています。しかし、単にクリエイティブなUIを作るだけでは、UXの向上は見込めません。UI・UXに関わるデザイナーは、ユーザー視点を大切にしながら業務に当たっていきましょう。
UIデザインやUXデザインの仕事を実現できる環境を探してみましょう
UIデザインやUXデザインについての理解が深まったら、実際の現場での仕事を探してみましょう。BRIKでは、デザイナーをはじめとするクリエイターに向けたデザイン・デジタル業界の求人サービスBRIK JOBを運営しますので、こちらも合わせてチェックしてみましょう。
