UIデザインとは？現役デザイナーがわかりやすく解説

近年、特にWebサービスやアプリでは「UIデザイン」という言葉をよく耳にするようになりました。

今回はこの「UIデザイン」について、もっと理解を深めたいという方に向けて、UIデザインとはどんなものなのか、何が重要なのか、実際に第一線で活躍中のデザイナーの意見も交えながら解説します。

UIデザインとは？

UIデザインについて理解を深めるには、まず「UI」とは何かを知る必要があります。順を追って解説しましょう。

UI＝ユーザーインターフェース（User Interface）とは

UIは「ユーザーインターフェース（User Interface）」の略称です。Interfaceには「接点」「境界線」という意味があります。つまりUIとは、ユーザーとサービスを繋ぐ接点であり、その要素を指します。

たとえばマウスやキーボード、スピーカーやディスプレイなどの入力装置の外観そのものや、Webサイトで言えばWebページの画面を構成するレイアウトやフォームなどの機能および各種パーツ（メニューやボタン、色、アイコン、テキストなど）もUIと言えます。

UIデザインとは

UIデザインについて、米国政府関連サイトである「usability.gov※」では以下のように定義されています。

※ usability.govとは、ユーザー エクスペリエンス（UX）のベスト プラクティスとガイドラインを提供するウェブサイトです。米国一般調達局（GSA）技術変革サービスのDigital.govチームが管理しており、多くの連邦機関やUXに関心のある公共部門や民間部門の個人と協力してコンテンツを作成し、業界の動向やアイデアを共有しています。

つまり、UIデザインは「アクセスしやすく、理解しやすく、使いやすいユーザーインターフェース（UI）を設計すること」と言えるでしょう。

UIとUXとの違い

UIは「ユーザーインターフェース（User Interface）」、UXは「ユーザーエクスペリエンス（User eXperience）」の略称で、「UI/UX」のように一緒に並べて使われることが多い言葉ですが、異なるものを指しています。

前述のとおり、UIとは、ユーザーとサービスを繋ぐ接点となる視覚的な要素を指します。ユーザーが商品やサービスを利用する際に、見るもの・触れるもの・操作するものを設計することが対象です。

一方でUXは、ユーザーが商品やサービスを通じて得られる「体験」を指します。たとえば、ECサイトで欲しいものが見つけやすい、商品の説明がわかりやすい、迷わず購入できるといった、接点（UI）を通じて、ユーザーが得られるものです。

このような体験をユーザーに届けるため、UXデザインとはサービス全体を通したシステムの目的や情報の整理、行動フローの整理、ユーザーのニーズや目的を分析し行動を設計することなどが含まれます。

UIデザインとビジュアルデザインとの違い

UIデザインとビジュアルデザインは同じ「デザイン」の分野ではありますが、異なる役割を持つアウトプットであると言えます。

ビジュアルデザインとは、伝えたいコンセプトを写真やイラスト、文字を利用して1つのビジュアルに落とし込み、相手に視覚的に情報を伝えるためのコミュニケーションのデザインです。ビジュアルコミュニケーションデザインとも言われています。広告やパッケージ、パンフレットやポスター、バナー広告やWebサイトのビジュアルなどを作成する際にビジュアルデザインのスキルが必要となります。

UIデザインにおける「デザイン」は、必ずしもビジュアルの力だけでよい印象を与えたり、美しさや華やかさを追求するものではありません。UIデザインは機能的な使いやすさや快適さを追求して設計されたものです。

WebデザイナーとUIデザイナーの違い

WebデザイナーとUIデザイナーはどちらもWebサイトやWebサービス、アプリなどのデザインを行う職種ですが、専門的な役割は異なります。

Webデザイナーは、Webサイトのビジュアルや使いやすさ、ユーザーが求める情報や商品までの動線をデザインすることが専門です。主に企業サイトやECサイト、ランディングページなどのWebページのデザインを担当します。メインビジュアルから始まり、外観や構造、色合い、アイコンや画像の配置、フォントやテキストスタイルなどを考え、構成する要素をバランスよく調整します。

またコーディングの知識と実装できる技術も必要です。コーディングではHTML、CSS、JavaScriptなどの知識が必要となります。Webページで表現可能な技術を理解してデザインを行うことでマウスオーバーした際やページスクロールの際の動きなどのインタラクションも含めて美しく機能的なWebページのデザインを作成し実装することができます。

求められる力としては、Webページでのビジュアルデザイン力、コーディングを含めたサイト制作スキル、コンバージョンを改善するためのデザイン提案力などです。

