UI（ユーザーインターフェース）をデザインする
出典：gahag.net
最近では、似たような機能を持つアプリやWebサイト、サービスも増えてきました。
新しいソリューションを思いついてリリースしても、すぐに類似サービスが出てきます。
そのような状況の中、顧客・ユーザーに選んでもらうためにはどうすればいいのでしょうか。
その答えの1つが、「UIデザイン」です。
今回は、UIの基本知識と「UIをデザインするなら知っておきたい７つのコト」を学んでみましょう。
UIとは？
出典：gahag.net
UI（ユーザーインターフェース）とは、ユーザーとプロダクトの接点のことを指します。
インターフェースという言葉は、異なるモノ同士が接する部分のことを意味しており、特にコンピューター分野でよく使われていました。異なる機器同士の接続部分のことです。
UIは、ユーザーとプロダクト・サービスが繋がる部分です。端的に言うと、「見た目」のことになります。
本質的には「与える機能・体験に即した見た目」ともいえるでしょう。
UIの違いについて有名な例を1つ見てみましょう。
-Amazonと楽天
「ECサイト」として、一見同じようなサービスを提供しているAmazonと楽天。
（ビジネスモデルなどの話は置いておきます）
しかしながら、サイトの雰囲気はずいぶんと違いますね。
検索ボックスの機能、カテゴリーの出し方、商品の並べ方などなど。
また、Amazonの方がシンプル、楽天の方が雑然としたUIになっています。
これはAmazonと楽天がそれぞれ異なるUX（ユーザー体験）を提供しているからなのです。
提供したいUXが変われば、UIも変わります。
出典：amazon.co.jp
Amazonはユーザーが目当ての商品を簡単に購入できるようにします。
加えて、データを用いたリコメンド機能を活かすUIを設計しているのです。
出典：rakuten.co.jp
一方、楽天はユーザーに買い物自体を楽しんでもらおうとします。
バナー広告などを上手く用いて、予想もしなかった商品との出会いを演出するのです。いわばネット上のショッピングモールでしょうか。
このように、UIは提供したいUXによっても変わるのです。
UIをデザインする必要性が感じられたと思います。
次は、UIをデザインするとはどういうことなのか考えてみましょう。
UIデザインとは？
UIデザインの目的は、ユーザーにとって使いやすいUIをつくることです。
ユーザーにはそのプロダクトやサイトを使う「目的」があるはずです。
UIデザインの目標はユーザーがストレスなくその「目的」を達成できるようにすることです。
通販サイトで考えてみましょう。
ユーザーには目当ての商品があり、それを購入することが目的となります。
そのためにはサイト上でその商品の購入ページにたどり着かなければなりません。
ユーザーがそのページまで迷わず行けるようなUIが良いUIです。
また、もしかしたらユーザーは類似商品で比較・検討を行いたいかもしれません。
その場合、簡単に類似商品を見ることができるようなUIを設計します。
UIデザインとは、ユーザーのやりたいことを正確に予測し、そのためのサポートをするUIをデザインすることなのです。
UIデザインの心掛けは、「ユーザーに考えさせないこと」です。
Webユーザビリティの権威であるスティーブ・クルーグ氏は『超明快 Webユーザビリティ ―ユーザーに「考えさせない」デザインの法則』の中でこう述べています。
“「ユーザーに考えさせない」はすべてに勝る大原則だ。Webデザインがうまくできているか、そうでないかを考えるとき、最後の審判はこの原則がする。もしユーザビリティの法則を2つも覚えていられないというのなら、これさえ覚えておけばいい。”
では、ユーザーに考えさせないために何ができるか。
そのために知っておきたい７つのコト、学んでいきましょう。
UIデザインをするなら知っておきたい７つのコト
① まず押さえておきたい、UXとの関係
UI/UXという風に、UIとUXがセットになっているのをよく見ます。
UXとは、ユーザー・エクスペリエンス、ユーザーが得られる体験のことです。
UXはUIも含めた、すべての顧客体験のことを指しています。
したがって、UIはUXの一部と考えて大丈夫です。
② 優れたUIデザインは“慣習”を使う
デザインと聞くと、オリジナリティを出すべきだと思っている人もいるかもしれません。
しかし実際には、デザインというのは模倣をベースに考えていくものです。
特にUIデザインにおいては“慣習”を利用することが大切になってきます。
例えばWebサイトのUIの場合、サイトタイトルの位置、メニューの位置、タイトルを押すとホームに戻れる、テキストリンクの色など、多くの“慣習”が存在します。
ユーザーはこれらの“慣習”をもとに行動するので、むやみに“慣習”を破ってしまうと無用な混乱を与えてしまうのです。
UIデザインを始めるためにはまず、そのプロダクト・サービスに関係のある“慣習”を学習することから始めましょう。
③ UIでも“4つの基本原則”を用いる
『ノンデザイナーズ・デザインブック』にも載っているデザインの4つの原則。
当然、UIデザインでも使います。
知らなかった人はこの機会に覚えておきましょう。
近接（まとめる）
同じ種類の要素・関係が近い要素を近付けて配置します。
これにより論理が明確なUIを形成できます。
整列（ととのえる）
要素の配置を整えます。
意図を持った配列はUIデザインの基本です。
反復（くりかえす）
同じパターンを繰り返し、デザインに統一感を持たせます。
UIデザインでは、ユーザーの慣れを促進できます。
コントラスト（メリハリをつける）
重要度に合わせて、サイズや色などを変えます。
メリハリがあるほど元気なデザイン、ないほど整然としたデザインになります。
④ “制約”でユーザーを導く
“自由な選択肢”はユーザーにとって迷惑以外の何物でもありません。
UIデザインでは、“制約”をつくってユーザーの行動を限定するべきです。
「ユーザーに考えさせない」UIのために最も重要なのが“制約”になります。
UIデザインとは、「どこでどのような“制約”をつくるのか」、を考えるプロセスなのです。
⑤ アフォーダンスとシグニファイア
UIデザインのキーワードの「アフォーダンス」と「シグニファイア」というものがあります。
『誰のためのデザイン？』の著者である認知科学者D. A. ノーマン氏が提唱した概念です。
アフォーダンスとは、環境が人（動物）に与える意味・価値です。
ボタンがあると「押せそう」、フックがあると「掛けれそう」、扉があると「開けれそう」と考えると思います。
それがアフォーダンスです。
しかしアフォーダンスはそのままだと受け取る側に依存しています。
食卓に運ばれてきた「銀の器に入った水」。
飲み水だと思う人もいれば、指を洗う水だと考える人もいます（➡フィンガーボウル）
UIデザインでは、アフォーダンスをそのままにするわけにはいきません。
そこで「シグニファイア」です。
シグニファイアは、意図を持たせたアフォーダンスです。
つまり、その要素を見た全ての人（あるいは対象となる人）が確実に同じような意味を受け取るようにデザインされたもののことです。
先ほどの水と器でシグニファイアを考えてみてください。
口をつけられないようなフチにする（これは“制約”でもあります）。
指を拭くためのタオルを近くに置いておく。
指を模した器にする。
デザインの中で現れる数多のアフォーダンスをシグニファイアに変えていく。
これもUIデザインに重要なプロセスです。
⑥ ユーザビリティ・テストは必ずしよう
UIデザインにおいて、ユーザビリティ・テストは不可欠です。
UIデザイナーはそのプロダクト・サービスのUIについて知り過ぎています。
そのため、UIの欠陥に気が付かず、見過ごしてしまうことあるのです。
ユーザビリティ・テストは難しいものではありません。
事前知識のないテスターに、そのプロダクト・サービスを使って何らかの目的を達成してもらい、その様子をモニターする、というのが基本的なプロセスです。
プロトタイプを作って、なるべく早い段階からテストを行うようにしましょう。
⑦ メディアごとのUIを考える
Webサイト、アプリなどのUIを考える場合、ユーザーの使うメディアごとにUIを考えましょう。
PCとスマホでは画面の見え方や操作方法が全く違うので当然です。
例えば、スマホでは縦スクロールに対する抵抗が比較的少ないため、縦長のページを作成できる一方、画面が小さいためグローバルナビゲーションの見せ方には注意が必要になります。
ユーザーの使用シチュエーションを想像・体験しながらUIをデザインしましょう。
今や当たり前のUIデザイン
出典：pakutaso.com
使い勝手の悪いものを、ユーザーがわざわざ使うことはなくなりました。
優れたUIをデザインすることは、もはや製品・サービス開発における重要な一工程です。
UIデザインに関する知見を学んで、ユーザーに愛されるプロダクト・サービスをつくりましょう。
