Claude Codeでホームページを作る方法と限界
業務効率化支援を行う「Ai-Raku（アイラク）」代表。国立大学でAIの研究を行い、ITコンサル・ウェブコンサルを経て独立。官公庁向けの業務効率化や上場企業の支援等を経て、中小企業の現場に定着するAI活用を企画から運用まで一気通貫で支援している。
- プログラミングの知識は必要ですか？
- ページを作る指示自体は日本語で問題ありません。ただし公開作業（サーバーへのアップロード）には多少のIT知識が必要です。
- WordPressのサイトも作れますか？
- WordPress用のテーマやデザイン調整も依頼できます。ただし既存サイトの改修は、壊した場合の影響が大きいため、必ずバックアップを取ってから作業してください。
- デザインの質は制作会社に劣りませんか？
- ブランドの世界観を作り込む領域では、専門のデザイナーに分があります。一方で「見やすく、情報が整理された実用的なページ」であれば十分な水準に達します。
- 写真やロゴはどうすればいいですか？
- 写真・ロゴは別途用意が必要です。Claude Codeはページの構造とデザインを作りますが、自社の写真素材までは作れません。
- スマートフォン対応もできますか？
- できます。ただし指示に明記しないと考慮されないことがあるため、「スマートフォンでも崩れないように」と必ず伝えてください。
- 公開後の保守はどうすればいいですか？
- 静的なページであれば大がかりな保守は不要ですが、掲載内容が古くならないよう定期的な見直しは必要です。更新担当を決めておきましょう。
「AIでホームページが作れるらしい」「制作会社に頼むと数十万円かかるので、自社で作れないか」——中小企業の経営者から、こうした相談が増えています。
結論から言うと、Claude Codeを使えば、簡単なホームページやランディングページを自分で作ることは可能です。ただし、期待と現実のギャップが生まれやすい領域でもあります。「作る」ことと「公開して運用する」ことは別問題で、ここを理解しないまま始めると途中で止まります。
本記事では、中小企業のAI導入を支援するAi-Rakuの視点で、Claude Codeで作れるサイト・作れないサイトの線引き、公開までの手順、制作会社に頼むべき判断基準を率直に解説します。
- Claude Codeで作れるサイト・作れないサイトの線引き
- ページを作る具体的な手順と、指示の出し方
- 公開に必要なドメイン・サーバーという「別の壁」
- 自作すべきか、制作会社に頼むべきかの判断基準
- 【モデルケース試算】採用ページを内製した場合の効果
結論：小規模なページなら自作できる
Claude Codeは、日本語で指示するだけでHTML・CSSといったWebページのファイルを書き出せます。会社案内・採用ページ・キャンペーン用のランディングページなど、数ページ規模のサイトであれば非エンジニアでも作れます。
一方で、会員登録や決済、予約システムが必要なサイトは現実的ではありません。これらはセキュリティや個人情報の管理が絡むため、専門家の関与が必須です。「どこまでが自作の範囲か」を最初に線引きすることが、失敗を避ける最大のポイントです。
作れるサイト・作れないサイト
| 種類 | 自作の可否 | 理由 |
|---|---|---|
| 会社案内・事業紹介（数ページ） | ◎ 作れる | 情報を載せるだけで、複雑な仕組みが不要 |
| 採用ページ | ◎ 作れる | 募集要項と応募フォームの設置で完結する |
| キャンペーン用のLP | ◎ 作れる | 1ページ完結。差し替えも自分でできる |
| 店舗の案内ページ | ○ 作れる | 地図・営業時間・メニューの掲載が中心 |
| ブログ機能付きサイト | △ 条件つき | 記事更新の仕組みが必要。WordPress等の併用を検討 |
| ネットショップ（決済あり） | ✕ 非推奨 | 決済・在庫・個人情報の管理が絡む。専用サービスを使うべき |
| 会員制サイト・予約システム | ✕ 非推奨 | ログイン情報の保護に専門知識が必要 |
「情報を見せるだけのサイト」は自作、「情報を預かるサイト」は専門家へ——この基準で判断すると間違えません。
【手順】ホームページを作る5ステップ
ステップ1：載せる内容を先に決める
最初にやるべきはAIへの指示ではなく、掲載内容の整理です。会社名・事業内容・強み・実績・連絡先・写真——これらが決まっていないと、何度作り直しても納得のいくページになりません。
紙やメモ帳で構いませんので、「トップページに何を、どの順番で載せるか」を箇条書きにしてから始めてください。ここに時間をかけるほど、後の工程が速くなります。
ステップ2：全体の構成を相談する
整理した内容をClaude Codeに渡し、まず構成を相談します。
指示の例
「建材卸の会社のホームページを作ります。載せたい内容は、会社概要・取扱商品・納入実績・採用情報・お問い合わせです。取引先は工務店が中心で、信頼感を重視したいです。まずページ構成と各セクションの見出し案を出してください。」
いきなり「作って」と頼まず、構成を先に確定させるのがコツです。ここで方向性がずれたまま進むと、後の修正が大変になります。
ステップ3：ページを作らせる
構成に納得したら、実際のページを作らせます。このときデザインの方向性を言葉で伝えると精度が上がります。
- 色：「コーポレートカラーは濃紺（#1a3a6b）。落ち着いた印象に」
- 雰囲気：「余白を広めに、文字は大きめ。年配の方も読みやすく」
- 対応：「スマートフォンでも崩れないようにしてください」
スマートフォン対応は必ず指示してください。中小企業のサイトは、閲覧の半分以上がスマートフォンからというケースが珍しくありません。
ステップ4：見た目を確認して直す
作られたファイルをブラウザで開いて確認します。気になる箇所は「ここをこう直して」と対話で伝えれば修正されます。
確認すべきポイントは次の3つです。
- スマートフォンの画面幅で文字や画像がはみ出していないか
- 会社名・電話番号・住所などに誤りがないか
- お問い合わせの導線が分かりやすい位置にあるか
ステップ5：公開する
ここが最大の関門です。詳しくは次章で解説します。
公開には別の準備が要る
Claude Codeが作るのは「ページのファイル」までです。これをインターネット上で見られるようにするには、別途2つの準備が必要になります。
| 必要なもの | 役割 | 費用の目安 |
|---|---|---|
| ドメイン | 「〇〇.co.jp」といったインターネット上の住所 | 年間1,000〜5,000円程度 |
| レンタルサーバー | ファイルを置いて公開するための場所 | 月500〜1,500円程度 |
※費用はサービスや契約内容により変動します。契約前に各社の公式サイトでご確認ください。
すでに会社のドメインとサーバーがある場合は、作ったファイルをアップロードするだけで公開できます。これから用意する場合は、レンタルサーバー会社の申し込み手順に沿って契約してください。この作業自体はAIに任せられないため、社内で対応するか、詳しい人に依頼する必要があります。
自作か、制作会社か
「結局どちらがいいのか」を判断するための基準を整理します。
| 状況 | おすすめ | 理由 |
|---|---|---|
| とりあえずページが必要（採用・キャンペーン） | 自作 | スピード重視。数日で公開できる |
| 内容を自分たちで頻繁に更新したい | 自作 | 都度依頼する費用と時間がかからない |
| 予算を抑えたい | 自作 | ツール代のみ。制作費が不要 |
| ブランドの印象が売上に直結する | 制作会社 | デザインの質が競争力になる |
| 決済・会員機能が必要 | 制作会社 | セキュリティに専門知識が要る |
| 社内に対応できる人が1人もいない | 制作会社 | 公開後の運用まで含めて任せられる |
現実的な折衷案として、「メインサイトは制作会社、採用ページやキャンペーンLPは自作」という使い分けをしている企業もあります。急ぎのページを自分たちで出せる体制があるだけで、機会損失は大きく減ります。
「自社のケースではどちらが適切か相談したい」という方は、無料相談をご利用ください。
作った後に注意すること
1. 情報の正確性は自分で確認する
AIが生成した文章に、実際とは違う実績や数値が入っていないかを必ず確認してください。「創業以来〇〇社に導入」といった表現が、確認しないまま公開されると信用問題になります。
2. 更新できる体制を作る
作って終わりにせず、誰がどう更新するかを決めておきます。ファイルの保管場所と、更新手順のメモを残しておくだけでも、担当者が変わったときのリスクが減ります。
3. 問い合わせフォームの扱い
フォームから個人情報を受け取る場合、その情報をどこに保存し、誰が見るのかを決める必要があります。無料のフォームサービスを使う場合も、利用規約と保存場所を確認してください。
【モデルケース】採用ページを内製した場合
従業員25名の運送会社R社が、採用ページをClaude Codeで内製した場合の試算です。
※R社は実在の企業ではなく、中小企業によくある状況をもとにしたモデルケース（試算）です。数値は「時給換算2,400円・月20営業日」を前提とした試算で、実際の効果は業務内容や運用方法により変動します。
| 項目 | 制作会社に依頼 | Claude Codeで内製 |
|---|---|---|
| 初回制作 | 外注費が発生 | 社内工数 約12時間 |
| 公開までの期間 | 1〜2か月 | 1週間程度 |
| 募集内容の変更（月2回想定） | 都度依頼・数日待ち | 社内で当日対応 |
| 更新にかかる社内工数 | 依頼・確認で月4時間 | 月1時間 |
| 更新工数の削減（月3時間） | 7,200円/月 |
| 採用募集の掲載までの短縮 | 数日 → 当日 |
| Claude Code利用料（Pro） | − 3,000円前後/月 |
| 月間の純効果 | 約4,200円＋機会損失の回避 |
金額面の効果は限定的ですが、R社にとって大きかったのは「急な募集をその日のうちに掲載できるようになったこと」でした。人手不足の業界では、掲載の遅れがそのまま応募機会の損失につながります。
よくある質問（FAQ）
Q. プログラミングの知識は必要ですか？
A. ページを作る指示自体は日本語で問題ありません。ただし公開作業（サーバーへのアップロード）には多少のIT知識が必要です。
Q. WordPressのサイトも作れますか？
A. WordPress用のテーマやデザイン調整も依頼できます。ただし既存サイトの改修は、壊した場合の影響が大きいため、必ずバックアップを取ってから作業してください。
Q. デザインの質は制作会社に劣りませんか？
A. ブランドの世界観を作り込む領域では、専門のデザイナーに分があります。一方で「見やすく、情報が整理された実用的なページ」であれば十分な水準に達します。
Q. 写真やロゴはどうすればいいですか？
A. 写真・ロゴは別途用意が必要です。Claude Codeはページの構造とデザインを作りますが、自社の写真素材までは作れません。
Q. スマートフォン対応もできますか？
A. できます。ただし指示に明記しないと考慮されないことがあるため、「スマートフォンでも崩れないように」と必ず伝えてください。
Q. 公開後の保守はどうすればいいですか？
A. 静的なページであれば大がかりな保守は不要ですが、掲載内容が古くならないよう定期的な見直しは必要です。更新担当を決めておきましょう。
まとめ
- 会社案内・採用ページ・LPなど「情報を見せるサイト」は自作できる
- 決済・会員機能など「情報を預かるサイト」は専門家へ
- 作る前に「載せる内容」を整理する。ここが品質を決める
- 公開にはドメインとサーバーが別途必要（月500円〜＋年1,000円〜）
- AIが書いた実績・数値は必ず事実確認してから公開する
「自社のサイトをどこまで内製できるか相談したい」という方は、Claude導入支援の無料相談をご利用ください。実際にAIが作業する様子をご覧になりたい方は無料オンラインセミナーもご活用いただけます。Claude Codeの基礎はClaude Codeとは？、導入手順はClaude Codeの始め方、非エンジニアの適性はClaude Codeは非エンジニアでも使える？もあわせてご覧ください。