UIデザイナーは、ユーザーインターフェース（UI）の機能的な使いやすさや快適さを追求してデザインすることが専門の職種です。主にWebサービスや管理画面、アプリなどの画面のインターフェースのデザインを担当します。ユーザーフローを理解し、アプリ内で操作する際に迷わず目的を達成するための機能をわかりやすく提供するためのデザインを設計します。

ボタンの色、形状、テキスト、サイズなど、ユーザーがアプリで操作するために必要なコンポーネント（要素）の設計や、ユーザーがアプリ内でどのように移動するかを考慮したナビゲーションメニューの設計、必要に応じてインタラクションなどのアニメーションの設計も行います。

また、視覚障がい者が画面を読み上げることができるよう、テキストの色や大きさ、コントラストなどを調整し、総務省が推奨するアクセシビリティガイドラインに配慮したUI設計を行う場合もあります。

求められる力としては、画面設計、遷移、機能を持つ各パーツ（部品）の集合体であるコンポーネントを設計する能力、定性/定量調査を通してさまざまな情報を収集し、アイデアを生み出していくUIデザインリサーチ、仮組みされたモデル・試作品を使って検証や改善を繰り返すプロトタイピング、正確な現状の把握と深い洞察力が求められるデザインでの課題解決能力などです。

Webデザイナー	UIデザイナー
Webサイトのビジュアルや使いやすさ、ユーザーが求める情報や商品までの動線をデザインすることが専門の職種。主に企業サイトやECサイト、ランディングページなどのWebページのデザインを担当する。	ユーザーインターフェース（UI）を機能的な使いやすさや快適さを追求してデザインすることが専門の職種。主にWebサービスや管理画面、アプリなどの画面のインターフェースのデザインを担当する。
求められる技術 ビジュアルデザイン力 サイト制作スキル（0から1までやりきる力） クライアントへの提案力	求められる技術 画面設計、遷移、コンポーネント設計 デザインリサーチ、プロトタイピング デザインでの課題解決能力
目標値 制作件数、スピード CVR改善など	目標値 プロダクトリリース 会員登録数、ユーザーのアクティブ率増加など

UIデザインはなぜ必要なのか？

スマートフォンが普及し、誰でも簡単にWebにアクセスできるようになったことで、Webサービスは一般化し、アプリも充実してきました。数あるWebサイトやアプリの中から自社のものを選んでもらったり、継続して利用してもらうためには、ほかとの差別化を図らなければなりません。そのための1つの要素として「使いやすい」「わかりやすい」といったUIデザインが必要になります。

Webサービスやアプリといったプロダクトを提供している企業ではユーザーインターフェースの設計において、UIデザインの専門知識を持ったデザイナーが求められており、UIデザインがもたらす影響を重視しています。

UIデザインに期待すること

では企業がUIデザインに注目すると同時に、期待することとは何なのでしょうか。具体的に見ていきましょう。

ブランディングの向上

UIデザインはブランディングを向上させることが期待されています。

ブランディングとは、企業が持つブランド(サービスの名前、ロゴ、デザイン、コンセプト、キャッチコフレーズ、価値観など)のイメージの認知を促進させ、愛着を感じてもらい浸透させることです。ブランディングによってブランドイメージを向上させることで、競合他社との差別化や、ユーザーとの結びつきを強化することができます。

WebサイトやWebサービスを利用することで感じた操作のしやすさ、わかりやすさ、悩みが解決された体験はユーザーに感動をあたえ支持を集めることができます。

ユーザー体験（UX）の設計の重要な部分をUIデザインが担うことを知っているため、企業はUIデザインでブランディングの向上が図れると期待していると言えるでしょう。

ユーザーの離脱防止

UIデザインによって、ユーザーの意図しない離脱を防ぐことが期待されています。意図しない離脱とは、Webサイトの場合は、サイト閲覧を開始してすぐに「戻る」ボタンを押して検索結果に戻ってしまったり、Webサービスの場合は途中で会員登録をやめてしまったり、サービスにログインしなくなってしまったりといった現象を指します。

使用するWebサービスやアプリが「使いにくい」「わかりにくい」と感じると、ユーザーは再訪することもありません。ですから自社のWebサイトで商品を購入したり、サービスに登録したりしてもらうためには使いやすいUIデザインであることが大前提なのです。

ユーザー満足度の向上

UIデザインによって、ユーザー満足度の向上が期待されています。わかりやすい、使いやすいデザインはユーザーの抱えている課題を解決しやすいのです。

