UI/UXデザインの基本概念と違い

UI/UX基本概念 — デザインの「見た目」と「体験」を正しく理解する

「UIデザイナー」と「UXデザイナー」という言葉は、今や求人票やポートフォリオで当たり前に使われています。しかし現場でもこの2つを混同している人が多く、「UIはきれいなのにUXが最悪なアプリ」や「UXは考えているのにUIが古くて信頼されないサービス」が生まれ続けています。このレッスンでは、UIとUXの違いを根本から理解し、UXデザインのプロセス、ユーザー中心設計（UCD）の考え方、そしてJesse James GarrettのUX5要素モデルを体系的に学びます。

UI/UX基本概念 — UIとUXの違いとUX5要素モデル

---

UIとUXの違い

UIとは何か

UI（User Interface：ユーザーインターフェース）とは、ユーザーと製品の間にある「接点」のすべてです。デジタルプロダクトの文脈では、画面上に表示されるボタン・テキスト・色・フォント・アイコン・アニメーションなど、視覚的・触覚的なあらゆる要素を指します。

UIはJesse James GarrettのUX5要素モデルにおける「表層（Surface）」に相当し、ユーザーが直接目にして触れる部分です。

UIデザインが担当する主な領域:

• ◆色・タイポグラフィ・アイコンのデザイン
• ◆ボタン・フォーム・カードなどのUIコンポーネント
• ◆ブランドと一貫したビジュアルシステムの構築
• ◆アニメーション・マイクロインタラクションの設計
• ◆ダークモード・アクセシビリティ対応

UXとは何か

UX（User Experience：ユーザーエクスペリエンス）とは、ユーザーが製品・サービスと関わるすべての場面で感じる体験の総体です。「使いやすいか」「目的を達成できるか」「使った後に満足感があるか」という問いに答えるのがUXデザインです。

重要な点は、UXはUIよりはるかに広い概念だということです。アプリを開く前のマーケティング接点、使っている最中の操作性、使い終わった後のサポート体験まで、すべてがUXに含まれます。

UXデザインが担当する主な領域:

• ◆ユーザーリサーチ（誰が・何を・なぜ必要としているか）
• ◆情報アーキテクチャ（IA：コンテンツの構造と分類）
• ◆インタラクションデザイン（操作フローと画面遷移）
• ◆ペルソナ・ジャーニーマップ・プロトタイプ
• ◆ユーザビリティテストと改善サイクル

💡 有名な比較として、「UIは建物の内装・家具・照明のデザイン、UXは建物の間取り・動線・使い勝手の設計」があります。美しい内装（UI）があっても、部屋の配置が不合理（UX不良）なら住みにくい建物になります。

---

UIとUXの関係性

4パターンの組み合わせ

UIとUXは独立した変数であり、4つの組み合わせが存在します。

⚠️ 「UIを磨けばユーザーが増える」と思われがちですが、UXの課題（目的が達成できない・フローが複雑）が根本にある場合、いくらUIを改善しても離脱は止まりません。まずUXの問題を特定してから、UIに着手するのが正しい順序です。

---

UIデザイナーとUXデザイナーの役割分担

実務でのチーム構成

現場ではUIとUXを一人が兼任する「UI/UXデザイナー」という役割が多く、特にスタートアップや中小規模のプロダクトチームで一般的です。一方、大企業や成熟したプロダクトでは専門分化が進み、UXリサーチャー・インフォメーションアーキテクト・インタラクションデザイナー・ビジュアルデザイナーなど複数の専門職が協力します。

役割の境界が曖昧になりやすい理由:

• ◆両者の成果物（ワイヤーフレームとモックアップなど）が連続していて切り分けにくい
• ◆小規模チームでは一人がすべてを担当せざるを得ない
• ◆「UX」という言葉が本来の意味より広く使われるようになった

求人票でよく見る「UI/UXデザイナー」の実態

求人票の「UI/UXデザイナー」が実際に求めているスキルセットは企業によって大きく異なります。

💡 スキルアップの優先順位として、まずUXの基礎（リサーチ・情報設計・プロトタイプ）を学んでから、UIスキル（Figma・デザインシステム・ビジュアル）を磨くことを推奨します。UIは「どう見せるか」の技術ですが、UXは「何を作るか・なぜ作るか」の根拠を与えてくれます。

---

UXデザインプロセス

