ヘルスケア/医療 デザインインスピレーション
医療プロダクトのデザインは「安心感」の上に全てが構築される。ユーザーは健康に不安を抱えてこの画面を開く。UIの仕事は「大丈夫です」と伝えることだ -- 清潔で、わかりやすく、決して急かさない。鋭い角は不安を増幅し、小さな文字は読めないストレスを生む。だからこそ、角は丸く、文字は大きく、余白は広く、色は穏やかに。
このページは、医療・ヘルスケアプロダクトに特化したデザインシステムを、インラインHTMLのビジュアル例とともに解説する。WCAG AAA準拠を前提とし、高齢者や視覚障害者にも配慮した設計指針を提供する。
このページの使い方
健康データカード、予約フォーム、ステータスバッジなど、医療特有のコンポーネントを視覚的に確認できます。特にアクセシビリティ（コントラスト比、フォントサイズ、タッチターゲット）に注目してください。
デザイン哲学 -- 安心が最優先
UIは「大丈夫です」と伝える温かい看護師。清潔で、わかりやすく、決して急かさない。
医療UIの設計は通常のWebデザインとは根本的に異なる。ユーザーの多くは高齢者であり、不安を抱えており、テクノロジーに不慣れかもしれない。小さなフォント、複雑なナビゲーション、鋭角的なデザイン -- これらは全て「この画面は自分には難しい」という印象を与える。
医療UI設計の3原則
- 清潔感: 白とブルーの世界。不要な装飾を排除し、「清潔な病室」のような空間を作る
- 安心感: 角は丸く、色は穏やかに。攻撃的な赤は使わず、オレンジで警告を表現
- アクセシビリティ: WCAG AAA準拠。16px以上の本文、56px以上のタッチターゲット、色+テキスト+アイコンの3重表現
カラーパレット -- 清潔感と安心感
ブルーティント背景
Background Surfaces (Blue-tinted)
テキスト階層（ブルーグレー）
ヘルスステータスカラー（赤を使わない）
Health Status Colors
重要: 攻撃的な赤（#ef4444, #dc2626）は使用しません。警告にはオレンジ（#ea580c）を使用し、不安感の増幅を防ぎます。
コンポーネントギャラリー
ステータスバッジ（3重表現: 色+テキスト+アイコン）
Health Status Badges (Triple Expression)
色覚障害のユーザーにも伝わるよう、色+テキスト+アイコンの3重表現を使用
フォーム要素（大きなタッチターゲット）
Form Elements (56px Touch Targets)
ボタンバリエーション
Button Variations (56px height)
全ボタン56px以上の高さ。高齢者・運動障害のあるユーザーにも押しやすい
アクセシビリティ比較
推奨: 大きなフォント + 広い余白
避ける: 小さなフォント + 狭い余白
12pxの本文は高齢者には読めない。ボタンも小さすぎる。
使い方ガイド
このテーマが適するプロダクト
- 医療機関の予約システム
- 健康管理アプリ
- 電子カルテ
- オンライン診療プラットフォーム
- 介護記録システム
- お薬手帳アプリ
医療UI必須ルール
| ルール | 詳細 |
|---|---|
| WCAG AAA | コントラスト比 7:1以上を全テキストで達成 |
| 最小フォント | 本文16px以上。キャプションでも13px以上 |
| タッチターゲット | 56px以上（標準の44pxより大きく） |
| 角丸 | 12px以上（柔らかい印象を保つ） |
| 警告色 | 赤は使わない。オレンジ(#ea580c)で代替 |
| 3重表現 | 色+テキスト+アイコンでステータスを表現 |
赤を使わない理由
医療プロダクトにおける赤は「危険」「緊急」「死」を連想させ、ユーザーの不安を不必要に増幅する。代わりにオレンジ（#ea580c）を使用することで、注意を促しつつも過度な恐怖を与えないUIを実現する。
Stitch向けプロンプト例
このDESIGN.mdに従って、健康ダッシュボードを作成してください。
背景は#ffffff + #f0f9ff（ブルーティント）。
健康データカードは16px角丸、淡いブルー影（rgba(14,165,233,0.06)）。
全テキストは16px以上、タッチターゲットは56px以上。
ステータスは色+テキスト+アイコンの3重表現。
警告にはオレンジ(#ea580c)を使い、赤は絶対に使わないでください。
WCAG AAA準拠のコントラストを確保してください。