（体験記事）ProgateでHTML&CSS初級編マスター！率直な感想は？アプリ版、Web版の違いも

Progate（プロゲート）とは？

株式会社Progate（プロゲート）が開発・運営するプログラミング学習アプリ。

初心者向けレッスンは完全無料、応用レッスンも月額980円（税別）と低価格に抑えられている。

初心者でも気軽に学べることに重きを置いており、初心者がつまずきがちな「プログラミングをするための環境構築」の工程を潔くカット。

スライドを読む → 手を動かす を繰り返し、必要な知識がサクサク学べるように設計されている。

ユーザー数は140万人（2020年5月現在）。学校にもカリキュラムを提供しており、幅広い層から支持されている。

中学時代の挫折経験

いきなり自分の話になって恐縮ですが、実は中学生のころ一度だけ「Webサイト制作（HTML）」にチャレンジしてみたことがあります。

当時は2000年代初頭。友達とノートにメモをとりつつ、Windowsの「メモ帳」を使ってカッコいいサイトを作ろうと試みたのでした。

で、結局できたのが

これだけ。
「文字を流す」動作だけ覚えて挫折してしまいました。

スマホなんてなかった時代、文字が流れるだけでも同級生にはそこそこウケました。でも、本来作りたかったはずのカッコいいサイトは作れずじまいでした。

「かじった程度の知識」でも役立った！

時は流れ、私も30歳目前です。ライター生活も定着し、プログラミングとは縁のない生活になったかと思いきや……

実は、当時の（HTMLの）知識がたまに役立っているのです。

というのも、原稿を納品する画面（入稿画面）はときどき思い通りに動かないんですね。

「なんでここに改行が挟まるねん！！」
「なんでテキスト全体が『見出し』になるねん！！」

みたいなトラブルがちょいちょいあります。

そんなとき「HTML編集モード」に切り替えるとあっさり解決することが。

「ここの＜br＞を削除するか」
「HTMLタグのゴミが残ってたのか」

なんて調子で、記事の見た目を整えられるようになりました。

専門外の職種でも、ほんの少しの知識を持っておくだけで仕事がスムーズになる。
中学生時代にちょっとでも触れておいて良かったなあと感じています。

かわいいキャラクター、とっつきやすい見た目

とはいえ、あくまでかじった程度の知識です。より難しい編集をするにはエンジニアさんやデザイナーさんに依頼するしかありません。

「自分に知識があれば、パパッと直せるんだろうな」

と思いつつ、「すみませんが……」と依頼していました。

学び直したい気持ちはあるものの、独学では中学時代と同じく挫折してしまいそう。
でもスクールはハードルが高いし、学んだからといって仕事に直結するかは未知数です。

その点、今回チャレンジするProgate（プロゲート）はWebブラウザ・アプリでサクッとチャレンジでき、基本レッスンなら無料。有料レッスンも980円/月額（税別）とリーズナブルです。

何より、公式サイトのキャラクターがとってもかわいい！
「これならできるかも」と期待が高まります。

Progateのアプリ版とWeb版の違いは？

Progate（プロゲート）にはWebブラウザ版、アプリ版（Android/iOS）があります。

初心者コースでは、両方でレッスン内容に違いはありません。自分の学びやすいスタイルを選択すれば良いでしょう。

二つとも触ってみた印象は以下の通りです。

アプリ版

メリット

• とにかく気軽
• スマホゲーム感覚
• お風呂上がりや料理中などちょっとした時間で進められる

デメリット

• 画面が狭い
• 後半、長めのコードを書くには字が小さく感じる
• スライドに戻ったり、レッスン一覧に戻ったりする操作が少し分かりにくいかも

アプリ版のメリットはなんといっても気軽さ。「料理中に5分だけ」なんて取り組み方ができるのが大きな魅力で、「始めるまでが長い」タイプの方におすすめです。

その一方で、後半になり長めのコードを書こうとするとそこそこ目を凝らす必要があり、パソコンの大きな画面が欲しくなりました。

前半で学習ペースを作り、後半はWeb版でしっかり作業……と使い分けてもいいかもしれません。

Web版

メリット

• 「これぞプログラミング」感
• 実際の作業画面に近い
• 腰を据えてやりたい方、キャリアアップ志向の方はこっちがいいかも

デメリット

• 「やるぞ！」スイッチを入れる必要がある

アプリ版では、ちっちゃな画面でキーボードを打たなくていいように必要なタグがボタンとして配置されています。

気軽な一方で「記憶に定着するか」「実際の仕事のイメージが湧くか」は人によるかもしれません。

