目次 / 情報設計・仕様設計 / 情報設計
UX設計
10秒でわかる!要点まとめ
-
UIが「点(画面)」なら、UXは「線(時間)」と「面(感情)」のデザイン
-
機能(What)で差別化できない時代、体験(How)だけが唯一の競争力になる
-
「使いやすい」は当たり前。「楽しい」「心地よい」という感情価値まで設計する
1. 概要:ユーザーの「感情」と「時間」を設計する
UX(User Experience)設計とは、ユーザーが製品やサービスを知り、利用し、利用を終えるまでの一連のプロセスにおいて、どのような体験(満足感、心地よさ、納得感)を提供するかを計画する業務です。
画面の見た目やボタン配置(UI)はその一部に過ぎません。「表示速度が爆速でストレスがない」「エラーメッセージが親切で安心する」「購入完了メールの文面が嬉しくてまた買いたくなる」といった、サービスとの接点すべてを通じて、ユーザーの感情をポジティブに動かし、ビジネスゴール(ファン化・収益化)へ導くためのグランドデザインを描きます。
2. なぜ重要なのか:機能による差別化の限界
現代において、新しい機能や技術はすぐに競合他社に模倣されます。「機能」だけで顧客を繋ぎ止めることは困難です。しかし、そこにある「体験」は簡単にはコピーできません。
例えば、Starbucksが売っているのはコーヒー(機能)だけでなく、サードプレイスという「くつろぎの体験(UX)」です。Webサービスも同様で、同じ機能を持つアプリでも、ストレスなく直感的に操作でき、使っていて気持ちが良い方が選ばれます。UX設計は、コモディティ化(均質化)する市場で生き残るための最強のビジネス戦略です。
3. 実務のポイント:「UXの5段階」を意識する
実務でUXを設計する際は、ジェシー・ジェームズ・ギャレットが提唱した「UXの5段階モデル」の概念が役立ちます。いきなり表層(デザイン)から入るのはNGです。
-
戦略(Strategy):ユーザーニーズとビジネスゴールの定義(※ペルソナ・ベネフィット定義)。
-
要件(Scope):必要な機能とコンテンツの選定。
-
構造(Structure):情報設計(IA)とインタラクション設計。
-
骨格(Skeleton):ワイヤーフレーム、ナビゲーション設計。
-
表層(Surface):ビジュアルデザイン。 この「下層から上層へ」の積み上げを論理的にリードし、表層のデザインが戦略と乖離しないよう管理します。
4. スキルアップのヒント:日常の「イライラ」と「感動」を解剖する
UXセンスを磨く最高の教材は、日常生活の中にあります。 「なぜこのコンビニのレジはスムーズなのか?」「なぜこの予約サイトは途中でやめたくなったのか?」 自分が感じた「快・不快」の正体を言語化してください。「ボタンが押しにくい(フィッツの法則に反している)」「次に何をしていいかわからない(アフォーダンスの欠如)」といった心理学的な原則が見えてくると、自分の設計にも根拠が生まれます。
関連
- D+ウェビナー 第2回(2026-06-18)「『使いにくい』の正体を、プロが解剖する」 共催: 株式会社i3DESIGN レポート: https://note.com/disa_pr/n/n268079fc6ebd
- 実案件から抽出したユーザビリティチェックリスト50選: https://note.com/disa_pr/n/n8cb6bc7ed6fd
- 合田ピエール陽太郎氏(面白法人カヤック ディレクター)技術ブログ
- パッケージの4面を「ページ遷移するWebサイト」と捉え時間軸のUXを設計
- シズル画像を使わずテキストのみで想像を掻き立てる「ユーザーサイド・レンダリング」
- 開封をクリックに見立てた仕掛けと隠しメッセージでエンゲージメントを狙う
- 元記事: https://techblog.kayac.com/2025/12/09/153907/DiSAの紹介: https://note.com/disa_pr/n/n8d8509e27c36
- ritar氏(東京大学でインターフェースデザインを研究)のnote
- UIを「考えなくていい」タイムラインUIと「考えさせる」トポグラフィUIに分類
- Slack/TikTokは前者、Googleドライブ/Figmaは後者の典型例と説明
- LLMは複雑な構造をチャット形式に変換する「変換装置」と位置付ける
- 元記事: https://note.com/ritar/n/n9e960988c8c8/DiSAの紹介: https://note.com/disa_pr/n/nf18ec6898726
- いがこ氏(UXリサーチャー)note
- コンポーネント/インスタンスの入れ子構造はUIを壊れにくくする設計プロセス
- オートレイアウトの本質は「中身に合わせて外枠が決まる構造作り」
- UXの戦略をUIの構造へ落とし込む視点がFigma活用の鍵
- 元記事: https://note.com/tmkigrs/n/nce9f27247538/DiSAの紹介: https://note.com/disa_pr/n/n8e7d95f43c74
- 中富ひろみ氏(インハウスデザイナー)note
- 決まっていないことを可視化し「判断の順番」を設計する
- ビジネス側と制作側をつなぐ翻訳役、責任範囲の境界線定義、マイルストーン設計の3点が要
- ディレクターの代行ではなく合意形成をスムーズにする「影のリード」として動く
- 元記事: https://note.com/86_hiromi/n/nc8015e178a4e/DiSAの紹介: https://note.com/disa_pr/n/nca09c517a063