UI(ユーザーインターフェース)デザインとは? 見やすい画面設計のポイントや事例を解説

UI(ユーザーインターフェース)デザインとは? 見やすい画面設計のポイントや事例を解説

UIデザインとは、ユーザーがサービスやプロダクトをスムーズに使えるように設計を行うこと。

例えば、どんなに便利なサービスであっても、使いにくい設計であれば、サービスはユーザーに定着せずに終わってしまいます。つまり、UIデザインはユーザーのサービス利用率とも深く関係しています。

本記事では、UIデザインの意味や、UXデザインやビジュアルデザインとの違い、優れたUIデザインのポイントなどをわかりやすく解説しています。

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

★オンデマンド配信:アプリ施策が決まったら知りたい 成功するアプリの基本のフレームワーク

UIデザインとは?

UIデザインの言葉の意味やUXデザイン、ビジュアルデザインとの違いを解説します。

UIデザインの意味

UI(ユーザーインターフェース)とは、サービスやプロダクトとユーザーの接点を表す言葉。Webサイトやアプリなど、ユーザーとのタッチポイントとなるものはすべてUIです。

つまり、アプリ・Webサイトといった文脈で考えると、UIデザインとはユーザーが快適にサービスやプロダクトを利用できるようにページヴィジュアルや導線などを設計することを示します。

UXデザインとの違い

UX(ユーザーエクスペリエンス)とは、ユーザーがサービスやシステムの利用を通して得るすべての顧客体験を示す言葉。

★UXデザインについて詳しくはこちら

つまり、ユーザーとサービスやプロダクトの接点であるUIは、UXの一部です。

★UX /UIの違いについて詳しくはこちら

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

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

ビジュアルデザインの目的は、文字・写真・グラフィックなどの視覚的な表現を用いてユーザーに狙ったイメージを持たせること。

一方で、UIデザインの目的は、ユーザーが快適にサービスやプロダクトを利用できるように設計を行うこと。

両者は混同されやすい言葉ですが、ビジュアルデザインは表現UIデザインはユーザーが直感的に認知できる設計を重視する考え方であり、役割は異なります。

サービスやプロダクトにおけるUIデザインの重要性

Webサイトやアプリなど、さまざまなサービスやプロダクトにおいて、UIデザインは重要視されています。なぜなら、UIデザインはユーザーのサービス利用率と大きく関係しているからです。

サービスやプロダクトを作る上で、どんなにいいコンテンツや便利な機能を企業側が用意していたとしても、UIが悪く、ユーザーが求めていた情報に辿り着けなければ、サービスがユーザーに定着することはないでしょう。

しかし、考え方を変えれば、ユーザーの目的に沿った使いやすいUIを設計することで顧客体験価値が向上し、ユーザー満足度が高まってサービスへの定着率が上がります。

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

優れたUIデザインの原則とは?

UX専門家であるSteve Krug(スティーブ・クリュッグ)によれば、優れたUIデザインとは「ユーザーに考えさせない(Don’t make me think)」デザインであるとされています。

「ユーザーに考えさせない」デザインとは、ユーザーが感覚的に情報を理解し、操作できるデザインということ。ユーザーが迷ったり考えたりせずに、自分の目的にあったアクションをスムーズに行えることが重要です。

UI設計のポイント

「ユーザーに考えさせない」UIデザインを実現するために、どのようなことに留意すれば良いのでしょうか。

UIデザインの基本原則を解説したRobin Williams(ロビン ウィリアムズ)の 名著『ノンデザイナーズ・デザインブック』によれば、UI設計を行う際のの基本のポイントは4つあります。

UIデザインの基本ポイント
・近接
・整列
・対比
・反復

それぞれのポイントについて解説していきます。

ポイント① 近接

「近接」とは、関連性の高い複数の情報をグループ化すること。

関連性の高い情報をまとめることにより、情報量が同じでも読み手がより内容を把握しやすくなります。

ポイント② 整列

「整列」とは、情報を整理し、ルールに沿って並べること。

例えば、要素を文章の中で羅列するのではなく、箇条書きにすると、読み手の混乱を防ぐことができます。

ポイント③ 対比

「対比(コントラスト)」とは、重要な情報に強弱をつけて目立たせること。

例えば、重要な言葉を太字にする、色やサイズを変えるなどの装飾を使うといった方法があります。

ポイント④ 反復

「反復」とは、類似した要素に対し同じパターンを繰り返し使うこと。

例えば、レイアウトや色の統一、見出しの体裁を揃えるなどが挙げられます。同じパターンを繰り返し使うことにより、読み手がそのページのレイアウトに慣れ、ページ内容を理解するのにかかる負荷を下げることができます。

★海外UI/UXデザイン事例まとめサイト10選

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

UIデザインのトレンド:オブジェクト指向UI(OOUI)

近年、UIデザインのトレンドにおいて再評価されているのがオブジェクト指向UIです。

オブジェクト指向UIとは

オブジェクトとは「対象」「目的」という意味。

つまり、オブジェクト指向UIとは、ユーザーの目的とするもの(オブジェクト)を起点として設計されたUIのことです。ユーザーはまず目的とするもの(商品など)を選択し、その後に行動(商品の購入)を行います。

