UI（ユーザーインターフェース）とは？
UIとは、User Interface（ユーザーインターフェース）の略称です。インターフェースには、「接点」と言う意味があり、UIとはユーザーと製品とのすべての「接点」のことを意味します。具体的には、ボタンやフォント、ナビゲーションなどのユーザーがサービス利用時に目にするもの、操作するものすべてをUIと呼ぶことができます。
UIの役割はインプットとアウトプットの仲介
ユーザーはソフトウェアの利用時に大きく分けて「インプット（入力）」と「アウトプット（出力）」という２つの動作をおこなっています。コンピューターに対して命令をするのがアウトプット。命令の結果として得られた返答を認識するのがインプットです。ITサービスなどを利用しているときには、絶え間なくこのインプットとアウトプットが行われます（これをインタラクションと呼びます）。それを仲介するのがUIであり、UIが洗練されているかどうかがユーザー体験の良し悪しに大きな影響を与えます。
UIの具体例: インスタグラムのフィードから
UIの実例として、インスタグラムのフィードを見ている場面を考えてみましょう。
画面一番上に表示されている投稿の画像を見る
画面をスクロールするとさらに投稿があることに気付く
画面をスクロールする
気になる投稿を見つける
気になった投稿をタップする
この一連の動作でユーザーが見た画像や 説明文、ボタンなどのすべてがUIです。
インスタグラムのようなモバイルアプリは、ユーザーが「操作」することを前提としたサービスなので、画面内のすべての要素がUIであるということができます。そのため、アプリをデザインするデザイナーは一般的に「UIデザイナー」と呼ばれています。一方、広告デザインやデジタルアートなどのユーザーが「操作」しないものは一般的にUIとは呼ばれません。
UIとUXの違いと関係性
前述のように、ITサービスにおいてUIの良し悪しは全体のユーザー体験に大きな影響を与えることとなるため、「ユーザー体験」を意味するUX（ユーザーエクスペリエンス）と一緒に語られることが多いです。
UXとは？利用者がサービスや製品を通して得られる顧客体験。
UXとは、ユーザーエクスペリエンス（User Experience）の略称で、「利用者がサービスや製品を通して得られる顧客体験」を意味します。個々の顧客に対して、直接サービスを提供する企業が「顧客体験」といった言葉を使う一方、個々の利用者を「ユーザー」と定義した上で、ソフトウェアを通して自動化されたサービス提供を行うIT業界で主に使われている言葉です。
つまり、UXがサービス全体のユーザー体験を表すのに対し、UIはそのユーザー体験を形作る一部と考えることができます。しかし、「ユーザー体験の一部」とはいえ、モバイルアプリやWebサービスにおいてはユーザーがサービスを利用する際に触れるものの９割以上はUIであると言っても過言ではありません。そのため、UIはUXと密接に関係したものとしてUI/UXデザインとしてまとめて語られることも多いです。IT業界の求人情報を見ても、「UIデザインを通して、最適化されたUXを提供するデザイナー」という意味合いで、UI/UXデザイナーとしてデザイナーを募集していることがあります。
優れたUIとは？UI最適化のための基本的なポイント
ITサービスにおいて良いユーザー体験を提供するためには、優れたUIが欠かせないことはわかりました。では、優れたUIを作るためにはどのような点に気をつけると良いのでしょうか？前述の通り、UIにはユーザーに「インプット（入力）」と「アウトプット（出力）」いう２つの行動をさせる役割があります。
ユーザーの認知から行動への順序を整理すると、
UIを見て情報と操作方法を把握（インプット）
実際に操作する（アウトプット）
といったように、必ずインプットが先に行われることがわかります。そのため、UI最適化のためにまず必要となるのは、ユーザーが正しく情報を把握できるようにレイアウトを構成することとなります。ここでは、UIに限らずグラフィックデザインの基本ルールとしても知られる「CRAP」に沿って解説します。
UIデザインの基本ルール、CRAPとは？
CRAPとは、レイアウトデザインの４つの原則である「強弱（Contrast）」「反復（Repetition）」「整列（Alignment）」「近接（Proximity）」の頭文字をとった言葉です。ちなみに「Crap」はアメリカ英語でちょっと下品な意味があるので、「C.R.A.P」のように区切って記述される場合も多いです、、
そんなCRAPのそれぞれの意味を説明したいと思います。
1. 強弱（Contrast）: 情報の優先度を明確に表現する
優先順位に合わせて画面上の要素に強弱をつけましょう。強弱の付け方は多様で、テキストのサイズや色、スタイル、コンポーネントの背景色など様々な方法が考えられます。
ちなみに、はじめてモバイルアプリのデザインをするデザイナーがよく悩むのがこの「強弱」の基準となるサイズです。アプリ内で強弱のバランスが取れていても、他のアプリとサイズ感がずれているとちょっとおかしな感じがしてしまいますよね。モバイルアプリではiOS、Androidなどのプラットフォームごとにガイドラインが設けられており、タイトル、見出し、本文などそれぞれの要素に合ったフォントサイズが指定されています。はじめは、このガイドラインを参考にしながら進めると、他のアプリと比較しても違和感のないサイズ感でデザインができると思います。
2. 反復（Repetition）: 同じ情報は一貫性を持って表現する
UIはユーザーが視覚的に情報を把握できるようにするためのデザインです。「視覚的に」というのは、画面内のすべての文字を読まずとも、何が表示されているのかを「過去の経験的から理解できる」ということです。例えば、アプリ内で一貫性のある文字サイズで見出しが表現されていれば、ユーザーは迷うことなく画面内の情報構成を把握することができます。悪い例として、例えば本のレイアウトがページ毎に大きく異なっていたら、ページを開く毎にどこに何が書いてあるのかを理解する必要が出てきてイライラしてしまいますよね。この「過去の経験からUIの要素の意味を理解する」というユーザー行動はUI設計にとって、とても重要な原理となります。
そして、ユーザーが「過去の経験からUIの要素の意 味を理解する」ということは、ユーザーが過去に使ったことのある他のサービスの経験もUIへの理解に影響するということです。例えば、iPhoneを使っているユーザーは経験的に「赤いドット」を「通知」として認識するかと思います。仮に、とあるアプリが通知の表示に「黄色いドット」を使ったとしたら、いくらアプリ内で一貫性を持って使われていたとしてもユーザーは他のアプリを使う時とは「別の記憶を」頼りにしなくてはいけなくなり、フラストレーションを生む原因となります。つまり、作成しているUI内での一貫性はもちろん、ユーザーの持っている過去の経験との一貫性にも気をつけてデザインすることがUIデザインにとっての「反復（Repetition）」のポイントとなります。
ユーザーの記憶を考慮した設計は、UXデザインの重要な要素である「ユーザービリティ」の構成要素である「学習しやすさ」と「記憶しやすさ」にも関連するポイントです。こちらは、ユーザビリティに関する記事でも詳しく説明しています。
3. 整列（Alignment）: 要素を揃える
基本的なものだと「左揃え」「右揃え」から、複雑なものだと「グリッドレイアウト」まで、要素を整列することもユーザーが視覚的に情報を把握するためには重要な原則です。画面上の情報を把握するために、視点を上下左右斜めに忙しく動かさなくては いけないようなページは読みにくいですよね。ユーザーがストレスなく情報を把握できるように、UI要素は揃えて配置しましょう。
4. 近接（Proximity）: 関係する情報を近づける
関連性のある情報はまとめて、関連性のない情報は分けて配置しましょう。こちらは、モバイルアプリのデザインで特に重要になる場合が多いです。小さな画面領域に様々な情報を表示する必要があるモバイルアプリでは、すべての情報に細かい説明を加えることはできません。そのため、要素間の距離だけで意味を表現することが多々あります。例えば、Lineのチャット画面のメッセージの隣には「15:00」といったように時間が表示されていますね。これは「送信日時: 15:00」のように冗長に説明しなくてもわかるようにメッセージと近づいた位置に時間を表示して、UI要素の意味を伝えようとしていることがわかります。
UIデザインの基本ルールをクイズ形式で学べる「Can’t Unsee」
今回解説したようなUIの基本ルールを具体例を通してクイズ形式で学べるサイトがあります。「Can’t Unsee」という英語のサイトになってしまいますが、表示された２つのデザインから正しいと思うものを選択するだけの簡単なクイズなのでぜひ試してみてください。中級編以降はかなり細かい問題も多くなっており、現役のUIデザイナーでも苦戦します、、
代表的なUIのデザインシステム
UIデザインシステムとは？
UIデザインの基本ルール解説で解説したUIデザインの原則の一つ、「反復（Repetition）」はUIの「学習しやすさ」や「記憶しやすさ」に関連する重要なポイントであると述べました。デジタルデザイン以前の世界では、特定のプロダクトの中で一貫性が保たれていればUIはその役割を十分に果たすことができていました。例えば、テレビを購入したときに一度使い方を覚えれば、テレビの操作UIの一貫性が保たれている限りユーザーはストレスなくそのテレビを使い続けることができましたね。
しかし、デジタルデザインの世界では「プラットフォーム」の出現によってこの状況が大きく変わりました。ここでいうプラットフォームとは、iOSやAndroidのことです。「プラットフォーム」の出現によって、ユーザーが購入したモバイル端末の中に様々な開発者が作ったアプリが存在する形となり、ユーザーにとっては一度スマホの説明書を読めば良いというような状況ではなくなってしまいました。様々な開発者が自由にそれぞれのUIを作り出すことができるということは、ユーザーは新しいアプリをダウンロードする毎に毎回その使い方を学ばなくてはいけないことを意味します。このような状況を改善するために存在するのが、「UIデザインシステム」です。
UIデザインシステムとは、特定のプラットフォームやソフトウェアにおけるUIデザインのルールのことです。使用できるフォントや色、要素ごとのサイズなどを定義することでUIデザインの基本ルールに沿った形で、一貫性のあるUIを提供することを可能としています。iOSやAndroidといった「プラットフォーム」は、デバイスを利用するユーザーに対して一貫性のあるユーザー体験を提供できるように、アプリ開発者たちに向けてUIデザインシステムをUIデザインのガイドラインとして明示しています。各アプリがこのガイドラインに沿ってUIを作ることで、ユーザーは他のアプリで得た「過去の経験」をもとに新しいアプリの操作方法を推測することができるようになるのです。
モバイルアプリのUIデザイナーにとっても、UIデザインシステムを学ぶことは他のアプリと一貫性のあるユーザー体験を作るための重要なポイントとなります。新たにモバイルアプリのデザインを始めたUIデザイナーはまず、iOSとAndroidのデザインシステムを学ぶことからはじめてみても良いかもしれません。ここでは、代表的なUIデザインシステムである、Appleの「Human Interface Guidelines」とGoogleの「Material Design」を紹介します。
AppleのHuman Interface Guidelines（iOS）
https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/
Human Interface Guidelines（ヒューマン・インターフェース・ガイドライン）とは、AppleがiOS、macOS、watchOS、tvOS向けに提供しているデザインシステムおよび、そのガイドラインです。
ここでは、iOS向けのガイドラインを一部簡単に解説します。
全体を通したデザインテーマ
1. Clarity: 明瞭性
ユーザーへの情報の伝達を最重要事項として、すべての画面において文字の視認性を担保し、余分な装飾は避けるようにと定められています。また、「UIデザインの基本ルール」で述べたような、「強弱」や「近接」を適切に使うことで情報の重要度やアフォーダンスを表現することを推奨しています。
2. Deference: コンテンツの尊重
iOSにとってUIとは、あくまで情報を伝えるための「媒体」です。アプリの主役は、そのコンテンツや提供する機能であり、媒体であるUIは主役の邪魔をすることが無いように、不必要な要素は最大限削ぎ落としたデザインとするようにと定められています。
Human Interface Guidelinesの原文では、iOSのUIは「light and airy（軽やかで、空気のようなUI）」であるべきと記述されており、Appleのブランドコンセプトも言える「機能的なプロダクトデザイン」をiOSプラットフォーム上のアプリケーションにも浸透させるための重要なキーワードとなっています。
3. Depth: 奥行き
適切にUI要素同士を重ねたり（モーダル）、遷移アニメーションを付けることでアプリ内での情報の階層を明確に表現するようにとされています。ここで言う「奥行き」とは、単にUI要素にシャドウをつけて立体感を出すと言う意味では無い点に注意が必要です。それぞれの画面間での情報の関係性を遷移アニメーションなどで表現して、アプリ内でのナビゲーションに「奥行き」を持たせるといった意味となります。
ガイドライン
Human Interface Guidelinesでは、全体を通してこの３つのデザインテーマに沿ったUIを作るための具体的な例や「するべきこと」と「しないべきこと」がまとめられています。また、iOSでは一般的に「標準UI」と呼ばれるデフォルトのUIコンポーネントのセットが提供されており、多くの場合はこのコンポーネントを使ってデザインすることでガイドラインに沿ったアプリをデザインすることが可能です。SketchやXDのファイルとして無料でダウンロードすることができるので、ぜひ試してみてください。
GoogleのMaterial Design（Android）
https://m3.material.io/
日本でもiOSと並 んで利用ユーザー数の多いモバイルOSであるAndroidにも開発元のGoogleが提供しているMaterial Design（マテリアルデザイン）というデザインシステムがあります。
マテリアルデザインもAppleのHuman Interface Guidelinesと同じように、Android用のアプリケーションを提供する開発者向けにGoogleが用意しているデザインシステムとガイドラインとなります。Appleが出来るだけUI要素への装飾を減らした結果、フラットデザインとも呼ばれる平面的なUIデザインを多用する事となった一方、マテリアルデザインは現実世界の物理的な法則に則ったよりリアルな質感を持つUIを推奨しています。
全体を通したデザインテーマ
1. Material is the metaphor: マテリアル（UI要素）は現実世界のメタファーである
メタファーとは、直訳すると「隠喩」と言う意味です。UIデザインの世界では、現実世界に存在する物体や概念を平面的なデザインとして表現するときに、そのままの形で表現するのではなく元となる物体が「連想されるような形」で表現します。例えば、オンオフを切り替えるためのスイッチUIは現実世界のスイッチを連想させような形でデザインされています。
この、「現実世界を模した表現」を重視する点がマテリアルデザインの特徴です。実際は平面的な画面を3D空間として捉え、それぞれの要素の奥行きや影を表現する事で現実世界での物理法則を模した形でUIを構成します。
https://material.io/archive/guidelines/material-design/environment.html#
2. Bold, graphic, intentional: 大胆、グラフィックデザイン的、意図的
マテリアルデザインでは、「グラフィックデザイン的に」UIをデザインするべきとしています。「グラフィックデザイン的に」というのは、タイポグラフィ、グリッド、色などを利用してユーザーに情報を伝達するという意味です。一般的に西洋でグラフィックデザイン的という場合、近代のモダニズムデザイン以降のデザイン理論のことを指し、マテリアルデザインでも、装飾やブランディングのために派手なデザインをするのではなく、そのデザインの目的や機能性を意識した近代的なデザインを採用することを推奨しています。
3. Motion provides meaning: 意味のあるモーション（アニメーション）
マテリアルデザインでは、要素の「動き」によって画面の状態や機能性を表現す ることを推奨しています。モーションは必ず意味（目的）を持ったものである必要があり、装飾のために意味のないアニメーションを付けることは避けましょう。あくまで、現実世界を模したメタファーの一環としてのモーションを取り入れるようにすると良いでしょう。
マテリアルデザインのもう一つの特徴と３つのバージョン
AppleのHuman Interface Guidelinesがユーザー視点でのUXを中心に構成されているのに対し、マテリアルデザインでは、それぞれのUIコンポーネントを開発者がどのように実装できるかまでドキュメント化されている点も特徴です。現在までに３つのバージョンが発表されているマテリアルデザインですが、最新のMaterial Design 3 （通称M3）ではこの方向性が顕著で、それぞれのコンポーネントの解説ページにデザインガイドラインと開発ガイドラインが提供されています。
https://m3.material.io/components/menus/overview
このように、デザインと実装方法を明確に定義することでそれぞれのコンポーネントのスタイルを一括管理できるようにしており、Material Design 2ではコンポーネントのスタイルを変更する方法を提供する「Material Theming」が 提供され、Material Design 3ではユーザーごとにUIのスタイルを変更できるパーソナライゼーション機能である「Material You」が提供されました。
Material Design 1
Material Design 2 (Material Themingが登場)
Material Design 3 (Material Youが登場)
近年のアイコニックなUIデザインの解説
ここまでUIの概念や基本的なルールをはじめ、メジャーなプラットフォームのデザインシステムまでを紹介しました。UIデザイナーはこのようなデザイン技術やプラットフォームのガイドラインを利用しながら、限られた画面上でサービスの機能性や価値をユーザーに伝えるため工夫を凝らしています。
iOSやAndroidアプリのUIデザインでは、それぞれのプラット フォームのデザイン理念に沿いながらも、それぞれのブランド価値の表現や、競合アプリとの差別化をうまく行えるかがポイントとなります。ここでは、いくつか特徴的なUIデザインにてユーザーに価値を届けたアイコニックなUIデザインの例を紹介します。
Tinderの左右スワイプ
https://tinder.com/
マッチングアプリのTinderは、画面いっぱいに表示されたデート相手の候補を「気に入ったら右へ」「気に入らなかったら左へ」スワイプするという大胆なUIで注目を集めました。このUIは、簡単な操作性やその「面白さ」によって多くの人に受け入れられたと言われています。
しかし、この単純なUI操作にはもう一つ重要な効果があります。それは、「マッチングした相手がどのように自分を選んだかを想像しやすい」ということです。
従来のマッチングアプリでは、長々と表示されたプロフィールや多くの写真を見ながらデートの候補を探す必要がありました。このようなUIの問題点は、どこまで細かく相手の情報を確認するかはユー ザー次第という点です。アプリ上でマッチングした後に実際に相手と会う必要のあるマッチングアプリでは、マッチング時に「相手がどのように自分を選んだか」が分からないという不安が実際に相手に会うためのハードルとなっていました。自分は相手のプロフィールをよく読み込んで選んだのに、相手は写真を見て３秒で決めていたらちょっと嫌ですよね、、
この左右スワイプの大胆なUIは、「ユーザー全員が同じようにデート候補を選んでいる」つまり、「マッチングした相手も同じように自分を選んだ」という感覚を与えることができた点で優れていました。これによって、マッチング時にはすでにお互い「基本的な情報だけ見てスワイプで選んだ」という情報を共有できているため、お互い「スワイプで選ばれたもの同士」という感覚が直接会うまでの心理的なハードルを下げたのです。
Instagramのストーリー機能
https://instagram.com
Instagramのストーリー機能（正式名称はストーリーズ）は、2017年にInstagramアプリに登場した機能です。すでにご存知の方も多いかと思いますが、ストーリー機能 とは、24時間後に自動的に消える投稿のことで、最新ストーリーの一覧はアプリのフィード画面の一番上に表示されます。
投稿を閲覧するユーザーは、フォローしているユーザーの最新ストーリーをスライドショー形式で連続して閲覧できるため、とても受動的に投稿を見ることができます。また、ストーリーを投稿するユーザーは、24時間後に消えることから、通常の投稿よりも気楽にコンテンツをシェアするとができるようになりました。
この「気楽さ」が鍵となり、ユーザーがより「リアルタイム」なコンテンツを投稿するようになりました。このリアルタイム性が、投稿を閲覧しているユーザーにとっても面白いものとなり、今ではインスタグラムを開いたユーザーがまず初めに目を通すような「暇つぶしコンテンツ」として広く受け入れられました。
この機能はビジネスユーザーとも相性が良く、顧客とのコミュニケーション手段として多くのビジネスアカウントがこの機能を活用しています。UXについての解説記事で、UberEatsが同様の機能を実装した際のケーススタディを紹介していますので、ぜひ読んでみてください。
TikTokの縦スワイプ
https://apps.apple.com/jp/app/id1235601864
Instagramの例を見ても分かる通り、スワイプジェスチャーと「暇つぶし」はとても相性が良いものです。IT企業が「ユーザーの隙間時間（可処分時間）を奪い合っている」とまで言われているこの「暇つぶし市場」で、TikTokが大きく成長したのもこのスワイプUIの影響が大きいです。YouTubeなどの従来の動画アプリが動画を画面上に並べてユーザーに見たい動画を選ばせたのに対し、TikTokは大胆にも全画面表示の動画を縦スワイプで順番に見せるUIを採用しました。
ユーザーが特に好みに合わせて動画を選ぶのではなく、一つずつ動画を見ていかなくてはいけないUIは一見効率が悪いように思うかもしれません。しかし、暇つぶしをしたいユーザーにとっては、わざわざ自分でコンテンツを選ぶのではなく、自動で面白いコンテンツが表示された方が好都合なのです。TikTokでは、ユーザーのそれぞれの動画への反応を計測し、機械学習によってそれぞれのユーザーが好むであろうコンテンツをキュレーションすることによって、ユーザーは縦にスワイプするだけで延々とコンテンツを視聴できるようなアプリを作り上げました。
まとめ
今回の記事を通して、UIの基本的な概念をはじめ、その基本手法や代表的なガイドラインについて理解を深められたかと思います。UIは基本的にはあくまでコンテンツや機能性をユーザーに伝える「媒体」であるものの、最後に紹介したような有名なUIデザインのようにUIがアプリの強い魅力となることもあります。このようなアイコニックなUIは、一見シンプルなようでターゲットユーザーのニーズにマッチする強力な意味を持っています。
このようなUIをデザインできるかどうかは、グラフィックデザインやプラットフォームのガイドラインに対する理解を深めることはもちろん、ユーザーや市場について深い理解を持っているかが重要なポイントとなります。UXデザインに関する記事では、優れたデザインを作るためのリサーチの手法なども紹介していますので、ぜひ目を通してみてください。
