アプリやウェブサイトのデザイン設計などで、耳にする機会が増えたUI/UX。

言葉は聞いたことがあるものの「UIとUXにどのような違いがあるのか」「UIとUXは使い分けが必要なのか」など、両者の違いを詳しく把握してる方は少ないのではないでしょうか。

本記事では、2011年の創業以来デザインファームにおけるパイオニアとして、多くの企業に向けてソフトウェアのUIデザインやUXデザインの支援をしてきたグッドパッチが、UIとUXの概要や違い、UI/UXデザイン設計の手順などをまとめて紹介します。

UIデザインやUXデザインの知識を深めてプロダクトやサービスに反映させるためにも、ぜひご覧ください。

成果に直結するUI/UXの改善点を1週間で提案

プロダクトのUI/UXを「ビジュアルデザイン」「コンテンツ機能」「情報設計」の側面から分析・レポート。アプリやWebサイトの、CVR改善、離脱防止、ユーザー数アップなど、成果に直結する改善点を最短1週間でご提案します。

このような方におすすめです

  • 短期間でUI/UXを改善したい
  • CVR改善、離脱防止、ユーザー数アップなどKPIを達成するための改善点を見つけたい
  • ユーザー視点に立った改善がしたいが、なにから手を付けていいかわからない
  • 数値分析やABテストをやりつくしたので、インパクトのある改善点が見つけられない

UI（User Interface）とは

UI（User Interface）とはUI（User Interface）とは、ユーザーと対象をつなぐ接点のことです。ユーザーが認知して使用する部分すべてがUIだといえます。

グッドパッチでは、ウェブサイトやアプリなどのソフトウェアにおける画面をUIと定義することが多いです。たとえば、ウェブサイトでは、ボタンやイラスト、文字など画面上でユーザーが目にするすべての要素がUIに該当します。

UIデザインとは

UIデザインとは、プロダクトやサービスの優れたUIを設計する考え方や手法、ツールなどをまとめた取り組みのことです。

広義の意味では自動車のハンドルや券売機の操作盤など、さまざまな機械や道具を操る仕組みを整えることを指します。グッドパッチでは、ソフトウェアのUIを設計する狭義の意味で捉えることが多いです。

UIデザインでは単に表層のデザインを行うだけでなく、そのソフトウェアをどのように使用するかというユースケースや機能要件の実現に対し、正しい情報設計を行いユーザーとソフトウェアをつなぐ接点を構築します。

【関連記事】UIデザインとは？デザイナー監修で5つのポイントと事例を紹介

UX（User Experience）とは

UX（User Experience）とはUXとは、ユーザーエクスペリエンス（User eXperience）の略称です。日本語では、プロダクトやサービスを通じてユーザーが得られる体験を指します。

グッドパッチでは、主観的・時間的・状況的側面を含むユーザー体験と定義しています。

  • 主観的側面：ユーザーがプロダクトやサービスを体験するときにどのような感情、評価を抱くか考慮する
  • 時間的側面：プロダクトやサービスの利用前・利用中・利用後・⻑く体験する期間のすべてにおいて抱く感情や評価を考慮する
  • 状況的側面：ユーザーがプロダクトやサービスを体験する環境や状況を考慮する

UXは個人的で主観的な心のプロセスのため「良いUX」と「悪いUX」はユーザーごとに異なると考えているのです。

UXデザインとは

UXデザインとは、プロダクトやサービスを通して、ユーザーの体験をデザイン（設計・企画）する取り組みです。体験が量産・再生産される仕組みを作ることも該当します。

先述のようにUXは個人的で主観的な心のプロセスなので、だれかが直接設計できるものではありません。

下記のように、ユーザーの利用状況やニーズに応じて必要な仕組みを設計して、価値のある体験ができる仕組みを作るプロセスがUXデザインに該当します。

＜UXデザインのプロセス例＞

  • ユーザー課題抽出：プロダクトやサービスを利用するユーザーの潜在的なニーズ、課題を定性調査によって発掘する
  • 解決策設計：オンライン・オフラインを横断したユーザータッチポイントの顧客体験を分断せず設計する
  • 解決策具体化：解決策で価値を得られる仕組みを開発する
  • ユーザー課題解決：ユーザーの課題が解決できているか検証して、解決ができていない場合は「ユーザー課題抽出」から繰り返して改善する

UXデザインでは一連のユーザー体験を通じて「使いやすい、分かりやすい」「心地いい、楽しい」など感じてもらえる価値ある体験の設計・企画をしていきます。

【関連記事】UXデザインとは？UIデザインとの違いや設計プロセス、事例を紹介

UIとUXの違い

UIとUXの概要が分かったところで、ここではUIとUXの2つの違いをご紹介します。UIとUXをより深く理解するためにも、参考にしてみてください。

【UIとUXの違い】

  • 違い①対象者
  • 違い②体験「そのもの」か体験の「接点」か

違い①対象者

