Claude Codeのサイトが素人っぽい原因と解決策

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

Claude Codeを使ってサイトを作ってみたはいいけれど、完成したページを見て「なんか……素人っぽいな」と感じたことはありませんか？コードは確かに動いているし、AIが生成してくれたHTMLもCSSも文法的には正しい。それなのに、なぜかプロが作ったサイトと並べると一目で違いがわかってしまう。あの「なんか微妙」という感覚、実はとても多くの方が経験しています。

私自身、WEBデザイナーとして10年以上浜松市でサイト制作に携わってきましたが、Claude Codeが登場してから「AIで作ったんですが、どこか垢抜けないんです」と相談を受ける機会が急増しました。エンジニアではないスタートアップの経営者さん、副業でサイト制作を始めたばかりの方、ポートフォリオを自作したいデザイン学習者さんなど、バックグラウンドはさまざまです。でも悩みの核心は共通しています。「AIに作らせたのに、なぜプロっぽくならないのか」という疑問です。

この問題が起きる理由はシンプルです。Claude Codeはコードを書く能力は非常に高いのですが、デザインの美しさはコードの正確さとはまったく別の話だからです。余白のバランス、フォントの選び方、色の使い方、視線の流れ——こういった「感覚的に見える」部分には、実は明確なルールと原則があります。そしてそのルールをAIに正しく伝える方法を知っているかどうかで、アウトプットの質はまるで変わります。

この記事では、Claude Codeで作ったサイトが「素人っぽく見える」具体的な原因を一つひとつ解説しながら、それぞれの解決策と、Claude Codeへの正しい指示の出し方をお伝えします。デザインの専門知識がなくても、この記事で紹介する「伝え方のコツ」さえ押さえれば、AIが出力するコードのクオリティは格段に上がります。

最後まで読むと、Claude Codeへの指示をアップデートするだけで、今日から「それ、プロが作ったんですか？」と言われるレベルのサイトが作れるようになります。

では早速、素人っぽさの正体から探っていきましょう。

「素人っぽい」の正体はデザイン原則の欠如にある

プロのデザインと素人デザインの本質的な違い

WEBデザインを学び始めた頃、私が最初に教わったのは「デザインとは感性ではなくロジックだ」という言葉でした。プロのデザインがなぜ美しく見えるかには必ず理由があり、その理由を言語化できます。逆に素人っぽく見えるデザインには、共通して「4つの基本原則」のどれかが欠けています。

それが近接・整列・反復・対比という原則です。これはデザイナーのロビン・ウィリアムズが提唱した考え方で、今でもWEBデザイン教育の現場で使われています。Claude Codeに指示を出す際も、この4原則を意識して言語化するだけで、生成されるデザインの質は大きく変わります。

Claude Codeはこれらの原則を知っています。しかし、指示に「デザインの原則を守ってください」と書いても効果は薄い。重要なのは具体的な数値や条件として原則を指示に落とし込むことです。

「なんか素人っぽい」の正体は、デザインの4原則（近接・整列・反復・対比）のいずれかが守られていないことにある。

AIはデザインの「意図」を自動補完しない

Claude Codeは非常に優秀ですが、一つ大きな前提があります。それは「あなたがどんなサイトにしたいか」を明示しない限り、AIは無難な平均点を出してくるということです。

たとえば「コーポレートサイトを作って」と指示した場合、Claude Codeは世の中の一般的なコーポレートサイトの平均的な見た目を出力します。これは間違いではありませんが、平均的なデザインは記憶に残らないという問題があります。

浜松市の制作案件でも同じことがあります。「普通のホームページを作って」とオーダーされたとき、デザイナーは「普通」の中にも意図を込めます。ターゲットの年齢層、業種のイメージ、競合との差別化——こうした文脈をAIに伝えることが、クオリティアップの第一歩です。

「動く」と「見える」は別のスキルセット

Claude Codeが得意なのはコードを書くことです。HTML・CSS・JavaScriptの文法を正確に守り、バグなく動くコードを生成することに関しては、多くのエンジニアよりも速く正確です。

