Quest：ゲーミフィケーション学習アプリ デザインシステム
アプリ · ライト · 遊び心 · 大胆 · 教育Quest
連続記録、XP、ぷっくりしたボタン。練習をゲームのように感じさせる。
Quest は、練習をゲームに変えます。ホーム画面のレッスンパス、大きな連続記録と XP の数字、次のステップにはロイヤルブルー、ごほうびにはゴールド。ボタンとカードはベタ塗りのずらした影の上に載るので、どのタップにも手応えがあり、Nunito が温かく励ますトーンを保ちます。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Quest デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/quest.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FFFFFFoklch(1 0 0)
- foreground#1A1F36oklch(0.247 0.044 273.419)
- card#FFFFFFoklch(1 0 0)
- card-foreground#1A1F36oklch(0.247 0.044 273.419)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#1A1F36oklch(0.247 0.044 273.419)
- primary#2346D8oklch(0.476 0.225 266.335)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#FFF1C2oklch(0.958 0.062 93.426)
- secondary-foreground#5C4100oklch(0.395 0.081 81.799)
- muted#F2F4FAoklch(0.967 0.008 271.329)
- muted-foreground#585F78oklch(0.489 0.041 272.6)
- accent#EAEEFCoklch(0.95 0.019 273.235)
- accent-foreground#1A1F36oklch(0.247 0.044 273.419)
- destructive#C62828oklch(0.539 0.194 26.725)
- border#E1E5F0oklch(0.922 0.016 269.977)
- input#D0D6E6oklch(0.876 0.023 269.42)
- ring#2346D8oklch(0.476 0.225 266.335)
- chart-1#2346D8oklch(0.476 0.225 266.335)
- chart-2#F5B800oklch(0.816 0.167 84.398)
- chart-3#18A957oklch(0.646 0.165 151.531)
- chart-4#E5486Doklch(0.632 0.193 10.713)
- chart-5#0EA5B7oklch(0.661 0.112 208.672)
ダークテーマ
- background#11142Aoklch(0.201 0.044 275.845)
- foreground#EEF0FAoklch(0.957 0.014 277.062)
- card#181C36oklch(0.237 0.05 275.304)
- card-foreground#EEF0FAoklch(0.957 0.014 277.062)
- popover#181C36oklch(0.237 0.05 275.304)
- popover-foreground#EEF0FAoklch(0.957 0.014 277.062)
- primary#8EA2FFoklch(0.735 0.137 273.398)
- primary-foreground#11142Aoklch(0.201 0.044 275.845)
- secondary#2A2A1Foklch(0.281 0.019 107.578)
- secondary-foreground#FFE38Aoklch(0.92 0.113 92.513)
- muted#1C2040oklch(0.258 0.06 275.985)
- muted-foreground#A2A8C8oklch(0.738 0.047 276.84)
- accent#232849oklch(0.29 0.06 275.457)
- accent-foreground#EEF0FAoklch(0.957 0.014 277.062)
- destructive#FF7A7Aoklch(0.735 0.163 21.864)
- border#292E52oklch(0.315 0.064 276.067)
- input#333962oklch(0.36 0.071 275.91)
- ring#8EA2FFoklch(0.735 0.137 273.398)
- chart-1#8EA2FFoklch(0.735 0.137 273.398)
- chart-2#FFD34Doklch(0.882 0.154 90.328)
- chart-3#4ADE80oklch(0.8 0.182 151.711)
- chart-4#FF8AA6oklch(0.768 0.144 5.774)
- chart-5#4FD1E0oklch(0.796 0.114 205.941)
フォント
- 見出し
- Nunito · 800
- 本文
- Nunito · 600
- 等幅
- JetBrains Mono
タイプスケール
- display · 44/1.05 · -0.01emデザインで、画面はもっと使いやすくなる
- h1 · 30/1.1デザインで、画面はもっと使いやすくなる
- h2 · 22/1.2デザインで、画面はもっと使いやすくなる
- h3 · 18/1.3デザインで、画面はもっと使いやすくなる
- body · 17/1.5デザインで、画面はもっと使いやすくなる
- small · 14/1.4デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 14pxmd 16pxlg 18pxxl 22px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影ハード：インクの色でぼかしなしにずらした影。押すと消えます。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels; streak counter
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar; lesson path on home
- 数字
- proportional; big streak and XP numbers
向いている用途
- 語学とスキル学習のアプリ
- 子ども向け教育とクイズのアプリ
- 習慣と練習の記録アプリ
- ゲーミフィケーションを取り入れたオンボーディング
やること・やらないこと
- レッスンを終えるたびに、短いごほうび画面でお祝いする。
- 大きな「続ける」または「チェック」ボタンを、下に 1 つ置く。
- 間違いに、きつい赤い画面で罰を与えない。正しい答えは優しく示す。
- ごほうびやポップアップを、一度に 2 つ以上表示しない。