スマートフォン、タブレットで子供向けアプリを作るときのUIデザインにおける気配りをまとめました。

1. 子供向けアプリを作るときに
気にしていること
YOSHIYUKI HIGO
2018.06

2. 迷わないか
1

3. やってほしいことへ導く工夫
まずはプレイしてほしいから
スタートボタンだけ
ボタンだけだと楽しそうに見
えないためタイトルロゴなど
で賑やかしたいが、ロゴが読
めない年齢の子供も対象なの
で、代わりにネコで中央のボ
タンを囲って賑やかしとボタ
ンの強調の両方を実現。
ネコはタップすると逃げるの
で最後はボタンのみが画面に
残り必然的にプレイに進む。
また、試した人にネコをタッ
プするというルールを伝えて
いる。

4. 進捗に応じてやれることを増やす
コレクションが増えた
最高得点が記録された

5. わかるか
2

6. 文字や記号がわからない
OKがわからない 矢印がわからない
矢印でナビゲートしても…
OK

7. ナビゲートするときの気配り
アウトラインの強さやサイズの大小で強弱をつける
拡大縮小や上下移動などのアニメーションをつける

8. 重なりがわからない
背景
ポップアップ
画面を平面にとらえて
いるのでレイヤー構造
が理解できない。
透過していると情報が
重なって混乱する。

9. ポップアップを出すときの気配り
全画面 背景
ポップアップ
全画面にして他の情報を
隠すことで混乱をふせぐ
位置や操作にあったズームやフェードなどの
アニメーションをつけて相関性をわからせる

10. 疲れないか
3

11. 情報量は適切か
白背景の情報を仮にゼロと
すると、背景に色がついた
瞬間に「色」という情報が
加わったことになる。

12. 文字だけでなく色や線も情報と考える
テキスト テキスト テキスト テキスト
同じことを伝えるだけでも情報量がちがう

13. 断捨離して強弱をつける
すごく見せたいこと
見せたい2 見せたい3
タイトル
そこそこ見せたいこと
すごく見せたいこと
見せたい2 見せたい3
本当に必要なものはなにか
同時に見せる必要があるか
情報が多いと難しくて疲れる 情報が少ないと簡単で疲れない

14. 動かすべきか
4

15. 動かしすぎると
なにもかも動いていると気が散って
なにをすればよいかわからなくなる
A
B
C

16. まったく動かさないと
動きをなくすとおちついて使えるが画面が
死んでしまうと子供が興味を示さなくなる
A
B
C

17. 死んだ画面にしない工夫
おしてほしいボタンを
アニメーションで登場
させて注目させる
ボタンの停止後にねずみを
画面の隅から登場させて、
画面に興味を向ける。
ねずみはタップすると逃げ
たりする。子供のアクショ
ンに対してリアクションを
さぼらない。

18. ゲームでよく見る死んだ画面にしない小技
背景をスクロール
スコア
12,345
エフェクトをループUIのアニメーション
スコア
12,345
※ゲーム以外に適用しづらいが、キャラクターのまばたき、呼吸、髪揺れなどもよく見られる

19. 速さと動き
5

20. 速度による印象
速いとキビキビと使えるが目まぐるしくあわてさせる
遅いとおちついた印象になるが慣れるとまどろっこしい

21. イージングを使い分ける
Elastic、Bounce、Backはポップで元気なモーションになる
LinearやQuadraticはシンプルでクセのないモーションになる

22. 見た目
6

23. 内容をふまえた見た目
ツール系の難しさをアウトラインのない
やわらかいアートとシンプルなUIで軽減
学ばせたい実写のお金にラフな
アートを加えて手に取りやすく

24. 対象にあわせた見た目
お母さん（大人の女性）がかわいいと
感じるキュートな絵に木目調で上品に
子供がプレイするのでアウトラインを
強くしてポップでキラキラで賑やかに

25. 機能をふまえた見た目
ゲームプレイに直接関係するフルーツと
バスケットはアウトラインをつけている
皮が赤く中身が黄色いリンゴで
時間の経過量と残量が一目瞭然

26. 子供に使ってもらう気持ちで作れば
だれでも楽しく使えるものができる
終