Claude Codeを使うと、ホームページの設計、HTML・CSS作成、WordPress修正、テストまでをターミナルから進められます。ただし、見た目が完成しただけでは公開品質とはいえません。本記事では、要件定義、環境準備、制作手順、SEO、スマホ表示、フォーム、計測、セキュリティ、公開後改善までを実務順に解説します。
Claude Codeでホームページを作るときは、いきなり全ページを生成せず、1ページの構造→デザイン→機能→SEO→PC/SP検証→公開の順で合格させます。既存サイトでは必ず変更対象と権限を限定します。
公開：2026年6月10日 最終リライト：2026年9月10日
- Claude Codeとは
- Claude Codeで作れるホームページ
- 制作前に決める8項目
- Claude Codeの導入と起動
- ホームページ制作の10ステップ
- Claude Codeへ渡す制作依頼テンプレート
- サイトマップとページの役割を設計する
- デザインシステムを先に作る
- ファーストビューを作る要素
- WordPressでClaude Codeを使う方法
- SEO内部対策を実装する
- フォームとGA4を設計する
- スマートフォン表示の検証項目
- サイト速度を改善する
- Claude Codeの権限とセキュリティ
- Claude Codeで起きやすい失敗
- 公開前チェックリスト
- 公開後30日の改善方法
- 会社・サービス情報をAIに作らせる前の確認
- コピーライティングを作る順番
- 画像とアイキャッチを設計する
- アクセシビリティを公開条件に含める
- 開発環境・検証環境・本番を分ける
- CLAUDE.mdへ書くプロジェクトルール
- 自動テストと目視確認を分ける
- ホームページ制作費をどう考えるか
- 内製と外注の役割分担
- 保守運用の月次チェック
- 既存ホームページを改善する場合の進め方
- Claude Codeを使った制作の完成条件
- 関連記事
- まとめ
- よくある質問
- 参照した一次情報
Claude Codeとは
Claude Codeは、プロジェクトのファイルを読み、コードを編集し、コマンドやテストを実行できるAnthropicのコーディングエージェントです。公式ドキュメントでは対話モード、非対話のprintモード、ツール許可、モデル指定、セッション再開などが案内されています。
ホームページ制作では、文章案だけでなく、コンポーネント、レスポンシブCSS、フォーム処理、ビルド、テストへ進められます。その分、誤変更を実際のファイルへ反映できるため、権限とレビューが重要です。
Claude Codeで作れるホームページ
| 種類 | 主な実装 | 人が準備する情報 |
|---|---|---|
| コーポレートサイト | 事業、会社、実績、採用、問い合わせ | 正しい会社情報、法的表示、素材 |
| サービスLP | FV、課題、価値、事例、料金、FAQ、CTA | 顧客課題、実績、オファー、CV |
| メディア | 記事、カテゴリ、著者、関連記事、検索 | 編集方針、キーワード、一次情報 |
| 採用サイト | 職種、社員、制度、応募フォーム | 募集条件、写真、個人情報方針 |
| 簡易ツール | 診断、計算、検索、ダッシュボード | 判定ロジック、保存、計測、免責 |
制作前に決める8項目
- サイトの目的と最重要CV
- 想定読者、流入経路、解決する課題
- 必要ページと各ページの役割
- ブランド色、フォント、写真、参考デザイン
- CMS、ホスティング、ドメイン、フォーム
- 計測するGA4イベントと広告タグ
- 公開責任者、更新担当、問い合わせ先
- 予算、期限、保守、改善サイクル
「高級感」「今風」のような表現は、色、余白、文字サイズ、写真の方向性、避けたい例へ具体化します。競合サイトを参考にしても、文章、画像、ロゴ、独自の構成をコピーしません。
Claude Codeの導入と起動
公式セットアップでは対応OS、Node.js、ネットワーク等の要件が案内されています。WindowsではWSLまたはGit for Windowsを利用する方法があります。環境は変わるため、インストール前に公式ドキュメントの最新条件を確認してください。
# 例：公式ドキュメントで案内されるnpm経由の導入 npm install -g @anthropic-ai/claude-code # プロジェクトへ移動して起動 cd your-project claude # 状態確認 claude doctor
管理者権限での無理なインストールや、出所不明のスクリプト実行は避けます。会社PCでは、プロキシ、データ利用、API・Claudeプラン、利用規程を情報システム部門と確認します。
ホームページ制作の10ステップ
- 目的、読者、CV、ページ一覧を文書化する
- 既存サイト・競合・ブランド素材を監査する
- サイトマップと各ページの見出しを作る
- FVと主要CTAをワイヤー化する
- デザインtokenと共通部品を実装する
- トップ1ページをPC/SPで完成させる
- 下層ページとCMSデータへ展開する
- フォーム、計測、SEO、構造化データを実装する
- 表示、リンク、速度、アクセシビリティを検証する
- バックアップ後に公開し数値改善を続ける
Claude Codeへ渡す制作依頼テンプレート
目的：{問い合わせ／予約／資料請求／採用}
読者：{業種・役職・困りごと・知識}
価値：{選ばれる理由・証拠・実績}
必要ページ：{URLと役割}
デザイン：{色、フォント、余白、画像、参考、避ける例}
実装：{技術、CMS、対応ブラウザ、フォーム、計測}
SEO：{主KW、title、H1、canonical、構造化データ}
禁止：{無断公開、削除、外部送信、対象外ファイル}
完了条件：{PC/SP、リンク、フォーム、GA4、速度、戻し方}
最初は調査と実装計画だけを提示し、承認後に1ページずつ作成してください。
サイトマップとページの役割を設計する
| ページ | 答える疑問 | 主なCTA |
|---|---|---|
| トップ | 何を誰に提供し、なぜ選ぶか | サービス・相談 |
| サービス | 内容、方法、成果、料金、向く企業 | 問い合わせ・資料 |
| 事例 | 課題、施策、結果、条件 | 類似相談 |
| 会社・専門家 | 運営者、経験、資格、責任 | 信頼確認 |
| 記事 | 検索課題への具体的な回答 | 関連記事・サービス |
| 問い合わせ | 相談方法、入力、個人情報 | 送信完了 |
デザインシステムを先に作る
ページごとに色、角丸、影、ボタンを変えると、AIで速く量産しても統一感が崩れます。色、余白、文字、最大幅、カード、表、CTAを変数と共通コンポーネントへまとめます。
| token | 決める内容 | 確認 |
|---|---|---|
| Color | 背景、文字、主色、警告、境界 | コントラスト |
| Type | 見出し、本文、注釈、行間 | SPで読めるか |
| Space | 4〜8px基準の余白段階 | 詰まり・間延び |
| Layout | 本文幅、グリッド、breakpoint | 320〜1440px |
| Component | ボタン、表、カード、FAQ、フォーム | 全ページ一貫 |
ファーストビューを作る要素
FVには、対象読者、解決する課題、提供サービス、具体的価値、主要CTAを短く置きます。抽象的な英語コピーや飾りだけの図より、何のサービスか数秒で分かることを優先します。
- 主語と対象が分かる見出し
- 方法と結果が分かる補足
- 実績・資格・一次データなどの証拠
- 次に進む主要CTAを1つ
- 視線を奪いすぎない関連画像
- スマホで文字・ボタンが切れない
WordPressでClaude Codeを使う方法
WordPressでは、テーマファイル、追加CSS、プラグイン、投稿本文、ブロック、REST APIが同じ画面へ影響します。まず表示を作る層を特定し、対象外を明示します。親テーマを直接変更すると更新で失われるため、子テーマや限定的な拡張を検討します。
| 変更 | 推奨場所 | 注意 |
|---|---|---|
| 共通レイアウト | 子テーマ・適切なフック | テーマ更新と全体影響 |
| 記事固有パーツ | ブロック・限定class | 閉じタグとSP幅 |
| 機能 | 検証済みプラグイン・独自plugin | 競合、更新、権限 |
| 記事更新 | 管理画面・REST API | 投稿ID、status、日時、画像 |
| 計測 | GTM・テーマ設定等 | 二重計測と削除 |
SEO内部対策を実装する
| 項目 | 実装基準 |
|---|---|
| title | ページ役割と主KWを一致させる |
| H1 | 1ページ1つ、titleと矛盾しない |
| description | 対象、答え、独自価値を本文と一致 |
| canonical | 正規URLへ自己参照または意図したURL |
| robots | 公開意図とindex可否を一致 |
| 構造化データ | 画面に見える事実と一致 |
| 内部リンク | 関連文脈、200応答、具体的アンカー |
| 画像 | alt、寸法、WebP等、LCP配慮 |
フォームとGA4を設計する
フォームは項目を増やすほど情報は集まりますが、完了率が下がる可能性があります。最初の相談に必要な項目へ絞り、確認画面、エラー、完了通知、保存先、個人情報同意を確認します。
| イベント | 意味 | 推奨パラメータ |
|---|---|---|
| form_start | 入力開始 | form_id、form_name、page_location |
| form_error | 入力・送信エラー | field_group、error_type |
| form_submit | 送信操作 | form_id、form_name |
| generate_lead | 受信・完了確認 | lead_type、page_location |
submitクリックだけでCVにせず、サーバー受信、通知、保存、完了ページを照合します。複数フォームはform_name等で区別します。
スマートフォン表示の検証項目
- ページ全体に横スクロールがない
- 表のみ枠内で横スクロールできる
- FVの文字と画像が重ならない
- ボタンのタップ範囲と間隔が十分
- フォーム入力時に拡大・切れが起きない
- 画像比率、監修枠、カードが崩れない
- 固定CTAが本文やcookie表示を隠さない
- 320px、390px、768pxで確認する
サイト速度を改善する
| 指標 | 原因候補 | 対策 |
|---|---|---|
| LCP | FV画像、CSS、サーバー | 画像最適化、優先読み込み、不要CSS削減 |
| CLS | 寸法なし画像、広告、遅延部品 | 表示領域を予約 |
| INP | 長いJS、第三者タグ | 分割、遅延、不要処理削減 |
スコアだけを上げるために計測・フォーム・必要画像を削除しません。実ユーザー指標とCVを合わせて判断します。
Claude Codeの権限とセキュリティ
公式ドキュメントでは、読み取り、ファイル編集、Bash等の権限管理が案内されています。許可ルールを広く設定すると確認は減りますが、誤操作の範囲が広がります。対象プロジェクト、コマンド、接続先を必要最小限にします。
- 秘密情報をコード、画面、ログへ出さない
- 本番と検証の認証情報を分ける
- 出所不明のMCP Serverや依存関係を入れない
- 危険な権限スキップを通常運用しない
- 削除、公開、送信、課金は別承認
- 変更差分とコマンドをレビューする
- 依存更新後に再テストする
Claude Codeで起きやすい失敗
| 失敗 | 原因 | 防止 |
|---|---|---|
| デザインが統一されない | ページごとに生成 | tokenと共通部品を先に作る |
| スマホだけ崩れる | PC画面だけ確認 | 複数viewportで自動・目視確認 |
| フォームが届かない | 見た目だけテスト | 受信、通知、保存、GA4を照合 |
| SEO設定を失う | テンプレートを置換 | headと最終HTMLを比較 |
| 修正が戻せない | バックアップなし | 差分、版、復旧手順を保存 |
| 情報が事実と違う | 素材不足を推測で補完 | 不明を明示し人が確認 |
公開前チェックリスト
- 主要ブラウザとPC/SPの表示
- 全ナビ、CTA、内部・外部リンク
- フォーム受信、通知、保存、完了
- GA4・広告イベントと重複
- title、H1、description、canonical、robots
- 構造化データと画面内容の一致
- 404、リダイレクト、サイトマップ
- 画像、alt、LCP、CLS、INP
- プライバシー、会社・料金・免責の事実
- バックアップとロールバック
公開後30日の改善方法
| 時期 | 確認 | 対応 |
|---|---|---|
| 当日 | 表示、リンク、フォーム、計測 | 重大不具合を即修正 |
| 1週間 | エラー、流入、離脱、操作 | UXと導線を微調整 |
| 2〜4週間 | 検索表示、CTR、CV | title、内容、CTAの仮説検証 |
| 月次 | 問い合わせ品質、売上、保守 | 次の優先ページへ展開 |
会社・サービス情報をAIに作らせる前の確認
ホームページの会社名、所在地、代表者、料金、支援範囲、資格、実績、顧客事例は、AIが推測で補ってはいけない情報です。既存資料の記述が矛盾する場合は、最新の正式資料を責任者が確定します。実績数値には期間、対象、測定方法を付けます。
| 情報 | 確認元 | 公開時の注意 |
|---|---|---|
| 会社情報 | 登記・会社公式資料 | 表記統一、更新責任者 |
| 料金 | 見積規程・サービス資料 | 税、条件、追加費用 |
| 実績 | GA4、CRM、案件記録 | 期間、母数、因果の断定 |
| 資格 | 発行元・証明書 | 正式名称、有効性、誤認防止 |
| 顧客事例 | 顧客確認・契約 | 名称、ロゴ、数値の許諾 |
コピーライティングを作る順番
- 読者が今困っている状況を具体化する
- サービスが変えられる状態を一文で表す
- 方法、期間、対象外を明確にする
- 実績、専門性、プロセスで証明する
- 導入前の不安をFAQと注意点で解消する
- CTAの後に何が起きるか説明する
「圧倒的」「業界初」「必ず成果」のような表現は、根拠と条件を示せない場合に使いません。AIは強い表現を作りやすいため、事実と一致する範囲へ戻します。
画像とアイキャッチを設計する
AI生成画像を使う場合も、装飾だけでなくページの理解を助ける役割を決めます。FVはサービスの仕組みや成果、記事アイキャッチは主題を一目で伝えます。画像内テキストは短くし、本文のH1や重要説明を画像だけに置きません。
| 画像 | 役割 | 確認 |
|---|---|---|
| FV | サービス理解と信頼 | SPで訴求が切れない |
| 事例図 | 課題→施策→結果 | 数値と本文が一致 |
| 操作画面 | 手順の理解 | 個人情報と権利 |
| プロフィール | 著者・監修者の識別 | 縦横比、alt、本人許諾 |
| アイキャッチ | 一覧・SNSで主題を伝える | 文字量、contrast、crop |
アクセシビリティを公開条件に含める
見た目が整っていても、キーボード操作、ラベル、色のコントラスト、見出し順が不十分なら利用できない人がいます。Claude Codeには自動検査だけでなく、キーボードでの操作順とスクリーンリーダー向けの名前を確認させます。
- 画像に目的に合うaltがある
- フォーム項目とlabelが関連付く
- エラーが色だけで示されない
- フォーカス位置が見える
- 見出しレベルを見た目だけで飛ばさない
- ボタンとリンクの役割が分かる
- モーダルを閉じられ、背景へフォーカスが移らない
- 動画・音声に必要な代替がある
開発環境・検証環境・本番を分ける
| 環境 | 目的 | データ | 権限 |
|---|---|---|---|
| 開発 | 実装と自動テスト | ダミー・匿名 | ローカル中心 |
| 検証 | 本番に近い確認 | 最小限・マスク | 限定担当者 |
| 本番 | 一般公開・実運用 | 実データ | 承認済み最小権限 |
検証用フォームから実顧客へ通知しない、検証用広告タグで本番CVを汚さない、検索エンジンへ検証URLを公開しないなど、環境ごとの禁止事項を決めます。本番データを開発端末へ複製しないことも重要です。
CLAUDE.mdへ書くプロジェクトルール
Claude Codeではプロジェクト固有の指示を文書化できます。ホームページ制作では、技術構成、主要ディレクトリ、デザインtoken、テスト、禁止操作、公開手順を短く保ちます。記事ごとの一時要件を恒久ルールへ混ぜすぎません。
# Project rules - 変更対象は指定されたページと関連コンポーネントのみ - 既存のGA4、GTM、フォーム、SEO設定を削除しない - CSSは既存tokenを使い、グローバル上書きを避ける - 変更前に対象ファイルと戻し方を提示する - lint、test、build、PC/SP表示を確認する - 公開、外部送信、削除は人の承認を待つ - 完了時に差分、テスト、未確認事項を報告する
自動テストと目視確認を分ける
| 自動化しやすい | 目視・人の判断が必要 |
|---|---|
| HTML構造、リンク、画像応答 | ブランドらしさ、訴求の強さ |
| viewport横はみ出し | 情報量と余白のバランス |
| フォーム送信結果 | 問い合わせ項目の妥当性 |
| title・canonical・robots | 検索意図と表現の一致 |
| GA4イベント発火 | CV定義と事業価値 |
| 色contrastの一部 | 写真・図の理解しやすさ |
自動テスト合格だけで「デザインが良い」と判断せず、目視だけでリンクや計測が正常と判断しません。二つを組み合わせ、未確認項目を明示します。
ホームページ制作費をどう考えるか
AIでコード生成が速くなっても、戦略、素材、事実確認、権限、公開、計測、改善は残ります。見積もりはページ数だけでなく、CMS、フォーム、外部連携、言語、アクセシビリティ、運用体制で変わります。
| 費用領域 | 内容 | 削減しすぎるリスク |
|---|---|---|
| 戦略・情報設計 | 読者、CV、サイトマップ | 何のサイトか分からない |
| 制作 | デザイン、実装、CMS | 量産感、保守困難 |
| 品質 | テスト、SEO、SP、a11y | 公開後の不具合 |
| 運用 | 更新、保守、監視 | 情報陳腐化と事故 |
| 改善 | GA4、検索、CVR | 作って終わる |
内製と外注の役割分担
自社は事業目的、顧客理解、一次情報、公開責任を持ちます。外部支援には、情報設計、デザイン、実装、SEO、計測、セキュリティなど不足する専門領域を任せます。Claude Codeの操作だけを外注しても、判断基準が社内に残らなければ継続改善できません。
納品物にはサイト本体だけでなく、更新手順、デザインtoken、計測仕様、権限一覧、バックアップ、検証結果を含めます。自社担当者が小さな更新と問題切り分けをできる状態を完成とします。
保守運用の月次チェック
- WordPress・テーマ・プラグイン・依存関係の更新
- バックアップと復元テスト
- 404、リダイレクト、リンク切れ
- Search Consoleのindex・検索エラー
- GA4イベントとフォーム受信
- 速度、稼働、セキュリティ通知
- 会社、料金、担当者、資格、事例の鮮度
- 流入・CV・問い合わせ品質
更新を一度に本番へ入れず、検証環境で主要導線を確認します。Claude Codeで監査を自動化しても、異常時に通知を受け取り判断する担当者を置きます。
既存ホームページを改善する場合の進め方
新規制作と違い、既存サイトには検索評価、広告リンク、計測、フォーム、顧客が利用するURLがあります。全面リニューアルから始めず、流入とCVが多いページ、表示崩れ、404、フォーム離脱など影響の大きい課題を優先します。
| 段階 | 実施 | 変更しないもの |
|---|---|---|
| 監査 | 流入、CV、技術・表示問題を一覧化 | 本番設定 |
| 仮説 | 1課題と改善KPIを決める | 無関係ページ |
| 実装 | 限定class・部品で最小変更 | URL、計測、既存機能 |
| 検証 | PC/SP、リンク、フォーム、GA4 | 確認前の公開状態 |
| 展開 | 成果が出た型を他ページへ適用 | 例外ページは個別判断 |
変更前後のスクリーンショットと数値を保存し、悪化した場合は元へ戻します。検索成果は反映に時間がかかるため、公開直後の技術確認と、数週間後の検索・CV確認を分けます。
Claude Codeを使った制作の完成条件
ファイルが生成された時点では完成ではありません。依頼した目的が画面で伝わり、主要導線が動き、検索と計測の設定が正しく、担当者が更新・復旧できる状態を完成とします。未確認のブラウザ、外部連携、法的表示が残る場合は、納品時に明示します。
AIによる制作速度を価値へ変えるには、作る工程だけでなく、確認と改善の速度まで上げる必要があります。品質ゲートと変更ログを標準化し、実績のある部品だけを再利用してください。
関連記事
まとめ
Claude Codeを使えば、ホームページ制作と改善を速く進められます。成果を出すには、要件、デザインシステム、SEO、フォーム、計測、スマホ、速度、セキュリティを分断せず、1ページずつ合格させます。変更前を保存し、最小権限と差分レビューを守り、公開後の流入・CVまで検証してください。
よくある質問
Claude Codeだけでホームページを作れますか
HTML・CSS・JavaScriptや既存フレームワークの作成・修正はできますが、要件、素材、公開環境、法的表示、最終確認は人が用意します。
WordPressにも使えますか
テーマ、子テーマ、プラグイン、投稿本文、REST APIなど対象を限定して利用できます。変更前バックアップが必要です。
プログラミング未経験でも使えますか
利用できますが、差分、テスト、公開、戻し方を確認できる小さな変更から始めてください。
既存サイトを直接編集しても安全ですか
無条件には安全ではありません。検証環境、最小権限、対象限定、バックアップ、承認、PC/SP確認を組み合わせます。
料金は月額だけですか
Claudeのプランで使う方法とAPI等で利用する方法があります。契約画面と公式料金を確認してください。
SEOも自動で改善できますか
技術監査や修正は支援できますが、検索意図、一次情報、事業判断、成果検証は人が確認します。
公開前に最低限何を確認しますか
主要画面、リンク、フォーム、GA4、title・canonical・robots、画像、速度、アクセシビリティ、ロールバックを確認します。
参照した一次情報
SEO・UI/UX・計測を含む改善範囲を整理します。
監修者プロフィール
魚見幸司
生まれ（32歳）
監修：魚見幸司
SEO、Web広告、SNS・LINE運用、LP制作・改善、アクセス解析、コンテンツマーケティング、生成AI導入を横断するデジタルマーケティングの専門家。広告代理店で最年少マーケティング事業部長を務め、グローバルマーケティング会社のCMOを経験しています。
成果指標から施策を逆算し、小規模検証から標準化へ進める方法と、人の確認を残した半自動化を重視。SEO・広告・SNS・LP・問い合わせを分断せず、事業成果までつなげる実務検証を行っています。
この記事の監修：AI活用は、記事を増やすだけでは成果につながりません。検索意図に合う情報設計、読者が比較しやすい見せ方、問い合わせまでの導線をそろえることで、SEOやAI検索から事業成果につながる状態を作りやすくなります。
監修方針：実務で再現できる条件、数値、リスク、確認手順を重視して内容を確認しています。 監修者・専門家情報を見る
