Claude Codeでデザイン面でも見劣りしないWebサイトを構築する方法

結論から言うと:Claude Codeでも、生成されたものではなく、デザインされたように見えるWebサイトは作れます。ただし、初期設定に頼らせないことが条件です。実際のデザインシステムをトークンとして渡し、ルールをCLAUDE.mdファイルと仕様書に書き込み、人が承認できる小さなフェーズで作り、コントラスト、トークン、アクセシビリティ、速度のチェックを加えて、ズレが出たらビルドが失敗するようにします。

試したマーケターの多くが、同じ結果にたどり着きます。最初のページはすぐにできあがり、ぱっと見は悪くありません。ところが、Interフォント、紫のグラデーション、2つのボタンの上に中央揃えの見出し、同じ見た目のカード3枚に気づき、これとそっくりのサイトを何度も見たことがあると悟ります。

このガイドは、Claude Codeでマーケティングサイトを新規に作る、またはリビルドして、自社ブランドらしい仕上がりにしたいマーケターや創業者に向けたものです。AIが作るサイトが無個性になる理由、コードを書かせる前にClaudeに何を渡すべきか、制作中に品質をどう保つか、検索流入を失わずに古いサイトを置き換えるにはどうするかを取り上げます。全体を通じた事例は、2026年11月にWebflowからClaude Codeでリビルドしたsaas-hackers.com自体です。このプロジェクトの結果として引用する数字は、すべてプロジェクト自身の記録によるものです。

Claude Codeで見栄えの良いWebサイトは作れるのか

Claude Codeは、プロジェクトを読み取り、コードを書いて編集し、コマンドを実行し、自分の作業を自分で確認するAIコーディングツールです。マーケティングサイトであれば、フレームワークのセットアップ、コンポーネントの構築、CMSの接続、テストの実行までを任せられます。一方で、サイトがどうあるべきか、各ステップが十分な出来かどうかは、人が判断します。

はい、周辺の作業を正しく行えば可能です。Claude Codeはエンジニアリングが得意で、制作の中でも繰り返しの多い部分を素早くこなします。ただし、あなたのブランドも、買い手も、チームが会議で決めたことも知りません。その空白は、これまでに最もよく見てきた選択肢で埋められてしまいます。サイトの見栄えを左右するのは、制作の前と周辺で行う作業、つまりデザインシステム、文書化したルール、チェックです。

パイプラインのためにサイトに何をさせたいかがまだ固まっていない場合は、まずB2B SaaSのWebサイト戦略ガイドをご覧ください。このガイドは、必要なページが決まっていて、それらをきちんと作りたい方を想定しています。

AIが作ったWebサイトはなぜどれも似てしまうのか

AIが作ったWebサイトが似通うのは、言語モデルが次に最も可能性の高い選択肢を選ぶためで、Webデザインで最も可能性が高いのは無難な選択だからです。Anthropicはこれを分布の収束と呼んでいます。無難なデザインの選択が学習データの大半を占めるため、指示がなければモデルはその確率の高い中心からサンプリングします(Anthropic, 2025)。

Anthropicのフロントエンドチーム自身も、その結果をはっきり述べています。ガイダンスなしでランディングページを作らせると、モデルは「ほぼ必ず、Interフォント、白背景に紫のグラデーション、控えめなアニメーションに落ち着く」とのことです(Anthropic, 2025)。これではブランドのアイデンティティが損なわれ、AIが作ったインターフェースだと見抜かれやすく、軽く扱われやすくなる、というのが彼らの指摘です。

知っていれば、見分けるのは簡単です。

• どこもかしこもInter、Roboto、システムフォントで、見出しと本文でウェイトがほとんど変わらない
• 紫やバイオレットのグラデーション、グラデーションで塗りつぶした見出し文字
• ピル型のバッジ、見出し、サブ見出し、2つのボタンが並ぶ、中央揃えのヒーロー
• 内容に関係なく、ヒーローの下に並ぶ同じ見た目のカード3枚
• あらゆる要素に同じ角丸とやわらかなグレーの影
• どの項目にも添えられた絵文字や、ありふれた線画アイコン

同じ調査から、抜け出す方法も見えてきます。Claude は非常に誘導しやすく、避けてほしいデフォルトと、代わりに使ってほしいものを伝えるだけで、出力はすぐに改善されます(Anthropic、2025年)。

Anthropicはそのガイダンスを、フロントエンドデザインのスキルとClaude Codeのプラグインとしてまとめています。さらに、自社のデザインシステムに基づいて独自のスキルを作れるとも述べています。企業のWebサイトにとって重要なのは、この最後の点です。

