Claude Codeでサイト制作「なんか違う」が続く3つの原因

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Claude Codeを使ってウェブサイトを作り始めた方から、最近こんな声をよく聞きます。「指示を出しているのに、何度修正してもなんか違う感じがする」「AIが出してくるデザインがどこかズレている」「何が悪いのかわからないまま時間だけ過ぎていく」――あなたも、同じ経験をしていませんか？

Claude Codeは確かに優秀です。コードを書いてくれる、デザインの提案もしてくれる、修正にも対応してくれる。それなのに「なんか違う」が積み重なっていく。このもどかしさは、AIへの指示の出し方に根本的な原因があります。

わたし自身、浜松市のクライアントからウェブサイト制作の依頼を受ける中で、Claude Codeを業務に取り入れてきました。最初の頃はわたしも同じ壁にぶつかりました。丁寧に長い指示を書いたのに出てきたものが全然イメージと違う。一度に「ここを直してここも変えて色もこうして」と伝えたら何がどう変わったかわからなくなる。そして何より、一番大切な「誰のためのサイトか」「何をさせたいサイトか」を書き忘れていたせいで、AIがずっと汎用的なデザインを出し続けていた。

これは、Claude Codeが悪いわけではありません。AIへの指示には、人間同士のコミュニケーションとは違う独自のルールがあります。そのルールを知らずに使うと、どれだけ時間をかけても「なんか違う」から抜け出せません。

この記事では、Claude Codeでウェブサイト制作をしているときに「なんか違う」が続く原因を3つに絞って解説します。それぞれの原因がなぜ起きるのか、どう直せばいいのかを具体的にお伝えします。最後まで読むと、Claude Codeへの指示の出し方が根本から変わり、「なんか違う」を卒業してイメージ通りのサイトを作れるようになります。

Claude Codeでウェブサイトを作るときの「なんか違う」とは何か

AIへの指示がうまくいっているときと、そうでないときの違い

Claude Codeに指示を出してウェブサイトのコードやデザインを作ってもらうとき、うまくいっているときは「あ、これだ」という感覚があります。最初の出力でほぼイメージ通り、あとは細かい調整だけ、という状態です。

一方、「なんか違う」が続いているときは、毎回の出力がどこかズレていて、修正を重ねるほど何が正解かわからなくなっていく。そしてやり取りが長くなるにつれてAIの出力品質も下がっていくという悪循環に入ります。

この差は、AIの能力の差ではなく、指示の質の差から来ています。Claude Codeは与えられた情報をもとに最適解を出そうとしますが、情報が不足していたり、指示の構造が複雑すぎたりすると、AIは「確率的に正しそうな汎用解」を出すしかなくなります。それが「なんか違う」の正体です。

「なんか違う」が続くと何が起きるか

「なんか違う」が続くと、制作時間が膨らむだけでなく、判断力も消耗します。何が正しいのかわからないまま修正を繰り返すことで、最終的に「もうこれでいいか」という妥協でサイトが完成してしまう。

浜松市内のクライアント案件でも、Claude Codeを途中まで使って「うまくいかなかった」という話を聞くことがあります。その多くが、今回お伝えする3つの原因のいずれかに当てはまっています。

「なんか違う」は、指示の出し方を変えることで確実に減らせます。次のセクションから、3つの原因を一つずつ見ていきましょう。

「なんか違う」の正体は、AIの限界ではなく指示の質にある。

原因1：指示が長すぎる

長い指示がなぜAIをミスリードするのか

「丁寧に、詳しく伝えた方がいいはず」という感覚は自然です。人間同士のコミュニケーションでは、文脈や背景を細かく説明することで伝わりやすくなることがあります。しかしClaude Codeへの指示では、この感覚が裏目に出ることがあります。

AIは指示全体を一度に処理します。指示が長くなればなるほど、どの要素に重みを置くべきかの判断が難しくなります。長い指示の中で、本当に重要な一文が他の情報に埋もれてしまう。結果として、AIは「全体として最もありそうな出力」を返してくるため、あなたが一番伝えたかった部分が反映されていない、という事態が起きます。

短く、一点集中の指示に変えるとどうなるか

指示を短くするとは、「雑に伝える」ことではありません。「一回の指示で伝えることを一つに絞る」ということです。

たとえばヘッダーを作るなら、まず「ヘッダーのレイアウト」だけを指示する。それが出てきたら「次はフォントと色」を指示する。その次に「ホバーアニメーション」を指示する。このように段階を分けることで、AIは各ステップで集中して処理でき、出力の精度が格段に上がります。

