Think! Think!

パズルを使って「思考力」を育てる教材アプリ 代表のとりいはデザイナーとして、パズルデザイナーから上がってきた原案をもとに子どもが直感的にルールを理解できるようデザインを考えていました。

think thinkの画像
  • 協力期間:2015年4月 ~ 2017年11月(代表鳥居による、株式会社花まるラボ所属時の仕事)

  • 担当:Adobe Illustratorを使用したパズルやキャラクターのデザイン

株式会社花まるラボにて、小学生向け教材アプリThink! Think!のパズルの見た目のデザインを担当しました。

Think! Think! はある特定の教科の対策をするのではなく、自分で考えることを楽しむための「思考力」を育てるためのものとして設計されています。

  • 立体問題から迷路までバリエーション豊かなパズル

  • 3分という時間制限中で正答数に応じたハイスコアを競う

  • 正答率に応じた難易度の自動調整

などが売りとなっています。

とりいはパズルデザイナーから上がってきた原案をもとに、子どもたちが直感的にルールを理解できるよう、デザインを当て、プログラマーの方に動きの実装をお願いしていました。
具体的にはキャラクターを用意したり、ボタンのデザインや配置を考えていました。

子どもたちは文字を覚えたばかりで、説明文が書いてあってもまず読まないものとして考えます。
そのため、ちゃんと問題を解いてもらうには、画面を見た瞬間に何をすればよいのか分かる必要があります。
だからこそ、最初の1問の見た目がかなり重要になってきます。

花まるラボでは子ども向けの授業を持っていたため、作ったばかりのパズルをユーザー(子ども)にすぐに触ってもらって、その様子を観察しつつ改善を繰り返すことができました。

原案の再現と実際のデザインの例は以下の通りです。

ラッキーバルーン

think thinkの画像
think thinkのgif

※とりいは風船や矢の絵を用意しました。矢の動きや風船が割れる小気味よいアニメーションをつけたのは花まるラボのプログラミングチームの方々です。

要件:
真っ直ぐ飛ぶ矢と風船が配置されていて、割れずに生き残る風船を選ぶ。

考えたこと:
選んだ風船が丸で囲われるだけでも良かったのだけど、
回答者は選択した風船が生き残るかどうかに興味が移るので、
タップした瞬間顔がでてきてキャラっぽくすることで親しみやすさを演出。

ただ割れたときにショッキングな感じになると良くないので、間違えても笑える感じになることが重要。
風船にはオーバーリアクションしてもらいました。

子どもたちはそれを見て顔真似するほど喜んでいました。

ひとふででんきゅう

think thinkの画像
think thinkのgif

※ひとふででんきゅうはThink! Think!の数あるコンテンツの中でもかなり人気のパズルです。
花まるラボのプログラミングチームの方々が、直観的な操作UIを実装してくれました。

要件:
すべてのマスを一筆書きで踏んでいくパズル

考えたこと:
このパズルには不正解がないため、 (一筆で通れなければ戻れるようにプログラムされていました) 正解したときのめでたい感じをいかに演出するかが重要でした。 
各マスのアイテムを全部拾う方式にするか何かを繋ぐ方式にするか迷ったけれど、 後戻りできそうという点を優先して繋ぐ方式に。 
電球を線で繋いで全部繋ぐことができるとぱっと光るという設定になりました。
また、斜めに通れなさを表現するため、各マスの端にさりげなく壁を置いてあります。

レーザービーム

think thinkの画像
think thinkのgif

※とりいは画面の画像素材のみを制作し、実際のアプリ上の動きは花まるラボのプログラミングチームの方が実装してくれました。

要件:
壁を回して、まっすぐ飛ぶ何かを反射させてゴールに当てる

考えたこと:
原案はサッカーと壁だったのですが、ボールはそんなにまっすぐ飛んでくれないので、 ここは光でいこうと考えレーザー実験のイメージでデザインを作りました。
光を目立たせるためには画面を暗くする必要がありましたが、 そのせいで怖い感じにならないよう、キラキラ感に気を遣いました。
床パネルには中点をつけて、軌跡をイメージしやすいようにしています。
鏡の壁は、固定されていて回すことしかできない印象を与えるため、 軸と歯車のイメージを利用しています

Think! Think! 公式サイトはこちら