子ども向けUIと大人向けUIは「使う人が小さいだけ」ではない。設計の哲学から根本的に違う。それを痛感したのは、小学生向け学習アプリのUI設計に初めて関わったときだった。
Google Stitch を使いながら進めたが、大人向けUIのプロンプトの書き方が全く通用しなかった。何が違うのか、どう対処したか——経験を整理する。
結論から言うと
子ども向けUIを Google Stitch で作る場合、プロンプトに「子ども向け」と書くだけでは不十分だ。年齢帯の指定・操作能力の前提・楽しさの要素・保護者への配慮——これらを具体的に書かないと、大人向けUIを少し明るくしただけのものが出てくる。子どもが「使いたくなる」UIと大人が「使いやすい」と感じるUIは、設計の優先順位が根本的に異なる。
今回設計したアプリの概要
対象は小学校1〜3年生（6〜9歳）向けの算数・国語の学習アプリだ。家庭で使う自主学習ツールとして、保護者が管理できる機能も必要だった。主な機能は問題演習・進捗確認・保護者向けレポート。
ターゲットが6〜9歳という、UIデザインで最も特殊な年齢層だ。文字の読み書きは始まっているが、複雑な操作や長い文章を読む能力はまだ限定的。タッチ操作は得意だがマウス操作は慣れていない。そして最も重要な要件が「楽しくないとやらない」。
大人向けUIとの根本的な違い
大人向けUIのゴールは「迷わず・速く・正確に」タスクを完了できること。子ども向けUIのゴールは「楽しく・もう一度やりたくなる・挫折しない」体験を作ること。このゴールの違いが、すべての設計判断に影響する。
大人向けUIでは「余分なアニメーションは邪魔」とされるが、子ども向けでは「正解時のアニメーション・エフェクト」はモチベーション維持に不可欠だ。大人向けUIでは「情報の密度を上げる」方向で改善するが、子ども向けでは「1画面1タスク」が絶対だ。これらの違いを Stitch のプロンプトにどう反映するかが最初の課題だった。
最初のプロンプトの失敗
最初に試したプロンプト：「小学生向けの算数学習アプリのホーム画面。子どもが使いやすいカラフルなUI」。出てきたUIは「大人向けのシンプルなUIを明るい色にしたもの」だった。フォントサイズは標準、情報量は多め、アニメーションの気配はゼロ。子どもが喜ぶ要素は何もなかった。
「子ども向け」という言葉だけでは、Stitch は大人向けUIのカラーパレットを変えるだけのことが多かった。子ども向け特有の設計要件を明示的に書かないと、意図したUIが出てこなかった。
子ども向けUIプロンプトで効いた表現
試行錯誤を重ねて、子ども向けUIを引き出すために有効だったプロンプト表現を整理する。
年齢と認知能力の明示
「小学校1〜3年生（6〜9歳）向け。ひらがな・カタカナは読めるが難しい漢字は読めない。一度に処理できる情報は2〜3個まで。タッチ操作は得意だが、小さなボタンは押し間違える」
この前置きを入れることで、フォントサイズが大きくなり、情報量が絞られ、ボタンが大きくなる方向に Stitch が動いた。「何歳向け」という数字より「その年齢の認知能力と操作能力の具体的な描写」の方が効果的だった。
楽しさの要件を具体的に書く
「正解したときのフィードバック（星・バッジ・アニメーションエフェクト）を画面に含める。ゲームのような達成感を感じられるデザイン。キャラクターが登場する吹き出しで次の操作を案内する」
「楽しいUI」という抽象的な指定より、楽しさを実現する具体的なUI要素を列挙する方が、意図した出力が得られた。「キャラクターが登場する」「星やバッジが表示される」という具体的な記述が重要だった。
保護者視点の要件も追加する
子ども向けアプリには保護者向け機能も必要なことが多い。「保護者が子どもの学習進捗を確認できる管理画面。子ども向けUIと明確に分離した、シンプルで情報が整理された大人向けデザイン」というプロンプトで、子ども画面とは全く異なるトーンの保護者用UIを生成できた。
一つのアプリの中に「子ども向け」と「大人向け」の二つのUIが共存するという設計は、Stitch でも明確に分けたプロンプトを書くことで対応できた。
Stitch で対応できなかったこと
子ども向けUIの設計で、Stitch が苦手だった領域も正直に書く。
- アニメーションの設計：「正解時にキャラクターが喜ぶアニメーション」のような動的な表現は、静的UIしか出せない Stitch では表現できない。動きの設計は別途必要
- 音のデザイン：子ども向けアプリで重要な「正解音・操作音・BGM」はUIデザインの外の領域で、Stitch は無関係
- 実際の子どもへのユーザビリティ：Stitch で作ったUIが「本当に子どもに使えるか」は実際の子どもへのテストが必要。大人のデザイナーが「子どもが喜ぶ」と思うものと、実際の子どもの反応は必ずしも一致しない
- 難読漢字の判断：「この漢字は小学1年生に読めるか」という知識は Stitch には期待できない。学習指導要領ベースの漢字配当表を参照した人間の確認が必要
実際の子どもに見せてみた
Stitch で作ったUIモックを、ターゲット年齢（7歳・8歳）の子ども2人に見せて反応を観察した。
7歳の子の反応：「このキャラクターかわいい」「これ（スタートボタン）押したらどうなるの？」——ビジュアルへの反応が最初で、操作への好奇心が続いた。ボタンが大きく分かりやすかったため、どれを押せばいいかの迷いはなかった。
8歳の子の反応：「むずかしそう」という第一印象。問題の内容（算数の問題）を見て「難しそう」と感じたようだった。UIではなく「問題の難易度」への反応で、UIとコンテンツの評価が混在することが分かった。
この観察から、子ども向けUIテストでは「UIへの反応」と「コンテンツへの反応」を分けて観察することが重要だと気づいた。Stitch で作ったビジュアルを見せるときも、コンテンツの難易度がUIの評価に影響しないよう、ダミーコンテンツを使うことが望ましい。
よくある質問（FAQ）
Q1. 子ども向けUIを Google Stitch で作るとき、最初にやるべきことは？
A. 「対象年齢の認知発達の特徴」をプロンプトに書き出すことです。「6歳：ひらがなが読める、タッチ操作は得意、集中は5〜10分が限度」のように、年齢ごとの発達特性を具体的に書くことで、Stitch が適切なUIを出しやすくなります。
Q2. 子ども向けUIと大人向けUIで、プロンプトはどのくらい変わりますか？
A. 大きく変わります。大人向けは「効率・情報密度・洗練」を軸にしたプロンプトになりますが、子ども向けは「楽しさ・シンプルさ・達成感・安全」を軸にした全く異なるプロンプトになります。同じサービスの子ども用と大人用で、プロンプトを共通化しようとするとうまくいきません。
Q3. 子ども向けUIのデザインで参考になる資料はありますか？
A. Appleの「Human Interface Guidelines」の「Designing for Children」セクション、Googleの「Material Design for Kids」、そして実際に人気の子ども向けアプリ（Duolingo Kids、Khan Academy Kids等）のUIを観察することが参考になります。「なぜこのデザインが子どもに受け入れられるか」を分析することで、プロンプトに活かせる知識が蓄積されます。
Q4. 保護者向けUIと子ども向けUIを同じアプリに作る場合、Stitch での使い方は？
A. 2つを明確に分けたプロンプトを別々に作ることが最も効果的でした。「子ども用ホーム画面」と「保護者用ダッシュボード」を同じプロンプトで作ろうとすると、中途半端なUIが出てきます。それぞれのユーザーを別々のターゲットとして扱い、プロンプトを完全に分けることが良い結果につながります。
Q5. 子ども向けUIに特に重要なアクセシビリティ要件はありますか？
A. タッチターゲットの大きさ（56px以上推奨）、フォントの大きさ（18px以上）、シンプルで迷いにくいナビゲーション、エラー時の分かりやすいフィードバックが特に重要です。また色覚異常への配慮も大切で、色だけに頼らずアイコンや形でも状態を伝えるデザインが求められます。
Q6. 子ども向けUIを実際の子どもでテストするには、どうすればいいですか？
A. プロトタイプを作り、ターゲット年齢の子どもに「これを使ってみて」と頼むだけで十分です。複雑な質問は不要で、「どこが分からなかったか」「どこで止まったか」を観察することが最重要です。子どもは正直なので、使いにくければすぐ「分からない」「つまらない」と反応します。この正直な反応が最も価値のあるフィードバックです。
まとめ
子ども向けUIを Google Stitch で作った経験から、「ユーザーが誰かによって設計の哲学が根本から変わる」ことを改めて実感した。大人向けの「効率・洗練」から子ども向けの「楽しさ・シンプルさ・達成感」への転換は、プロンプトの書き方を変えるだけでなく、設計者の思考モードを切り替えることが必要だ。
Stitch は「子ども向け」という指定に確かに反応するが、その精度はプロンプトの具体性に依存する。年齢・認知能力・楽しさの要件・保護者への配慮を具体的に書くことで、Stitch から引き出せるUIの質が大きく変わる。子ども向けUIを初めて手がける人には、この記事で試したプロンプトの書き方が参考になれば嬉しい。
