【HTML＆CSS〜】ゲーム感覚にプログラミング学習できるアプリ「Progate」がオススメ！
どうも！オークニです！
みなさん、さっそくですが今話題のプログラミング学習アプリ「Progate」ってご存知ですか？！
2018年1月25日にリリースされたホヤホヤの新作アプリなんですが、その出来の素晴らしさからさっそくApp Store「教育カテゴリ」にて1位に躍り出るなど、ちょっとこれは要チェックなアプリですよ！！
Progateアプリ、リリースから12時間で教育カテゴリでランキング1位！！キーボードなどの学習体験にこだわりきったので、ありがたいレビューをいただけてうれしいです。みなさんありがとうございます😭😭😭まだの人はぜひ！ pic.twitter.com/EW1zRqJInq
— むらい（Progate） (@wyvernMurai) 2018年1月25日
プログラミングといっても、HTMLやCSSからガッツリ学べるようになっているので、ガチの初心者さんでも心配ご無用！
今回は、そんな「Progate」を実際にキャプチャーを撮りながらご紹介していこうと思います！
Progateとは？
そもそもProgateとは、HTML＆CSSからはじまり、JavaScript、jQuery、PHP、Ruby、Python、Swiftなどなど、全14コース66レッスンもの学習ができる初心者向けオンライン学習サービスです。
元々このサービス自体は2014年から公開されており、その時点から「イラスト中心のスライドがわかりやすい！」「実際に自分の手を動かして、プレビューを見ながら学習できる！」と注目されていました。
とにかく初心者がいかに分かりやすく学習できるか？というところを徹底的に追求したサービスが素晴らしい！
アプリ版Progate
そんなProgateが、満を持してリリースしたのが今回のアプリ。残念ながら現時点ではまだiOSアプリのみで、3月以降にAndroid版もリリース予定だそうです！
まず、目を疑うのがその評価。星4.9！これはヤバい。一瞬サクラを疑ったが、実際の具体的なレビュー、そして実際に僕も触ってみて、星4.9がまんざらでもないと、確信した。
まずインストールすると表示される画面
可愛いやんけ。。。
「さあ、プログラミングを始めよう。」
「はい、始めます。」
思わず二つ返事でTwitterで新規登録を押している自分がいた。みんなは、一応念のために利用規約等は初めに確認しておくことをオススメするｗ
インストール後のウェルカム画面
いや、可愛いすぎるやろｗｗｗ
めちゃめちゃポップですやん。一般的に、プログラミングなんてゆうと、真っ黒な画面！数字！英語！文字だらけ！みたいな印象を持たれがちだが…
これはすごい。完全に初心者が取っ組みやすいように振り切っているｗ
カラフル、キャラクター、おまけに丸フォント、完全装備だ。逆にいい歳したおっさんには恥ずかしいレベルだ。
学ぶ言語を選択
進めると、さっそく学ぶ言語を選択する画面になる。ここで注目して頂きたい。ご覧の通り、現時点ではなんと「HTML＆CSS」しか！学べない。
今後のアップデートで随時その他の言語も開放されていくが、とにかく現時点では、本当にウルトラ初心者、プログラミングって何ですか？レベルの人間がターゲットとなっている。
ブロガーでちょっとしたカスタマイズくらい自分で何とかやりたいぜ！って人にはうってつけだ！
まずはスライドイラストで説明
さて、実際に「HTML＆CSS」を学ぼうとすると、まず初めにこのようにスライドのイラストで説明が開始される。
そしてこれが実に分かりやすい！このスライドイラストはこのサービスの特徴でもあり、これが初心者でも取っ付き易い大きな特徴となっている。
仮にHTML＆CSSなんて余裕だぜ！ってゆー人でも、改めておさらいとしてでも見ることをオススメする。
演習開始
さあ、イラストで説明を学んだ諸君、実際にコーディングの時がきた。実際のコーディング作業は演習形式となっており、毎度毎度この誰だか名前も知らない羊のキャラクターが事前にガイドしてくれるぞ！
ここで、きちんとこの羊の説明を聞いておくように！ｗ
と言っても、この羊のガイドは後からいつでも呼び出せることができる。
実際のコーディング画面
おおおおお。なんだこの画面は。
とても素晴らしいではないか。
まず、何よりもProgateの特徴がこの右下の独自キーボードだ。これ、めっちゃ凄くないですか？一切無駄なキーは配置せず、そのくせ空欄の中にどの順番で入力すべきか考える余地がある。
これこそ、初心者が０から学ぶために考え抜かれた設計ですな。右画面で入力したh1とかが、リアルタイムに左画面のプレビューへ反映されます。
ちなみにCSSの場合だとこんな感じ
左画面下の羊アイコンやイラストアイコン。これらをタップすると、冒頭のスライドイラスト説明や、演習前の羊のガイドが改めて確認できます。忘れたりわからなくなったらいつでも確認しよう！
いやー、とにかくUIが素晴らしいですね！
実際に演習をクリアすると…
なんかレベル上がったｗｗｗ
そうです、実際に演習をいクリアしていくと経験値がもらえ、それが溜まっていくと自分のレベルがアップしていく仕様です。
まさにゲーム感覚！
こーなると気になるのが、自身のレベルがアップするにつれて何か演出なり特典なりがあるのか？ということですｗ
現状僕はまだレベル5くらいで何も確認できていないのですが…気になる方はレベル上げまくってくださいｗ
Progateに対する唯一の不満
いかがだったでしょうか。まるでProgateからの企業案件かの如く、ここまでProgateを褒めまくって書いてきましたが…そんな私がProgateに対して唯一不満があるというのです。
それが。。。
横持ちです。
いやー…なんとかここは縦持ちのUIにしてもらいたかった。いや、出来れば縦と横のレスポンシブみたいな。
いかんせん、横持ちの場合どうしても、はたから見るとガチ系のゲームでもしているのかと思われる。
単純に眺めてるだけじゃないです。それだったら、なにかYouTubeなりHuluなり動画を見ているかと思われます。
しかしこのProgateは、確実に自分の指での操作を必要とします。スマホを横に持って、何やらポチポチ画面操作してる…いや、ゲームしてるやん！
って思われかねないｗ
いやいやいや、それがこのProgateの「ゲーム感覚で学べる！」ってゆー最大の魅力なんだが、それがリアルにゲームしてると思われるのはちょっと…みたいなｗ
家でゆっくりくつろいでやるには横持ちで最適だと思います！なんなら、iPadアプリ出してくれ！って感じですｗ
ただ、Progateとはあくまで初心者がカジュアルにプログラミングへのハードルを低く学ぶアプリです。
てことは、外でやるシーンも多かろう。電車内や仕事の休憩時間、はたまたカフェでお茶でも飲みながら。今までそんな片手間のシーンでプログラミングを学ぶなんてちょっと…って人でも、Progateならいかなる時でも手軽に学べるメリットがあります。
そう横持ちならね。
まとめ
最後の横持ちスタイルに関してだいぶ力んじゃいましたが、それを差っ引いても余りあるくらい素晴らしいアプリであることは間違いないです。
まだリリースされたばかりということもあり、コンテンツや仕様が完璧ではないところもありますが、運営さんの今後の鬼のアップデートが楽しみですね！😂
果たして、縦持ちバージョンのUIも作ってくれるのかどーか。。。
HTMLやCSSを学びたいって初心者さんにはもってこいのアプリ、Progateのご紹介でしたー！
