ブラウザでAIチャットを開いて最初のお願いを送り、AIが書いたHTMLをファイルにして、自分のパソコンで開けるようになります。
最初は①のブラウザのAIチャットで十分です（2026年10月時点の考え方です）。
まずは、ブラウザのAIチャットで始めよう
バイブコーディングの道具はいろいろありますが、最初はいつも使っているブラウザ（Chrome や Safari など）で開く、AIチャットで始めるのがおすすめです。新しいソフトを入れなくても始められます。
- ChatGPT（チャットジーピーティー）：chatgpt.com
- Claude（クロード）：claude.ai
どちらを使っても、この講座の進め方は同じです。すでに使っているほうがあれば、そちらで大丈夫です。
料金やプラン、使える機能は、ときどき変わります。この講座では料金にはふれません。使う前に、各サービスの公式ページで確かめてください。
最初のひとことを送ってみよう
・「押してね」というボタンが1つある
・ボタンを押すと、「こんにちは！」と大きく表示される
・コードは、ファイルにそのまま保存できるように、全文を1つにまとめて出してください
しばらくすると、AIが説明といっしょに、英語や記号が並んだ枠（コード）を返してくれます。これが、ページのもとになる「HTML（エイチティーエムエル。Webページを作るための文章）」です。
HTMLをファイルにして、ブラウザで開く
どのAIチャットでも使える、いちばん確実なやり方です。
AIの画面の中で、作ったページをそのまま表示して動かしてくれることもあります（サービスや設定によって違います）。そのときは、ファイルにする手順をとばしても大丈夫です。あとで人に見せたいときは、ファイルにしておくと便利です。
慣れてきたら：AIエディタや Claude Code へ
ファイルがいくつもある大きめのものを作りたくなったら、次の道具が役に立ちます。いまは名前だけ知っておけばOKです。
| 道具 | どんなもの |
|---|---|
| Cursor（カーソル）など | AIが入ったエディタ（文章を書くソフト）。ファイルを開いたまま、AIに書き換えてもらえる |
| Claude Code・Codex | AIがパソコンの中で、ファイル作りから確認までを進める道具 |
この講座の「伝える → 確かめる → 直してもらう」は、どの道具でもそのまま使えます。
つまずきやすいところ
こうなったら：ファイルを開いたら、ボタンではなくコードの文字がそのまま出た
こうする：保存の形がちがっています。Mac は「標準テキストにする」を選んでから保存し直します。名前が hello.html.txt のようになっていないかも見てください。保存のときに拡張子（名前の最後の「.html」の部分）について聞かれたら、「.html」のほうを選びます。
こうなったら：文字が「縺」のような、読めない文字に化けた
こうする：AIに「ブラウザで開いたら文字化けしました。直してください」と伝えて、出てきたコードで保存し直します。保存のときに文字コードを選ぶらんがあれば「UTF-8」を選びます。
こうなったら：AIが説明だけで、コードを出してくれない
こうする：「HTMLファイル1枚の全文を、コードの枠で出してください」ともう一度頼みます。
- 最初は、ブラウザの ChatGPT や Claude で始められる
- AIが書いたHTMLは「コピー → 貼りつけ → .html で保存 → ダブルクリック」で動かせる
- 慣れてきたら、Cursor や Claude Code などに進めばいい
次のレッスンでは、作りたいものを「3行」の言葉にまとめます。
確認クイズ
Q1. AIが書いたHTMLを保存するとき、名前の最後につけるのは？
Q2. Mac のテキストエディットで、保存の前にしておくことは？
こたえ
- Q1：「.html」です（例：hello.html）。
- Q2：「フォーマット」メニューから「標準テキストにする」を選びます。