本文へスキップ
Codex DesignBETA
日本語
インストール

Care：ヘルスケアアプリ デザインシステム

アプリ · ライト · やわらか · ヘルスケア

Care

1 画面に 1 つのわかりやすいタスク。さっと済ませたい患者さんのために。

Care は、疲れていたり、不安だったり、小さな画面で読んでいたりする患者さんのために書かれています。クールで淡い背景、次のステップには穏やかなセルリアン、大きく平易なラベル。どの画面も、時間を選ぶ、診察を確定するなど、1 つのタスクを片づけてから次に進みます。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ
9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ
9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページ

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Care デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/care.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

  • background#F7FAFCoklch(0.983 0.004 236.496)
  • foreground#0F2533oklch(0.254 0.039 238.734)
  • card#FFFFFFoklch(1 0 0)
  • card-foreground#0F2533oklch(0.254 0.039 238.734)
  • popover#FFFFFFoklch(1 0 0)
  • popover-foreground#0F2533oklch(0.254 0.039 238.734)
  • primary#0A6C8Aoklch(0.496 0.092 226.189)
  • primary-foreground#FFFFFFoklch(1 0 0)
  • secondary#E2F0F5oklch(0.946 0.016 221.08)
  • secondary-foreground#08485Coklch(0.375 0.068 225.402)
  • muted#EDF3F6oklch(0.96 0.008 228.854)
  • muted-foreground#4F6573oklch(0.494 0.035 236.328)
  • accent#E5F0F5oklch(0.948 0.014 226.562)
  • accent-foreground#0F2533oklch(0.254 0.039 238.734)
  • destructive#B3261Eoklch(0.501 0.178 28.705)
  • border#D8E4EAoklch(0.912 0.015 228.976)
  • input#C7D6DEoklch(0.867 0.02 230.733)
  • ring#0A6C8Aoklch(0.496 0.092 226.189)
  • chart-1#0A6C8Aoklch(0.496 0.092 226.189)
  • chart-2#2EA37Aoklch(0.641 0.12 165.003)
  • chart-3#E0A43Aoklch(0.758 0.137 77.684)
  • chart-4#7C6BC4oklch(0.584 0.133 290.433)
  • chart-5#D45D79oklch(0.634 0.152 7.8)

ダークテーマ

  • background#0B171Eoklch(0.197 0.022 235.108)
  • foreground#E4EEF2oklch(0.943 0.012 223.527)
  • card#11212Aoklch(0.238 0.028 234.286)
  • card-foreground#E4EEF2oklch(0.943 0.012 223.527)
  • popover#11212Aoklch(0.238 0.028 234.286)
  • popover-foreground#E4EEF2oklch(0.943 0.012 223.527)
  • primary#5EC2E0oklch(0.766 0.102 220.242)
  • primary-foreground#0B171Eoklch(0.197 0.022 235.108)
  • secondary#192C36oklch(0.282 0.031 232.351)
  • secondary-foreground#E4EEF2oklch(0.943 0.012 223.527)
  • muted#152730oklch(0.261 0.029 231.106)
  • muted-foreground#8DA4AFoklch(0.705 0.03 228.264)
  • accent#1C313Coklch(0.301 0.033 232.283)
  • accent-foreground#E4EEF2oklch(0.943 0.012 223.527)
  • destructive#F28A82oklch(0.743 0.128 25.246)
  • border#223844oklch(0.328 0.035 233.179)
  • input#2B4350oklch(0.369 0.037 232.814)
  • ring#5EC2E0oklch(0.766 0.102 220.242)
  • chart-1#5EC2E0oklch(0.766 0.102 220.242)
  • chart-2#5FD3A6oklch(0.788 0.125 165.158)
  • chart-3#F0C26Eoklch(0.838 0.115 81.184)
  • chart-4#A99BEAoklch(0.732 0.113 291.466)
  • chart-5#EE93A9oklch(0.763 0.112 4.425)

フォント

見出し
Source Sans 3 · 700
本文
Source Sans 3 · 400
等幅
Source Code Pro

タイプスケール

  • display · 40/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
  • h1 · 30/1.1 · -0.01emデザインで、画面はもっと使いやすくなる
  • h2 · 22/1.2デザインで、画面はもっと使いやすくなる
  • h3 · 18/1.3デザインで、画面はもっと使いやすくなる
  • body · 16/1.5デザインで、画面はもっと使いやすくなる
  • small · 13/1.4デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 10pxmd 12pxlg 14pxxl 18px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影低く広がるやわらかな影。カードとシートにだけ使います。

レイアウト

タッチ領域
48px
タブバー
64px、4 項目、icons with labels
画面の余白
20px
ナビゲーション
bottom tab bar; one task per screen
数字
proportional

向いている用途

  • 医師の予約とオンライン診療のアプリ
  • 患者ポータルと健康記録
  • 服薬とケアのリマインダー
  • 薬局と検査結果のアプリ

やること・やらないこと

  • 予約はすべて、確認用のまとめ画面で締めくくる。
  • 状態を示す色には、必ずアイコンと言葉を添える。
  • 1 画面にプライマリボタンを 2 つ置かない。
  • 平易な言葉で済むところに、専門用語を使わない。

アプリ向けのほかのデザインシステム

Codex Design は Codex 向けの独立したプラグインです。OpenAI との提携や、OpenAI による承認はありません。