しかし「見た目が美しいかどうか」はコードの正確さとは無関係です。たとえば、paddingの値が`16px`でも`24px`でも、どちらもエラーなく動きます。でも視覚的なバランスはまったく異なります。この判断をAIに任せると、「動くけど微妙」なデザインが生まれる原因になります。

原因1：余白（ホワイトスペース）の使い方が間違っている

素人デザインの最大の特徴は「詰め込みすぎ」

私がクライアントのサイトを見直すとき、最初に確認するのは余白です。素人っぽいサイトの9割は、余白が足りないか、余白が均一すぎます。情報を全部見せようとするあまり、ページの中にコンテンツを詰め込みすぎてしまうのです。

Claude Codeがデフォルトで生成するCSSは、余白の設定が控えめな傾向があります。これは「最低限動く」コードを生成することが優先されているからです。余白を意図的に広げる指示を入れないと、窮屈な印象のサイトが出来上がります。

余白には「呼吸する空間」という役割がある

デザインにおける余白は「何もない無駄なスペース」ではありません。余白は読者の視線を誘導し、情報の優先順位を伝え、ブランドの格を表現します。Appleのサイトを見ると、テキストの周りに大胆な余白がとられていることに気づきます。あの余白があるからこそ「高級感」が生まれます。

逆に余白がないサイトは、チラシや安売りの広告に見えます。情報量が多くても、整理されていないと読まれません。

余白の指示は「広めに」ではなく、必ず「px数値」で指定する。数値指定があれば、AIはブレのないレイアウトを生成できる。

グリッドシステムを使った整列の指示方法

余白と並んで重要なのが整列（アライメント）です。素人っぽいサイトは要素がランダムに配置されていることが多く、視線がどこに向いていいかわからない状態になっています。

Claude Codeに「12カラムグリッドに基づいてレイアウトしてください」と指示するだけで、全要素が自動的にグリッドに揃います。これは非常に効果的な一言です。CSSのFlexboxやGridを使ったレイアウトの指示も有効です。

原因2：フォント選択と文字組みが適当になっている

AIが選ぶデフォルトフォントはなぜ安っぽく見えるのか

Claude Codeに「サイトを作って」と指示すると、多くの場合フォントにはシステムフォントかGoogle Fontsの定番フォントが使われます。これ自体は問題ではありませんが、フォントの組み合わせと使い方に工夫がないと一気に安っぽく見えます。

たとえば見出しにも本文にも同じフォントを使い、サイズだけで区別しているサイトは、メリハリがなく読みにくい。また、日本語フォントの指定が甘いと、OSによって表示が崩れることもあります。

浜松市のある飲食店のサイトを見直したとき、フォントをNoto Serif JPに変更しただけで「老舗感が出た」とオーナーさんに喜ばれた経験があります。フォント一つでブランドイメージは大きく変わります。

プロが使うフォントの組み合わせパターン

フォント選択で押さえるべき基本は「見出しと本文で異なる表情のフォントを組み合わせる」ことです。

Claude Codeへの指示では「Google Fontsから〇〇と〇〇を読み込み、見出しにはBoldウェイト、本文にはRegularを使ってください」と具体的に伝えましょう。

行間・文字間隔が読みやすさを左右する

フォントの種類だけでなく、line-height（行間）とletter-spacing（字間）も非常に重要です。この2つを指定しないと、AIはデフォルト値のままコードを出力するため、テキストが詰まって読みにくい印象になります。

WEBデザインの標準的な設定は、本文のline-heightが1.7〜1.8、日本語テキストのletter-spacingが0.05em前後です。見出しはletter-spacingを少し広めの0.1em程度にすると、読みやすく上品な印象になります。Claude Codeへの指示にこれらの数値を含めるだけで、文字の読みやすさが格段に改善されます。

フォント選択と文字組み（line-height・letter-spacing）の指定は、デザインの垢抜け度に直結する最重要ポイントの一つ。

原因3：色の使い方に統一感とルールがない

「とりあえず映える色」を使うと失敗する理由

色の使い方は、サイトの第一印象を決める最大の要素の一つです。素人っぽいサイトを分析すると、色数が多すぎる、または彩度が高すぎる傾向があります。AIに「カラフルにして」と頼むと、よく使われる色をたくさん使ったカラフルなサイトができあがります。でも、それがかえって安っぽく見える原因になります。