UIとUXは、設計対象が異なります。UIデザインの設計対象は、主に「モノ（プロダクトや関わり方）」です。一方、UXデザインは「ヒト（ユーザー）」と「コト（活動の仕方）」が設計対象です。

たとえば、アプリのボタンを検討する場合は、UIデザインではボタンの仕組みや表現などの「モノ」を設計します。

UXデザインは、ボタンを押したときにユーザーが感じる利益や心の変化などの「コト」を考慮します。

UXデザインは、UIデザインより広範囲でユーザーごとの主観的な心理プロセスに焦点を当てている点も違いだといえるでしょう。

違い②体験「そのもの」か体験の「接点」か

違い②体験「そのもの」か体験の「接点」かUIとUXは、体験「そのもの」か体験の「接点」かという違いもあります。UXは、ユーザーがプロダクトやサービスを利用して得られる体験全体を指します。一方で、UIはユーザーとプロダクトをつなぐ接点です。

たとえば、プロダクトを検討するときに、UXデザインはだれがどのような体験をして、どのような価値を得ているかを配慮します。ユーザーがうれしいと思える体験を作り出すことが、UXデザイナーの役割です。

UIデザインは、プロダクトとユーザーをつなぐことを意識します。プロダクトやサービスの魅力を高め、印象や使い勝手を向上させる取り組みに注力します。

UIとUXの関係性

UIとUXの関係性昨今はプロダクトやサービスづくりにおいて「モノ」だけでなく「コト」も重視する傾向があります。かつては高機能な「モノ」を作れば売れる時代でした。しかし、次第に「モノ」があふれ、機能やデザインだけでは差別化が難しくなりました。

そこで、継続的にユーザーに利用してもらうために、新しい価値を提供する「コト」が重要になったのです。

優れたUXデザインによって価値のある体験を提供できれば、その瞬間は購買には至らなくてもプロダクトやサービスの魅力を届けられるでしょう。その後のリピート利用や導入数の増加など、ビジネス的な成功が見込めます。

また昨今は、ソフトウェア上で多くの体験をする時代になってきています。UIデザインは、ユーザーとプロダクトとの接点を設計します。

特にソフトウェアでは、物理的に形のないものをユーザーが知覚できるように表現し、直接見て触れられるような感覚を設計することが大切です。

ユーザーがソフトウェアに触れて何かを感じ取れると、プロダクトやサービスに愛着がわきます。中長期的なつながりを構築しやすくなるでしょう。

このように、短期的なモノの売り切りではなく中長期的かつ継続的にユーザーに使用してもらいLTVを最大化するには、UIとUXの双方を念頭に置いたプロダクト設計が必要になります。

UI/UXを意識したデザイン設計の手順

UI/UXをデザインに反映させるには、適切な手順で設計することが重要です。ここでは、UI/UXを意識したデザイン設計の手順をまとめているので、ぜひ取り入れてみてください。

【UI/UXを意識したデザイン設計の手順】

STEP1.利用状況の把握と明示

STEP2.ユーザーと組織の要求事項の明示

STEP3.設計による解決策の作成

STEP4.要求事項に対する設計の評価

STEP1.利用状況の把握と明示

まずはユーザーの視点を理解して要求事項を明確にするために、実態把握を行いましょう。

下記のような方法で、ユーザーの課題やニーズ、置かれている状況などを把握します。

  • 定量的なアンケート
  • 探索的なインタビュー
  • 観察
  • エスノグラフィー調査
  • ヒューリスティック評価

たとえば、UXデザイナーは、ユーザー視点と事業者視点双方での課題を抽出していきます。各機能に紐づく利用シーンとビジネス観点で重視する点を整理して、既存のプロダクトの問題点を見つけましょう。

UIデザイナーは、UIのセオリーと既存サービス、競合他社のサービスをユーザー目線で分析します。このように、UXデザイナーとUIデザイナーは異なる視点で現状を把握することが重要です。

STEP2.ユーザーと組織の要求事項の明示

続いて、STEP1で得たインサイトをもとに、ユーザーが求める要求事項を明確にします。

UXデザイナーとUIデザイナーが収集した情報をもとに、情報の精度を高める作業も行います。データを分析し、ユーザーの課題やニーズを具体化しましょう。

要求事項の明確化には、ペルソナシートやジャーニーマップの作成が有効です。ペルソナシートで、ユーザーの特徴的な行動やゴールなどを可視化します。その後、ユーザー行動の流れや課題発生箇所をジャーニーマップで可視化することがおすすめです。

ユーザー行動や課題をまとめることで、関与者全員が共通認識を持ちやすくなります。また、デザインのゴールが明確になり、解決すべき課題と優先順位を把握した上で議論ができます。

STEP3.設計による解決策の作成

可視化した要求事項ごとに、解決策を考えていきます。下記のような手法で、多角的な視点からアイデアを考案すると良いでしょう。

  • ブレインストーミング：集団で集まりアイデアを出し合い、相互のアイデアを組み合わせてより新しいアイデアを構築する技法
  • マインドマッピング：中心にキーワードを1つ置き、放射状に関連するキーワードを広げることで思考を整理する方法
  • プロトタイピング：プロダクト開発を始める前に試作モデルを作り、機能や操作性、デザイン、アイデアの価値を検証する手法