Webブラウザ版ではしっかりとキーボードで書き進めることもできますし、面倒な場合は必要なパーツを「コピペ」できる機能もあります。

ズルじゃないの？と思われるかも知れませんが、実際の作業でもよく使うタグを「ユーザー辞書」等に登録しておくことがありますし、個人的には良い仕組みだなと感じました。

アプリで学び、Webで復習がおすすめ

ちなみに、アプリ版とWeb版で進捗状況は同期されません。（記録はされる）

「アプリ版でレッスン10まで終わったから、Web版でレッスン11からやろう」

という進め方はできませんので注意しましょう。

とはいえ、これがデメリットか？と言われれば「むしろプラスになるかも」というのが正直なところです。

プログラミング学習に限らず学んだ記憶を定着させるには復習が必須です。
私自身、すでに学んだレッスンであっても次の日には「なんだっけ……」と詰まる場面がありました。

そんなとき、まったく同じレッスンを繰り返し行うより「アプリ版で学んだことを次の日にパソコン版で復習する」ほうが新鮮味があり、モチベーションが続きやすいと感じました。

さあ、いよいよレッスン内容を詳しくご説明します。

HTML & CSSコースにチャレンジ！

Progateにはアプリ版とWebブラウザ版があるとご説明しました。私の場合、

学ぶ目的

• ライター業の周辺知識を広げたい
• エンジニア志望ではない

学ぶ時間

• お風呂上がりや寝る前、料理中
• オフの時間に学びたい

という事情からアプリ版を選びました。そちらのほうが継続できる・適していると判断したためです。

かわいらしいデザインのアプリを起動すると……

「学べる言語」がずらりと並んでいます。
Progateの扱っている言語は幅広く、この記事を執筆している時点（2020年5月20日）で以下のコースがあります。

• HTML & CSS
• JavaScript
• jQuery
• Ruby
• Ruby on Rails5
• PHP
• Java
• Python
• Command Line
• Git
• SQL
• Sass
• Go
• React
• Node.js

今回私がチャレンジするのはもちろん「HTML & CSS」コース。中学生のころ挫折したきり触れてこなかったアイツです。

今度こそカッコいいサイトを作れるようになるのでしょうか？

スモールステップでサクサク進む

「レッスンを始める」ボタンを押すと、わかりやすいスライドが表示されました。

「難しそうに見えるかもしれませんが心配しないでください」
「ここはあとで説明します」

など、ひっかかりそうなポイントを先回りして教えてくれるので安心です。

数枚のスライドを読んで概要を把握したら、いざ演習問題にトライします。演習問題のページでも”やるべきこと”を再度説明してくれます。どこまでも親切だな……

コードを入力する画面には、必要なコード（タグ）のパーツがボタンの形で配置されています。これをポチポチ押しながら正解のコードを組み立てていきます。

わけが分からなくなったら「コードをリセット」してみたり、スライドの説明に戻ってもいいでしょう。

一応「答えを見る」ボタンもあるので、どうしても自力で解けない場合は答えを見てしまうのもアリです。（「どうしても」のときだけですが）

遠い記憶があっただけに、初めの数レッスンはサクサク進めることができました。コードを書くボタンを押す作業もリズムゲームのようで楽しく進められます。

体感として、1レッスン3分〜10分弱でしょうか。集中力と記憶の効率を考えると、1日に3レッスン程度進めていくのがいいかも知れません。
※個人差はあります

コードとスライドを行ったり来たり

書いたコードはリアルタイムで「プレビュー」エリアに反映されます。

コードが正しいかどうかを確認しながら書き進め、間違いをその場で修正できるのは良いなと感じました。

とはいえ、中盤からは知らない知識が増え、少しずつ詰まることも。

「””で囲むのって、どこだっけ……」
「えーっ、ダメなの？どこが？」

と悩みつつ、スライドを参照しなんとかクリアしていきます。

経験値システムでモチベーションを維持

無事に演習問題を終えると経験値が貯まり、レベルが上がります。
ちょっとしたことですが、こういう仕組みがあるとモチベーションが継続しやすくなります。

実は「リングフィットアドベンチャー」にも同様の仕組みがあって、「あと1つレベルが上がるまで！」と思うと決まった量よりちょっとだけ多く頑張れます。そうこうしていると、けっこうな筋肉量がつきました。

プログラミング学習も筋トレと同じく長期戦。普段の自分よりちょっとだけ多く頑張れるのはなかなか嬉しいポイントではないでしょうか。

後半レッスンはスマホ版だと見づらいかも

初級編は23レッスンに分かれているのですが、さすがにレッスン22あたりになると「アプリ版だときついな……」と感じることも増えてきました。

