Claude Codeでホームページ作成はできます。つまずくのは公開したあとの9か所

結論から書きます。
Claude Codeでのホームページ作成は、できます。
当社も、この会社のホームページをClaude Codeで作りました。OpenAIのCodexも併用しています。

ですから「AIじゃ無理です」とは言いません。
書きたいのは、その次のことです。

作るのは、早ければ1日で終わります。
時間を取られるのは、そのあとです。
しかも困ったことに、失敗しても画面には何も出ません。動いているように見えたまま、何か月も間違い続けます。

こんにちは。
三重県でホームページ制作をしているMYコンサルティング株式会社、代表の宮本です。

当社は、自社サイトもお客様のサイトもAIを使って作っています。
そのうえで実際に踏んだ穴を9つ、順番に書きます。一般論ではなく、全部うちで起きたことです。

作り方そのものは、すでに詳しい記事がたくさんあります。
この記事は「作れたあと」だけを扱います。

Claude Codeでのホームページ作成は、どこまでできるのか

誇張も卑下もせずに書きます。

この表のいちばん下が、この記事の全部です。

AIは聞かれたことには答えますが、聞かれていないことは言いません。
「トップページを作って」と頼めば作ります。
「ところでGoogleに登録されてませんよ」とは言いません。あなたが聞かなかったからです。

作り方の全体像（3ステップ）

手順そのものは短いです。Claude CodeでもCodexでも、流れは同じです。

ご覧のとおり、いちばん時間がかかるのは1番です。AIが速いのは2番だけです。

ホームページ作成でAIに丸投げして失敗するのは、1番を飛ばしたときです。
材料を渡さずに「ホームページを作って」と頼むと、AIはそれらしい文章を自分で埋めます。
営業時間も、価格も、実績も、もっともらしい数字が入ります。全部あなたの店の事実ではありません。

そしてここから先、公開したあとに起きることが本題です。

①直したのに、画面が変わらない

最初にぶつかるのがこれです。

デザインを直してサーバーに上げた。
開いてみると前のまま。何度上げても変わらない。

何が起きているか

ブラウザが前回読み込んだファイルを覚えているためです。
とくに見た目を決めているCSSというファイルは、毎回読み直すと遅くなるので、しばらく手元に置いたまま使われます。

この場合、アップロード自体は終わっていて、見えていないだけです。

ただし、本当にアップロードできていない可能性も残ります。
置き場所を間違えている、途中で失敗している、という例もあります。
先に、別の端末やスマホの通信（Wi-Fiを切る）で開いてみてください。そこでも古いままなら、キャッシュではなくアップロードのほうを疑います。

厄介なのは、自分だけ直って見えること

強制的に読み直す操作（スーパーリロード）をすると、自分の画面は直ります。
そこで「直った」と思ってしまう。

お客様の画面は、直っていません。
お客様はスーパーリロードなんてしません。
当社は、この状態で数日気づかなかったことがあります。自分の画面では正しく見えていたからです。

対処

ファイルを読み込んでいる部分に、更新日を表す短い印を足します。

これで別のファイルとして扱われるので、読み直されます。
CSSやJavaScriptを直したら、この数字も一緒に上げる。これだけです。

これでも直らないことがあります。
サーバーやCDNの設定によっては、?v= の部分を無視して同じものを返す場合があるためです。
その場合はファイル名そのものを変えるか、サーバー側の設定を見直してください。

くわしい原因と切り分けは ホームページを更新したのに反映されない｜キャッシュ以外の原因8つ と スーパーリロードのやり方 に書きました。

②書いたはずのコードが、黙って動かなくなる

これがいちばん怖い穴です。

ホームページには、外からの攻撃を防ぐための設定があります。
「このページで動かしていいプログラムはここまで」と決めておく仕組みです。

この設定を入れると、安全になります。
同時に、ページの中に直接書いたプログラムが、許可リストに入っていなければ動かなくなります。

画面には、何も出ません

ページは普通に表示されます。崩れもしません。
ただ、そのプログラムだけが実行されなくなります。

手がかりが無いわけではありません。パソコンのブラウザで開発者ツールを開くと、コンソールに拒否された旨のメッセージが出ています。
問題は、ふだん誰もそこを見ないことです。

当社では、これでアクセス解析が長期間止まっていました。
設置したつもりのGoogleアナリティクスが動いておらず、データが1件も入っていませんでした。
同じ理由で、サイトに置いたチャットの機能も止まっていました。
どちらも、見た目には何の異常もありませんでした。

対処

プログラムを外部のファイルに出すか、許可リストに登録するかのどちらかです。
ただし気づくことのほうが難しいので、実務的にはこうしてください。

「設置したから大丈夫」は成り立ちません。
入れたことと、動いていることは別です。
当社はこの経験から、設置した翌日に必ず数字が入っているか見る運用に変えました。