「面白いフォント」といった一般的なアドバイスでは、別のありきたりなサイトができるだけです。自社のデザインシステムがあれば、自社らしいサイトになります。

プロンプトではなく、デザインシステムから始める

AIで作るサイトにおけるデザインシステムとは、Claudeが読み取れる、名前の付いた決定事項の集まりです。色、フォント、文字サイズ、余白、角丸、ブレークポイントがあり、それぞれに役割があります。デザイントークンとしてファイルに書けば、サイトが使ってよい唯一の値になります。

ブランドガイドラインのPDFとの違いは、トークンが機械で読める点です。PDFには、アクセントカラーはオレンジと書かれています。トークンファイルには、次のように書かれています。 brand.flame は #df4e32 であり、ロゴ、矢印、有効なフィルター、入力フォーカスにのみ使い、それ以外には使わない、と。後者ならClaudeは正確に従えますし、従ったかどうかはスクリプトで確認できます。

Claude Codeでの制作に使えるデザインシステムには、次のものが含まれます。

• 役割を持つカラートークン。背景、テキスト、見出し、控えめなテキスト、罫線、1つのシグナルカラー、そしてそれらを組み合わせるテーマ(たとえばダークテーマとライトテーマ)。
• タイポグラフィ。セルフホストのライセンスを持つブランドフォントのファイル、サイズ差のはっきりしたタイプスケール、各レベルで使うウェイト。
• 余白、角丸、ブレークポイント。余白のスケール、役割ごとの角丸(ボタン、カード、セクション)、レイアウトが切り替わる画面幅。
• 名前を1つに統一したコンポーネント。ボタン、カード、ヒーローは、デザインファイル、コード、CMSのどこでも同じ名前で呼びます。そのため、誰も読み替える必要がありません。

どこから用意するのでしょうか。デザイナーやFigmaライブラリがあるなら、そこからトークンをエクスポートします。

気に入っている既存サイトがあれば、そのスタイルシートからトークンを読み取れます。SaaS Hackersのリビルドではそうしました。どちらもない場合は、何かを作る前に、この部分についてはデザイナーに費用を払って依頼してください。デザインの意思決定に1日かけるほうが、他社と同じに見えるサイトを作るより安く済みます。

システムを定着させるには、技術面での選択が1つあります。Tailwind CSSを使う場合は、デフォルトのテーマをインポートしないでください。代わりにトークンファイルからテーマを生成し、プロジェクトに存在する色、サイズ、フォントを自社のものだけにします。存在しない既成の紫を、Claudeが手に取ることはできません。

Claudeに向けてルールをどう書き出すか

Claude Codeはセッションの開始ごとにCLAUDE.mdというファイルを読み込むため、プロジェクトのルールはここに書きます。プロジェクトのCLAUDE.mdはリポジトリ内に置かれ、ソース管理を通じて関係者全員と共有されます(Claude Code docs, 2026)。

Anthropicによる書き方のガイダンスは実践的です。CLAUDE.mdは1つあたり200行程度までに抑えます。長くなるとコンテキストの消費が増え、Claudeが従う精度も下がるためです。

指示は確認できる程度に具体的にします。「変更内容をテストする」ではなく、「コミットする前に次を実行する」のように書きます。ルールは見出しごとにまとめ、互いに矛盾するものは削除します(Claude Code docs, 2026)。 npm test 「変更をテストする」ではなく、「コミットする前に」と具体的に書きましょう。ルールは見出しごとにまとめ、互いに矛盾するものは削除します(Claude Code docs、2026年)。

白紙から始める必要もありません。 /init コマンドを使えば、コードベースをもとに最初のファイルの下書きが作られます。

Webサイト制作で機能するCLAUDE.mdは、次の5つをカバーします。

1. 何を、何で作るのか。技術スタック、ホスティング、コンテンツの置き場所。
2. 禁止リスト。起きてはならないこと。公開中のURLの変更、シークレットのコミット、確認なしでの有料サービスやサードパーティスクリプトの追加、誤ったCMSプロジェクトへの書き込みなど。
3. 基準。トークン以外の色、サイズ、フォントは使わない。コンポーネント名はどこでも1つに統一する。デフォルトは静的出力。WCAG 2.2 AA。イギリス英語またはアメリカ英語。
4. Claudeが追加するテキストのための文章ルール。平易な言葉を使い、コピーを勝手に作らない。文章がまだない箇所には、見落としようのないプレースホルダー(大文字のCOPY NEEDEDと、足りない内容)を置く。
5. コマンド。開発サーバー、ビルド、各チェックの実行方法。Anthropicのベストプラクティスは、チェックを実行するコマンドを、ファイルの中で最も役立つ1行だとしています(Claude Code docs, 2026)。

