UI（ユーザーインターフェース）ってなんだろう?
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事：記事一覧ページ
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対策に強いオリジナルデザインの制作サービスを提供しています。