UIデザインには、ユーザビリティ(わかりやすさ)が不可欠です。ユーザーが何も考えなくても、それがなにで、どう使うのかが一目瞭然であること。見慣れない技術用語や、いくつもの意味にとれる言葉、クリックできるかわからないボタンなどは、ユーザーの頭を悩ませてしまいます。UIデザインは、ユーザーが「？」と思うものを排除しなければなりません。

ユーザーの具体的な課題抽出のやり方としては、WebサイトやWebサービスを利用した際に離脱したユーザーのニーズや行動をユーザーのフィードバックやデータ分析などをもとに調べます。

必要であればユーザーテストを行い、実際にユーザーが製品やサービスを使っている様子を観察し、使い勝手や問題点を洗い出します。

ユーザーが求める機能やデザイン、ユーザーが直面する課題や問題点を把握し、その結果をもとにUIデザインを改善し、ユーザーが快適に製品やサービスを利用できる、つまりユーザビリティが向上すれば、ユーザー満足度の向上が期待できるでしょう。

UIデザインの進め方

1情報整理・リサーチ

プロジェクト全体の情報を整理する

まず、プロジェクトの目的や要件などの情報を確認します。どのようなサービスやアプリを作成するのか、どのような機能が必要なのか、誰がターゲットユーザーなのかなど、要件定義書および各種仕様書などのドキュメントに目を通し本プロジェクトの全体の要件を整理し、把握していきます。

ユーザーリサーチを行う

情報の整理が終わったら、ユーザーのどのようなニーズに応えられるプロダクトなのか、このジャンルのプロダクトはどのようなUIデザインが好まれるのかを調査します。ユーザーリサーチには、ユーザーインタビューやアンケート調査などの手法を用いることができます。

ユーザーインタビュー	ユーザーに直接インタビューを行い、製品やサービスに対する意見や要望、課題を聞き出す方法です。
アンケート調査	オンラインなどでアンケートを用いて、ユーザーの意見や要望を集める方法です。

UIデザインリサーチを行う

世の中のさまざまなUIデザインを調べます。使いやすいと感じたものや競合他社であると感じているプロダクトのUIを研究し、自分で作るUIデザインの設計に役立てます。

UIデザインリサーチはUIデザイナーにとって重要です。UIデザインリサーチを行うことで一般的に利用されているUIデザインのトレンドや特徴をおさえることができます。

2画面遷移・ワイヤーフレームの作成

画面遷移の流れを設計する

ユーザーがどのような順序で機能や情報を利用するかを明確にするために、画面遷移の流れを設計します。画面遷移はユーザーがどのような手順で操作するのかを示したものを表し、各画面がどのような関係にあるかも示します。

ワイヤーフレームを作成する

ユーザーリサーチやUIリサーチの結果をもとに、ワイヤーフレームを作成します。ワイヤーフレームは、UIデザインのレイアウトやコンテンツの配置などを簡単に表現するもので、機能や操作方法を示したり、UIの配置やスペースの配分を決定したりするために使用されます。色はなく、シンプルな線や枠によって設計されています。

3モックアップ・プロトタイプの作成

モックアップを作成する

モックアップはUIデザインの画面のサンプルです。ワイヤーフレームを基に、実際のデザインやカラースキーム、フォントなどのデザイン要素を追加して作成します。モックアップは、機能やデザインコンセプトなどUIデザインの完成イメージを表現するもので、ビジネスオーナーやユーザーに提示し、見た目の確認を行うことができます。

モックアップを作成することで、必要な画面の作成が網羅できているか、デザインのイメージがずれていないか、ボタンなどのアクションを起こせる要素が視覚的に認識できるかなどを検証することができます。

プロトタイプを作成する

モックアップにインタラクションや画面遷移の動作を追加して、プロトタイプを作成します。プロトタイプは、ユーザーがWebサービスやアプリを操作するためのもので、実際の完成版に近いかたちで操作することができます。プロトタイプが完成することで一定のユーザビリティや操作性をチェックすることができます。

4ユーザーテストとデザインの改善

ユーザーテストを行う

ユーザーテストは、ユーザーに実際に製品やサービスを使用してもらい、使い勝手や問題点を評価してもらう方法です。ユーザーがアプリを実際に操作して、UIや機能の使い勝手や問題点を発見することができるため、改善には欠かせない手段です。たとえば、ボタンの位置や大きさ、テキストのわかりやすさ、フォームの入力のしやすさ、メニューのわかりやすさなどを確認することができます。

UIデザインの改善

ユーザーテストの結果に基づいてUIデザインを改善します。ユーザーが直面した問題点を確認し、それに対応できるUIデザインを再考していきます。