③Googleに登録されない

ホームページは、公開しただけでは検索に出ません。
Googleが見つけて、読んで、登録するまでに時間がかかります。

ここまでは、どの記事にも書いてあります。
問題は「待っていても登録されない場合がある」ことです。

当社で実際に起きたこと

自社のブログ記事を13本公開して、Googleに登録されていたのは1本だけでした。
技術的な設定に誤りはなく、ページも普通に表示されていました。
Search Consoleで1本ずつ見ると、大半が「検出 - インデックス未登録」、つまりURLは知られているが、まだ読みに来られていない状態でした。

Googleは、URLを見つける・読みに行く・登録するの3段階で扱います。止まっていたのは2段階目でした。
当時、その13本へのリンクは記事一覧のページからしか出ておらず、その一覧ページ自体もほとんど読まれていませんでした。

対処

当社が上の1つめを実施したところ、同じ日に公開した記事が当日中に登録されました。
一方、リンクを張らずに公開した記事は、2週間たっても登録されないままでした。

これは当社1サイトでの観察で、リンクだけが原因と証明したものではありません。
ただ「サイトマップは出したのに登録されない」という状態のとき、まず試す価値があるのはここだと考えています。

④手元では動くのに、本番だけ真っ白

お問い合わせフォームを付けると起きます。

フォームは、送信された内容を処理するプログラムが必要です。
このプログラムにはバージョンがあり、自分のパソコンとサーバーで違うことがあります。

当社のサーバーは、いまも古い側のバージョンで動いています。
手元の新しい環境で書いたコードをそのまま上げると、新しいバージョンにしか無い書き方が含まれていて、本番だけ画面が真っ白になります。
AIはあなたのサーバーのバージョンを知りません。聞かなければ、新しい書き方で書きます。

対処

AIに作業を頼むときに、最初に環境を伝えてください。

バージョンは、レンタルサーバーの管理画面に必ず書いてあります。
一度確認して、メモしておいてください。これだけで真っ白事故はほぼ消えます。

ただし、古いまま使い続けるのが正解とは限りません。
サポートが終わったバージョンは、不具合が見つかっても修正されません。
まず「新しいバージョンに上げられないか」を確認し、上げられないときだけ古い側に合わせてください。
上げると動かなくなる仕組みもあるので、切り替えたらフォームの送信を必ず試してください。

⑤ファイルを1つ上書きして、トップページを消した

作ったファイルをサーバーに送る作業で起きます。

当社は、本番のトップページを実際に消しました。
手元の作業用ファイルを、うっかり本番の index.html という名前で上げてしまったためです。
上書きは一瞬で終わり、確認も出ません。

対処

本番のほうが新しいことがあります。
前に少しだけ直接手を入れた、というのはよくあります。
手元のファイルで上書きすると、その修正だけが静かに消えます。
上げる前に、本番と手元を突き合わせてください。

⑥スマホで横にはみ出していることに、気づけない

お店のホームページは、見に来る人の大半がスマホです。
ところが作業はパソコンでやります。

パソコンの画面を狭くして確認する方法がありますが、それでは分からないことがあります。

対処

実物のスマホで開いてください。これに勝る確認方法はありません。

そのうえで、次の3つは最初から満たしておくと事故が減ります。

くわしくは スマホ最適化とは？レスポンシブとの違いと当社の検品基準を公開 と レスポンシブ対応とは？スマホで文字が小さい・崩れる原因と確認方法 をご覧ください。

⑦フォームに届くのは、ほとんど営業です

お問い合わせフォームを付けると、しばらくして届き始めます。

そして開けてみると営業の売り込みです。

当社の自社サイトに届いた問い合わせは、全部が営業でした。
しかも自動送信ではなく、人が書いて送ったものです。入力にかかった時間も残っていました。
迷惑メール対策の仕組みでは止まりません。人間が手で送っているからです。

対処

「止める」より「見分ける」ほうが現実的です。

電話番号をそのまま書くと、電話も増えます。
ホームページに書かれた番号は自動的に集められ、営業リストになります。
当社では、番号を最初は隠しておき、タップした人にだけ表示する方式を標準にしています。
ページの文面をそのまま集めていくタイプの収集には拾われません。ただし「絶対に集められない」わけではなく、手間をかければ回避されます。 お客様には1タップ増えるので、営業電話の煩わしさとの釣り合いで決めてください。

フォームまわりの注意点は お問い合わせフォームとは？直載せが危ない理由と迷惑メール対策 に、届かない場合の切り分けは お問い合わせフォームが届かない原因と対処 に書きました。

⑧スマホで開くと、写真が出てくるまで数秒待たされる

AIに作らせたページに、手元の写真をそのまま入れると起きます。

いまのスマホやカメラで撮った写真は、1枚で数MBあります。
画面に表示されるのは横1000px程度なのに、4000px以上の元データを丸ごと送っている状態です。

