ProgateでWebデザインを学ぶ使い方を解説！効率のいい進め方と次のステップ

Webデザインの学習を始めるとき、最初の教材としてProgateの名前を目にした方は多いはずです。ただ、実際に登録してみると、どのコースから手をつければいいのか、どこまでやれば次に進んでいいのかがわからず、なんとなく進めているうちに止まってしまうことがあります。

Progateは環境構築なしでコードを書きながら学べる入門教材で、Webデザイン志望なら受けるコースの順番と、終わらせるタイミングを先に決めておくことが挫折を防ぐポイントになります。

この記事では、Progateの仕組みと料金、Webデザイン向けに進めたいコースの順番、効率のいい使い方、そして終えた後にやるべきことまでを整理します。教材を一周して終わり、という状態にならないための道筋として読んでください。

Progateは入口としては優秀だよ。ただ、出口の設計をしないとここで止まっちゃうんだ。

Progateはどういう教材なのか

スライドと演習の繰り返し

Progateの学習は、イラスト付きのスライドで概念を読み、その直後にブラウザ上のエディタでコードを書く、という流れの繰り返しで進みます。書いたコードはその場でプレビューされ、正解かどうかも判定されます。

パソコンに開発環境を用意しなくても学習を始められる点が、初学者にとって大きな利点です。エディタの設定やターミナルの操作でつまずいて挫折する、という最初の関門を回避できます。

Webデザインに関係するコース

デザイン志望の方が関係してくるのは、主にフロントエンド周辺の内容です。HTMLとCSSを軸に、レイアウトの組み方や見た目の調整を扱うコースが用意されています。JavaScriptやGitといった周辺技術のコースもあります。

コースの構成や名称は更新されることがあるため、実際に受講できる内容はProgate公式サイトのコース一覧で確認してください。

料金プラン

個人向けには無料で試せる範囲と、有料プランが用意されています。記事執筆時点で公開されている料金は次のとおりです。

料金は改定されることがあります。申し込む前には、公式サイトで現在の条件を確認してください。

Progateと並行して、HTMLとCSSの入門書を1冊手元に置いておくと、スライドで学んだ内容をあとから見返しやすくなります。

Webデザイン志望が進めたいコースの順番

1. HTML／CSSを最優先

まずはここです。ページの構造を作るHTMLと、見た目を整えるCSSの基本を押さえます。Webデザイナーがコーディングまで担当しない職場もありますが、実装の仕組みを知らないと「作れないデザイン」を描いてしまうことになります。

2. レイアウトの組み方を重点的に

CSSの中でも、要素の並べ方を扱う部分は特に重要です。FlexboxやGridを使ったレイアウトは実務で頻繁に登場します。配色や装飾より先に、要素をどう配置するかの引き出しを増やすほうが、実際に作れるものの幅が広がります。

3. JavaScriptの基礎に触れる

スライダーやハンバーガーメニューなど、動きのある表現に必要になります。すべてを自分で書けなくても、どういう仕組みで動いているかを理解しておくと、実装担当者との会話が成立します。

4. Gitを触っておく

チームでの制作や、制作会社との協業ではGitが使われます。コマンドの意味と基本的な流れをProgateで一度体験しておくと、実際の現場で用語がわかる状態になります。

5. コマンドラインの基礎

黒い画面への抵抗をなくしておくと、その後の学習で選択肢が増えます。フォルダの移動やファイルの作成といった基本操作だけでも触れておく価値があります。

全コースを制覇する必要はないよ。デザインに関係する範囲に絞ったほうが、早く先へ進めるんだ。

効率のいい進め方

写経で終わらせない

Progateは指示どおりに入力すれば進めてしまいます。そのため、何も理解しないまま最後まで到達することが可能です。これがいちばん危険な使い方です。

各スライドを読んだら、コードを書く前に「これから何をするのか」を自分の言葉で説明できるか確認する。この一手間があるかどうかで、身につく量が大きく変わります。

手元に自分用のファイルを用意する

Progate内で書いたコードは、そのままでは自分の資産になりません。学んだ内容を、自分のパソコン上に作った練習用ファイルでも再現してみてください。エディタで書き、ブラウザで開く。この経験があると、教材を離れた後の落差が小さくなります。

期限を先に決める

「理解できるまでやる」と決めると、いつまでも同じところを繰り返すことになります。HTML／CSSのコースは2週間、といった期限を先に設定してください。完璧に覚えていなくても、期限が来たら次の段階へ進みます。

わからないまま進む勇気を持つ

初回で全部を理解できる人はいません。7割わかったら次へ進み、後で必要になったときに戻る。この進め方のほうが、結果的に早く全体像がつかめます。

Progateだけでは足りない部分

環境構築の経験

ブラウザ上で完結する手軽さの裏返しで、自分のパソコンに環境を作る経験は得られません。エディタの導入、ファイルの管理、ブラウザでの確認といった作業は、別途自分でやってみる必要があります。

デザインを考える力

Progateで学べるのは、主に実装の技術です。配色、余白、文字組みといったデザインそのものの判断力は、別の方法で鍛える必要があります。デザインの基礎は『ノンデザイナーズ・デザインブック』のような定番書籍で学ぶ方が多く、実装の学習と並行して進めると相乗効果が出ます。

デザインツールの操作

