UI/UX Design
User Interface / User Experience Design
生活者・患者に対して新たな体験価値を与えるプロダクトやサービスを提供するためには、現状を正確に把握し、どのような新しい価値を提供できるのかを考え、それに基づいて生活者・患者に最適な製品・サービスを開発する必要があります。
生活者・患者の体験価値を中心に設計されるプロダクト・サービスのデザインをUX（User eXperience）デザインといい、それを具現化し、生活者・患者が使いやすい画面デザインに落とし込むことをUI（User Interface）デザインと呼びます。
今後、医療ヘルスケア領域でDX化が進む中で、単にプロダクトを提供するのではなく、生活者・患者、そして様々な医療ヘルスケア・ステークホルダーの体験価値を向上させることを目指し、どのようなUIデザインが使いやすいかを常に意識しながら開発することが重要です。
このページでは、UI/UXデザインについて詳しく説明します。
1.UXとは？
UX（User experience）という言葉を耳にしたことはありますか？
この言葉は、Webサイトやアプリ、さらには日常の製品やサービスを使う際の「体験」全般を指します。UXは、単にWebサイトやアプリのデザインや機能性、快適さ、使いやすさだけではなく、利用する前の期待、利用した後の感想、さらには利用全体を通じて感じた価値観なども含めた体験全体のことを指します。
たとえば、スマートフォンでよく使うアプリを思い浮かべてください。そのアプリを使う前にどんな期待を持っていたか、使っている最中にどんな感情が芽生えたか、そして使い終わった後にどんな印象が残ったか。これらすべてがUXに含まれます。つまり、UXとは単純に見た目や機能がよいという狭い内容ではなく、ユーザー体験全体にわたる広い概念となります。
2.UXが必要となる理由
これまでのシステム開発プロセスは、主にB2Bが中心であり、顧客から提示された要件に基づいてシステムを開発するというものでした。しかし、スマートフォンの登場により、システムはB2Bの世界にとどまらず、一般の利用者が日常的にスマホを通じてシステムに触れる「エンドユーザーコンピューティング」の時代へと移行しました。さらに、コロナ禍によってこの傾向は加速し、使い勝手などの要件が利用者側に完全に移行したと言えます。
これにより、要件定義フェーズは大きく変化しました。B2Bのシステム開発では、顧客とすり合わせて明確に定義された要件に基づいて開発が進められていましたが、エンドユーザーコンピューティングの時代では、利用者が漠然と抱くニーズを発見し、そこから要件を定義することが求められるようになりました。
つまり、プロダクトアウト的に企業が一方的に提供するWebサイトやアプリのサービスが正解ではなく、利用者の体験がどのようになっているのか、何に価値を感じているのかを理解し、その価値をさらに向上させるためにどのようなサービスを提供すべきかを探る必要があるのです。このプロセスをユーザーモデリングと呼びます。
ユーザーモデリングでは、ペルソナ（典型的なユーザー像）を作成し、そのペルソナがどのような体験をするのかをカスタマージャーニーマップに示します。そして、本来求めている体験価値を提供するためにどのようなプロダクト・サービスが必要かを考えることが、従来の要件定義に代わって重要なプロセスとなっています。
3.UXデザイン
UXデザインとは、利用者の体験価値を探り、その体験価値を向上させるためにプロダクトを設計・開発するプロセスです。UXデザインは、単に美しいデザインを作り出すことではなく、利用者がプロダクトやサービスをどのように使い、どのように感じるかを総合的に考慮し、その体験全体を最適化することを目指します。
プロダクトがデジタルサービスである場合、まずどのような機能が必要かを明確にし、それを実現するために適切な画面構成やデザインを決定していきます。この過程では、利用者のニーズや行動を理解し、最適なユーザーインターフェースを設計することが求められます。
このようなUXデザインのプロセスを可視化する手法として、「UXデザインの5段階モデル」があります。これは、UXデザインを体系的に理解し、効果的に進めるためのモデルであり、以下の5つの段階に分けて考えることができます。
4.医療ヘルスケア領域でのUXデザイン
利用者を起点にしてUXデザインを行う場合、医療ヘルスケア領域では以下のような特有の制約を考慮する必要があります。
1. 各種法令による制約
2. 医療ヘルスケアならではの商流
3. 医療DXの進展によるテクノロジー面での要素
他業界と比較して、医療ヘルスケア領域では、単にユーザーモデリングを行い、その結果を実現するプロダクトに反映するだけでは不十分です。必要な要素として、以下の3つの方向性を考慮することが重要です。
・医療ヘルスケア領域の知識（法的な側面、業界の常識）
・ビジネスの知識（制約が多い中で収益を上げるための方策）
・デジタルの知識（技術潮流の変化に対応するためのトレンド理解）
これらの知識が不足している場合、たとえUXリサーチでステークホルダーのユーザーモデリングが成功し、素晴らしいアイデアが生まれたとしても、法的規制や業界の慣習によって実現できない、あるいは収益が見込めないといった問題が発生し、計画が頓挫する可能性があります。
医療ヘルスケア領域におけるUXデザインは、複合的な要素をバランスよく捉え、専門家の力を適宜借りながら進める必要があります。知識と経験、そしてバランス感覚が要求される非常に高度なUXデザインになってきます。
■UXデザインにおける実践ステップ
ステップ1：ペルソナ設計プロジェクトの出発点として、対象とする生活者・患者さんの「代表的な人物像（ペルソナ）」を定義します。ペルソナはカスタマージャーニーマップやTo-Beシナリオの設計において重要な基盤となり、チーム内での認識を統一する役割を果たします。
・年齢／性別／家族構成／病歴／通院頻度／ライフスタイルなどの基本情報
・医療やデジタルへの理解度、サポート環境、モチベーションや不安
・サービスを利用する状況（シーン）や目標、課題
ペルソナに基づいて、サービス利用者（生活者・患者）の行動・感情・タッチポイントを時系列で可視化し、現場での体験と課題を明らかにします。
・行動／感情の変化に注目
・医療従事者など他のステークホルダーの関与も併記
・必要に応じて「サービスブループリント」と併用して業務や裏側の処理も整理可能
As-Isカスタマージャーマップで明らかになった課題を踏まえ、理想の体験やシステムの在り方を「To-Beカスタマージャーニーマップ」として描きます。将来の姿を見える化し、関係者との合意形成にも役立ちます。またカスタマージャーニーマップとして整理する代わりに、UXタイムスパンである「利用前（予期的UX）」「利用中（一時的UX）」「利用後（エピソード的UX）」「利用時間全体（累積的UX）」の視点でどのような体験になるのかを言語化し、整理するという方法もあります。
・期待される変化と理想的なフローを描く
・制度や技術、ビジネス構造を考慮しつつ、より良い体験を構想
・ステークホルダーごとの価値変化も明確に
To-Beカスタマージャーニーマップ（To-Beシナリオ）で描いた理想の体験を、実際にビジネスとして成立させるための仮説検証を行います。医療領域の制約を踏まえつつ、持続可能な仕組みを構築します。
・課題、価値提案、チャネル、収益構造など9ブロックで構成
・MVP設計と仮説検証、ピボット判断の基礎にも活用可能
リーンキャンバスの内容をベースとして、プロダクトが「誰のために、何を実現するのか」を明文化します。開発フェーズにおける方向性を示す羅針盤となります。具体的には利用者ニーズの内容、ターゲット利用者、プロダクト名、ユニークセリングポイント、プロダクトカテゴリ名、競合や代替手段、差別ポイントなどを整理し、さらに利用者の生活がどう変わるか、どんな社会を実現するのかという将来の絵を言語化します。
・サービスの本質的な提供価値の言語化
・医療ヘルスケア業界内外の関係者との共通認識の醸成
・中長期的な成長戦略とも連動可能な設計指針
5.UXデザインからUIデザインへ
ステップ1：要件の洗い出し
利用者における体験価値を向上させるUXデザインが出来上がったとしても、それを実現するためには、具体的なアプリやサービスが必要です。利用者はどのようなサービスをどのように利用するのか、その利用の流れを考慮し、それを実現するための機能を洗い出すプロセス（ユーザーストーリーマッピング）を行います。
ユーザーストーリーマッピングは、ユーザーがプロダクトを通じて体験する一連の行動を「地図」のように可視化する手法です。機能の優先順位や開発の段階整理だけでなく、ユーザー価値の全体像をチームで共有することを目的としています。この手法を使うことで、以下のようなメリットがあります。
・ユーザー体験の流れに沿った開発ができる
・チームで共通のビジョンを持てる
・MVP（最小実行可能製品）を明確にできる
・優先順位付けが直感的にできる
ユーザーストーリーマップは以下のように記載できます。
ユーザーが目的を達成するための大きな行動のかたまり（例：「商品を探す」「注文する」「受け取る」）を横に並べていきます。これは ユーザーの目線でのジャーニーを表します。
・ストーリー（中段：各アクティビティに紐づく具体的な操作や機能）各アクティビティに対して、ユーザーが実際に行う操作や、必要なシステム機能（ユーザーストーリー）を縦に並べていきます。
・リリーススライス（下段：リリースごとの機能セット）ユーザーストーリー群の中で、ず最初にリリースすべきもの（MVP｜Minimum Viable Product）や、その後の機能追加計画を線で区切っていきます。これにより、開発スコープやリリース戦略を直感的に検討できます。
ユーザーストーリーマッピングで洗い出したストーリーから、共通して登場するオブジェクト（人・物・データなど）を抽出します。
それに基づいて、
・データ構造（何を持っているか）
・UI構造（どの画面にどの操作があるか）
を決めていきます。
このとき、タスク起点ではなく、オブジェクトを中心に操作を整理することで、直感的に使いやすく、拡張性のあるUI設計が可能になります。
「送信する」という操作を起点に、対象（Aさん・Bさん・Cさん）を選ぶ構造
→ ユーザーの操作を先に想定する、タスク主語型
「Aさん」という対象を起点に、何ができるか（送信・電話・編集）を提示する構造
→ ユーザーが対象物を中心に操作を考えやすい、オブジェクト主語型
構造で定義したオブジェクトとUIの関係をもとに、画面の骨格（ワイヤーフレーム）を設計します。このステップでは、見た目のデザインではなく、どの情報をどの画面でどう見せ、どう操作するかというUIの土台を形にします。
オブジェクト指向UI（OOUI）では、オブジェクトごとの画面を以下の2種類に明確に分けて設計します。
複数のオブジェクトを一覧で表示し、選択・検索・新規作成などを行う画面です。ユーザーが目的のオブジェクトを探す場面で使われます。
例：患者一覧、バイタル記録一覧、処方送信データ一覧
特定の1つのオブジェクトに焦点を当てた詳細画面で、確認・編集・操作実行などを行います。
例：Aさんのプロフィール情報、個別の診療記録、1件の処方送信データ詳細
このように「リスト → シングル」という構造に分けることで、情報と操作の整理がしやすくなり、ユーザーにとっても理解しやすいUIが構築できます。
ステップ4：表層骨格で設計したUIに対して、視覚的なデザインや言葉づかいを整え、わかりやすく、使いやすく、心地よい体験に仕上げていきます。このフェーズでは、ユーザーとの接点となる「見た目」「動き」「言葉」を設計し、ブランドのトーンと一貫性を担保します。
- カラーセット：ベースカラー・アクセントカラー・状態別カラー（成功／警告／エラーなど）を定義し、意味づけと一貫性を持たせる。
- タイポグラフィ：フォント種類、サイズ、階層（見出し／本文／注釈など）の使い分けによる可読性の向上。
- UIパーツスタイル：ボタン、フォーム、カードなどの各UIコンポーネントをスタイルガイドとして設計し、再利用性を高める。
- アイコン・イラスト：操作補助や内容の視覚的補足として統一感のある素材を活用。
・アクセシビリティ対応- 色覚多様性を考慮した配色（WCAG準拠）、十分なコントラスト比
- キーボード操作のしやすさ、スクリーンリーダー対応（ARIA属性）
- フォントサイズやタップ領域の適切な設計
・マイクロインタラクション- ボタン押下時やデータ処理中のアニメーション・フィードバック
- トースト通知やバリデーション表示などの状態変化の演出
- 「今何が起きているか」を視覚的に伝えることで、安心感と操作の分かりやすさを提供
・Voice & Tone（言葉づかい）- Voice（語り口）：信頼感・やさしさ・誠実さなど、ブランドの人格を反映した文体
- Tone（状況別の調整）：案内、エラー、成功メッセージなどにおいて、状況に応じた言葉づかいのトーンを使い分ける
・UI Stack（状態別UIレイヤー）UIは常に「理想状態」ではありません。以下のような状態を想定した設計までを行います。
- Blank State（空の状態）：初回利用やデータなしの状態で、行動を促す設計
- Loading State（ローディング）：処理中にユーザーを安心させる進捗表示
- Partial State（部分達成）：途中保存や未入力など中途状態の明示
- Error State（エラー）：明確かつ前向きな対処案を示す
- Ideal State（理想）：ユーザーが望んだとおりに表示されている状態
