DESIGN.md Templates

Appearance

キッズ / チルドレン 知育アプリ デザインインスピレーション ​

安全で楽しい。子供が直感的に操作でき、保護者が安心できるデザイン -- PBS Kids、Duolingo Kids、Khan Academy Kids が確立した「子供向けUI」の美学に根ざしている。大きなタッチターゲット、明るく親しみやすい色、丸みのある形状で「怖くない」UIを構築する。このスタイルは単なる「かわいいデザイン」ではない。誤タップの防止、選択肢の制限、達成感の演出 -- すべてが「子供の認知発達に寄り添う」という設計原則に奉仕する。

このページの使い方

各セクションにインラインHTMLのビジュアル例を配置しています。大きなタッチターゲット（64px+）と丸みのある角（20px+）が特徴です。

デザイン哲学 -- 安全な冒険 ​

大きく、丸く、明るく。指先で触れるすべてが安全な冒険。

キッズUIの世界観では、画面は「色鮮やかな遊び場」だ。要素は大きく、間隔は広く、色は明るい。1画面に表示する選択肢は最大4-6個に制限し、子供が迷わずに次のアクションを選べるようにする。

Manabi
R
R
Riku-kun, Konnichiwa!
Today's learning adventure awaits
★★★★★
📚
Reading
Stories
🔢
Math
Numbers
🌱
Science
Nature
🎨
Art
Create

カラーパレット -- 明るく親しみやすい5色 ​

子供向けの色は「明るいが強すぎない」が鉄則。純粋な赤（#ff0000）は避け、柔らかい色合いを使う。

Friendly Colors

Blue
#4299e1
Orange
#ed8936
Green
#48bb78
Pink
#ed64a6
Purple
#9f7aea
Gold
#ecc94b

Background Tints

#f0f7ff
#fff5f5
#f0fff4
#fffff0
Token値役割
bg-primary#ffffffメイン背景
bg-blue-tint#f0f7ff青系セクション
text-primary#2d3748柔らかい黒
blue#4299e1メインアクション
orange#ed8936セカンダリ
green#48bb78成功・正解
pink#ed64a6装飾
purple#9f7aea達成
star-gold#ecc94b報酬

コンポーネント -- 大きく丸い部品群 ​

ボタン ​

Start Learning
Play Game
Continue
Outline

進捗と達成 ​

★★★★★
Level 12
65%

使い方ガイド ​

Stitch への投入方法 ​

  1. /Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/KIDS_CHILDREN.md をプロジェクトの DESIGN.md にコピー
  2. カラーを対象年齢に合わせて調整（低年齢ほど明るく）
  3. Stitch に「この DESIGN.md に従って学習アプリ画面を作成してください」と指示
  4. ゲーミフィケーション要素は基本構造の後に追加

適したプロジェクト ​

  • 知育アプリ・学習プラットフォーム
  • 子供向けゲーム・エンターテイメント
  • ファミリー向けサービスのキッズモード
  • 絵本・読み聞かせアプリ
  • 子供向け動画プラットフォーム

不向きなプロジェクト ​

  • ビジネス向けのツール
  • 大人向けのプロフェッショナルアプリ
  • 情報密度が高い分析ツール
  • テキスト中心のメディアサイト

タッチターゲットサイズに注意

子供向けUIの最大の失敗は「ボタンが小さすぎる」ことです。すべてのインタラクティブ要素は最低64px x 64px、要素間の距離は最低16pxを確保してください。