geist-learning-lab

Geist Learning Lab

Geist のダークファーストで、ミニマルかつ精密な UI 言語を活用し、学習者が 実際に取り組み、フィードバックを得て、繰り返し改善する ことで学べる、インタラクティブな学習体験を構築します。

デザイン哲学

• ページではなく、学習ループ — すべての画面を、プロンプト → 試行 → フィードバック → 改善 → チェックポイントで完結させます
• 認知負荷の管理 — 段階的な情報開示、情報の分割、「一度に1つの概念と1つのアクション」
• 間違いを受け入れるデザイン — 間違いは想定内です。UI でそれを自然なものとして扱い、学びの機会へと変えます
• インタラクティブな表現 — スライダー、トグル、図、ライブコードなどを使い、テキストだけにしません
• Geist の精密さ — ダークな背景、タイトな字間、意味に基づくカラー、4px グリッド、スイス・タイポグラフィ

重要なルール

1. すべてのレッスンに、少なくとも1つの試行とフィードバックのループを含めます — 受動的に読むだけのページにはしません
2. すべてのインタラクティブなコントロールで、目に見える効果を示します — 約100ms以内に反映するか、ローディング状態を表示します
3. プロトタイプでも、進捗確認や復習の仕組みを設けます — 完了したステップや合格したチェックポイントを記録します
4. 説明より先に、学習者に取り組んでもらいます — 質問するかタスクを示してから説明します
5. すぐに具体的なフィードバックを返します — 「正解です」だけでは不十分です。なぜ正解なのかを説明します
6. 複数の表現方法を使います — テキスト、コード、ビジュアル、インタラクティブな要素、実データのうち、常に少なくとも2つを使います
7. 色を学習のシグナルとして使います — 緑＝正解、赤＝不正解、アンバー＝ヒント／警告、青＝情報／定義
8. デフォルトで段階的な情報開示を行います — 詳細は「理由」「エッジケース」「正式な定義」の中に置きます
9. 探索状態を URL に反映します — 検索パラメーターを使って、スライダーやトグルの設定を共有可能にします
10. よくある誤解を先回りして取り入れます — 「多くの人がこれを間違えるのは、〜だからです」のような、よくある落とし穴を仕込みます

学習ループ（中心となる原則）

すべてのレッスンで、次のサイクルを繰り返します。

ステップ	内容	コンポーネント
方向づけ	5〜10分で何を学ぶか	見出し＋学習目標
試行	まず学習者に予測・回答・編集してもらう	QuickCheck、CodePlayground、ParameterDock
フィードバック	すぐに具体的な応答を返す	フィードバック表示領域（緑／赤のパネル）
説明	学習者の試行に基づいた短い説明	Callout、WorkedExample
応用	バリエーション、エッジケース、または転用タスク	BeforeAfterSplit、ConceptExplorer
チェックポイント	簡単な想起問題	ConfidenceRating を備えた QuickCheck
振り返り	「理解にどんな変化がありましたか？」	任意のテキスト入力または自己評価

「なるほど」と気づく瞬間を生み出すデザインパターン

パターン	仕組み	使用する場面
予測とのギャップ	「〜したらどうなると思いますか？」と尋ねてから答えを示します	概念を紹介する前
対比ペア	ほぼ同じ2つのケースで、異なる結果を示します	微妙な違いを明確にするとき
スライダーで限界を探る	学習者がパラメーターを動かし、破綻するまで試せるようにします	境界や限界の理解
時間を巻き戻す	アルゴリズムの各ステップを順にたどり、不変条件を観察します	アルゴリズム、状態機械
誤解を誘う選択肢	選びたくなる誤答を提示し、なぜ間違いなのかを説明します	その分野でよくある誤り

色のクイックリファレンス（学習上の意味）

