「UIデザイン」「UIを改善する」という言葉をよく聞くけれど、UIとは何のことなのか、実はよく分かっていないという人は多いのではないでしょうか。
UIはWebサイトやアプリだけでなく、毎日使っている家電や駅の券売機にもある、とても身近なものです。
この記事では、UIとは何か、その意味を身の回りの例でわかりやすく説明し、UIデザインで考える「見やすさ・分かりやすさ・操作しやすさ」の3つを、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
UIとは何か
まずは、UIという言葉の意味と、どんなものがUIにあたるのかを押さえましょう。
UIはユーザーインターフェースの略
UIとは「User Interface(ユーザーインターフェース)」の略で、人と機械やサービスとのあいだで、情報をやりとりするための接点のことです。
ユーザー(User)は「使う人」、インターフェース(Interface)は「2つのものが接する境目・接点」という意味です。
つまりUIとは、使う人が機械やサービスに「こうしたい」と伝え、機械やサービスが「こうなりました」と返すときに通る、窓口のようなものです。
Web技術の解説サイトMDNでも、UIは「ユーザーと装置との間で情報のやりとりを促すものの総称」と説明されており、画面だけでなくキーボードやディスプレイも含む広い言葉として紹介されています(UI – MDN Web Docs 用語集)。
Webデザインの話をしているときは、画面に表示されている文字・画像・ボタン・入力欄・メニューなど、使う人が見たり触れたりする部分すべてをUIと呼ぶ、と覚えておけば十分です。
身の回りにあるUIの例
UIは、画面の中だけにあるものではありません。
私たちは毎日、たくさんのUIに触れています。
- 家電
エアコンのリモコンのボタン、電子レンジの「あたため」ボタンや表示パネル。 - 街の機械
駅の券売機やATMの画面、エレベーターの階数ボタン。 - スマートフォン
ホーム画面のアイコン、アプリの画面、通知のお知らせ。 - Webサイト
メニュー、見出しや本文、検索窓、「カートに入れる」ボタン。
どれも、使う人が「何ができるのか」を知り、操作し、その結果を受け取るための接点になっています。
Webサイトの画面で、何がUIにあたるのかを見てみましょう。
見本の画面では、上部のロゴやメニュー、見出しと本文、日付を選ぶ入力欄、「予約する」ボタンのすべてがUIです。
ボタンやメニューのような「操作する部分」だけでなく、読むための文字や、情報の並べ方(レイアウト)もUIに含まれます。
UIとUXの違い(かんたんに)
UIとよくセットで使われる言葉に「UX(ユーザーエクスペリエンス)」があります。
UXは「User Experience」の略で、サービスを知ってから使い終わるまでに、使う人が感じる体験全体を指す言葉です。
UIは、その体験の中で使う人が直接見たり触れたりする「接点」の部分なので、UXという大きな体験の一部にUIがある、とイメージするとよいでしょう。
たとえば自動販売機なら、商品の見本やボタン、お金の投入口、商品の取り出し口がUIです。
一方UXは、のどが渇いて自動販売機を見つけ、飲み物を選んで買い、飲んで「おいしかった」と感じるまでの、一連の流れと気持ちのすべてです。
ボタンが押しにくかったり、売り切れの表示が分かりにくかったりするとUXも悪くなるように、UIは良い体験(UX)を支える大事な土台になっています。
UXは考える範囲がとても広いテーマなので、この記事ではUIに絞って話を進めます。
UIデザインで考える3つのこと
UIデザインとは、使う人が迷わず目的を果たせるように、画面の見た目と操作の仕組みを設計することです。
見た目を美しく整えるだけでなく、「見やすいか」「分かりやすいか」「操作しやすいか」の3つを考えるのが基本です。
見やすさ:必要な情報がすぐ目に入るか
1つ目は、文字や情報がはっきり読めて、大事なものから順に目に入るかという「見やすさ」です。
文字が小さすぎたり、背景と文字の色が近すぎたりすると、内容がよくても読んでもらえないからです。
たとえば、白い背景に薄い灰色や淡い黄色の文字を置くと、文字がかすんで読みにくくなります。
たとえば、背景と文字の明るさの差(コントラスト比)が小さいと、明るい屋外でスマホを見たときや、視力が弱い人には文字が読みにくくなります。
見出しを大きく、補足を小さくするなど、情報の大事さに合わせて大きさや太さに差をつけることも、見やすさにつながります。
文字・色・レイアウトの見やすさは可読性とは?、色の明るさの差の基準はコントラスト比とは?で詳しく解説しています。
分かりやすさ:何ができて、どうなるかが伝わるか
2つ目は、「どこを押せばいいか」「押すと何が起きるか」が、説明を読まなくても伝わるかという「分かりやすさ」です。
使う人は画面をすみずみまで読むわけではなく、見た目から「これは押せそう」「これはただの文字」と判断して操作するからです。
ボタンがただの文字に見えたり、ボタンに「OK」「送信」のような何が起きるか分からない言葉しか書かれていなかったりすると、使う人は手が止まってしまいます。
同じ申し込み画面を、2つの作り方で比べてみましょう。
メールマガジン
新商品のお知らせを毎週お届けします。
送信
メールマガジン
新商品のお知らせを毎週お届けします。
メールマガジンに登録するNGの見本では「送信」がほかの文字と同じ見た目なので、押せる場所だと気づきにくく、何を送るのかも分かりません。
OKの見本では、色の付いた四角い形で「押せるボタン」だと伝わり、「メールマガジンに登録する」という文言で押した結果も予想できます。
押せることを色で伝えるルールはリンク・ボタンなどのUIカラーとは?で解説しています。
操作しやすさ:迷わず、間違えずに操作できるか
3つ目は、思ったとおりに、間違えずに操作できるかという「操作しやすさ」です。
見た目が分かりやすくても、ボタンが小さすぎたり、隣のボタンとくっついていたりすると、押し間違いが起きるからです。
特にスマホでは指で画面に触れるため、マウスで操作するパソコンより、押す対象を大きめにする必要があります。
Webサイトを誰にとっても使いやすくするための国際的なガイドラインWCAG 2.2では、押す対象の大きさを少なくとも24×24 CSSピクセル(画面上の見た目の大きさの単位)にすることを求めています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。
難しい名前が出てきましたが、要するに「押す部分は、少なくともこのくらいの大きさにしましょう」という、世界で共通に使われている最低限の目安です。
あくまで「これより小さくしない」ための数値なので、指で押しやすくするには、もっと大きめにしておくと安心です(AppleはiPhoneなどのボタンを44×44pt以上にするよう勧めています。アクセシビリティ – Human Interface Guidelines)。
この内容で注文しますか?
この内容で注文しますか?
NGの見本は、ボタンが小さいうえにほとんどくっついているので、「注文する」を押すつもりで「やめる」を押してしまいそうです。
OKの見本は、ボタン自体を大きくし、間も空けたことで、どちらを押すかはっきり分かれています。
ボタンの押しやすい大きさの目安はボタンの内側の余白とは?、部品同士の間隔はUIコンポーネントの間隔とは?で解説しています。
UIを形づくる要素
UIデザインは、いくつかの分野を組み合わせて作ります。
主な要素は、ボタンや入力欄などの部品(コンポーネント)、部品の並べ方(レイアウト)、文字の扱い(タイポグラフィ)、色、そして要素同士の間の空き(余白)です。
コンポーネントとは、ボタンや入力欄のように、画面の中でくり返し使う部品のことです。
どれか1つだけを整えても使いやすいUIにはならず、見やすさ・分かりやすさ・操作しやすさの3つを満たすように、全体を組み合わせて考える必要があります。
それぞれの分野の学び方は、デザイン初心者のための学習ロードマップからたどれます。
ここまで紹介した見やすさ・分かりやすさ・操作しやすさを突き詰めていくと、目が見えにくい人や、スマホの操作に慣れていない高齢の人など、より多くの人にとって使いやすい画面につながっていきます。
このように、目や耳、手の不自由な人や高齢の人など、さまざまな人が使えるようにする考え方をアクセシビリティと呼び、UIデザインの大切な一部です(アクセシビリティとは?で解説しています)。
実践のポイント
UIを考えるときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- UIを「見た目のかっこよさ」だけだと考えてしまうことがあります。
おしゃれでも、押せる場所が分からなかったり文字が読めなかったりすれば、よいUIとはいえません。
見た目を整える前に、見やすさ・分かりやすさ・操作しやすさを確かめましょう。 - 作った本人だけが分かる画面になってしまうことがあります。
作り手は使い方を知っているので、迷うポイントに気づきにくいものです。
家族や友人など、初めて見る人に使ってもらい、どこで手が止まるかを観察しましょう。 - パソコンの画面だけで確認してしまうことがあります。
スマホでは画面が小さく、指で操作するため、文字の読みやすさや押しやすさが大きく変わります。
実際のスマホでも必ず確かめましょう。 - ページごとにボタンの形や色がバラバラになってしまうことがあります。
同じ役割のものが毎回違う見た目だと、使う人はそのたびに「これは押せるのか」を考え直すことになります。
同じ役割には同じ見た目を使いましょう。
よくある質問
- Q. UIは何の略?読み方は?
A. 「User Interface(ユーザーインターフェース)」の略で、「ユーアイ」と読みます。
使う人と機械・サービスのあいだの接点という意味です。 - Q. ゲームのUIも同じ意味?
A. 同じ意味です。
ゲームでは、体力ゲージやメニュー画面、操作ボタンの表示などがUIにあたります。
この記事で紹介した「見やすさ・分かりやすさ・操作しやすさ」の考え方も共通です。 - Q. UIデザインとWebデザインは何が違う?
A. 重なる部分が大きく、はっきり分けられるものではありません。
Webデザインは「Webサイトのデザイン」という作るものの種類で呼んだ言葉で、UIデザインは「操作する画面の設計」という役割で呼んだ言葉です。
Webサイトのデザインには、UIデザインの考え方がほぼ必ず含まれます。 - Q. UIデザインを学ぶには、まず何から始めればいい?
A. ふだん使っているアプリやWebサイトを、「なぜここは押しやすいのか」「なぜ迷ったのか」と考えながら観察することから始めましょう。
そのうえで、文字・色・余白・レイアウトといった基礎を1つずつ学ぶと、UIの良し悪しを言葉で説明できるようになります。
まとめ
UIとは「ユーザーインターフェース」の略で、使う人が機械やサービスとやりとりするときに見たり触れたりする部分すべてを指します。
UIデザインでは、見た目を整えるだけでなく、見やすさ・分かりやすさ・操作しやすさの3つを満たすように、部品やレイアウト、文字、色、余白を組み合わせて考えます。
まずはスマホでよく使うアプリを1つ開き、「どこを見て押せると判断したか」「押したあとに何が起きたか」を意識しながら操作してみてください。
