50歳のお母さんもプログラミングできた!『Progate』が目指す「世界で1番やさしいUI」のウラ側

50歳のお母さんもプログラミングできた!『Progate』が目指す「世界で1番やさしいUI」のウラ側

  • careerhack
  • 更新日:2018/02/14
No image

史上最もやさしい「プログラミング学習アプリ」が誕生!|Progate

「わたし自身もプログラミングの学習をはじめる前は『プログラミングは難しくて怖いもの』だという印象があったんです」

こう語ってくれたのが、株式会社Progateの神田美智(27)さん。プログラミング学習アプリ『Progate』のデザイナーを務める彼女にお話を伺った。これまでMacやPCで学ぶことが当たり前だったプログラミングが、スマホで学べちゃうと話題に。どんな風に考えて作られたのか?どんな試行錯誤があったのか?

そこにあったのは「どれだけユーザーにやさしくなれるか」という奮闘。ボツ案を含めて解説してもらった。

「Progate」WEB版ではすでに世界中の25万人がプログラミングを学んでいる。今回リリースされたのは同サービスのiOS版。WEB版の学習サービスはたくさんあり、オンラインで学習するのは当たり前になった。スマホだけでプログラミングを学べるというのは革新的だ。

ボツ案と比較。キャラクターを前面に押し出すワケ

Progateのアプリ版では、キャラクターを全面におしだすデザインをしている。…一体なぜだろう?

「プログラミングは難しい、自分には向いていない…などネガティブな印象を持っている方がまだまだ大多数。キャラを登場させることで、プログラミングに親しみやすさを感じてもらえるのではないかと考えていました」

また、アプリの世界観を決めるときには意外なアプリをベンチマークしたとか。

「アプリ化プロジェクトの開始初期は、チーム内で理想のアプリのイメージをしっかりすりあわせていました。 じつは大ヒットスマホゲーム「ツムツム」の世界観をベンチマークしていました。あのキャラクターによって形づくられる世界観をProgateでも実現したい。それくらい『ツムツム』の没入感はすごいですよね」

同時に、キャラクターを出すだけで熱中できる世界観を作るには不十分だという。

「なぜならキャラクターはあくまでもバックボーンであるストーリーを伝えるための道具の一つなので、キャラクターをうまく駆使して世界へ没入しやすくするか、これが熱中できる世界観を作る土台ではないかと思います」

それではさっそく、実際に「ボツ案」「キャラクターを押し出しているデザイン」を比較してみよう。

アプリ起動時に開く「スプラッシュ画面」

【ボツ案】最低限必要なデザイン

No image

【採用案】キャラクターを押し出したポップなデザイン

No image

「レベルアップ画面」

Progateには「ページクリア」「レベルアップ」「レッスン修了」という3つの達成概念がある。

「これはページクリア時にだすモーダルなのですが、当初はこのモーダルにクリアしたページを表示させ、レベルアップしたときに、『LEVEL UP!』と小さく表示していました」

No image

「しかし、このバージョンだと、達成感が感じられない。ユーザーさんが何かをやり遂げたときは、できるだけ褒めて達成感を味わって欲しい、という考えから、達成感の低いこのバージョンはボツになりました」

採用案では、レベルアップと、レッスン修了がそれぞれ別の画面で表示され、「ページクリア」「レベルアップ」「レッスン修了」それぞれの段階で褒める設計になっている。

No image

ページクリア画面

No image

レベルアップ画面

No image

レッスン修了画面

詰め込みすぎに要注意。エッセンスだけに集中すべし

続いて、専用のキーボードについて。PCで利用する場合はキーボードがあるが、スマホでキーボードで入力すると画面の半分をキーボードで占領してしまう。そこはどう解決したのだろう。

「PCで実現されている本格的な学習体験を小さなスマホの画面でも再現する。載せる情報の取捨選択やコンポーネントの配置は試行錯誤しました。アプリチームには、どうやったらもっと楽しくなるか、わかりやすくなるかなど理想の体験を作ることに人一倍のこだわりを持ってコミットする人が集まっています。納得できるまではとことん追求する姿勢でやっているんです」

「絶対にいれたい」という機能を決め、その上でいくつかパターンをつくってみて最適解をみつけていくのだという。

1,エディタ画面(プロトタイプ、バージョン1)

