世界を動かす技術を、日本語で。

シンプルにし、次に楽しさを加える: 子ども向けデザインについて

概要

  • Kidz Fun Art は子ども向けタブレットアプリの設計経験に基づく知見のまとめ
  • 子ども特有の操作性 やUX設計の工夫点を解説
  • テキスト最小化・誤操作対策・親の関与 など独自の設計指針
  • 細かい操作不要・パームリジェクション・楽しさの演出 にも注力
  • 成長や収益化の考え方、アプリの今後の展望にも言及

Kidz Fun Art:子ども向けアプリ設計の実践知

  • Kidz Fun Art は2021年から開発を続けている タブレット最適化アプリ
  • 3歳・5歳の娘たち が日常的に利用、7歳・9歳に成長する過程での利用観察
  • 子ども向けアプリ設計は 大人向けアプリ とは異なる独自の配慮が必要

テキスト最小化

  • 8歳未満の子ども は読解力が未発達なため、 テキストの使用を極力減らす 設計
  • テキストは 案内として機能しない ケースが多い
  • グラフィックや余白 の活用で、視覚的に分かりやすいUIを重視
  • 主要機能のコントロールはテキストフリー が理想

ツールの可視化・配置・ヒント

  • 大人向けアプリ のようなメニュー探索は子どもには不向き
  • ツールは対象オブジェクトの近くや上に大きく配置 し、操作を直感的に
  • ヒント表示 は最小限・限定回数でUIのノイズを防止
  • 操作の存在をグラフィックで示唆、文字やツールチップに頼らない工夫

誤操作の修正容易性

  • 子どもは予想外の操作 を頻繁に行うため、 アクションの取り消しややり直し を簡単に
    • 目立つ位置に Undo/Redoボタン 設置
    • ソフトデリート で誤削除時も復元可能に
  • データの自動クリーンアップ でストレージやプライバシーにも配慮

親の関与タイミングの設計

  • 高度な機能や重要な場面 では 親の関与を促す 仕組み
  • グラフィック中心のプロンプト で親の確認を要請
  • 各機能ごとに 一度だけ親の確認 を求める設計、ユーザーのストレス軽減

細かい操作を不要に

  • 幼児は微細な指先操作が苦手 なため、大きなヒットターゲット・操作性向上策
  • ボタンやリンクのタッチ範囲拡大 (例:WebならCSSで調整)
  • ロングプレス操作 の活用で子どもが自然に扱えるUI
  • 音や視覚効果 を加えることで操作の楽しさを演出

パームリジェクション対応

  • タブレット上で手のひらが触れる問題 (パームリジェクション)の重要性
  • iOS SafariのtouchType属性やPointer EventsのpointerType属性 を活用し、 スタイラスと指の判別 を実装
  • 指と手の切り替えUI を操作点付近に短時間表示し、直感的なモード切替を実現

シンプルさ+楽しさの演出

  • シンプルなUI設計 を基本とし、 驚きや喜びを感じる演出 を追加
    • 虹色ペン・グラデーション・バブル効果・サウンド など
    • スパークルエフェクト やアニメーションで感情を刺激
  • 子どもの「笑い声」や「驚き」の反応 がアプリの成功指標

状態遷移時の視覚的文脈維持

  • 画面遷移や状態変化 時に ユーザーが現在地や操作の流れを見失わない 設計
  • 半透明ダイアログアニメーション遷移 で操作の連続性を明示
  • 誤ったダイアログの多重表示を避ける ことで混乱防止

収益化・成長・安全性への配慮

  • 広告による収益化は非推奨、または未実装が望ましい
  • ソーシャルシェア機能無しでも成長を見越した設計 が重要
  • 子どもがアプリ内で課金できない 徹底した配慮
  • 将来的な機能追加や成長に柔軟に対応 できる設計思想

エピローグ

  • Kidz Fun Art 開発を通じて得た知見は、 子どものためのアプリ設計 における実践的な指針
  • 子ども視点のUX設計 が、長期的な利用や満足度向上の鍵
  • 保護者の安心感 も含めた全体設計への配慮の重要性

Hackerたちの意見

あなたの虹に茶色が入ってるのが嬉しいな。

オレンジ色のやつね。

[作者] 虹のボタンをダブルタップすると、自分のグラデーションをデザインできるから、好きなだけ茶色の色合いを使ってね :-)