UIデザインの改善が完了したら、必要に応じて再度ユーザーテストを行います。問題点が解決していればUIデザインの改善は完了となります。

5UIデザインのコンポーネント化

UIデザインの改善が完了したら、UIデザインのコンポーネント化を行っていきます。

UIデザインのコンポーネント化とは、ボタン、テキストフィールド、アイコン、ナビゲーションバーなど、UIデザインで共通してよく使用されるパーツをまとめ、簡単に再利用できるようにすることです。

コンポーネント化によって、UIデザインの効率が向上し、デザインの品質や一貫性を維持することができます。たとえば、デザインの変更が必要になった場合でも、コンポーネントを編集するだけで、全体のデザインを一括して変更することができます。

6デザインシステムの構築

最後にデザインシステムの構築を行います。

デザインシステムとは、サービスのデザインに関する指針や規範をまとめた一連のドキュメントやツールのことを指します。デザインシステムはUIデザインやグラフィックデザイン、ブランディングなどの要素を含み、プロダクトに関連するデザインの規定を提供します。

デザインシステムはデザイナーやエンジニアが一貫性のあるプロダクトを効率的に開発するために役に立ちます。また、複数のデザイナーが関わる場合でも、全員が同じ方向性を目指して作業できるため、チームの協働性を高めることができます。

デザインシステムは継続的に更新することが必要です。新しいコンポーネント、パターン、ガイドラインを追加し、既存のものを修正することで、製品の変更に対応し、品質を維持することができます。

UIデザインのポイント

ここまでお話してきたように、優れたUIデザインとは、ユーザーにとって使いやすく設計されていることが重要です。

続いては、そんなUIデザインを設計するためにUIデザイナーが実際の業務の中でどんなことを意識したらよいかご紹介します。

画面遷移図の作成やUIの構造設計を行う際の代表的な設計手法として、オブジェクト指向UI（OOUI：Object-Oriented User Interfaces）とタスク指向UIの2通りがあります。この2つの設計手法を理解し、構造設計の際に取り入れることでユーザーにとって使いやすく最適なUIを設計することができます。

オブジェクト指向UIとは

オブジェクト指向UIは目当てのもの（オブジェクト）を選んでから行いたいこと（タスク）を選択するという考え方です。

オブジェクト指向UIはユーザーが目当てとするもの（オブジェクト）が画面で開示された状態です。ユーザーはそのオブジェクトを眺めて動かしてみることで自分なりに理解してタスクを行うことができます。

オブジェクト指向UIは構造がシンプルとなるため、画面数が減り開発コストや運用コストの削減に繋がり、拡張性が高くなるというメリットがあります。

タスク指向UIとは

タスク指向UIは行いたいこと（タスク）を選んでから目当てのもの（オブジェクト）を選択するという考え方です。

タスク指向UIはユーザーが目当てとするもの（オブジェクト）が画面で開示されていません。編集や削除など、自分の行うべき行動を画面で選択する必要があり、その後必要なオブジェクトを選択してタスクを行うことができます。

タスク指向UIを取り入れることで、ユーザーが操作できる内容を一定のタスクに限定させることができます。ユーザーの行動が一定であり、どのような行動を取ればよいか迷わせたくない場合に適しています。

オブジェクト指向UI	タスク指向UI
目当てのもの（オブジェクト）を選んでから行いたいこと（タスク）を選択するUI。捜査対象となるタスクとそれに関連する情報が表示されている。	行いたいこと（タスク）を選んでから目当てのもの（オブジェクト）を選択するUI。捜査対象となるタスクのみが表示されている。
メリット ユーザーが自由な操作を実現でき、操作する画面数が少なくなる。	メリット 限定されたタスクを選択することで、行動を考える必要がない。
例 スマートフォン、メッセージアプリなど	例 食券販売機、ATM、旧式の自動販売機など

UIデザインは、ユーザーが必要とするアクションを予測し、それらを簡単にアクセスできるようにすることに重点を置いています。WebサイトやWebサービスの目的やコンセプト、提供するプラットフォームによって異なる場合もありますが、UIデザインの基本的なポイントとして下記のようなものが挙げられます。

シンプルに、複雑さを避ける

UIデザインは可能な限りシンプルにします。余分な要素や装飾はユーザーの注意をそらすため、必要最低限のものだけに絞ります。ユーザーが目的を達成するために必要な情報や機能だけを提供し、余計な情報や機能は隠す、あるいは削除し複雑さを避けます。