実務ではFigmaなどのデザインツールでカンプを作ります。Figmaは無料で使い始められるため、Progateと並行して触っておくと、後の学習がスムーズになります。

自分で考えて組む経験

用意された課題をこなすことと、白紙から作ることの間には大きな隔たりがあります。この差を埋めるのが、次に述べる模写とオリジナル制作です。

Progateを終えた後にやること

模写コーディングに進む

完成見本を見ながら、自分でHTML／CSSを書いて再現する練習です。練習向けの教材を公開しているCodejumpのようなサイトを使うと、実在するサイトを無断で模写するより安心して取り組めます。教材ごとに利用条件が定められている場合があるため、公開や掲載を伴う使い方をするときは各サイトの記載を確認してください。

ここで初めて「Progateでは書けたのに、自分では何も書けない」という壁にぶつかります。この壁を越える作業こそが、実力がつく工程です。

オリジナル作品を作る

架空の店舗やサービスを想定し、自分で要件を決めてサイトを作ります。ポートフォリオに掲載できるのは、この段階で作った作品です。模写の成果物は掲載できないため、早めにこの段階へ進んでください。

公開まで通してやってみる

作った作品を、実際にサーバーへ上げて公開してみてください。ドメインの取得、サーバーの契約、ファイルのアップロード。この一連の流れを経験しているかどうかは、案件を受ける段階で大きな差になります。

教材の外に出た瞬間が本番だよ。そこで詰まるのは失敗じゃなくて、想定どおりの通過点なんだ。

学習を続けるための環境

画面の広さ

Progateはスライドとエディタが同じ画面に並ぶ設計ですが、自分のパソコンで再現する段階になると、教材とエディタとブラウザを行き来することになります。ノートPC1台だと、切り替えのたびに集中が途切れます。

24インチ前後のフルHDモニターを1枚追加するだけで、教材を表示したままコードを書けるようになり、学習の効率がはっきり変わります。数万円の投資で学習速度が上がるなら、費用対効果は悪くありません。

入力環境

コードの入力では記号を多用するため、キーボードの打ちやすさが疲労に直結します。テンキーレスのメカニカルキーボードや、手首の負担を減らすパームレストを用意している方も多いようです。ノートPCスタンドで画面の高さを上げると、首や肩の負担も軽くなります。

集中できる状態を作る

自宅での学習は、生活音や通知に邪魔されがちです。ノイズキャンセリング機能付きのイヤホンがあると、短い時間でも学習に入りやすくなります。学習時間の記録を残すアプリと組み合わせると、続けている実感も得られます。

学習記録の残し方

進んだ量ではなく気づきを残す

「今日はレッスン3まで進んだ」という記録は、後から見返しても何も思い出せません。代わりに「marginとpaddingの違いで混乱した」「Flexboxのjustify-contentがまだ手に馴染まない」といった、詰まった内容を書き残してください。この記録が、そのまま復習リストになります。

詰まった箇所を検索できる形にする

疑問をメモアプリに書き溜めておき、後でまとめて調べる時間を作ると効率的です。学習中に毎回検索していると、そのたびに集中が切れます。学習と調べ物の時間を分けるだけで、進み方が安定します。

作ったものを残す

自分のパソコンで再現した練習ファイルは、日付ごとにフォルダを分けて保存しておいてください。数ヶ月後に見返すと、自分のコードがどれだけ変わったかがわかります。データは外付けSSDやクラウドに置いておくと、パソコンの故障時にも困りません。

よくある質問

Q. 無料の範囲だけで学べますか

各コースの序盤は無料で試せますが、その先へ進むには有料プランが必要になります。まずは無料の範囲で自分に合うかを確認し、続けられそうなら課金する流れをおすすめします。

Q. どれくらいの期間で終わりますか

1日1〜2時間を確保できる場合、Webデザインに関係するコースをひととおり終えるまで1〜2ヶ月ほどを見込む方が多いようです。ただし、期間より「終わった後に何をするか」を決めておくほうが重要です。

Q. スマートフォンアプリでも学習できますか

アプリ版も提供されていますが、実際にコードを書く練習はパソコンで行うほうが実務に近い形になります。通勤時間にアプリでスライドを読み、帰宅後にパソコンで手を動かす、といった併用が効率的です。

Q. Progateを終えたら仕事を受けられますか

教材を終えた時点では、まだ案件を受けられる状態ではありません。模写とオリジナル制作を経てポートフォリオを整えるまでが、最低限の準備です。Progateは入口であって、ゴールではないと考えてください。

Q. 他の学習サービスと併用すべきですか

同じ入門レベルの教材を複数使うのは非効率です。ただし、動画で流れをつかむサービスや、模写課題を提供するサイトのように役割が違うものは、併用する価値があります。

まとめ

ProgateはWebデザインの学習を始める入口として扱いやすい教材です。環境構築が不要で、スライドを読みながらその場でコードを書けるため、最初の挫折ポイントを回避できます。

ただし、教材の中だけで完結させると「言われたとおりに書けるが、自分では何も作れない」状態になります。HTML／CSSを軸にコースを進め、期限を決めて一周したら、模写コーディングとオリジナル制作へ移ってください。Progateを終えた後の設計まで含めて考えておくことが、学習を成果につなげる分かれ目になります。

「いつまでにProgateを卒業するか」を今日決めておこう。それだけで進み方が変わるよ。