参考記事：効率的にアイデア出しができるブレインストーミングのやり方
参考記事：散らばった思考やアイデアを集約！整理して考える「マインドマップ」のすすめ
参考記事：プロトタイピングとは？事例や効果的に取り組むポイントを紹介

STEP4.要求事項に対する設計の評価

STEP3のアイデアを具体化して、ユーザーからフィードバックをもらいます。利用状況を観察、評価して、要求事項は適切だったのかユーザーの反応を分析します。

仮説と異なる反応の場合は差分の理由を明確にして、状況に応じてSTEP1〜4に立ち戻ることが重要です。ユーザーや組織の要求事項が満たされるまで、ブラッシュアップを重ねましょう。

UI/UX設計の事例

最後に、UI/UX設計を取り入れたプロダクトやサービスの事例をご紹介します。どのような点でUI/UX設計を意識しているのか、参考にしてみてください。

Spotify

SpotifyのUI/UXの事例

出典：Spotify公式サイト

Spotifyは、世界中の音楽やポッドキャストを楽しめる音楽ストリーミングサービスです。シンプルな画面で、直感的に使用できるUIデザインを重視しています。ホーム画面は音楽再生やプレイリストの作成、曲の検索などがあり、主要な機能に簡単にアクセスできます。

また、Spotifyは、継続的にUXを改善しています。AIを用いたパーソナライズ機能「Discover Weekly」では、ユーザー履歴の分析が可能です。まだ聴いたことのない曲を集めたプレイリストを、週替わりで自動生成できます。

この機能が好みのアーティストを発見するきっかけになり、音楽の幅を広げるユーザー体験につながっています。

LINE

LINEのUI/UX設計の事例

出典：LINE公式サイト

LINEは、直感的な操作ができるコミュニケーションツールです。明確なターゲットを決めるより、だれもがある程度簡単に使えることを重視してUI設計をしています。

画面を見たときに「ボタンが見にくい」「マージンが狭い」など、ノイズを極力なくす設計をしている点が特徴です。吹き出しのマージンやフォントサイズなど細かく設計し、シンプルで使いやすいツールになっています。

また、複数の機能を1つのプラットフォームで利用したいニーズに応えるために、マンガやショッピングなど多数のサービスに対応。複数機能を1つのアプリ内で提供するスーパーアプリの形態をとり、ユーザー体験の向上につなげています。

iPhone

iPhoneのUI/UX設計の事例

出典：iPhone公式サイト

iPhoneは、歴史的に最も売れているプロダクトの1つです。下記のような、説明書を読まなくても感覚的に使えるUI設計にこだわっています。

  • 書籍と同じように左右にページをめくれる
  • アプリを起点に操作できる
  • リアリスティック、シンボリック、バーバル、メタフォリックの4種類の音で操作をサポートしている
  • ユーザーのカスタマイズ性を確保している

iPhoneはアイコンやデザインに統一感があり、直感的に使用できる操作性が特徴です。一方で、ウィジェットやコントロールセンターなどのカスタマイズにも対応。よりパーソナライズ化された体験がUXの向上につながっています。

UI/UXを理解して価値の高いプロダクトを制作する

UI/UXの理解を深めることで、ユーザーニーズに合うプロダクトやサービス設計に役立てられます。また、UI/UXの観点からデザインの良し悪しが判断でき、プロダクトやサービスの価値を高められるでしょう。

グッドパッチはUI/UXデザインのパイオニアとして、業界内でもトップクラスの実績があります。表面的なスタイリングデザインの実装だけでなく、戦略レイヤーから一貫したビジネスをデザインして、各局面の難題を打開するサービスを提供しています。UI/UXデザインに課題がある場合は、お気軽にお問い合わせください。

成果に直結するUI/UXの改善点を1週間で提案

プロダクトのUI/UXを「ビジュアルデザイン」「コンテンツ機能」「情報設計」の側面から分析・レポート。アプリやWebサイトの、CVR改善、離脱防止、ユーザー数アップなど、成果に直結する改善点を最短1週間でご提案します。

このような方におすすめです

  • 短期間でUI/UXを改善したい
  • CVR改善、離脱防止、ユーザー数アップなどKPIを達成するための改善点を見つけたい
  • ユーザー視点に立った改善がしたいが、なにから手を付けていいかわからない
  • 数値分析やABテストをやりつくしたので、インパクトのある改善点が見つけられない

Share on

外舘 和也
大学で情報デザインを学び、2020年に新卒でグッドパッチにUX designerとしてJoin。新卒研修を経て保険の営業体験の改善に参加。顧客と営業担当双方のユーザーリサーチを経て、体験改善施策の企画を提案。その後は、DXによる働き方改善を促すSaaSの開発や医療従事者向けの求人サービスの改善などの案件に従事し、現在はマーケターとしてイベントやセミナーの運営、実施を行う。