「プログラミングを学びたいけれど、黒い画面や文法のエラーで挫折した」「何から手を付ければいいかわからない」という方に朗報です。現代は、生成AIを専属のメンター（家庭教師）にすることで、専門的なコードの丸暗記をせずに直感的にものづくりを始められる時代になりました。
本記事では、プログラミング完全初心者がAIの力を借りて自分だけの動くWebページや便利ツールを作るための手順をステップ形式で分かりやすくガイドします。
プログラミングをAIと始める5つのSTEP
STEP 1: まずは「作りたいもの」を具体的に1つ決める
文法書を最初から読む必要はありません。「自分の趣味の紹介ページ」「シンプルな電卓アプリ」「おみくじゲーム」「タイマーツール」など、画面が見える小さな目標を1つ決めましょう。
STEP 2: AIに「専属の家庭教師」になってもらう
ブラウザで「Claude」または「ChatGPT」を開き、以下のようにプロンプトを入力します：
「私はプログラミングの完全初心者です。HTMLとCSSを使って、シンプルな自己紹介Webページを作りたいです。専門用語を使わずに、小学生でもわかるように最初の一歩を教えてください。」
STEP 3: 出てきたコードをパソコンで動かしてみる
AIが出力したHTMLコードをコピーし、メモ帳（またはVS Codeなどのテキストエディタ）に貼り付けます。メモ帳では「名前を付けて保存」で、ファイルの種類を「すべてのファイル」、文字コードを「UTF-8」にして、「index.html」という名前で保存します。そのファイルをダブルクリックしてブラウザで開くだけで、あなたの作ったWebページが画面に表示されます。
STEP 4: 日本語で「改善リクエスト」を投げる
「背景を優しい水色にして」「ボタンを押したら今日の運勢が表示されるようにして」「文字をもう少し大きくして」など、気になった点をAIに日本語で指示します。AIが修正版コードを教えてくれるので、書き換えて再読み込みするサイクルを繰り返します。
STEP 5: エラーが出たら画面の文字をそのままAIに貼る
思い通りに動かないときは、表示されたエラーの文章（あれば）や、「ボタンを押しても何も起きない」といった症状を、そのままAIに伝えます。原因がコードの一部にある場合は、その行を指摘してくれることもあります。
さらにステップアップしたい方へ
ブラウザ上での制作に慣れてきたら、ターミナルで対話しながらプロジェクト全体を自動構築してくれる「Claude Codeの始め方ロードマップ」に進むと、本格的なエンジニアの開発ワークフローを体験できます。
初心者が挫折しないための心構え
- 最初から100点を目指さない：まずは動けば合格。デザインの細部や高度な機能はあとから少しずつ足していきましょう。
- コードの意味をAIに質問する：動いたコードについて「このdivって何の意味があるの？」とAIに質問すると、自然と知識が定着します。