Progateでは正解のコードを組み立てると入力欄が緑に光ります。

ところが、「絶対にこれ、正解でしょ」ってコードを書いているはずなのに、全然緑に光らない。おかしいなと思ってスライドに戻り、見比べても間違いが見つからない。

数分間悩み、「アプリのバグか？」と責任転嫁しつつよくよく目を凝らしてみると、文頭につける「.（ドット）」が抜けていました。スマホの画面では分かりづらい！23レッスン中で最も苦労したポイントかも知れません。

強いてデメリットを挙げるなら……

初級編レッスンは「初級編をマスターすると、このサイトが作れるよ！」というシナリオになっています。

ゴールが明確なのも良いですし、手が届かないと思っていたものに少しずつ近づいていく感覚が気持ちよく、優れたシステムだなと思いました。

とはいえ、アプリ版だとコードの全貌が見えづらいのも事実。

これまでに書いてきたコードが積み重なって完成形に近づいてきているはずなのですが、スマホの画面では（現在取り組んでいる）ほんの数行しかコードを見ることができません。

プラモデルにたとえてみると、「腕」「足」の組み立て方や塗装の仕方は分かってくるのだけれど、それらが全体のどこに配置されるのか、全体が何%くらい完成したのか、パッと見で理解できない感じ。

後半になればなるほど、アプリ版だけでは物足りなさを覚えるかもしれないなという感想です。

初心者向けレッスンを終えてみて

Progateの初心者向けレッスンを終えた感想としては、純粋に「やってよかった！」と感じます。

どこまでも気軽にスタートでき、世のWebサイトが「得体の知れないもの」「神の所業」から「じっくり取り組めば作れるかも」という存在になってくれます。しかも無料で試せるのだから、やらない理由はないでしょう。

その一方で、（少なくとも初級編に関しては）「これだけやればエンジニアとして仕事がバリバリ取れる」わけではないと知っておくべきかもしれません。

というのも、Progateでは気軽さを重視し、環境構築などの工程を潔くカットしています。
「さあ、Webサイトを作るぞ！」と思うなら、そこの部分を別途学ぶ必要があるからです。

たとえば「画像を埋め込むには、ここでURLを指定して……」という内容があるのですが、「そもそも、使う画像はどこにアップロードして管理すればいいんだ」の説明はなされません。

実務には中級編以降が必須

結論として、

• 既存のテンプレートの改変や、ちょっとした調整
• （記事の入稿画面など）HTML部分の微調整

には非常に役立ちますが、

• Webサイトをイチから構築したい
• 流行りのデザインを学びたい
• エンジニアとしてバリバリ仕事を取りたい

場合は中級編以降もマスターした上で別途書籍を購入したり、適切なスクールに通ったり、プロに指導をお願いしたり……が必要になるかなと思いました。

それと、サラッと流すだけでは単純に練習量として足りない気がします。（私自身、すでにいくつかの機能を忘れている気がする……）

スキルをモノにするには、すでにあるサイトの構造を読む練習をしたり、簡単なサイトを手元で作ったりしながらスキルを体得していく必要があるのではないでしょうか。

スマホさえあれば一歩踏み出せる

まったく知らない分野を勉強すると「何が分からないのか分からない」状態に陥りがちです。

たとえばアスリートを目指すとして、いきなり五輪選手のトレーニングメニューをこなそうとしたら体を壊して終わりですよね。

まずは簡単なウォーキングや筋トレをするはずです。戦略だとか、スポンサーとの契約の仕方だとかを学ぶのはそのあと……と理解できるでしょう。

プログラミングも同じです。まずはやりやすい問題で基礎体力をつけ、少しずつハードなトレーニングをしていく。バランスよく筋肉がついたら、練習試合をして実践力をつける。

地味で地道なプロセスですが、結局のところスキルを定着させるにはこれしかないのでは？と感じます。

無料でトライでき、料理中やトイレの中でもパパッと1レッスン進められるProgateは初めの一歩に最適です。

上級編までひと通り身についた頃には、目指すキャリアに向かうための道がよりはっきりと認識できているはず。

ダウンロードするだけならタダです。「善は急げ」精神で、まずはトライしてはいかがでしょうか。

取材しました！代表取締役社長・加藤將倫氏へのインタビュー記事はこちら

コエテコでは株式会社Progate代表取締役社長 加藤將倫氏への独自インタビューを行いました。

世界100ヵ国以上にユーザーを擁し、インドネシアに現地法人も設立されたProgateの"これから"とは？「実践には物足りない」の声にどう対応するのか？詳しくお伺いしました。