パソコンの光回線では気づけません。
一瞬で出るからです。
問題が出るのは、電車の中や店内でスマホから開いた人です。写真が出るまで白いままになります。
そして、待たされた人は戻ります。何も言わずに。

対処は3つだけ

1つめは、当社の無料ツール 画像リサイズ・圧縮 でもできます。ブラウザの中で処理するので、写真がどこかに送られることはありません。

ただし、縮めすぎないでください。
料理や商品の写真は、お店の印象そのものです。
粗くなってまで軽くする必要はありません。横2000px程度が、画質と速さの折り合う目安です。

⑨写真の出どころ・法律のページ・メールアドレス

最後に、技術ではない3つです。ここが後から効いてきます。

写真

AIに「いい感じの写真を入れて」と頼むと、それらしいものが入ります。
その写真の出どころを、必ず確かめてください。

AIが作った画像なら何を出しても自由、ではありません。
既存の写真やイラストによく似たものが生成されることがあり、その場合は著作権の問題になり得ます。
不安なら、雰囲気づくりの背景だけに使い、商品や店内はご自分で撮ってください。いちばん確実で、いちばんよく伝わります。

法律で必要なページ

お店のホームページでも、内容によっては置かないといけないページがあります。

くわしくは ホームページに必要な法律のページ｜プライバシーポリシーと特商法 をご覧ください。

メールアドレス

個人のフリーメールをそのまま載せないでください。

理由は2つあります。
信用の問題。お店のドメインのアドレスと、無料のアドレスでは印象が違います。
切り替えの問題。人が変わったとき、個人のアドレスは引き継げません。
独自ドメインを取っているなら、そのドメインのアドレスを作れます。独自ドメインとは？必要な理由と年間費用をご覧ください。

それでもAIでホームページ作成をするなら、この順番で

止めるつもりはありません。当社も同じことをやっています。
ただし順番を間違えると、あとで全部やり直しになります。

3番がすべてです。
AIは、材料が無ければ「それらしい文章」を作ります。
値段も、営業時間も、実績も、こちらが渡さなければ埋められてしまいます。
公開前に、書いてある数字と事実を1つずつ自分の目で確かめてください。

よくある質問

Q. ホームページ作成には、Claude CodeとCodexのどちらが向いていますか？

どちらでも作れます。ここで悩む時間より、上の3番（材料をそろえる）に時間を使ってください。
当社は日々の制作をClaude Codeで行い、書いたコードの点検を別のAIにやらせています。同じAIに自分のコードを見直させても、見落としはそのまま残るためです。

Q. 無料で公開できるサービスと、レンタルサーバーはどちらがいいですか？

お店として使うなら、まず独自ドメインを取ってください。ここがいちばん大事です。
独自ドメインさえ自分で持っていれば、置き場所を引っ越してもURLは変わりません。名刺やチラシに印刷したURLも生き続けます。
逆に、サービスから与えられたURLをそのまま使っていると、そのサービスが終わった時点で印刷物ごと使えなくなります。
置き場所自体は、独自ドメインが使えるなら無料のサービスでも構いません。
費用の目安は ホームページ制作の費用相場 をご覧ください。

Q. WordPressで作るのと、どちらがいいですか？

AIで作る場合、多くはHTMLの静的なサイトになります。
更新の手間・速さ・安全性が変わるので、WordPressと静的HTMLどっち？比較表と30秒診断チャート で判断してください。

Q. 途中まで作りましたが、行き詰まりました

よくあるのは、公開の直前で止まるパターンです。
見た目は完成しているのに、サーバーへの設置・ドメインの設定・フォームの動作確認が残っている状態です。
この段階まで来ていれば、残りは多くありません。作ったものを持ち込んでいただければ、続きだけのご相談も承ります。

Q. AIで作ったサイトは、検索に弱いのですか？

作った道具では決まりません。中身と、置かれ方で決まります。
実際に当社で起きたのは③の話で、これはAIとは関係のない、リンクの問題でした。

まとめ

Claude CodeやCodexでのホームページ作成は、できます。そこは疑う必要がありません。

気をつけるのは、失敗しても何も表示されないことです。
崩れも止まりもせず、ただ静かに間違い続けます。

当社は、これを全部踏んだうえで運用しています。
作ることではなく、この一覧を毎回確かめることを仕事にしています。

ご自分で作られたサイトの点検だけ、というご相談もお受けしています。
上の項目のうち、どこが抜けているかをお伝えします。

費用・法律・選び方の記事

• MEO対策とは
• 必要な法律のページ
• 決算公告とホームページ
• 制作費の勘定科目
• リニューアルの進め方
• 三重県のホームページ制作
• WordPressと静的HTMLどっち？
• ホームページ制作の費用相場
• ホームページは必要？