CLAUDE.mdはあくまでガイダンスであり、強制力はありません。Claudeはこれをコンテキストとして扱い、ある指針が当てはまらないと判断することもあります。フォーマッターの実行やシークレットファイルを読まないことなど、毎回必ず行わせたいことには、ツール側が適用するフックと権限ルールがClaude Codeに用意されています(Claude Code docs, 2026)。

長めのブリーフは、別の仕様ファイルにまとめてください。Anthropicは、Claudeに仕様を書けるようになるまでインタビューしてもらい、それをSPEC.mdとして保存し、新しいセッションを開いてその仕様から構築を始めることを勧めています。こうすると、まっさらなコンテキストと文書化された完了条件から構築を始められます(Claude Code docs、2026年)。ブランドやデザインのルールのうち、必要な場面が限られるものは、スキルにしておけば必要になるまで邪魔になりません。仕組みについては、マーケティングチーム向けClaude Skillsの解説記事で説明しています。

人が承認できる小さなフェーズに分けて作る

Claude Codeで作るWebサイトは、経験の浅い開発者が作るWebサイトと同じ形で失敗します。一度に多くを進めてしまい、最後まで誰もチェックしないのです。対処法も同じです。構築をフェーズに分け、各フェーズをレビューし、前のフェーズが承認されるまで次に進まないでください。

マーケティングサイトでうまくいくフェーズの順序は次のとおりです。

1. セットアップ。フレームワーク、スタイリング、CMS、ホスティングを接続し、空のページをプレビューリンクにデプロイします。
2. コンテンツモデルと移行。CMSのスキーマを作成し、既存のコンテンツを下書きとして移します。
3. デザインシステム。トークン、フォント、すべてのコンポーネントを、1つのカタログページに表示します。
4. テンプレートとページ。各ページタイプをコンポーネントから組み立て、実際のコンテンツを入れます。
5. SEO。headタグ、構造化データ、サイトマップ、リダイレクトを整え、旧サイトと照合してチェックします。
6. 公開。プレビュー、エディターのワークフロー、コンテンツ更新時にサイトを再構築する仕組みを整えます。

各フェーズの最後には、プルリクエストと、人がクリックして確認できるプレビューリンクを用意します。プルリクエストには、何を作ったか、何をチェックして何が見つかったか、Claudeがどんな前提を置いたか、何が残っているかを書きます。最後の見出しは、未解決の疑問を、こっそり推測で済ませずに表に出すための場所です。

コンポーネントカタログが重要な理由

カタログは、すべてのコンポーネントをすべての状態で見せる1枚のページです。各ボタンのスタイル、各カード、開いた状態と閉じた状態のヘッダー、エラー表示付きのフォームフィールド、サンプルコンテンツ入りの各セクションブロックが並びます。テンプレートが使う前に、見た目を承認する場所です。カタログで1度カードを直すほうが、200ページで間違いを見つけるよりはるかに安上がりです。カタログはサイトマップに含めず、noindexに設定してください。

カタログは、デスクトップだけでなくスマートフォンの幅でも確認してください。ありがちなAI製サイトの多くは、まずスマートフォンで崩れます。文字が小さすぎる、カードが窮屈すぎる、メニューが重なるといった具合です。

AIが作ったWebサイトの品質を保つチェックとは

チェックがあるから、良いスタートが平凡な仕上がりに流れずに済みます。Anthropicのベストプラクティスは簡潔にこう述べています。Claudeは作業が終わったように見えると止まるので、合格か不合格かが返ってくるものを渡せば、人が目にする前に自分でミスを直せるのです(Claude Code docs、2026年)。

マーケティングサイトでは、次のチェックを組み込む価値があります。ビルド自体にこれらを実行させれば、失敗はToDoリストに積まれるのではなく、デプロイを止めます。