私は他の人とは全然違う育て方をしてるけど、これだけは本当に共感する:

  • テキストは実際には多くのユーザーにとってガイドになってないよね。読めないから。子供たちはどうやって読むことを学ぶの?
  • テキストは貴重なスペースを取っちゃって、もっといいグラフィックや美しい空白を使えるのに。だけど、やっぱり子供たちにどうやって読むことを教えるの?
  • テキストは視覚的に魅力がなくて、ほとんどの子供には嫌われちゃう。ナンセンスだよ。テキストが子供にとって視覚的に魅力がないのは、彼らがそれに触れられないように扱ってるから。テキストは言語の視覚的な表現なんだから、もし子供たちにとって「嫌なもの」なら、あなたがゴールラインでつまずいてるってこと。子供たちのために、神経可塑性を無駄にするのはやめて。1年生になる頃には、先生たちはあなたが家庭でどれだけ書かれた言語を促進してるか知ってるよ。4年生になる頃には、もう手遅れだよ。

アートアプリで読むことを学ぶ必要はないのかもね?

アプリが実際にテキストを使ってるのに気づいたよ。例えば、ツールを選ぶとその機能を簡単に説明してるみたい。これって明らかに間違ってるわけじゃないよね? 読めないことが障害になると、読めない子供たちは使わなくなるよ。読書が体験を向上させるだけなら、読むことを学ぶモチベーションが生まれるんじゃない? 私は子供の心理学者でも親でもないから、何がベストかは分からないけど、これが正しいバランスだと思う。

私は9歳の時に英語でディアブロ1をクリアしたけど、英語の単語一つも理解できなかったよ。子供たちは、何かモチベーションがあれば、全てを理解できなくても耐えられることが多いんだ。今回はかっこいい骸骨や冒険がそのモチベーションだった。

子供はある年齢になるまで、読む準備ができてないんだよね。読めるようになっても、たくさんの訓練が必要だし。7歳の子が上手に読めるとは限らないよ。たとえその年齢では一番でも、実際はまだまだ下手なんだから。簡単な概念をすぐに使いたいなら、テキストよりも良いグラフィックの方が早いよ。複雑な概念になるとテキストの方が良いけど、大多数のUIでは、良いグラフィックの方が優れた読者でもテキストよりもいい。多くの大人もあまり読書が得意じゃないしね。言語についてもあまり仮定しない方がいいよ。非テキストベースの少しの努力で、高い翻訳費用をかけずにアプリが作れるから。もちろん、読み方を学ぶアプリはテキストを提供する必要があるけど、大抵のアプリではテキストはUXデザインに十分な時間をかけてないっていうサインだと思う。

子供に文脈の中でテキストを見せるのは、単語を認識するのに結構良い方法だと思う。少なくとも私の経験ではね。うちの子は短い単語はなんとか読めるけど、長い単語は文脈の中で認識する感じ。でも、大人の話をしてるなら、この記事には同意するよ。前にウェブショップで働いてたけど、結構な割合のお客さんが読めなかったり、読まなかったりしたんだ。確かに、何人かは本当にディスレクシアで、テキストが多いとサイトを使うのに苦労してたけど、それを除いても、テキストを無視して綺麗な絵や値段だけを見る人がたくさんいたよ。ディスレクシアの人向けに特定のサイトをデザインした方がいいかもしれないし、読まない馬鹿にテキストガイドを提供しようとする必要もないと思う。私たちはサブスクリプションサービスで苦情を受けて、(確かにそれはバカげてたけど、誰かを騙そうとしたわけじゃない)その件は、購入フローにサブスクリプションって書いてあって、値段も少なくとも9回は言及してからクレジットカード情報を求めてたことを示したら、取り下げられたよ。お客さんの中には、安い値段がサブスクリプションサービスに結びついてるのを見逃した人もいたみたい。この記事は正しいけど、子供だけに当てはまるわけじゃないよ。「テキストは実際には、あなたのユーザーベースの大部分にガイダンスを提供していない。彼らは読めない(読まない)から。」

  • テキストは実際には多くのユーザーにガイダンスを提供していない。彼らが読めないからね。たとえ読めても、無視されることが多い。うちのヘルプデスクには、毎週「助けて!Outlookが動かない!」っていうチケットが来るけど、ただパスワードを聞いているポップアップなだけなんだよね。

ここで作者です。すべてのアプリが子供たちに読み書きを教えることに焦点を当てる必要はないと思う。3歳の子がアプリを使っているとき、アイコンに文字を入れるのは意味がなかったし、視覚的にもっとコミュニケーションを取る努力が必要だってサインだった。年齢が上がった子供たちはもっとテキストを扱えるけど、アプリはそれなしでも主要な機能を達成できるし、シンプルさには美しさがあるよ。もちろん、毎日子供たちと一緒に本を読んでいるし、今では二人とも現実の本をたくさん読むようになった。君も同じようにしてほしいな。Kidz Fun Artには、子供たちが手書きや数学の問題解決を練習できる機能も入れたよ。ただ、すべてのアプリがすべての子供のニーズ(この場合は読み書き)を解決しようとすると、みんなにとって魅力のない、ゴチャゴチャしたインターフェースになっちゃう。軽やかさを加えて、必要ないものは取り除こう。