「プロトタイプの段階で専用のキーボードを使用することは決めていました。学習内容に関係ないものまでQWERTYキーボードで一文字ずつ入力させるのはナンセンス。

『エッセンスだけに集中する』という考えのもと、あれこれ詰め込みすぎず、そのときに必要な部分だけをわかりやすく見せることにこだわりました。

また、スマートフォンユーザーはタップ操作に慣れている点、片手で操作することが多い点、そして移動中で操作する可能性が高い点、この3点のコンテキストの中でアプリを触ることが想定されていたので、入力の負担を極力減らすことが大切だと考えていました」

No image

Progateアプリのプロトタイプ。CTOの村井さんが作成した。これをベースにデザイナーの神田さんを中心に改善されていった。

2,エディタ画面(バージョン2)

この段階ではWEB版と同じように、設問は画面の左に配置されていた。

No image

エディタ画面(バージョン2)

No image

プレビューに切り替えたとき

「プレビューが同じ画面上に表示されていないため、リアルタイムでエディタ画面に入力したコードが反映される様子が確認できない状態です。WEB版のユーザー体験からリアルタイムで確認できた方がコードを直感的に理解しやすくなることはわかっていましたし、プログラミングに初めて触れるユーザーにとって、大きな感動ポイントになるはず。なので、エディタとプレビューを同じ画面上に表示しようと、方針を決めました」

3,エディタ画面(バージョン3)

バージョン2の問題点は、「リアルタイムでプレビューを確認できない」ということだった。そこでバージョン3では、画面切り替え操作に関連する導線は左下にボタンを収束させ、スライド以外はエディタと同時に閲覧できるよう改善された。

No image

エディタ画面(バージョン3)

No image

エディタ画面(バージョン3)

ところがバージョン3でも新たな課題が浮き上がってきた。

「①設問が無機質に表示されているだけなので、演習を解くことに作業感が生まれて面白くない。②プレビューとエディタを同時表示したとき、設問が確認できないために、行き詰まってしまう。という、2つの問題がありました。」

その課題を次のように解消していった。

「①ひつじ仙人というキャラクターに設問を説明させることで作業感を無くす、②設問/プレビュー/エディタが一画面内で共存できるように組み直しました」

4,エディタ画面(最終バージョン)

そしてついに、エディタ画面が完成した。

「ボタンの配置など演習画面の設計が固まったあとは、さらに入力しやすくするために、キーボードのキーの大きさやキーの間の間隔など、細かい調整をしていました」

No image

完成版のエディタ画面

「プログラミングへの入り口」をつくる

「Progate」アプリがユニークなのは、とにかく「やさしい」世界観。だれもが簡単にプログラミングをはじめられるよう工夫がなされている。

「プログラミングに対する社会のイメージは、『理系でないとできない』『一部の優秀な人にしか向いていない』など偏っていて、まだまだ取っ付きにくい分野。プログラミングに対する固定概念を壊していくためにも、プログラミングの『楽しさ』を伝えることがデザイナーである私のミッションです。楽しさの演出はNice-to-haveじゃなくてMust-haveでした」

神田さんをはじめとする開発メンバーの「プログラミングを楽しく学んでほしい」という想いがアプリに詰め込まれている。

Progateのアプリはリリースされたばかり、今後はどのように展開していくのか。

「当面はユーザーさんからの要望が高い、「レッスンの増強」と「Android版」の開発を進めていきます。機能面では、学習の進捗を確認できるようにしたり、ランキング機能を追加して、日々の学習のモチベーションを高める施策も検討しています。

また、水面下で並行してアプリの国際化も進めていて、2018年夏頃には海外展開を開始予定です。世界中にいるプログラミング初心者のために「プログラミングへの入り口」をつくる。今後も徹底的にプログラミング学習のハードルを下げることに取り組んでいきます」

※Android版アプリは2018年3月リリース予定

No image

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。

アプリカテゴリの人気記事

グノシーで話題の記事を読もう!
総合アプリ「マネックス証券アプリ」の提供を開始
Apple、App Storeに掲載できるスクリーンショット数を倍増
スマホアプリで参加! クイズ全問正解で100万円山分けがスゴイ
QRコードはiPhoneのカメラを使わなくても読み取りできるの知ってました?
【今日の無料アプリ】600円→無料♪厳選した英単語を収録した英単語学習アプリ「単語ツリー」他、2本を紹介!
  • このエントリーをはてなブックマークに追加