AI開発で「30分無駄」を防ぐ！初心者向けHTML活用術

「AI開発で30分待ったのに全然違うものができた」って経験ありますか？

実はこれ、AIが悪いんじゃないんですよ。最初の指示の出し方に問題があるんです。

今日は、AI開発の会社Anthropic（ChatGPTのライバル、Claudeを作ってる会社）が社内で使ってる「失敗しない開発方法」を、初心者向けに解説しますね。これを知ってると、AIに頼んだ作業が一発で成功する確率がグンと上がるんです。

この問題、放っておくとどうなるの？

「AIに頼んだけど全然違うものができた」を繰り返してると、こんなことになっちゃうんです。

毎回30分〜1時間が無駄になります。トークン（AIとの会話量の単位、多いほどお金がかかる）も余計に使っちゃいます。何度やってもうまくいかないストレスで「AIって結局使えないな」って思っちゃうんですよね。

でも実は、AIの能力が悪いんじゃないんです。「最初の30分で正しい指示を出すコツ」を知らないだけなんですよ。

Anthropic社内の「失敗しない3ステップ」とは？

普通の人がやりがちな流れって、こんな感じなんです。

1. 「こんなの作って」とざっくり依頼
2. AIが何かを作る
3. 「違う…」と落胆
4. また最初から

でもAnthropicの社内では、こんな順番でやってるんです。

1. **AIに質問させる**（「何を作りたいんですか？」って聞いてもらう）
2. **HTMLで見た目を確認**（実際に動くものを作る前に、見た目だけ確認）
3. **チェック機能も一緒に作る**（「正しくできてるか確認する仕組み」も同時に作る）

この順番だと、最後に「あれ、全然違う…」ってなることがほとんどないんですよ。

なぜHTMLを使うと失敗しないの？

よく「Markdown（マークダウン）」っていう簡単な書き方があるんですが、なぜHTMLの方がいいんでしょう？

**1. 目で見て確認できる**
HTMLはブラウザで開けば、実際の見た目がすぐ分かります。文字で説明されるより、パッと見た方が「あ、これこれ！」ってなりますよね。

**2. 動く部品も作れる**
ボタンを押したらどうなるか、といった動きもHTMLなら表現できます。完成品のイメージが具体的になるんです。

**3. みんなで確認しやすい**
プログラムが分からない人でも、ブラウザで開けば見られます。チームで「これでOK？」って確認するとき便利なんです。

職場で例えると、会議で「こんな感じの資料作って」って口頭で伝えるより、「この見本と同じ感じで」って実物を見せる方が確実ですよね。それと同じなんです。

3ステップの具体的なやり方

**ステップ1: AIに質問してもらう**

いきなり「ウェブサイト作って」って言わずに、まずこう頼みます。

「あなたは仕様を聞き出す専門家です。私が作りたいものを理解するために、質問してください。曖昧な点がなくなったら『理解しました』と言ってまとめてください」

すると、AIが「スマホでも使えるようにしますか？」「色は何色がいいですか？」って聞いてきます。この質問に答えることで、お互いの認識がピッタリ合うんです。

**ステップ2: 4つのパターンで見た目確認**

次に、こう頼みます。

「さっきの内容で、4つの違うデザイン案をHTMLで作ってください。それぞれブラウザで確認できるようにしてください」

4つのHTMLファイルができるので、ブラウザで開いて比べます。「1番目のデザインがいいな」って選べるんです。

**ステップ3: チェック機能も込みで完成**

最後に、選んだデザインに「正しく動いてるかチェックする機能」も追加してもらいます。

「このHTMLに、動作確認用のテストコードも追加してください」

こうすると、完成したときに「ちゃんと動いてるかどうか」を自動で確認できるHTMLになるんです。

ここだけ気をつけて

最初は面倒くさく感じるかもしれません。でも、この手順を守ると後からの手戻りがほぼゼロになります。

急がば回れ、なんですよね。職場でも、最初に詳しく確認しておいた方が、後から「あれ、これじゃない」って言われなくて済みますよね。

今日のポイント

• **AIには最初に質問してもらう**（いきなり作らせない）
• **HTMLで見た目を先に確認**（4パターン作って選ぶ）
• **チェック機能も同時に作る**（後から困らないように）

この3ステップを覚えておけば、AI開発での「30分無駄」がグッと減りますよ。最初は慣れないかもしれませんが、慣れると「なんで今まで知らなかったんだろう」って思うはずです。

Powered by 侍AI道場 (CCI)