Progate Code、AIで作りながら基礎も崩さない使い方

画像出典: ぱくたそ

プログラミングの学習には、長らく「基礎を積んでから作る」という順番がありました。HTMLとCSSを覚え、JavaScriptを覚え、それからようやく自分のアプリに手をつける——途中で力尽きる人が多いのも、この順番のせいでした。

Progateが2026年9月7日に発表した「Progate Code」は、その順番を入れ替える道具です。作りたいものを日本語で伝えると、AIエージェントがコードを生成・編集し、ブラウザ上でそのまま動作確認できます。環境構築はいりません。

問題は、これを今の学習にどう混ぜるかです。丸投げで動くものができてしまうと、基礎の手触りが育たないまま進んでしまう心配もあります。ここでは、基礎コースを止めずにProgate Codeを差し込む順番と、かかる時間・費用の目安を具体的に見ていきます。

Progate Codeとは？何が変わったのか

Progate Codeは、2026年9月7日にProgateが「作品公開機能」とあわせて発表したAI開発環境です。コンセプトは「学んでから創る」から「創りながら学ぶ」への転換だと公式に説明されています。

使い方の流れはシンプルです。作りたいものを自然言語（日本語などの普通の言葉）で伝えると、AIエージェント——指示を受けて自分でコードを書き換えていくAI——がコードを生成・編集し、ブラウザ上ですぐ動作を確認できます。動かしてみたあとに「ここをこう直して」と追加で指示を出し、開発を続けることもできます。

丸ごとブラックボックスにはなっていません。AIの思考プロセスと生成されたコードは画面上で確認できる作りです。ここが、学習者にとって一番重要な点です。生成されたコードを読む工程が残っているので、基礎学習で覚えた記述と突き合わせられます。

完成したアプリには固有のURLが発行され、外部に共有できます。公開したあとも編集は続けられます。他の人が作った作品は「みんなの作品」セクションで閲覧・体験でき、試用ページ（prog-8.com/works）から様子を見られます。人に見せられる形が残るのは、独学の継続では効きます。

入り口の「AI駆動開発」コースは何時間かかる？

Progate Codeの入り口になるのが、2026年9月4日に公開された「AI駆動開発」コースです。全5レッスン・12演習で、学習時間の目安は約2時間とされています。

株式会社Progateの公表データをもとに作成

上の表で注目したいのは、レッスン3と4です。レッスン3ではAIが生成したHTML/CSSコードの中身を確認し、レッスン4ではWebアプリの3層構造（画面・処理・データの三つの層に分かれた作り）を学んで改良を加えます。作って終わりではなく、中身を読む工程が最初から組み込まれています。

対象はプログラミング未経験者を含み、前提知識は不要と明記されています。ChatGPTやGeminiでのコード生成、Claude CodeやCodexのようなAIコーディングエージェントに関心がある人向け、という位置づけです。所要時間はあくまで目安で、手を止めて考える回数によって個人差が出ます。

基礎固めと両立させるには、どの順番で使う？

ここが本題です。HTML/CSSやPythonの基礎コースを進めている途中なら、Progate Codeは基礎の代わりではなく、横に置く2時間として扱うのが無理がありません。AI駆動開発コースは前提知識不要で始められる設計なので、既存の言語別コースと並行しても学習の順序を崩さずに体験だけ足せます。

1. 基礎コースの週のノルマは動かさない今やっているHTML/CSSやPythonの進度はそのまま維持します。ここを削ると、コードを読む力が育たないまま生成物だけが増えます。
2. 週末などにまとまった2時間を1回だけ取るAI駆動開発コースは約2時間。平日に20分ずつ刻むより、1回で通したほうが「作る→動く」の感覚がつながります。まず無料プランの範囲で最初の演習に触れ、続けたいか判断します。
3. レッスン3・4で手を止めて、生成コードを読むここが両立の要です。AIが書いたHTMLやCSSを、基礎コースで覚えたタグ・プロパティと照らし合わせます。読める行と読めない行を分けるだけで十分です。
4. 読めなかった部分を、基礎コースの課題に戻す「flexという指定が分からなかった」ならCSSのレイアウト回へ。生成コードは、自分の穴を探す検査キットとして使えます。
5. 作ったものを公開して、1か月後に自分で直す固有URLで公開し、公開後も編集できます。基礎が進んだ状態で自分の作品に戻ると、前は読めなかった行が読めるようになっていて、進み具合がそのまま見えます。