プロのデザインでは、カラーパレットは原則3色以内（メインカラー・アクセントカラー・背景色）で構成します。これに文字色（ほぼ黒）とグレー系の補助色を加えたとしても5色以内に収めるのが鉄則です。

彩度と明度のコントロールが「高級感」を生む

素人っぽいサイトによく見られるのが、彩度が高すぎる色の使用です。たとえば真っ赤（#FF0000）や真っ青（#0000FF）をそのまま使うと、ファストフードや安売りチラシのような印象になります。

プロのデザイナーは色を選ぶとき、彩度を少し下げ、明度を調整した「やや落ち着いた色」を使います。これだけで一気に洗練された印象になります。Claude Codeへの指示では「鮮やかすぎない、落ち着いたトーンの色を使ってください」と添えるか、具体的な16進数コードを渡すのが確実です。

コントラスト比はアクセシビリティと美しさの両立

色の使い方でもう一つ見落とされがちなのがコントラスト比です。背景色とテキスト色のコントラストが低いと、読みにくいだけでなく「なんとなく安っぽい」印象を与えます。

WCAG（ウェブアクセシビリティガイドライン）では、本文テキストのコントラスト比は4.5:1以上が推奨されています。Claude Codeに「アクセシビリティ基準（WCAG AA）を満たすコントラスト比を確保してください」と指示を加えることで、読みやすく美しいカラー設計が実現します。

カラーパレットは3〜5色で統一し、16進数コードで指定する。彩度を抑えた色を選ぶだけで、デザインの質は一段上がる。

原因4：コンポーネントの一貫性が保たれていない

ボタン・カード・フォームがバラバラな件

Claude Codeで複数のページや複数のセクションを作る場合、指示を分けて行うと、ボタンのデザインがページによって違う、カードの角丸の大きさが統一されていない、といった問題が起きます。これは「コンポーネントの一貫性がない」という問題で、サイト全体の完成度を大きく下げます。

人間の目は一貫性のなさに敏感です。ボタンが2種類あったり、見出しのスタイルがセクションによって違ったりすると、「このサイト、なんかバラバラだな」という違和感を無意識に感じ取ります。

デザインシステムをClaude Codeに最初に定義させる

この問題を解決する最も効果的な方法は、最初のプロンプトでデザインシステムを定義してから、コーディングを始めることです。

具体的には、コードを書いてもらう前に以下をClaude Codeに定義させます。

これをCSSカスタムプロパティ（変数）として定義したファイルを最初に作ってもらい、以降のすべてのコードでその変数を使うよう指示します。こうすることで、どのページを作ってもデザインの一貫性が保たれます。

角丸（border-radius）の統一が垢抜け感を決める

プロのデザイナーが細部にこだわる点の一つが、角丸の使い方です。ボタンは角丸8px、カードは角丸12px、画像は角丸16px……というようにバラバラにすると、サイト全体が統一感のないものになります。

角丸の哲学を一つ決めてください。「全体的にシャープな印象にしたいので角丸は最大4px」なのか、「柔らかく親しみやすい印象にしたいので角丸は12〜16px統一」なのか。この一つの決定がサイト全体の雰囲気を統一します。

コーディングを始める前にデザインシステム（変数）を定義することが、コンポーネントの一貫性を保つ唯一の近道。

原因5：レスポンシブデザインが「とりあえず動く」止まり

スマホ表示が崩れていないのに素人っぽい理由

「スマホでも崩れていないのに、なぜか素人っぽく見える」という相談は非常に多いです。これはレスポンシブ対応の「質」の問題です。

Claude Codeが生成するレスポンシブデザインは、基本的に「崩れないようにする」ことが目標です。しかし、プロのレスポンシブデザインは「各デバイスサイズに最適化した美しさ」を追求します。単純にカラム数を変えるだけでなく、スマホではフォントサイズを少し上げ、余白を調整し、タッチしやすいボタンサイズにする——こういった細かい最適化が「仕上がりの差」を生みます。

モバイルファーストの指示が仕上がりを変える

Claude Codeへの指示で「モバイルファーストで設計してください」と伝えることは、見た目の質を上げるための重要なキーワードです。モバイルファーストとは、スマホのデザインを先に作り、そこからPCに拡張していく考え方です。

