基本ノウハウ
本記事では、ユーザーインターフェース（UI）の意味、UXとの違い、さらにUI設計の重要ポイント4つを紹介します。優れたUIを設計することで、Webサイトを通して自社製品や自社サービスの良さがユーザーに伝わりやすくなります。ユーザーインターフェース（UI）は、近年デザイン業界で注目度が高まっており、よく耳にする言葉です。
しかし、UIの意味は分かるけど説明できない、似た言葉のUXとの違いが分からない、という方も多いのではないでしょうか。本記事ではUIの概要や、UIを設計する際に注意すべきポイントについて解説します。UIをうまく活用するために、UIの意味・目的をしっかり学びましょう。
ユーザーインターフェースとは、利用者（ユーザー）と製品・サービスとの接点（インターフェース）全般のことを指し、英語表記の「User Interface」の頭文字をとって、UIと表記されます。簡単にまとめると、WebサイトにおけるUIとは見た目や操作のしやすさであり、以下が例として挙げられます。
優れたUIを備えていれば、情報の伝達がスムーズになり、Webサイトを通して自社製品・自社サービスの良さをユーザーにうまく伝えられます。
UIがユーザーとの接点を指す言葉であるのに対し、UX（User Experience）はユーザーが商品・サービスを通して得た体験すべてを指します。利用中だけでなく、利用前後も含めた一連の体験がUXに該当します。混同されがちな両者ですが、UX評価を高めるためには、優れたUIが必要という関係性があります。
例えば、ユーザーがあるグルメ予約サイトを利用した際に、以下のようなさまざまな体験を得られます。
このように、ユーザーが体験を通して良い印象を持った場合、そのWebサービスはUX評価が高いサービスということになります。「お店の予約が簡単にできた」「いろいろなお店の写真が掲載されていてリサーチに便利だった」という2点は、予約サイトの見た目・操作のしやすさ（UI）によって得られた体験です。優れたUIによって、UXの評価が高まったといえます。
ただし、UIはUXを高める方法の一手段でしかないことは留意してください。例えば、3つ目の「予約したお店を実際に利用したら、料理がおいしくて一緒に行った方も喜んでくれた」という体験は、予約サイトの見た目・操作のしやすさ（UI）ではなく、サービスの質によって得られたものです。
ここからは、UI設計を優れたものにするために重視すべきポイントを4つ紹介します。
ページに情報を詰め込みすぎると、ユーザーは必要な情報にリーチできず、快適なUXが得られません。
Webサイトを作成時には、ユーザーにさまざまな情報を提示したくなるものです。しかし、多くの情報を一度に掲載すると、ユーザーは知りたい情報にすぐたどりつけなくなってしまいます。
情報過多を解決する方法として、まず掲載する情報を書き出し、優先順位をつけることから始めましょう。そして、優先順位の高い情報だけを掲載し、シンプルなWebサイト作成を目指すことが重要です。
情報に優先順位がつけられない場合は、Webサイトに訪れてほしいターゲット層やペルソナの設定が不十分といえるでしょう。設定したターゲット層やペルソナが最も得たい情報を考えると、優先順位はおのずと決まります。
Webデザインにはさまざまな手法や法則がありますが、そのなかでもページのレイアウトを見やすくする原則がUIデザインの原則です。ここでは以下の4つについて解説します。
| 近接 | 関連するものを近くに配置してグループ化する |
| 整列 | グループ化した要素を整列させる |
| 対比 | 要素に優先順位を施して、強弱をつける |
| 反復 | ある特徴を繰り返して、一貫性を持たせる |
近接は、関連した情報を近くに配置することによって、情報が関連して紐づいていることが視覚的に分かるようにする手法です。単純に情報（画像やテキスト）の距離を寄せるだけで、情報が関連していると視覚から判断しやすくなります。
シンプルですが、近接の法則を用いることで、ストレスなく探している情報へすぐにたどりつけるレイアウトが可能になります。情報が乱雑に配置されているだけのページでは、UIの質が悪くなり、UX評価を高めることは難しいでしょう。
整列は、バラバラになっている情報をそろえることです。テキストや画像などの情報を、縦横のライン上でそろっているかどうかを意識しましょう。
左右の整列には、
上下の整列には、
といったそろえ方があります。
適宜、近接と組み合わせながら整列を行うのが一般的です。
対比では、複数の情報の中で優先順位をつけ、重要度の高い情報に強弱をつけて差別化を図ります。異なる情報・重要な情報であることを視覚的に伝えるため、以下の方法が有効です。
フォントカラーは、赤色が最も注意を引きつける色として認識されているため、重要な情報には赤色が用いられます。また、下線には黄色を用いることが一般的です。
反復は、ある特徴を繰り返すことで、情報のグループ化に加えて一貫性や統一感を持たせる手法です。
最も分かりやすい例として、箇条書きが挙げられます。
テキストの頭に同じマークを施すことによって一貫性が生まれ、情報がグルーピングされます。
また、反復によって情報の提示にリズムが生まれるため情報が読み取りやすくなり、ユーザーにとって快適なUI設計が可能です。これにより、高いUX評価が得られるWebサイト作りを実現できます。
快適なUXを提供できる優れたUIを作るには、ユーザー目線でデザインすることも重要です。情報に優先順位をつけて、Webサイトに載せる情報を選定した上で、どのように配置すればユーザーが欲しい情報にたどり着きやすいかを考えて導線を設計します。
具体的には、ユーザーがどんな順番でWebサイトの情報を追っていくのかを意識しましょう。一般的に、人の視線は左上から右下へ移っていく（Fの法則）と呼ばれています。ユーザーの視線は、Webサイトのページを開いたときも同様の動きをしているため、順番を意識して、情報の配置を行ってUI設計すれば、快適なUXを提供することが可能です。
また、昨今はWebの閲覧がスマートフォン主体となってきています。PCとスマートフォンのWebサイト表示を1つのhtmlファイルで実現するレスポンシブデザインは、少し前まではPCの使い勝手をスマホでも実現することが目的でした。しかし、その関係が逆転し、スマートフォンのユーザビリティをPCでも実現する方向にシフトしつつあります。
ユーザビリティテストとは、UIについて全く事前知識や情報を持たない一般ユーザーに、UIを試してもらって感想・意見をもらうモニターテストのことです。
UI設計に関して、制作者は多くの知識を持っていますが、同じUIを何度も見ているためユーザーと同じ立場で確認することはできません。ユーザビリティテストを実施することで、ユーザー目線から使い勝手の良し悪しを知ることができ、有意義なUI改善や不具合の発見につなげることが可能です。
優れたUIを設計するためには、制作の早い段階からユーザビリティテストを実施することが重要です。テストの結果をもとにUIを改善していけば、快適なUXを提供できます。
本記事では、UIの意味と目的、UXとの違いや関係性、さらにUIを設計する際に重視すべきポイント4つをご紹介しました。
UIとはユーザーとの接点すべてを意味します。一方、UXが意味するものはユーザーの体験すベてです。そして快適なUX（体験）を提供するために必要不可欠な手段となっているのがUI（接点）です。
優れたUIを設計するための重要ポイントは、以下の5つです。
ぜひ本記事を参考に、優れたUI設計に役立ててください。
