DESIGN.md Templates

Appearance

教育/LMS設計ガイド -- "Bright Classroom" ​

教育UIは、学びの体験そのものをデザインする領域だ。単に情報を並べるだけでなく、学習者のモチベーションを維持し、達成感を演出し、「もう一問やろう」と思わせる仕掛けが求められる。退屈な教科書のデジタル版ではなく、ゲームのように楽しめる学習環境を目指す。

本記事では、Duolingo と Coursera という二つの成功した教育プラットフォームから着想を得た「Bright Classroom」というデザインシステムを解説する。語学学習、資格試験、オンラインコース、企業研修など、教育領域全般に適用可能な実戦レベルのテンプレートだ。

核心となる設計思想

学習は本来、達成感の連続であるべきだ。小さな成功体験を視覚的に祝福し、進捗を常に可視化することで、学習者の継続意欲を刺激する。UIはその「祝福装置」として機能する。

1. デザイン哲学 -- 「明るい教室」 ​

楽しさと学びの融合 ​

このテンプレートの根底にある考え方は、「教室は楽しい場所であるべき」ということだ。

明るい白い背景は清潔な教室、パープルのアクセントは学習の進捗を祝うリボン、グリーンは正解の喜びを表す。角丸を大きく取り、フォントは丸みのあるNunitoを採用することで、堅苦しさを排除しながらもプロフェッショナルな印象を維持する。

ダッシュボードプレビュー ​

以下はこのテンプレートを適用した学習ダッシュボードの実例だ。明るい背景、パープルの進捗、グリーンのCTA、ゲーミフィケーション要素が統合されている。

LearnHubホームコースランキング
12日連続2,450 XP
T
今日の学習
おかえりなさい、太郎さん！
今日のレッスンを完了して、ストリークを維持しましょう。
JavaScript基礎65%
レッスン 13/20 完了
完了+50 XP
変数と型
let, const, varの違いとデータ型を学ぶ
✓ 正解率 95%
学習中約10分
条件分岐
if/else文とswitch文の使い方
レッスンを続ける
🔒 未開放
ループ処理
for/whileループの基礎
🏆
新しいバッジを獲得！
「JavaScript入門者」-- 最初の10レッスンを完了

2. カラーパレット ​

このテンプレートのカラーパレットは、明るく開放的な印象を基盤としながら、学習の進捗と達成を視覚的に祝福するために設計されている。

パレットストリップ ​

#ffffffbg-base
#f8fafcbg-subtle
#8b5cf6accent
#22c55ecta/success
#f97316streak
#eab308xp-gold
#ef4444error

3. コンポーネントプレビュー ​

ボタンバリエーション ​

次のレッスンへ
学習を開始
スキップ
ヘルプ

バッジ & ピル ​

完了不正解復習推奨ヒント進行中+100 XPLv.12

入力フィールド ​

回答を入力
答えを入力してください...
フォーカス状態
JavaScript
エラー状態
Javasript
スペルが正しくありません

クイズカード ​

問題 5 / 10+10 XP
「const」で宣言した変数を再代入するとどうなりますか？
undefined が代入される
TypeError が発生する ✓
値が自動的に上書きされる
何も起こらない ✗

4. 使用ガイドライン ​

適合するプロジェクト ​

  • オンライン学習プラットフォーム（Coursera, Udemy風）
  • 語学学習アプリ（Duolingo風）
  • 企業研修・社内教育システム
  • 資格試験対策アプリ
  • プログラミング学習環境
  • 子供向け教育アプリ（色をよりカラフルに調整）

適合しないプロジェクト ​

  • データ分析ダッシュボード（情報密度が足りない）
  • EC・ショッピング（購買導線に最適化されていない）
  • ニュース・メディアサイト（タイポグラフィの方向性が異なる）

カスタマイズのポイント ​

  1. accent-primary: パープル (#8b5cf6) はブランドカラーに変更可能。ただし彩度の高い色を推奨
  2. ゲーミフィケーション要素: XP、ストリーク、レベルの名称と閾値をプロジェクトに合わせて調整
  3. 角丸: 14-16px がデフォルトだが、大人向けは 8-12px に下げてもよい
  4. フォント: Nunito 以外では Poppins, Quicksand, Rounded Mplus 1c も好適

テンプレートファイル ​

完全な9セクションの DESIGN.md テンプレートは以下に格納されている:

/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/EDUCATION.md

Stitch への投入方法は EDUCATION.md 内の「Agent Prompt Guide」セクションを参照のこと。