ユーザーの期待に応える

ユーザーのニーズや期待を予測し、先回りして満たすようにします。ユーザーが何をしたいのか、どうすればそれができるのかを明確にすることが必要です。

一貫性をもたせる

UIデザインに一貫性を持たせます。同じ機能や情報は同じ場所や方法で提示されるべきです。色やフォント、アイコンなども統一感を持たせます。

居場所を把握させる

ユーザーがどこにいるか、どこに行けるか、どこから来たかなどをわかりやすく示します。たとえば、ナビゲーションバーやパンくずリストなどを設置して今いる場所を迷わせないようにします。

ユーザーが行動を選択でき、その行動を伝える

ユーザーが画面上で選択を行い行動ができるようにコントロールできる機能を提供します。同様に、ユーザーが誤った操作をした場合でも、簡単に修正できるようにします。

また、ユーザーが行った操作によるシステムの状態などを伝えます。例として、ローディングバーやポップアップメッセージなどが用いられます。

優先順位を伝える

UIデザインは機能の優先順位を考慮するべきです。ユーザーが最もよく使う機能や情報は目立つように配置します。メニューバーやホーム画面などに優先的な項目を設置するとよいでしょう。

アクセシビリティを考慮する

色覚障害や視力障害などのあるユーザーも含めて、できるだけ多くの人が使えるように配慮します。コントラストやフォントサイズ、音声案内などが役立ちます。

ユーザーに考えさせないUIデザインを実現するには、情報をわかりやすく整理して見せることも大切です。Robin Williams著『ノンデザイナーズ・デザインブック』（マイナビ出版）では、情報を整理するための「4つの基本原則」が説明されています。

デザイナーとして実績や経験を積んでいくと、「何となく違和感を抱く」場所が見えていきます。違和感を起点に経験則で導き出したアイデアから、UIデザインを改善させることも可能でしょう。しかし注意したいのは、デザイナーはユーザー自身ではないことです。

UIデザインの学び方

UIデザインに関する知識や経験は、どのように育んでいけばよいのでしょうか。ここではUIデザインの勉強の仕方について紹介します。

Webサイト制作において、実務でUIデザインを学べる機会はたくさんあります。情報設計やワイヤーフレーム作成など、UIデザインに携われる仕事には積極的に手を挙げ、制作したUIデザインは社内からフィードバックをもらい、改善を積み重ねるとよいでしょう。

また、優秀な先輩のアウトプットを観察して、どのようなやり方をしているのかを学んだり、UIデザインリサーチを重ねて、どこが優れているのかを自分なりに考えてみることも大切です。

考えたことや学んだことは、できるだけアウトプットの場を設けて発信していくことでさらに理解度を深められるでしょう。社内勉強会や、会社のブログを活用し、UIデザインについて理解したことを伝えて自分の持っている情報を整理していきましょう。

UIデザインを学ぶにあたって公開されている情報は数多くあるため、自分なりに情報や書籍を探して学びを深めることも可能です。ここでは参考となりそうなURLや書籍をいくつか紹介します。

デザイン系のスクールやオンラインセミナー、UIデザイナー向けのイベントやデザインカンファレンスなど、社外の環境でUIデザインを学ぶやり方もあります。ここではUIデザイナーの業務に活かすことができるであろう講義やイベントの一例を紹介します。

能動的に動くことで、デザイナーとして必要な現場のスキルを学べたり、さまざまな会社のデザイナーの方と知り合い、知見を高めることができるでしょう。

デジタルにおいてチャンスを生むのは、企業規模ではなく優れたUI

リアルなプロダクトや店舗の場合、企業の資本力がそのままサービス展開に反映されるため、多くのチャネルを持つ企業が強く、小資本の企業は苦戦しがちです。

しかし、Webサービスやスマートフォンアプリは、企業の資本力いかんに関わらず、同じように検索エンジン上やアプリストアに並びます。同じ機能を持つサービスなら、「使いやすい」「わかりやすい」ものが選ばれるでしょう。UIデザインへのこだわりが、サービスそのものを訴求するチャンスに繋がるのです。

さまざまなWebサービスがあふれる今、ユーザーにとって「使いやすさ」はサービスを選ぶポイントの１つであり、UIデザインは今後ますます重要なものとなるでしょう。UIデザインを身に付けるには、実務で経験を積む、書籍で学ぶ、スクールで学ぶなど、多くのアプローチ方法があります。

まずは身の回りのものから「使いやすさ」「使いにくさ」の理由を考え、UIデザインを意識してみるところから始めてみてはいかがでしょうか。