わたしが浜松市のクライアント向けにランディングページを作った際、ヒーローセクションの指示を「背景は深いネイビー。中央にH1テキストとCTAボタン。それだけ」と3文に絞ったところ、1回目の出力がほぼイメージ通りでした。指示を削ることへの怖さより、「削ることで伝わる」という体験の方が大きな学びになりました。

指示の長さの目安と具体的な書き方

一回の指示として適切な長さは、3文〜5文、100文字〜200文字程度が目安です。それ以上になるときは、指示を複数に分割できないか考えてみてください。

この3点だけを伝えれば、Claude Codeは十分な情報を持って動けます。残りの細部は、出力を見てから追加で指示する方がはるかに効率的です。

指示は短く一点集中。削ることが伝わることへの近道。

原因2：一度に複数の修正を頼む

複数修正を一度に頼むと何が起きるか

出てきたデザインを見て「ここもここも直したい」と思うのは自然なことです。そのため「ヘッダーの色を変えて、フォントも少し小さくして、ボタンの角丸も増やして、フッターのリンクも整理して」と一気に伝えてしまいがちです。

しかしこれを一度に処理させると、次のような問題が起きます。

これは「一石二鳥を狙うほど、精度が落ちる」という現象です。人間でも、複数のタスクを同時にこなすときより、一つに集中したときの方がクオリティが高いですよね。AIも同じです。

修正は1回に1箇所。その原則を守るメリット

「1回に1箇所」という原則を守ると、制作の流れがシンプルになります。修正を重ねるごとに「どこが変わったか」が明確で、意図通りでなかった場合の原因もすぐわかります。

「これだと時間がかかる」と思うかもしれませんが、実際には逆です。複数まとめて修正して意図通りにならなかったとき、もとに戻して整理し直す時間の方がはるかに長くかかります。1回1箇所の方が、トータルの制作時間は短くなります。

優先順位をつけて修正リストを作る習慣

複数直したい箇所が出てきたとき、その場ですぐ全部伝えるのではなく、一度修正したい箇所をメモに書き出し、優先順位をつけるという習慣を取り入れてみてください。

「一番影響が大きい修正から先に手をつける」というルールにすると、限られた時間の中でも最も重要な部分を確実に仕上げられます。また、メモに書き出すことで「実はこの修正は必要なかった」と気づくこともあります。

わたし自身、浜松市の飲食店サイトを制作した際にこの方法を取り入れて、修正ループから抜け出した経験があります。「全部一気に直そう」という焦りを手放したとき、制作スピードは上がりました。

修正は1回に1箇所。急がば回れが、最速の制作につながる。

原因3：ターゲットと目的が指示文にない

これが3つの中で最も致命的な原因

指示を短くして、修正を一つずつにしても、「なんか違う」が解消されないとしたら、この3つ目の原因が最も大きな要因として残っている可能性が高いです。

それは、「誰向けのサイトか（ターゲット）」と「何をさせたいサイトか（目的）」が指示文に書かれていないことです。

これがないとき、Claude Codeは何を参照するかというと、「WEBサイト全般として見栄えが良く、機能的に標準的なデザイン」を出してきます。それは決して悪いデザインではありません。ただ、あなたのクライアントにとって、あなたが目指すゴールにとって、ぴったりかというと違う。その「ぴったり感のなさ」が「なんか違う」の感覚になります。

ターゲットを明記するとデザインがどう変わるか

ターゲットを明記すると、Claude Codeが出してくるデザインの方向性が明確に変わります。

同じ「整骨院」「白基調」という指示でも、ターゲットがあるかないかでアウトプットの質が大きく変わります。これは実際に浜松市の整骨院クライアントの案件で体験したことです。ターゲットと目的を明記した瞬間に、AIの出力がガラリと変わりました。

目的を明記するとコンバージョン導線が変わる

ターゲットと並んで重要なのが、「このサイトで何をさせたいか（目的）」を明記することです。

目的によって、サイトのレイアウトや強調すべき要素が根本から変わります。

これらすべては、目的を一言指示に加えるだけでAIが自動的に考慮してくれます。逆に言えば、目的を書かなければAIには考慮のしようがありません。

ターゲットと目的を指示文に組み込む具体的な書き方

指示文にターゲットと目的を入れるのは、決して難しくありません。以下のフォーマットを使うだけです。

