UXとUI。最近は当たり前のようによく聞く言葉になりつつありますが、実際その違いをはっきりと把握している人は実は少ないのではないでしょうか。Webやアプリのデザインには欠かせないこの2つのデザインプロセス。重なる部分も多いUIとUXデザインなのでわかりにくいですが、それぞれには違った目的と工程があります。具体的な実例を見ながらそれぞれの違いを見てみましょう。
目次
■そもそもUX・UIとは？
まず、UXとはUser Experience（ユーザーエクスペリエンス）の略で、UIとはUser Interface（ユーザーインターフェース）の略を指します。
Experience=エクスペリエンスとは、「経験」「体験」といった意味を持ちます。
つまり、ユーザーの経験や体験を意味し、その点では非常に広い事象を含みます。今回はWeb・アプリにおけるUXに絞って解説しますが、広く捉えるのであれば、プロダクトにおける使い勝手・・・例えば「掴みやすい」「押しやすい」「軽い」といったものもUX＝ユーザー体験の一つです。あるいは「使い勝手が良かった」「直感的に操作ができる」といった、それを使ってみてどう感じるか（どう感じさせたいか）もUXの範疇と言えるでしょう。
これに対し、Interface＝インターフェースは、「境界」を意味する言葉。
転じて、今回の記事で言えば「人とPCとの境界＝PC画面」、身の回りにあるもので言えば、「人とカーナビの境界＝カーナビの画面」、「人とスマホの境界＝スマホ画面」といった形になります。
ですので、UIデザインとは、例えばPCの画面に映るもののデザイン、カーナビやスマホの画面デザインといったものを指すことになります。
今回は、Web・アプリにおける解説ですので、UX・UIをWeb制作の観点で見ていきたいと思います。
■UXの基本、それは骨組み
WebでのUX・UIを簡単に例えるならば、UXは建物を建てる際の骨組みのことで、UIは壁の色や素材など表面のデザインであると言えるでしょう。
UXではものがどう”働くか”にフォーカスが当てられ、UIはではものがどう”見えるか”にフォーカスが当てられます。
多くの場合、デザインの最初のプロセスとしてはUXから始まります。まずこの段階で考慮されるのは
1.サイトやアプリの使いやすさ
2.ユーザーにとって必要な情報がサイト内ですぐに見つけることができるか
3.ユーザーが迷わずに次に求められているアクションを取ることができるか
4.アクションを促す言葉（コピー）が明確であるかどうか
この段階では、サイトの構造や骨組みにあたる部分のプランが主なデザイン要素として重要にになります。
多くのデザイナーは、実際にユーザーがとるアクションとその経路を想定しながら進める作業で、素早く変更可能な「紙とペン」でスケッチを進めます。
スケッチの後にデザインをデジタル化する際にも、wireframe （ワイヤーフレーム）と呼ばれるラフなレイアウトを白黒のみで行うのです。
■骨組みに見た目の美しさをほどこすUI
ワイヤーフレームができてから行われるのがUIデザインで、この段階で考慮されるのは下記のような点です。
1.色、フォント、写真などでブランドなどを表現し、ターゲットとしているユーザーとのコネクションを作る
2.UXの段階でプランされたサイトの使いやすさを邪魔しないようにデザインする
3.ユーザーの興味を保つための見た目などの工夫をする
このステージではSketchやPhotoshopといったソフトウエアを使い、サイトの”見た目”を作ります。UXの段階でデザインした家の骨組みに、壁紙を貼ったりペンキを塗ったりと表面をデザインするイメージです。
ブランドイメージがすでに出来上がっている場合には、そのフォントや色などにおいて「ブランドガイドライン」に基づきデザインを進め、そうでない場合には、そのブランドのパーソナリティー、ターゲットにあったフォント、色を選びます。
■UX・UIをうまく捉え、ユーザーの使いやすさ、見やすさを極めた優秀サイト
それでは、実際によくデザインされ評価の高いUX、UIデザインの例を幾つか見てみましょう。
Airbnb HYPERLINK https://www.airbnb.jp/
年齢や国籍など、幅広いユーザーが使用するサイトですが、その多種多様なユーザーに対応するための配慮が至る所に見られます。
「多大な機能」と「情報」を含むウェブサイトでありながら、シンプルな検索機能でサイトを使用できることに加え、場所・日程・人数・目的など、さらに細かくフィルターを通して検索もできて、ユーザーの多様なサイト利用方法に対応しています。
検索結果には値段やリスティングのタイプなど、必要な情報が写真とともに1ページに表示され、興味のあるリスティングを素早く見つけることができます。さらにそれぞれのリスティングページには大きな写真、値段、部屋のタイプ、トイレ、ベッドの数など、必要な情報が分かりやすく表示され、同じページ内で予約手続きの完了まで可能です。
Zocdoc HYPERLINK https://www.zocdoc.com
保険制度の複雑なアメリカでは、持っている保険により診察してもらえる医師が限られています。そのためアメリカでは、自分が行きやすい場所で、自分の保険を受け付けてくれる医師を探すのは容易なことではありません。
Zocdocは医師の検索から予約まで、スムーズにこなすことのできるサイトです。
ログイン前のホームページではシンプルに「症状、または医師の名前」「場所」から検索を始めます。一度アカウントを作りサイトを使い始めると、今度は以前利用した医師の名前、最後に健康診断を受けた日などが表示され、カスタマイズされた必要情報が探しやすくサイト内に配置されます。
医療用のサイトでありながら、明るく軽い色をベースにしたデザインで、堅苦しすぎず、かつ清潔な印象を与えます。
■まとめ
UXとUIがよく混同されるのは、両方が深く関わりあっていて、全くの別物ではないからです。
UXではサイトの構造や、ユーザーがいかに迷わずにサイト内を見て回れるかといった「わかりやすさ、使いやすさ」や「サイトを利用した際の印象、ユーザーの感情」をメインに考えます。そこにUIの領域であるとされる、フォント、字の大きさ、色などを絡めながら構築していくので、両者は関係ないとはいえず、むしろ、UIはUXの一部であるという見方もできるでしょう。どちらか片方が欠けてしまえば、見やすく使いやすいサイトは成り立ちません。
プロジェクトの規模によっては「UXデザイナー」と「UIデザイナー」が別々にいる場合と、一人がUXとUI両方をかけ持つ場合があります。そのような状況もあることから、自分の肩書きをUXデザイナーとするか、UIデザイナーとするか、またはUX/UIデザイナーとするか迷うデザイナーも多いのが事実です。
UXとUIのどちらか一つを専門に仕事をするデザイナーでも、美しくかつ機能的なサイトを作るためには、UXとUIの両方の知識を有し考慮していく必要があります。UXとUIは切っても切れない、わけて考えることができない交差した関係にあるのです。