私には大人向けの現代的なUIに見えるな…

これらの原則は全ての年齢に良いよね。障害を持つユーザー向けにデザインすることが、一般的にみんなにとっても良いのと似てる(Good Gripsを見てみて)。

一般的にはそうだけど、時には違うこともあるよ。例えば、地元の保育園では火災警報器を幼児の高さに設置する必要があるんだ。

それはそうだね、みんな人間だし。

突然、子供のためにおもちゃを作るお父さんの楽しい記事が、タバコ業界の内部メモみたいに読めるようになったね。「子供を画面に夢中にさせる方法、現実の物体と触れ合うべきなのに。」

現代のデザインって、みんなを子供扱いしてる感じがする。UIはすごく余白があって、大きなフォント、アイコンは常にテキストと一緒だし、企業のブランディングは強いコントラストの色を使ってることが多い。音楽みたいな隣接するものも、表面的にはシンプルになってるし。もし今の大人向けの本をデザインしたら、子供向けの本みたいになるんじゃないかな。一ページに大きなフォントの文と一枚の画像みたいな。悪くはないかもしれないけど、すべてが与えられると、私たちの規律が失われて、認知能力が低下するんじゃないかって心配してる。

いや、特定の状況でスキューモーフィズムが良かった理由を理解してる人が書いたみたいだね、これがその一つだって。

これはいいネガティブな解釈だね、教えてくれてありがとう。バランスを取るために、ニュートラルな解釈としては、アプリが物理的なものよりも良いか悪いかってこともある。ポジティブな解釈としては、ペイントアプリが子供たちに安全に、しかも無料で自己表現をさせるってことだね。

ここで作者です。これはちょっと皮肉な見方だと思う。もし自分が何かを作って、それが子供たちを笑顔にするなら、そのままアプリに残すべきだと思ってる。君は違う見解のようだね。子供たちが使う道具を楽しませる努力をしないべきなの?代わりに何をするの?アプリを敵対的で使いにくくして、外に出るようにさせるの?正直、君が言いたいことがよくわからない。

なんでこれがトップコメントなの?作者の目的は、自分の子供のためにアプリを楽しく使えるようにすることだよ。彼らがリアルな物体のように感じさせようとしているコメントを、大手タバコ会社のようにユーザーを引き込もうとしていると解釈したの?全くのナンセンスだね。

それには同意できないな。あれは子供が好きなことや見たいことにデザインを集中させるっていう雰囲気だと思った。広告なしの話からもそれは明らかだったし。

https://www.jonathansapps.com/ 最近誰かがこれを勧めてたけど、最初に思いついたのは、子供にはできるだけ画面を見せない方がいいっていうアドバイスだね。

俺にとって、すべてのタッチスクリーンが基本的に「子供向け」のインターフェースであることを強調していると思う。これは必ずしも悪いことではないけど、複雑さ(そして、言っちゃえば、役立ちさ)には限界があるかもね。複雑なことができるならそれはいいけど(例えば、人と話すために番号をダイヤルすること)、もしそれがすごく繰り返しになるなら、画面は必要ないかも(車ではこれ少なめでお願い)。

これは素晴らしいアドバイスだね。主に大人向けのアプリも、少なくともこのアドバイスの多くを考慮すれば良くなると思うよ。

子供向けのアプリって、実際の子供でちゃんとテストしてないのが多い気がする。例えば、 - マルチタッチがないか、悪い。子供はデバイスを持ってるときに画面に触れるし、もう一方の手でアクションをすることがある。マルチタッチがないと、最初のタッチアクションが認識されず、後のアクションが反応しなくて、子供がすごくイライラするんだよね。それに、小さい手だと複数の指が画面に触れやすいし、特に人差し指を使ってると親指が触れちゃう。 - 端に近いコントロール:多くのデバイスでは、端に近いところでスワイプすると、電話のステータスメニューが出たり、アプリが切り替わったりすることがある。これ、子供を混乱させるよね。

端に近いコントロール:多くのデバイスでは、端に近いところでスワイプすると、電話のステータスメニューが出たり、アプリが切り替わったりすることがある。これ、子供を混乱させる。大人でも時々イライラするよ!関連する問題は、現代の多くのデバイスで、最初のポイント(誤ってのマルチタッチや、画面の端からデバイスの端までの隙間が少ないために起こる誤タッチ)がどれだけ簡単に発生するかってことだね。

子供の頃、「ディズニーのマジックアーティストスタジオ」が大好きだった!キャンバスにクリームをスプレーしたり、虫や目玉を加えたりできたんだよね!!!

これでは、絵の具が入った風船を落とすこともできるよ、しかも虹色の絵の具でね :-)