ダブルダイヤモンドモデル

UKデザインカウンシルが提唱した「ダブルダイヤモンド」は、UXデザインの標準的なプロセスモデルです。4つのフェーズで構成されます。

最初の2フェーズが「正しい問題を発見・定義する」ための発散→収束、後の2フェーズが「正しい解決策を探索・実装する」ための発散→収束です。この2つのひし形（ダイヤモンド）が連なる形がモデル名の由来です。

デザイン思考（Design Thinking）との関係

デザイン思考はスタンフォードd.schoolが広めた5ステップのフレームワークです。ダブルダイヤモンドと本質的に同じ考え方を持ちます。

1. ◆共感（Empathize）: ユーザーの立場に立って理解する
2. ◆定義（Define）: 解くべき問題を明確にする
3. ◆概念化（Ideate）: 多様な解決策を発散させる
4. ◆プロトタイプ（Prototype）: 素早く形にして検証する
5. ◆テスト（Test）: ユーザーに試してもらってフィードバックを得る

💡 デザイン思考の肝は「共感（Empathize）」から始めることです。自分がユーザーだと思い込んで設計する「セルフリファレンス」は最大の失敗原因の一つです。実際のユーザーを観察・インタビューして初めてデザインプロセスが正しく動き始めます。

---

ユーザー中心設計（UCD）

UCDの定義

ユーザー中心設計（User-Centered Design：UCD）とは、設計のすべての段階でユーザーの視点・ニーズ・制約を中心に置く設計哲学です。ISO 9241-210として国際標準にもなっています。

UCDの反対が「テクノロジー中心設計」や「ビジネス中心設計」です。「技術的に作れるから作る」「売上のために機能を詰め込む」という思考はUCDの対極にあります。

UCDの4原則（ISO 9241-210より）

1. ◆ユーザーへの理解に基づく設計: ユーザーの特性・タスク・環境を明示的に理解した上で設計する
2. ◆ユーザーの参加: 設計プロセス全体を通じてユーザーが積極的に関与する
3. ◆反復設計: プロトタイプを作って評価し、繰り返し改善するサイクルを回す
4. ◆学際的なチーム: デザイナー・エンジニア・マーケター・ユーザーリサーチャーなど多様な専門家が協力する

UCDと「想定ユーザー」の危険性

UCDで最も注意すべきは、「このユーザーは〇〇だろう」という根拠のない想定です。経験豊富なデザイナーでも、自分の使い方や思い込みを「普通のユーザー」に投影するバイアスから自由ではありません。

代表的なバイアス:

• ◆専門家の呪い（Expert Blind Spot）: 知りすぎているために、初心者がつまずく点に気づけない
• ◆虚偽の合意効果（False Consensus Effect）: 「みんな自分と同じように感じるはず」という思い込み
• ◆確証バイアス（Confirmation Bias）: 自分のデザインを肯定するフィードバックだけを採用する

⚠️ バイアスを排除する唯一の方法は「実際のユーザーを観察・インタビューすること」です。チームメンバー同士でのテストや、自社の社員に使ってもらうだけでは不十分な場合がほとんどです。

アクセシビリティとインクルーシブデザイン

UCDの視点から外せないのがアクセシビリティ（WCAG 2.1準拠）とインクルーシブデザインです。「普通のユーザー」を想定して設計すると、視覚・聴覚・運動機能・認知の違いを持つユーザーが排除されます。

インクルーシブデザインの原則:

• ◆1人の極端なユーザーのために解決した問題が、多くのユーザーを助ける（Microsoft Inclusive Design）
• ◆「障害」はユーザーにあるのではなく、設計とユーザーの間のミスマッチにある
• ◆アクセシビリティ対応はリーチできるユーザー数を増やすビジネス施策でもある

具体的な考慮事項:

• ◆カラーコントラスト比（テキストは4.5:1以上）
• ◆フォントサイズ（最低16px、ズーム対応）
• ◆キーボードのみでの操作可能性
• ◆スクリーンリーダー対応のARIAラベル
• ◆動画・音声コンテンツの字幕・代替テキスト

---

UX5要素モデル

Jesse James Garrettの5要素

2002年にJesse James Garrettが著書『ウェブ戦略としての「ユーザーエクスペリエンス」』で提唱したモデルは、現在もUX設計の基本フレームワークとして広く使われています。