【ターゲット】[年齢・性別・状況など具体的に]
【目的】[このサイトで最終的にとってほしいアクション]
【依頼内容】[作ってほしいパーツや内容]
【スタイル】[色・雰囲気など]

このフォーマットを使うことで、Claude Codeは「誰のためのサイトで、何を達成するためのデザインか」を理解した上でコードを書いてくれます。汎用的な出力から、目的に特化した出力へ変わります。

ターゲットと目的の明記が、汎用デザインからの脱却を可能にする。

3つの原因を踏まえた、Claude Codeへの指示の出し方まとめ

3つの原因を一度に解決する指示テンプレート

ここまでの内容を統合した、Claude Codeへの指示テンプレートを紹介します。これを使えば、3つの原因すべてを防ぎながら指示が出せます。

【ターゲット】30代女性、都市部在住、健康意識が高い
【目的】無料カウンセリングの予約を完了させる
【今回の依頼】ヒーローセクションのHTMLとCSSを作成
【スタイル】白とミントグリーン基調、やわらかく信頼感のある雰囲気
【制約】スマホファースト、フォントはシステムフォント

このテンプレートには「ターゲット」「目的」「依頼内容（1箇所のみ）」「スタイル」「制約（最小限）」の5つが含まれています。これだけで、Claude Codeは方向性を定めてコードを生成できます。

指示を出す前に確認したい3つのチェックポイント

Claude Codeに指示を送る前に、以下の3点をセルフチェックする習慣をつけてください。

この3つがすべてYESなら、送信してください。一つでもNOがあれば、指示を整理してから送信します。はじめは少し手間に感じるかもしれませんが、1〜2週間続ければ自然にできるようになります。

Claude Codeとのやり取りを「積み上げ型」で進める考え方

Claude Codeとのウェブサイト制作を「一発で完成形を出させるもの」と考えると、どうしても指示が長くなり、複数の要求を詰め込みたくなります。

そうではなく、「一歩ずつ積み上げていくもの」と考えると、指示は自然に短くなり、修正も一つずつになります。

家を建てるとき、土台→柱→屋根→内装という順番で進むのと同じように、Claude Codeとのサイト制作も、構造→レイアウト→スタイリング→細部という順番で積み上げていく。この考え方が根づいたとき、「なんか違う」は自然に減っていきます。

積み上げ型の指示が、イメージ通りのサイトへの最短ルート。

よくある質問：Claude Codeとウェブデザインについて

Q：Claude Codeはデザインセンスがないのでしょうか？

A：Claude Codeにデザインセンスがないわけではありません。膨大なウェブデザインの学習データをもとに、構造的に整ったコードとデザインを生成できます。ただし、「センス」を発揮するためには、方向性を示す情報（ターゲット・目的・スタイルの言語化）が必要です。これがない状態では、平均的に正しい汎用デザインを出すことしかできません。センスを引き出すのは、指示を出す人間側の役割です。

Q：プログラミング知識ゼロでもClaude Codeでサイトは作れますか？

A：基本的なウェブサイトであれば、プログラミング知識がなくても作ることは可能です。ただし、出力されたコードのどこを修正すべきかの判断や、ブラウザでの確認・デプロイといった作業には最低限のリテラシーが必要です。コードを書く知識よりも、「どんなサイトを誰のために作るか」を言語化する力の方が、Claude Codeを使ったサイト制作では重要なスキルになります。

Q：指示を短くしすぎると情報が足りなくなりませんか？

A：「短い指示＝情報が少ない」ではありません。重要な情報を絞り込んで伝えることが「短い指示」の本質です。ターゲット・目的・依頼内容・スタイルの4点がそろっていれば、文字数が少なくても十分な情報量になります。逆に、あれもこれも詰め込んだ長い指示は、重要情報が埋もれて情報量が実質的に下がります。短く・密度高く・一点集中、これがClaude Codeへの指示の理想形です。

Claude Codeの能力を引き出すのは、指示を出す側の言語化力。

まとめ

Claude Codeでウェブサイトを作っているときに「なんか違う」が続く原因は3つです。

この3つを意識するだけで、Claude Codeとのやり取りの質は大きく変わります。浜松市でWEBデザイナーとして日々クライアントのサイトを作る中でわたし自身が実感してきたことであり、同じ壁で悩んでいる方に届けたかった内容です。

Claude Codeは、正しく使えば非常に強力な制作パートナーになります。ぜひ今回の内容を実践して、イメージ通りのウェブサイトを作り上げてください。