シグナル	カラートークン	Hex	用途
正解	green-700	#46A758	正解のフィードバック、完了したステップ
不正解	red-700	#E5484D	エラーのフィードバック、失敗したチェック
ヒント／注意	amber-700	#FFB224	ヒント、警告、「注意」
情報／定義	blue-700	#0070F3	定義、現在のステップ、リンク
デフォルト	gray-400	#737373	それ以外すべて：境界線、控えめなテキスト
完了済みの進捗	green-700 のドット	#46A758	完了したステップのインジケーター
現在の進捗	blue-700 のリング	#0070F3	現在のステップのフォーカス状態
未着手の進捗	gray-400 のドット	#737373	これから取り組むステップ

コンポーネントライブラリ（23パターン）

レッスンの流れと進捗

<LessonShell /> <ProgressRail /> <StepFlow /> <CheckpointCard /> <ResumeBanner />

探索型の解説

<ParameterDock /> <LiveOutputPanel /> <ConceptExplorer /> <InteractiveDiagram /> <BeforeAfterSplit /> <TimelineExplorer /> <ConceptMap />

コード学習

<CodePlayground /> <DiffEditor /> <TaskRunner /> <SnippetCopy />

クイズとアクティブリコール

<QuickCheck /> <ConfidenceRating /> <HintLadder /> <MistakeAnalyzer />

読解サポート

<GlossaryPopover /> <Callout /> <WorkedExample />

学習コンテキストにおけるタイポグラフィ

要素	意味	スタイル
大見出し	「何をしているか」	text-heading-{32|24} セミボールド、文字間隔を詰める
小ラベル	「現在の位置」	text-label-{14|12} gray-400
等幅フォント	「コンピューターに見えているもの」	text-copy-14-mono または text-label-14-mono
本文	読解コンテンツ	text-copy-14 または text-copy-16、最大幅は max-w-2xl

レイアウトパターン

コンテキスト	最大幅	構成
読解コンテンツ	max-w-2xl / max-w-4xl	1列、読みやすい行長
インタラクティブなラボ	max-w-6xl	2つのパネル：解説＋プレイグラウンド
フルエクスプローラー	max-w-7xl	3つのゾーン：ナビゲーション＋コンテンツ＋ラボパネル

App Router の構成

/                                    → Landing / course picker
/learn                               → Course catalog + resume
/learn/[courseSlug]                   → Course overview, modules, progress
/learn/[courseSlug]/[moduleSlug]      → Module overview
/learn/[courseSlug]/[moduleSlug]/[lessonSlug]  → Lesson shell

ファイル構成

content/courses/<courseSlug>/course.json       → Metadata, module order
content/courses/<courseSlug>/<module>/<lesson>.mdx  → Lesson content
components/learning/                           → Reusable learning components
lib/learning/progress.ts                       → Schema + storage adapters
lib/learning/grading.ts                        → Quiz validation, code tests
lib/learning/spaced.ts                         → Review scheduling

参考資料

• references/lesson-shell.md — LessonShell、ProgressRail、StepFlow、CheckpointCard、ResumeBanner の TSX パターン
• references/explorable-explanations.md — ParameterDock、LiveOutputPanel、ConceptExplorer、InteractiveDiagram、BeforeAfterSplit、TimelineExplorer、ConceptMap
• references/code-learning.md — CodePlayground（読み取り専用／ガイド付き／自由形式）、DiffEditor、TaskRunner、SnippetCopy
• references/quiz-assessment.md — フィードバックパターンを備えた QuickCheck、ConfidenceRating、HintLadder、MistakeAnalyzer
• references/reading-support.md — GlossaryPopover、Callout のバリエーション、段階的に表示する WorkedExample
• references/pedagogical-framework.md — Learning Loop の原則、段階的開示のルール、ひらめきを促すパターン、段階的な複雑さ
• references/architecture.md — Next.js App Router のルーティング、MDX コンテンツシステム、状態管理、ファイル構成
• references/progress-state.md — 進捗スキーマ、localStorage アダプター、間隔反復、探索用の URL 状態
• references/learning-animations.md — ステップ遷移、フィードバック表示、図解アニメーション、視覚効果を抑える設定への準拠