5つの層は戦略から表層へ、抽象から具体へと積み重なります。原典の図では戦略が土台として一番下に描かれますが、下の表では戦略から順に上から並べています。

なぜ上から（戦略から）設計するのか

よくある失敗パターンは、表層（Surface＝UI）から始めてしまうことです。「とりあえずFigmaでモックを作る」という進め方は、解くべき問題が定義されないまま解決策を作ることになります。

正しい順序の利点:

• ◆機能追加の根拠が「ユーザーニーズ」に基づく
• ◆情報設計が固まってからUIを作るため手戻りが少ない
• ◆チームメンバーが「なぜこのデザインか」を共通認識で持てる

戦略が曖昧なまま進んだ結果の典型例:

• ◆誰向けなのかわからないUIになる
• ◆開発中に「やっぱりこの機能も必要」と際限なくスコープが拡大する
• ◆リリース後に「ユーザーが使ってくれない」と気づく

💡 5要素モデルは「上位層を決めずに下位層に着手してはいけない」というルールを教えてくれます。特に戦略（なぜ作るか）とスコープ（何を作るか）の2層は、デザイン着手前にステークホルダーと合意形成しておくことが非常に重要です。

---

UXとビジネス成果の関係

UX投資の経済的効果

UXデザインはコストではなく投資です。複数の調査が示すビジネス効果を確認しましょう。

💡 「UXに投資する余裕がない」という声を聞くことがありますが、UXに投資しない場合のコスト（離脱・サポートコスト・開発の手戻り）のほうが多くの場合で大きくなります。特に「設計段階での修正コストは開発後の100分の1」というデータは、早期のUX投資を正当化する強力な根拠です。

---

🏋️実践ワーク

1. ◆身の回りのアプリかウェブサービスを1つ選び、以下の観点で評価してください。
   • ◆UIの品質: 見た目・色・フォント・一貫性を5点満点で評価
   • ◆UXの品質: 目的達成のしやすさ・迷いのなさを5点満点で評価
   • ◆UIとUXのどちらが課題で、何が具体的に問題かを言語化する
2. ◆UX5要素モデルを使って、自分が作りたいサービスかアプリのアイデアについて以下を記入してください。
   • ◆戦略層: 誰のどんなニーズを解決するか、ビジネス目標は何か
   • ◆スコープ層: 必須機能を3つ挙げる
   • ◆構造層: メインの画面遷移を手書きでフロー図に描く
3. ◆「テクノロジー中心設計」と「ユーザー中心設計」の違いを自分の言葉で200字以内で説明してください。

📝まとめ

UIは「見た目・表層のデザイン」、UXは「体験全体の設計」を指します。両者は独立した概念であり、良いプロダクトはUIとUXの両方が高い水準で整っています。UXデザインプロセスはダブルダイヤモンドやデザイン思考に代表されるように、常に「ユーザーの理解から始まる反復的な改善サイクル」です。UX5要素モデルは「戦略→スコープ→構造→骨格→表層」の順で設計することで手戻りを防ぐフレームワークです。次のレッスンでは、戦略層と定義層の核心にあるユーザーリサーチの手法を学びます。

---

よくある質問

UIとUXの違いを一言でいうと何ですか？

UIは「ユーザーが触れる接点（画面・ボタンなどの見た目と操作性）」、UXは「その前後も含めた体験全体」です。UIはUXを構成する一部分であり、美しいUIでもタスクが完了できなければUXは悪い、という関係にあります。

UI/UXデザイナーになるには何から学べばよいですか？

まずUXの基礎概念（ユーザー中心設計・デザインプロセス）を理解し、並行してFigmaで実際に画面を作る練習をするのが近道です。既存アプリのトレースと「なぜこの設計なのか」の言語化を繰り返すと、UIとUXの両方の観点が育ちます。

UXデザインのプロセスにはどんなものがありますか？

代表的なのはダブルダイヤモンド（発見→定義→展開→提供）とデザイン思考（共感→定義→創造→プロトタイプ→テスト）です。どちらも「課題を正しく見つけてから解決策を作る」という発散と収束の繰り返しが本質です。

学習を深める関連レッスン

• ◆モバイルファーストデザイン — 現代のUI設計の前提条件
• ◆ユーザーリサーチ — UXプロセスの起点となる調査手法
• ◆Figmaマスター講座 — UIデザインの実制作スキル