最新情報をお届けします！
プログラミング学習アプリ『Progate』が1月24日リリース。プログラミングをゲームのように学べるUIが話題に。デザイナー神田美智さんは「メンバーの母は50歳で、このアプリで勉強していて（笑）。誰もが楽しんでプログラミングが学んでもらえるはず」と語る。学習障壁を下げる「やさしさ」のUI演出とは？
「わたし自身もプログラミングの学習をはじめる前は『プログラミングは難しくて怖いもの』だという印象があったんです」
こう語ってくれたのが、株式会社Progateの神田美智（27）さん。プログラミング学習アプリ『Progate』のデザイナーを務める彼女にお話を伺った。これまでMacやPCで学ぶことが当たり前だったプログラミングが、スマホで学べちゃうと話題に。どんな風に考えて作られたのか？どんな試行錯誤があったのか？
そこにあったのは「どれだけユーザーにやさしくなれるか」という奮闘。ボツ案を含めて解説してもらった。
「Progate」WEB版ではすでに世界中の25万人がプログラミングを学んでいる。今回リリースされたのは同サービスのiOS版。WEB版の学習サービスはたくさんあり、オンラインで学習するのは当たり前になった。スマホだけでプログラミングを学べるというのは革新的だ。
Progateのアプリ版では、キャラクターを全面におしだすデザインをしている。…一体なぜだろう？
「プログラミングは難しい、自分には向いていない…などネガティブな印象を持っている方がまだまだ大多数。キャラを登場させることで、プログラミングに親しみやすさを感じてもらえるのではないかと考えていました」
また、アプリの世界観を決めるときには意外なアプリをベンチマークしたとか。
「アプリ化プロジェクトの開始初期は、チーム内で理想のアプリのイメージをしっかりすりあわせていました。 じつは大ヒットスマホゲーム「ツムツム」の世界観をベンチマークしていました。あのキャラクターによって形づくられる世界観をProgateでも実現したい。それくらい『ツムツム』の没入感はすごいですよね」
同時に、キャラクターを出すだけで熱中できる世界観を作るには不十分だという。
「なぜならキャラクターはあくまでもバックボーンであるストーリーを伝えるための道具の一つなので、キャラクターをうまく駆使して世界へ没入しやすくするか、これが熱中できる世界観を作る土台ではないかと思います」
それではさっそく、実際に「ボツ案」「キャラクターを押し出しているデザイン」を比較してみよう。
アプリ起動時に開く「スプラッシュ画面」
【ボツ案】最低限必要なデザイン
【採用案】キャラクターを押し出したポップなデザイン
「レベルアップ画面」
Progateには「ページクリア」「レベルアップ」「レッスン修了」という3つの達成概念がある。
「これはページクリア時にだすモーダルなのですが、当初はこのモーダルにクリアしたページを表示させ、レベルアップしたときに、『LEVEL UP!』と小さく表示していました」
「しかし、このバージョンだと、達成感が感じられない。ユーザーさんが何かをやり遂げたときは、できるだけ褒めて達成感を味わって欲しい、という考えから、達成感の低いこのバージョンはボツになりました」
採用案では、レベルアップと、レッスン修了がそれぞれ別の画面で表示され、「ページクリア」「レベルアップ」「レッスン修了」それぞれの段階で褒める設計になっている。
ページクリア画面
レベルアップ画面
レッスン修了画面
続いて、専用のキーボードについて。PCで利用する場合はキーボードがあるが、スマホでキーボードで入力すると画面の半分をキーボードで占領してしまう。そこはどう解決したのだろう。
「PCで実現されている本格的な学習体験を小さなスマホの画面でも再現する。載せる情報の取捨選択やコンポーネントの配置は試行錯誤しました。アプリチームには、どうやったらもっと楽しくなるか、わかりやすくなるかなど理想の体験を作ることに人一倍のこだわりを持ってコミットする人が集まっています。納得できるまではとことん追求する姿勢でやっているんです」
「絶対にいれたい」という機能を決め、その上でいくつかパターンをつくってみて最適解をみつけていくのだという。
1，エディタ画面（プロトタイプ、バージョン1）
「プロトタイプの段階で専用のキーボードを使用することは決めていました。学習内容に関係ないものまでQWERTYキーボードで一文字ずつ入力させるのはナンセンス。
『エッセンスだけに集中する』という考えのもと、あれこれ詰め込みすぎず、そのときに必要な部分だけをわかりやすく見せることにこだわりました。
また、スマートフォンユーザーはタップ操作に慣れている点、片手で操作することが多い点、そして移動中で操作する可能性が高い点、この3点のコンテキストの中でアプリを触ることが想定されていたので、入力の負担を極力減らすことが大切だと考えていました」
Progateアプリのプロトタイプ。CTOの村井さんが作成した。これをベースにデザイナーの神田さんを中心に改善されていった。
2，エディタ画面（バージョン2）
この段階ではWEB版と同じように、設問は画面の左に配置されていた。
エディタ画面（バージョン2）
プレビューに切り替えたとき
「プレビューが同じ画面上に表示されていないため、リアルタイムでエディタ画面に入力したコードが反映される様子が確認できない状態です。WEB版のユーザー体験からリアルタイムで確認できた方がコードを直感的に理解しやすくなることはわかっていましたし、プログラミングに初めて触れるユーザーにとって、大きな感動ポイントになるはず。なので、エディタとプレビューを同じ画面上に表示しようと、方針を決めました」
3，エディタ画面（バージョン3）
バージョン2の問題点は、「リアルタイムでプレビューを確認できない」ということだった。そこでバージョン3では、画面切り替え操作に関連する導線は左下にボタンを収束させ、スライド以外はエディタと同時に閲覧できるよう改善された。
エディタ画面（バージョン3）
エディタ画面（バージョン3）
ところがバージョン3でも新たな課題が浮き上がってきた。
「①設問が無機質に表示されているだけなので、演習を解くことに作業感が生まれて面白くない。②プレビューとエディタを同時表示したとき、設問が確認できないために、行き詰まってしまう。という、2つの問題がありました。」
その課題を次のように解消していった。
「①ひつじ仙人というキャラクターに設問を説明させることで作業感を無くす、②設問/プレビュー/エディタが一画面内で共存できるように組み直しました」
4，エディタ画面（最終バージョン）
そしてついに、エディタ画面が完成した。
「ボタンの配置など演習画面の設計が固まったあとは、さらに入力しやすくするために、キーボードのキーの大きさやキーの間の間隔など、細かい調整をしていました」
完成版のエディタ画面
「Progate」アプリがユニークなのは、とにかく「やさしい」世界観。だれもが簡単にプログラミングをはじめられるよう工夫がなされている。
「プログラミングに対する社会のイメージは、『理系でないとできない』『一部の優秀な人にしか向いていない』など偏っていて、まだまだ取っ付きにくい分野。プログラミングに対する固定概念を壊していくためにも、プログラミングの『楽しさ』を伝えることがデザイナーである私のミッションです。楽しさの演出はNice-to-haveじゃなくてMust-haveでした」
神田さんをはじめとする開発メンバーの「プログラミングを楽しく学んでほしい」という想いがアプリに詰め込まれている。
Progateのアプリはリリースされたばかり、今後はどのように展開していくのか。
「当面はユーザーさんからの要望が高い、「レッスンの増強」と「Android版」の開発を進めていきます。機能面では、学習の進捗を確認できるようにしたり、ランキング機能を追加して、日々の学習のモチベーションを高める施策も検討しています。
また、水面下で並行してアプリの国際化も進めていて、2018年夏頃には海外展開を開始予定です。世界中にいるプログラミング初心者のために「プログラミングへの入り口」をつくる。今後も徹底的にプログラミング学習のハードルを下げることに取り組んでいきます」
※Android版アプリは2018年3月リリース予定
文 ＝ 大塚康平
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
経営者たちの「現在に至るまでの困難＝ハードシングス」をテーマにした連載特集。HARD THINGS STORY（リーダーたちの迷いと決断）と題し、経営者たちが経験したさまざまな壁、困難、そして試練に迫ります。
Notionナシでは生きられない！そんなNotionを愛する人々、チームのケースをお届け。
