学習アプリを作るときのデザイン注意点。

1. コドモが学習アプリに夢中？
デザインとアニメーションの重要性

2. ゲーミフィケーションを使い、学習継続の価値を創る
ファンタムスティック株式会社
設立: 2010年2月
所在地：東京都港区六本木4-8-7
従業員：15名
ファンタムスティック株式会社について

3. 代表取締役 ベルトンシェイン
・CM・映像・ゲーム・3DCG・ウェブなどのグラフィックデザインとして活躍
・英、米、日本と 3カ国の教育を受け、息子達は日本の小中高（公立＆市立 +受験）を経験
・教育の新しい可能性を感じ教育事業をファンタムスティックで開始。
・2017年 にはapple storeで活躍したデベロッパー３名の中の一人として選ばれました。
https://itunes.apple.com/jp/story/id1324451251
ファンタムスティック株式会社について

4. 子どもたちが自ら学習を繰り返し、学びへと結びつける学習アプリサービス
直感的な操作とテンポよく問題を解答できるので、繰り返し学べるのが特徴です。
取り組み

5. 340万
ダウンロード
17億
問題解答
iOS
子ども向け
ランキング１位
(国内)
平均
15%
課金率
アクティブ
ユーザー
20万人 / 月
算数忍者AR
は107ヵ国
子供向け
1位
実績

6. コドモが夢中になる
学習アプリを作るという事

7. ・息子が幼稚園のとき、自宅で iPadを一生懸命遊ん
でた
・何をやっているのだろうと覗き込むと、足し算をして
いた
・衝撃をうけた！
・なぜなら誰も足し算を教えてないから、、、、
体験談

8. 学習におけるスマートデバイスの優位性
従来の学習道具 スマートデバイス
● 学習の前に、道具を使いこなすスキルが必要
● 場所が決まっている（テーブルが必要）
● 学習テンポが遅い(10分で3問くらい）
● フィードバックが遅い
● 直感的に幼児でも使える
● どこでもできる
● 学習テンポが早い(1分で10問)
● フィードバックが早い

9. ただ！
スマートデバイスで
使ってもらえる学習アプリを作るのは難しい
なぜか？

10. 同じ端末にエンターテインメント性の
高いアプリがいっぱい入っているから！
なぜなら

11. 学習とは関係ない人気アプリはセッション数を上げるために、
コンテンツの充実 + UI/UXに膨大な時間とお金をかけている
教科書に比べて、アプリ版は動いているし、
かわいい装飾できていれば良いという甘い考えでは成功しない！
他の学習と比較して作るだけではダメ
他
の
アプリと
比
較
して
作
ろう！

12. 他のアプリによって、 子どもたちの情報判断能力は大人と同じ
「目が肥えている」
既存の教材をただデジタル化しても使ってくれない！

13. “Ultimately, you are not competing with other kids apps but rather for their time and attention
when they use their devices... Who is Toca Boca’s biggest competitor? I’d say it is YouTube.”
https://medium.com/@bjornjeffery/the-kids-app-market-a-strategic-overview-8195617857fe
Björn Jeffery TOCABOCA創設者 元CEO
結果的に、子どもアプリは他の子どもアプリと競争しているのはなく、デバイス
の利用時間と注目の獲得を競っている。。。
Toca Bocaの最大のライバル？Youtubeだね！

14. 他社アプリである競争相手を超える
学習コンテンツを作るには
デザインとアニメーションの重要性！！

15. デザインとアニメーション = UI x UX
「デザイン」は キャラクターや世界観の事ではない。
UIの事を指している。
キャラクターや世界観が優れていてるだけの人気アプリは無い。
UIが必ず「使いやすい・分かりやすい」アプリである必要がある。
アニメーションについては UXと連動している。
ユーザー体感をどう演出するかが大事。

16. UIの設計で考える事
ユーザーの特徴 文字は読まない
画面から
情報を集める
努力をしない
画面操作
で迷ったら
思考停止する
ユーザーは高機能なスマホの登場により、
進化ではなく退化していると考えるべき！

17. ユーザーの特徴 文字は読まない
画面から
情報を集める
努力をしない
画面操作
で迷ったら
思考停止する
UIの設計で考える事
ビジュアルで
理解させる
一つの画面で
表示する
情報を限定
次の行動を
誘導できる
UIが目指すもの

18. UIの設計の例
何をするか
説明してなくても
やることが分かる
次の行動が
３択を選ぶ事のみ
なので迷わない
載せている情報は
解答するだけ
※ 国語海賊〜1年生の編〜

19. UX の設計で考える事
https://www.forrester.com/report/The+Six+Steps+For+Ju
stifying+Better+UX/-/E-RES117708
UXに1ドル投資することで、100倍のリターン
ROI 9900%!!

20. UX の設計で考える事
主にUXとは離脱を防ぐ体験を作る事だと考えています。
その体験を演出するのがテンポ（アニメーション）
画面遷移の待ち時間
ボタンを押したときの
反応速度
キャラクター演出の
スピード

21. 画面遷移の待ち時間
ボタンを押したときの
反応速度
UX の設計で考える事
画面遷移中に画面が止まっていると、フリーズしていると思い離脱する。 →
画面遷移の演出やローディングアニメーションを入れる
ユーザーは、無意識に演出の期待をしています。押したボタンが想定した期
待を下回ると離脱します。 → 期待を超える演出を入れる
キャラクター演出の
スピード
製作時に感覚で作るアニメーションのスピードは遅すぎる事が多い。 → ス
ピードを３倍位にしてちょうど良い所まで落とし込もう。

22. 学習アプリを作るとき、どうしても
既存の学習をデジタル化する発想になります。
ただ、それでは不十分で
スマートデバイスのUI/UXに対応した
デザインやアニメーション
に時間を使いましょう！
まとめ