費用はいくら？無料でどこまでできる？

無料プランでも、AI駆動開発コースの最初の演習から体験できます。環境構築は不要なので、思い立った日にブラウザだけで始められます。

株式会社Progateの公表データをもとに作成

上の表のプロプランは、プレスリリースに記載された月額2,490円〜という数字です。Progateには従来から個人向けの有料プランがありますが、そちらとプロプランの関係——同じプランの改称なのか別枠なのか——は公式発表からは読み取れません。申し込み前に公式の料金ページで最新の区分を確認してください。

学生の場合、月額2,490円〜は教科書1冊分以上の出費です。授業や定期試験と重なる時期に契約を始めると、使わない月の料金だけが残ります。まず無料プランで最初の演習を触り、続けられそうだと分かってから課金する順番のほうが安全です。社会人でも、繁忙期に契約開始を重ねると同じことが起きます。可処分時間が読める月の初めに始めるのが無難です。

「創りながら学ぶ」は基礎軽視ではない？

代表取締役の加藤將倫氏は、プレスリリースで「まだコードが書けなくても、『こんなものを作りたい』と伝えるところから始めて、動くものを作りながら学んでいける」という趣旨のコメントを出しています。順番が変わった、という話であって、コードを読まなくていいという話ではありません。

実際、コース設計は「対話→制作→公開→コード確認」の流れです。コード確認が最後に置かれているのは、まず作る楽しさを体験してから仕組みの理解に入る意図と説明されています。つまり基礎学習の置き換えではなく、基礎学習に入る動機づけとして設計されていると読むのが妥当です。

Progateは2026年7月22日に「生成AI入門」コースも正式公開しています。こちらはプロンプトの書き方や画像生成AIの活用、ハルシネーション（AIがもっともらしい誤情報を作る現象）対策などを学ぶ内容で、学習時間は約3時間、プログラミング知識は不要です。対象はプラスプラン・プロプラン会員で、最初のステップのみ無料会員も利用できます。AIそのものの扱い方から入りたい人は、こちらを先に見る手もあります。

基礎コースの進度を削らず、週末の2時間を1回。それで自分の穴が見えるなら、投じる時間としては小さいほうです。無料の範囲で最初の演習まで触れば、続けるかどうかの判断材料は手に入ります。

よくある質問

Progate Codeはいつから使えますか？

株式会社Progateが2026年9月7日にAI開発環境「Progate Code」と作品公開機能の提供を発表しました。入り口となる「AI駆動開発」コースは、その3日前の2026年9月4日に公開されています。

Progate Codeはプログラミング未経験でも使えますか？

使えます。「AI駆動開発」コースは前提知識が不要と公式に明記されており、環境構築も必要ありません。作りたいものを自然言語で伝えるとAIエージェントがコードを生成・編集し、ブラウザ上で動作を確認できます。

AI駆動開発コースの学習時間はどのくらいですか？

全5レッスン・12演習で、学習時間の目安は約2時間と公表されています。レッスンごとの目安は20分・30分・20分・30分・20分です。目安であり、考え込む回数によって個人差があります。

Progate Codeは無料で試せますか？

無料プランでも「AI駆動開発コース」の一部とProgate Codeの入り口体験が利用できます。有料の「プロプラン」はプレスリリースに月額2,490円〜と記載されていますが、既存の個人向け有料プランとの区分は公式発表では明確にされていません。

作ったアプリを他の人に見せられますか？

完成したアプリには固有のURLが発行され、外部に共有できます。公開後も編集を続けられます。また他のユーザーの作品は「みんなの作品」セクションで閲覧・体験できます。

※記事で使用した内容・数値は変更される場合があります。最新情報は公式サイトをご確認ください。