• トークンが最新であること。生成されたスタイルシートがトークンファイルと一致していることを確認します。どちらか一方だけが編集されることを防ぎます。
• コントラスト。すべてのテーマで、すべてのテキスト、フォームフィールド、フォーカスの組み合わせがWCAG 2.2 AAを満たします。通常のテキストは4.5:1以上、大きなテキストは3:1以上が必要です(W3C、2023年)。フォーカスリングと、コントロールを示す枠線にも3:1が必要です。
• トークンのlint。 トークンではない色、サイズ、フォントがコード内にあると失敗するスクリプトです。16進コードも、 rgb()も、コンポーネントに直接書かれたピクセルサイズも、フォント名も許しません。
• コンポーネント名。CMSのすべてのセクションブロックに同名のコンポーネントがあり、その逆も成り立つことを確認します。
• アクセシビリティスキャン。各ページタイプでaxeなどの自動スキャンを行い、キーボードチェックも加えます。マウスなしで、すべてのメニュー、フィルター、フォームに到達して使えるでしょうか。
• 速度。トップページと主要テンプレートについて、モバイルでLighthouseを複数回実行します。速度スコアが何を測っているかは、Core Web Vitalsの解説記事で説明しています。
• 実際の画面幅でのレイアウト。スマートフォン、タブレット、デスクトップの幅でスクリーンショットまたはオーバーフロースキャンを行い、テキストがボックスからはみ出していないかを確認します。

毎回、Claudeに証拠を求めてください。実行したコマンドとその出力です。「すべてのチェックに合格」とだけ言われても、分かることはほとんどありません。出力を読むほうが、自分でもう一度実行するより速いのです(Claude Code docs、2026年)。

そのうえで、ご自身の目でページを確認してください。自動チェックで拾えるのは、測定できるものだけです。ページがテンプレートっぽく見えることまでは分かりません。

検索流入を失わずに既存サイトを置き換えるには

稼働中のサイトの入れ替えは移行作業であり、リスクは見た目が悪くなることよりも、順位を失うことにあります。身を守るルールは、旧サイトに存在するすべてのURLを、新サイトでも正確に同じアドレスで維持するか、適切なページへの恒久リダイレクトを設定することです。

Claude Codeは、反復的で正確さが求められるチェックに向いています。リビルドでは、切り替える前に3つのチェックを設定してください。

• ルートチェック:旧サイトマップのすべてのアドレスが新しいプレビューで200を返し、存在しないアドレスは404を返すことを確認します。
• パリティチェック:すべてのアドレスについて、title、メタディスクリプション、canonical、H1、構造化データを公開中のページと比較し、失われたものがあれば失敗とします。
• リダイレクトチェック:旧プラットフォームが持っていたリダイレクトをすべて再作成し、チェーンを解消して、再びリダイレクトするページへ転送されるものがない状態にします。

Claudeに「整理のため」にスラッグを変更させてはいけません。「公開中のサイトに存在するURLは決して変更しない」を禁止リストに入れてください。全体像については、SEO戦略ガイドで説明しています。サイトの規模が大きい場合やトラフィックが非常に重要な場合は、SEO移行に対応するエージェンシーの一覧から選んだエージェンシーに移行計画を任せ、構築はClaudeに任せることもできます。

実践:Claude CodeでSaaS Hackersをリビルドした方法

SaaS Hackers(Team 4が運営)は、2026年11月にWebflowからAstro、Tailwind CSS、TypeScript、Sanity、Netlifyへ移行し、構築はClaude Codeが担当しました。見た目についての方針は明確でした。現在のデザインを再現し、リデザインはしないというものです。Figmaファイルもデザインシステムもなかったため、デザインシステムは公開中のサイトから作りました。

これがアプローチを決めました。色、フォント、余白、角丸の値を、公開中のスタイルシートから読み取ってトークンファイルにまとめた結果、26個のカラートークンと3つのテーマ(ダーク、ブラック、ライト)になりました。ブランドのディスプレイフォントであるHemingはセルフホスティングのライセンスがあり、Interはオープンソースなので、どちらもセルフホストしました。

Tailwindのデフォルトテーマはインポートせず、使える値をトークンだけにしました。ヘッダー、フッター、カード、専門家プロフィールの各パーツ、フォームフィールド、投稿本文、14個のセクションブロックを、対応するCMSブロックとともに構築し、コンポーネントカタログに表示しました。

4つのデザインチェック(トークン、コントラスト、トークンlint、コンポーネント名)は、毎回のビルドの冒頭で実行され、1つでも失敗すればビルドを止めます。コンポーネントは、どのテンプレートが使うよりも前に、スマートフォンとデスクトップの幅で承認されました。

プロジェクト自身の記録から、どれほど堅実だったかが分かります。

