UIはユーザーインターフェイスの略称です。
インターフェイスは「境界面、接点」と訳すことができます。例えば、メニューのボタン、操作性、文字のフォント、色合い、など、ユーザーが触れるそのものです。このことから、UIは「ユーザー」と「製品」あるいは、「サービス」との「インターフェイスすべて」のことを指す言葉として、認識されています。ユーザーとは、主にWebサービス・アプリケーション・ソフトウェアを利用する人を指します。
UIとUXの関係
UIの定義をお話ししたところで、位置関係を把握しておくためにUXについても触れておきます。UX（User Experience／ユーザーエクスペリエンス）は、しばしばUIとセットで取り上げられることがあるので、これを読んでいるあなたも一度は耳にしたことがあると思いますが、これは「サービスなどによって得られるユーザー体験」を意味します。メニューボタン使いやすい！とか、サイトの色がチカチカして見にくい。などですね。
また、UIは満足度の高いUXを達成するために必要だと考えることが出来ます。UXの中にUIが含まれていると言っても良いかもしれません。
話がややこしくなってきたので、UIとUXの関係をシンプルな図にしてみました。
「制作者からの提供＝UI,それに対するユーザーからの反応＝UX」と表すことが出来ます。
つまり、ユーザーがWebサービスを使用することにより、高い満足感を得るため（UX）に、より効率的で心地よいデザイン（UI）を設計すること、これがUXとUIの関係性であり、UIデザイナーの役割と言えるでしょう。
より良いUIの先により良いUXがある
より良いUIを考える前に、悪いUIとは、具体的にどのような状態を指すのでしょうか。
代表的なものを5つほどあげてみます。
- デバイスによって表示が崩れる
- フォントがコロコロ変わり個性を持たせすぎている
- ボタンが沢山あってどれを押せばいいかわからない
- そもそも何が目的のページかわからない
- 色が見にくい、眩しい
トレンディで美しいWebサービスでも、この5つが全て揃ってしまったサイトだと居心地が良いとは言えません。
では、悪いUIをより良いUIにするにはどうすればよいでしょう。
ここからはUIデザイナーの仕事です。
- デバイスによって表示が崩れる
→リキッドデザインを使用する - フォントがコロコロ変わり個性を持たせすぎている
→一般的なフォントの使用する - ボタンが沢山あってどれを押せばいいかわからない
→選択肢を厳選してボタンに強弱をつける - そもそも何が目的のページかわからない
→内容が要約された、分かりやすい見出しを設置する - 色が見にくい、眩しい
→ベース・メイン・アクセントのカラーを使い分け、CUD（カラーユニバーサルデザイン）も意識する配色にする
そしてこれらを通じて、ユーザーはより良いUXを体験します。
- リキッドデザインを使用する→どのデバイスでもデザインが崩れず見やすい
- 一般的なフォントの使用する→先入観なくテキストの内容が頭に入る
- 選択肢を厳選してボタンに強弱をつける→ユーザーに必要なボタンに素早く目が行く
- 内容が要約された、分かりやすい見出しを設置する→ユーザーに必要な情報を素早く見つけられる
- ベース・メイン・アクセントのカラーを使い分け、CUD（カラーユニバーサルデザイン）
意識する配色にする→色が邪魔にならず、また心地よさの一因を担い、色覚に不安のあるユーザーも問題なく目的を達成できる
UI→WEBデザイン→UX
さて、ここまでUIとその位置関係についてお話ししました。
ここからは、WEBサービス製作者としての立場で、UIデザイナーとWEBデザイナーの違いをさっくりお話しします。ただ、実際のところ、両者の担う役割の範囲や区別は企業ごとに違うと思われます。
もちろん、両者には明確な違いも存在しています。
前章では、UX（ユーザーからの反応）をよりよくするためには、より良いUI（製作者からの提供）が必要ということを解説しましたが、WEBデザイナーの仕事はこの一部分を担当しています。それは、見た目（装飾）です。
デザインを作成する際、製作者の趣味趣向や考えのみで商品が作られるわけではありませんよね。そこには必ず、目的を持った設計図が必要になります。しかも、ただトレンドに忠実な装飾だけでなく、ユーザーが居心地よく過ごせるための設計が施された図面が必要なのです。その設計書は、UIデザイナーが作成したものです。
「UI→WEBデザイン→UX」これが3つの関係性です。
まとめ
いかがでしたか？
UIとは、Webサービス等を利用するユーザーが触れるものを指し、より良いUIとは、「より満足感のある体験をするためのデザイン設計」です。
UIデザイナーは目的に沿って中身を作る設計士、WEBデザイナーは設計書を基に彩る職人というわけです。設計書の目的はもちろん「ユーザーがより良いUXを体験するにはどうすればよいか」です。
制作の参考になれば幸いです。
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
衣川知秀
経歴： 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当