タスク指向UIとの違い

オブジェクト指向UIは、しばしばタスク指向UIと対比されます。

ユーザーの目的を起点とし、その後にアクションを行うオブジェクト指向UIに対し、タスク指向UIは最初にアクションを行い、その後に目的を選ぶという設計になっています。

タスク指向UIの例として、ソフトドリンク自販機が挙げられます。多くの自販機は、まず先にお金を入れて、商品のボタンを押すことで飲み物を購入するという設計になっています。

自販機の操作におけるタスクは「お金を入れる」「商品を選ぶ」というシンプルなものですが、タスクが複雑になればなるほど、ユーザーが目的に辿り着くまでの道のりが遠のいてしまいます。

オブジェクト指向UIのメリット

オブジェクト指向UIのメリットは、ユーザーが目的に辿り着きやすく、感覚的に操作ができる点です。

オブジェクトを起点として設計されているためユーザーが素早く目的に辿り着くことができ、さまざまなサービスやプロダクトにおいて活用されています。現代社会において、日々の暮らしに欠かせないスマートフォンも、このオブジェクト指向UIが活用された典型例です。

また、オブジェクト指向UIはタスク指向UIと比較して、設計がシンプルにしやすいというメリットもあります。タスクを起点としてUIを設計すると、オブジェクトを起点とした場合よりもページ数が多くなりがちな傾向があります。

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

UIデザイン具体例

UIデザインはサービスやプロダクトにどのように活用されているのでしょうか。事例をもとに具体的に説明していきます。

株式会社電通

電通は、自社が運営するオウンドメディア『ウェブ電通報』のリニューアルをしました。

課題になっていたのは、初回リリースから3 年ほど経過し、「既存サイトでは今のトレンドに合わない」「過去の記事が探しにくい」といったUIデザインの観点からの課題が浮き彫りになっていたこと。これに対して、運用チームがより効率的に作業できる、シンプルでユーザーファーストのUIデザインを実現しました。

★事例について詳しくはこちら

Shake Shack(シェイクシャック)

米国のShake Shack社は革新的なセルフオーダーを実現するオンライン注文プラットフォームを開発。

インタビュー手法と観察法を用いたUXリサーチを実施し、注文からカウンターに商品を取りに行くまでの店内におけるあらゆるステップの顧客体験を徹底的に分析しました。

調査結果の分析からインサイトを得て、年齢・性別 を分けた複数のペルソナを設計。各ペルソナごとのカスタマージャーニーマップを作り出すことでプロジェクトメンバー内の認識を擦り合わせ、ペルソナの行動導線やタッチポイントを精査しました。

スムーズな注文プロセスの提供だけでなく、レコメンド機能によるクロスセルやアップセルの機会創出、顧客エンゲージメントに合わせたサービス提供を可能にしました。

結果、モデルケースとして導入した店舗では、人件費を削減できたうえに顧客単価が15%もアップしました。

★事例について詳しくはこちら

フューチャークエスト株式会社

フューチャークエスト株式会社は、船舶同士のよりスムーズなコミュニケーションを可能にするため、衛星を利用したインターネット経由による一元的な海上通信プラットフォーム「CoastailLink」を開発。その中で、船舶同士が利用する通信端末用のアプリ開発に着手しました。

UIの操作性においては、実際には波の影響を受けたり、夜間や霧などの視界不良な環境が想定され、より簡略的に操作可能なボタン操作や定型文送信による簡易性なども本開発時に考慮すべき重要な課題点として抽出されました。

結果、アプリに必要な技術選定や、計画段階では洗い出せなかった想定外の条件の発見など、本開発を実行する際に必要な情報を取得することができ、海上という特殊な利用シーンを想定したUXUIデザインが実現しました。

★事例について詳しくはこちら

まとめ:優れたUIデザインの条件は「ユーザーに考えさせない」こと

UIとは、自社のサービスやプロダクトとユーザーをつなぐ接点のこと。UIデザインは、サービスやプロダクトをユーザが快適に利用できるように設計することを意味します。

ユーザーが迷ったり考えたりせずに、感覚的に操作して目的を達成できる設計になっていることが、優れたUIデザインの条件です。

➡︎【資料ダウンロード】アプリ開発の企画~発注の教科書

UIデザインを向上させてユーザーのサービス利用率改善を

モンスターラボには、さまざまな業界のサービス及びプロダクト開発における豊富なUIデザイン事例がございます。

ご相談・お困りごとがございましたら、下記のボタンからお気軽にお問い合わせください。

DX支援サービス紹介資料ダウンロード

直近のイベント

記事の作成者・監修者

津山 拓郎(株式会社モンスターラボ デザイングループ 副グループ長)

津山 拓郎(株式会社モンスターラボ デザイングループ 副グループ長)

飲食・音楽業界での活動を経て20代後半からIT業界に転身し、WEB/アプリ系のディレクターを10年以上経験。現在は、要求定義・要件定義のPM、UXのためのデザインプログラムマネージャーとして活躍。また、設計・開発工程ではIAをメインに担当。モンスターラボのデザイングループ・マネージャー、株式会社A.C.O.(デザインコンサルティングファーム)の執行役員を兼務。HCD-net 認定人間中心設計専門家。