• テンプレートの完成時点で、axeは13ページで違反を0件と判定しました。
• 同じ段階で、対象の409アドレスすべてがプレビューで200を返しました。
• 409アドレスすべてが、パリティチェック(title、description、canonical、H1、スキーマ)で公開中のWebflowのページに勝り、欠落はありませんでした。
• 本番環境でのモバイルLighthouseを、英語とドイツ語のトップページ、投稿、専門家プロフィールについてそれぞれ3回実行したところ、パフォーマンスは99から100、アクセシビリティとベストプラクティスは100でした。
• 7言語、11のページタイプを4つの画面幅で行ったオーバーフロースキャンでは、問題は見つかりませんでした。

違いを生んだのは単純なことです。トークンファイルがすでに決めていたので、Claudeは色もフォントも選ぶ必要がありませんでした。そして、次のフェーズが始まる前に人が各フェーズをレビューしたため、問題は公開ページではなくカタログで見つかりました。Claudeがチームより速くこなしたのは、反復的な作業です。コンテンツの移行、公開までに設定した134件のリダイレクト、変更のたびに同じチェックを繰り返すことでした。エージェントやガードレールを含め、サイトが日々どう運用されているかは、エージェンティックWebサイトのためのClaude Code技術スタックのガイドで紹介しています。

よくある失敗と、その避け方

AIによるWebサイト構築の失敗の多くは、ごく少数の理由のどれかによるものです。それぞれ、対処法は単純です。

「ホームページを作って」から始める。Claudeはあらゆる空白をデフォルトで埋め、ホームページがその後のすべての見た目を決めてしまいます。先にデザインシステムとCLAUDE.mdを書き、次にコンポーネントを作り、最後にページを作ってください。

ブランドを形容詞で説明する。「力強い、モダン、信頼できる」では、モデルが行動に移せる情報になりません。トークン、フォントファイル、気に入ったページのスクリーンショットを渡してください。Anthropicのドキュメントでは、デザインのスクリーンショットをそのままプロンプトに貼り付けることを勧めています。

1回のセッションですべてを構築する。長いセッションでは、初期の決定事項を見失います。フェーズごとに作業し、仕様から新しいセッションを始め、1回の変更はレビューできる大きさに抑えてください。

「完了しました」をそのまま信じること。Claude が報告するのは、あくまで自分が正しいと考えている内容です。ビルド時にチェックが実行されるようにし、その出力を提示させ、承認する前にスマートフォン幅のプレビューを必ず自分の目で確認してください。

どこからともなくコピーが現れること。AI によるビルドでは、余白を埋めるためにもっともらしい見出しやお客様の声が書かれることがあります。CLAUDE.md で創作コピーを禁止し、目に見えるプレースホルダーを使うことで、偽の文章が公開サイトに載らないようにしましょう。実際のコピーの書き方については、Claude をコピーライティングに活用するガイドで解説しています。

デザイナーやエージェンシーに頼むべきなのはどんなときか

Claude Code は、ビルドにかかる時間の多くを短縮してくれます。ただし、デザインの判断までは代わってくれません。デザインシステムがないとき、ブランド自体の見直しが必要なとき、あるいはサイトが見込み客に評価されるうえで最大の接点となり、「まずまず」では足りないときは、デザイナーに依頼しましょう。

現実的な分担としては、デザインシステムと主要ページのデザインをデザイナーに依頼し、それをもとに上記のチェックを課したうえで Claude Code に構築させる方法があります。デザイナーの成果物は比較の基準にもなります。Claude が作ったものは、言葉による説明よりもモックアップと照らし合わせるほうがはるかに確実に検証できます。この部分を任せられるフリーランスは、B2B SaaS ブランド向けのウェブデザイナーの一覧からお探しください。

戦略、デザイン、構築、移行、そして問題が起きたときの責任の所在まで、すべてを任せたい場合は、エージェンシーに依頼しましょう。ビルドの工程で AI をどのように使っているか、公開前にどのようなチェックを行うかを確認してください。プロジェクト全体を任せたい場合は、依頼先を決める前にB2B SaaS 向けのおすすめウェブデザインエージェンシーを比較してみてください。

SaaS Hackersについて

SaaS Hackers は、B2B SaaS の専門家が実践的な知見を共有するコミュニティで、成長を支える実務家たちによって運営されています。実践的なガイドやテンプレートに加え、B2B SaaS のデジタルマーケティングで確かな実績を持つエージェンシーや専門家を厳選したディレクトリを公開しています。SaaS Hackers は Team 4 が運営しており、このサイトは本ガイドで紹介している手法を用いて Claude Code で再構築しました。