Web 制作2026.10.26読む時間 5分

AIと1晩でホームページを公開した全記録｜デザイン11案から、ドメイン取得・公開・検索の登録まで

結論：名前やドメインの候補出し・空きの確認から、デザイン、公開の仕組みまで、AI と話しながら進めると、ホームページはひと晩で公開できます。いちばん効いたのは、デザインを「何パターンか同時に出して」と頼み、並べて比べて決めたことでした。このサイト「まちのIT屋さん」自体が、その実例です。

なぜ作り直したのか

前は便利ツールのサイトを運営していて、毎日ツールを足していました。ところが、検索の表示はずっと0のまま。広告（Google アドセンス）の審査にも落ちました。

調べると、そのドメイン（サイトの住所）で、昔、自動で大量にページを作っていた跡が残っていました。Google はこうした「量産ページ」を嫌います。そこで、次のように決めました。

ドメインごと新しくする
古いサイトからは転送しない（転送すると悪い評価まで引きつぐため）
中身は「作ったもの」と「お仕事の依頼」にしぼる

動画で見る

同じ内容を、森のIT屋さんで解説しています。

森のIT屋さん：AIと1晩でホームページ公開｜ 2026.11.08 公開予定

名前とドメインを決める

名前も AI と相談しました。「かぶってない名前でいい感じのがあるなら教えて」と頼むと、候補を10個ほど出したうえで、それぞれ次のことを調べてくれます。

同じ名前の会社・サービスがないか（Web 検索）
ドメインが空いているか（whois で登録の有無を確認）
商標（名前の権利）：特許庁の J-PlatPat で確かめる

候補の中から「まちのIT屋さんは？」と聞くと、YouTube の「森のIT屋さん」と兄弟になれる、と後押しがありました。看板として使う名前なので、商標は公開前に自分でも確かめるのがおすすめです。

ドメインは Xserverドメインでスマホから購入しました。.com で年1,500〜2,000円ほどです。名前や住所がネットに出ないようにする「Whois 情報公開代行」はオンのままにします。

Xserverドメインのトップ画面 — ドメインはスマホで購入（出典：Xserverドメイン）

デザインを何案も同時に出す

最初の見本は黒い背景で、「ダークはとっつきにくい」という感想でした。そこで頼み方を変えて、「何パターンか同時に出して」とお願いしました。

A：すりガラスの板が、立体的に浮かぶ
B：仕組みの図の上を、データの粒が流れる
C：点と線の網が、指に反応して動く
D：特大の文字の、ポップな雑誌ふう

動きはすべて画像ではなく、ブラウザの中でプログラム（CSS・SVG・canvas）が描いています。そのため表示が軽く、スマホでもなめらかです。続けてスクロールで動く4案（E〜H）を出し、「動きは H、デザインは D」のように好き・きらいを言葉で伝えて混ぜてもらうのを繰り返して、11案目で完成しました。

見本H スクロールで文字が飛び散る — 見本H：スクロールすると見出しの文字が飛び散り、場面ごとに背景の色が変わる

1案ずつ直すより、並べて比べるほうが、自分の好みがはっきりして早く決まります。

依頼につなげる中身

このサイトはお仕事の依頼の窓口でもあります。AI の活用・動画制作・Web 制作の3つについて、料金の目安を表で公開しました。料金を出したほうが相談しやすく、赤字にならないよう「修正は2回まで」「ドメインやサーバーなどの実費は別」とも書いています。

「無料で相談」のボタンは、いつも見える場所に置く（スマホでは右下にも出る）
動画は音なしで自動再生し、押すと音が出る（ブラウザの決まりで、音ありの自動再生はできない）
相談フォームから送られた内容は、そのまま Discord に届く（通知の仕組みの記事）

公開のしくみ（WordPress を使わない）

最初は WordPress のつもりでしたが、デザインを一から作ることになったので、HTML のファイルを置くだけの静的サイトにしました。

見本のデザインと動きが、そのまま本番になる
表示が速く、本体やプラグインの更新の手間がない
記事から公開までを、AI が組み立てやすい

記事は「情報（JSON）」と「本文（HTML）」の2つのファイルで書き、組み立てのプログラムがページの形にして、レンタルサーバーに送ります。

# 記事を足して、組み立てて、送る
python3 build.py koukai
# → 記事のページ・一覧・トップ・サイトマップがそろう

相談フォームだけは、レンタルサーバーの PHP で受け取り、Discord に送っています。サーチコンソールへの登録・所有者の確認・サイトマップの送信も、API で AI が済ませました。YouTube の動画は公開日の20時に出るので、毎日20時半に自動で組み立て直し、記事の中で再生できるようにしています。

つまずいたところ

縦にスクロールして横に流れる動きは、操作が分かりにくかった → 使わない
見出しがサムネの上に重なると、中身が見えない → 見出しは上に出す
トップに全部のせると重い → 事例は3件だけにして、残りは一覧ページへ
チャットで送ったリンクのうしろの「）」まで URL になり、見つからないページに → 「）」や「。」は自動で外して開き直す設定に
ドメインを追加した直後は、しばらく「無効なURLです」と出る → 反映まで15分ほど待った

かかった時間とお金

時間：夕方から始めて、深夜に公開（デザインの見比べがいちばん長い）
お金：ドメイン代（年1,500〜2,000円ほど）だけ。レンタルサーバーは、もともと契約していたものに追加した

出典：Xserverドメイン／ J-PlatPat（特許庁）／ Google Search Console ／ Claude Code

このサイトのような Web 制作、お受けしています

デザインの見本を何案か先にお見せして、比べながら決められます。お店・会社のサイト、LP、予約フォームまで。相談と見本（1案）は無料です。

無料で相談する → 料金を見る

ほかの作ったもの

BGM と効果音をコードで作曲

AI の作業結果をスマホへ通知する仕組み

AI ナレーション4種の比較