【AIサイト制作体験記 第3話】AIに設計を渡したら、1日で15ページのサイトが公開された

AIサイト制作体験記 第3話 約1日で15ページの公開版ができた AIサイト制作体験記

前回(第2話)は、公式から3つの条件付きで許諾をもらい、サイト名が「はちみつ研究所」に決まったところまででした。

いよいよ中身を作ります。今回は、この連載でいちばん景気のいい回です。

なにしろ、初期設計からおよそ1日で、サイトを見られる状態まで進みました。

🍯 この体験記について

AIを使って実際にサイトを作り、公開し、間違いを見つけて直していった記録です。「1日で完成した」という話ではありません。速く進めた部分と、その後に必要だった検証を、分けて書きます。

📋 今回の実施記録

実施日: 2026年7月25日〜26日
環境: Claude Code、Astro、Markdown、Cloudflare Pages
所要時間: 初期設計から最初の公開版まで約1日
追加費用: 0円(契約済みのAI利用料を除き、無料公開枠を使用)
結果: 15ページをPCとスマートフォンから見られる状態で公開
記録の再確認日: 2026年8月3日

道具を決める

まず、何で作るかを決めました。

  • Astro(アストロ): Webサイトを組み立てる道具。表示が軽くなるのが特長です
  • Markdown(マークダウン): 見出しや太字を、記号だけで書ける文章の書き方。原稿をそのままページにできます
  • Cloudflare Pages: 作ったサイトをインターネットに置いて公開してくれるサービス。無料の枠で始められます

難しそうに見えますが、私がやったのは「この方針でいきます」と決めたことだけです。設定や組み立ては、AIに任せました。

原文を100ページ、まるごと手元に保存した

作業の最初にやったのは、記事を書くことではありませんでした。

公式の資料(英語版100ページ)を、丸ごと手元に取ってくることです。取得用の小さなプログラムをAIに書いてもらい、まとめて保存しました。

そのとき、もうひと工夫しています。各ページの内容からSHA-256という値を計算して、一緒に記録しておきました。

🔤 用語メモ: SHA-256(ハッシュ)

文章の内容から計算される「指紋」のような値です。中身が1文字でも変わると値が変わるので、後から「このページ、更新された?」を機械的に見つけられます。

これが後々かなり効いてきます。公式の資料は、こちらの都合と関係なく更新されるからです。

1日で、最初の公開版まで到達した

そこからは、あっという間でした。

作業開始からおよそ1日で15ページを作り、Cloudflare Pagesに公開。パソコンでもスマートフォンでも、実際に見られる状態になりました。

正直に書くと、ここは驚きました。私一人で資料を読み込み、サイトを1から立ち上げていたら、同じ時間ではまず進められませんでした。

ただし、ここを誤解しないように書いておきます。

⚠ 「1日で完成」ではありません

1日で到達したのは「最初に人が見られる状態」までです。完成ではありません。このあと7日間、内容の検証と修正が続きました。むしろ公開は、確認作業の始まりでした。

約1日で15ページの最初の公開版を組み立てるミツバチ
最初の公開版を約1日で組み立てた場面。完成ではなく、ここから検証が始まりました

AIのキャッチコピーは、却下した

同じ日に、トップページも作り直しています。

そこで一番もめたのが、いちばん上に置く1行でした。AIが出してきた案は、これです。

歩くことが、通貨になる。

一見、かっこいい。でも、私はこれを却下しました。

このサイトは「儲かります」と言うためのものではありません。この1行だと、お金の話が主役になってしまいます。しかも、フッターには投資勧誘ではないと書いてあるのに、上ではお金を強調している。ちぐはぐです。

代わりに私が出したのが、この1行でした。

続かない運動に、続ける理由を。

こちらを採用しました。AIの案は「稼げる」に寄っていて、人間の案は「続く」に寄っていた。この違いは、あとで紹介動画を作るときに、誰に向けて話すかを決める軸にもなりました。

顔になったのは、黄色いレインコートのハチ

トップに置く絵は、別のAI(Antigravity)に作ってもらいました。

できあがったのは、黄色いレインコートに赤い長靴のハチが、雨の中を飛んでいる絵です。これがサイトの顔になりました。

この絵、あとから思うとよく働いてくれました。雨で外に出られない日の遊び方を説明するときに、そのまま挿絵として使えたからです。狙って作ったわけではなく、結果的にそうなりました。

今回の学び: 速いのは「公開まで」

📝 今回の学び

AIを使うと、最初に人が見られる状態まで到達する速度は、はっきり上がります。ここは実感しました。

ただし公開は、ゴールではなく検証の開始でした。「速く出せた」と「正しく書けている」は、まったく別の話です。

さて、無事に公開できて、私はすっかり安心していました。

ところが数日後、前提が崩れます。私が100ページ読んでいた英語版は、実は原本ではありませんでした。

コメント

タイトルとURLをコピーしました