このアプローチで作られたサイトは、スマホ表示の完成度が高く、情報の優先順位が明確になります。結果として、PCで見たときも整理されたデザインになります。

画像の最適化指示を忘れずに

レスポンシブの文脈で見落とされがちなのが画像の扱いです。スマホで大きな画像がそのまま表示されると、読み込みが遅くなるだけでなく、画像のトリミング位置が意図しない部分になることがあります。

Claude Codeに「<img>タグにはwidth:100%; height:auto; object-fit:cover; を基本として設定し、<picture>タグとsrcset属性を使ってデバイスごとに最適な画像サイズを指定してください」と伝えると、画像周りのコードも品質が上がります。

「崩れないレスポンシブ」から「美しいレスポンシブ」へ。モバイルファーストと具体的なブレイクポイント指定が品質の差を生む。

Claude Codeへの「デザイン品質を上げる指示テンプレート」

プロのWEBデザイナーが使う指示文の構造

ここまで5つの原因を解説してきましたが、それらをまとめて解決するための指示テンプレートを紹介します。私が実際にClaude Codeを使うときに土台として使っている構造です。

指示文は大きく「目的・背景」「ターゲット」「デザイン原則」「技術仕様」「制約・NGリスト」の5ブロックで構成します。このブロック構造で指示を書くと、AIへの情報伝達効率が上がり、アウトプットの質が安定します。

コピペで使えるデザイン品質向上プロンプト

以下は私が浜松市の案件で実際に活用しているベーステンプレートです。案件に合わせてカスタマイズして使ってください。

# サイト制作依頼

## 目的・背景
[サイトの目的を記述]

## ターゲットユーザー
[年齢・性別・職業・デバイス利用傾向]

## デザイン仕様
- カラーパレット：メイン #2563EB / アクセント #F59E0B / 背景 #F8FAFC
- フォント：見出しNoto Serif JP Bold、本文Noto Sans JP Regular
- 本文line-height: 1.8、letter-spacing: 0.05em
- 見出しletter-spacing: 0.1em
- border-radius統一：カード12px / ボタン8px / 画像16px
- スペーシング：8px基準（8, 16, 24, 32, 48, 64, 80, 120px）
- セクションpadding：上下80px（スマホは40px）

## 技術仕様
- モバイルファースト、CSS変数で管理
- ブレイクポイント：767px / 1023px / 1280px
- WCAG AAコントラスト比準拠
- clamp()でfluidタイポグラフィ

## 禁止事項
- 指定外の色の使用
- インラインスタイルの多用
- フォントの4種類以上の使用

反復改善のサイクルをClaude Codeで回す方法

最初から完璧なデザインを一発で出力させようとするよりも、段階的に改善するサイクルを回す方が最終的に質の高いアウトプットが得られます。

最初にベーシックな構造を作らせて、次にデザインの細部を指定して修正させる。さらに実際にブラウザで確認してから「ここの余白がまだ狭い、このフォントサイズをもう少し大きく」という具体的なフィードバックを入れる。この反復改善のサイクルを3〜5回回すと、デザインの質は格段に向上します。

Claude Codeへの指示は「1回で完成」を目指すより、5ステップの反復改善サイクルで回す方が最終的な品質が高くなる。

まとめ

「素人っぽさ」の原因と解決策を整理する

Claude Codeで作ったサイトが素人っぽく見える原因は、AIのせいではなく、指示の精度の問題です。デザインの知識を言語化してAIに伝える技術が身につけば、Claude Codeは非常に強力なデザインパートナーになります。

今回解説した5つの原因と解決策をまとめます。

WEBデザイナーとして10年以上のキャリアの中で学んできたことは、デザインは感性ではなくロジックだということです。そのロジックを言語化する力さえあれば、Claude Codeは「自分だけのWEBデザイナー」として機能します。

今日からプロンプトに一つでも改善を加えてみてください。「なんか素人っぽい」という感覚は、必ず「これ、プロが作ったみたい」に変わります。

Claude Codeは優秀なパートナー。垢抜けたサイトを作れるかどうかは、デザインの言語化力にかかっている。