こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近、本当に増えました。
「Claude Codeでサイト作ってます」
「AIでLP作れるようになりました」
「コーディングかなり速くなりました」
実際、かなり便利です。
- HTML生成
- CSS作成
- レイアウト提案
- UI設計
- コンポーネント化
昔なら何時間もかかっていた作業が、
数分で終わる時代になりました。
でも、その一方でよく聞くのがこれです。
- 「なんか思ったのと違う…」
- 「何回修正してもズレる…」
- 「逆に時間かかる…」
これ、かなり多いです。
そして原因のほとんどは、
AIの性能ではなく“指示の出し方”です。
Claude Codeは、
かなり自由度が高いAIです。
だからこそ、
曖昧な指示ほど迷走します。
逆に言うと、
伝え方を少し変えるだけで、
出力精度は一気に変わります。
この記事では、
Claude Codeでサイト制作するときにやりがちな指示ミス3選を、
実例つきでわかりやすく解説します。
読み終わる頃には、
「AIに伝わる言い方」がかなり見えてきます。
結論：AIは“察して”くれない
まず結論です。
重要
AIは優秀 でもエスパーではない
「なんとなく」で伝えるほどズレます。
逆に、
- ゴール
- 優先順位
- 禁止事項
を整理して伝えると、
かなり精度が上がります。
①「なんとなくおしゃれに」という丸投げ
これ、かなり危険です
よくある指示です。
ありがち
おしゃれにしてください 今風にしてください いい感じにしてください
でも、
AIからすると困ります。
なぜなら、
「おしゃれ」の定義が人によって違うからです。
例えば
- ミニマル系
- Apple風
- 北欧風
- ブルータリズム
- SaaS系UI
全部「おしゃれ」です。
つまり、
抽象的すぎる指示は事故ります。
改善方法
具体化します。
余白を広めに使う 白ベース 文字サイズは大きめ Appleっぽいミニマルデザイン 装飾は少なめ これだけで精度が激変します。
AIは「センス」より「条件」が得意です。
② フィードバックを一度に詰め込みすぎる
修正地獄の原因
これもかなり多いです。
ありがち
文字を大きくして 色変えて 余白減らして アニメーション追加して スマホ対応して やっぱりシンプルにして
これ、AIからすると、
「結局どれが重要なの？」になります。
結果
- 前の修正が消える
- 意図がブレる
- デザイン崩壊
改善方法
修正は1テーマずつ。
例えば、
- まず余白だけ修正
- 次に配色
- 最後にアニメーション
この方が圧倒的に安定します。
ポイント
AIとの会話
「まとめて指示」より 「段階的な調整」の方が強い
③ ゴールではなく制約を先に書く
これが一番重要
Claude Codeは自由度が高いです。
つまり、
自由すぎると暴走します。
よくある指示
スマホ対応で シンプルに 見やすく これ、実はかなり曖昧です。
おすすめは「禁止」を先に伝える
例えばこうです。
余計なアニメーションは使わない グラデーションは禁止 装飾を増やしすぎない 1カラムベースで設計 すると、
AIの選択肢が絞られます。
結果、意図通りになりやすいです。
なぜ禁止が強いのか？
理由
AIは「できること」が多すぎる だから制限した方が安定する
これはかなり重要です。
AI時代のWeb制作で重要なのは「プロンプト設計力」
昔は、
「作れる人」が強かったです。
でも今は違います。
これから重要なのは、
- 何を作るか
- どう伝えるか
- どう制御するか
です。
つまり
AI時代の強い人
AIを「うまく使える人」
ここに価値が移っています。
まとめ
- 抽象的な丸投げをしない
- 修正は段階的に行う
- 禁止事項を先に伝える
Claude Codeは「指示の質」で結果が決まります。
AI時代は、
デザイン力だけではなく、
“伝える力”が武器になる時代です。
まずは次の制作で、
「禁止事項を先に書く」から試してみてください。