built-ai-website-24-hours.html
< BACK AIウェブサイト開発者

24時間でAIウェブサイトを構築しました。予想以上に学んだことがあります

ネタバレ:大量のカフェインが関わっていました。

このウェブサイトがまとまったのは、リデザインを望んでいたからではない。自分自身をテストしたい、そしてAIウェブサイトを構築することが実務でどのような形になるのかをテストしたいという目的で実現した。

好奇心、モダンなAIウェブサイトビルダー風ツール、真っ白なキャンバス、そして厳しい個人的な制約——迅速に、しかし正しく提供する——をミックスさせたとき、何が起こるのかを見たかった。

以下の内容は「ハウツーチュートリアル」ではない。思考、構築、そしてAIで生成されたウェブサイトツールが魔法を約束する場合であっても、ショートカットではなく構成を選ぶことについての振り返りだ。

なぜ私はこのサイトを(再び)構築することにしたのか

私は何年もWordPress エコシステムに関わっている。ウェブサイトを構築し、プラットフォームを提供し、壊れたビルドを修正し、パフォーマンスを最適化し、数え切れないほどのサイトを救ってきた。WordPress ecosystem for years. I've built websites, shipped platforms, fixed broken builds, optimized performance, and rescued more sites than I can count.

では、なぜ個人サイトを再構築するのか?

状況が変わったからです。

AI ツールは今どこにでもあります:

  • 書くツール、
  • コードを書くツール、
  • リファクタリングするツール、
  • デプロイするツール、
  • あなたのためにほぼ考えるツール。

そして、私は 1 つのシンプルな質問に正直に答えたかった:

今日、モダンで高速、SEO対応の個人向けAIウェブサイトを構築するとしたら、どのようにやるのか、そして実際に何が重要なのか。

24時間制約(そしてそれが重要な理由)

私は約24時間の大まかなウィンドウを自分に設定した。それが印象的だからではなく、制約は決定を促すからだ。

時間が限られている場合:

  • 過度に設計することはできない、
  • キラキラした抽象化を追い求めることはできない、
  • 「ワンクリック」AIサイトビルダーの約束を盲目的に信頼することはできない。

実際に何が重要かについて明確に考える必要があります。

これは完璧さについての話ではありませんでした。

ええ、僕はWordPress guy です

まずこれをはっきりさせておきましょう。

私はWordPressが大好きだ。

しかし「WordPress person」であることは、こういう意味ではありません:

  • すべてに使用すること、
  • 他のアーキテクチャパターンを無視すること、
  • あるいは、今日のウェブサイト構築にはトレードオフが存在することを無視するふりをすること。

このサイトはWordPressの拒否ではありません。

コアの決定:コンテンツをプレゼンテーションから分離する

1つの決定がすべてを形作った:

コンテンツは、それをレンダリングするのと同じシステムの中に閉じ込められるべきではない。

私が求めていたのは:

  • クリーンでポータブルなコンテンツ、
  • 柔軟なプレゼンテーション、
  • モバイルデバイスとデスクトップ全体での高速配信、
  • そしてフロントエンドの最小限のムービングパーツです。

つまり、以下の観点で考える必要がありました:

  • まず構造、
  • あとからレンダリング、
  • パフォーマンスをデフォルトとして備える。後付けではなく。

このマインドセットは、AI ウェブサイトへのアプローチを完全に変えます。

「AI がそれを構築してくれます」(ほぼ)

このサイトを構築する際に、多くのAIツールを使用しました。

いくつかは以下に役立ちました:

  • コピーの作成、
  • レイアウトアイデアの探索、
  • ロジックの妥当性確認、
  • 反復的な作業の加速化。

その他は以下に役立ちました:

  • ライブコーディング、
  • リファクタリング、
  • 間違いを見つけること、
  • コーナーを切らずにより速く進むこと。

しかし、ここが正直なところです:

AI は思考を置き換えませんでした。それを増幅しました。

あなたはまだしなければならない:

  • 何を構築するかを決める、
  • 何を構築しないかを決める、
  • トレードオフを理解する、
  • ある答えが「正しく聞こえる」けれど、実際には正しくないということを認識すること。

AI ツールはウェブサイトを生成できます。

AIでも時間がかかった

これは声に出して言う価値がある。

最新のライブコーディングツール、アシスタント、コパイロット、いわゆる無料のAIウェブサイトビルダーの体験があっても:

  • 物事は壊れ、
  • 仮定は失敗し、
  • 統合には推論が必要で、
  • 構造にはまだ意図が必要だ。

AIは実行を加速させますが、明確性は加速させません。そして明確性はまだ人間の仕事です。

カフェイン・ファクター

たくさんのコーヒーが関わっていた。

時間を忘れてしまう、そんな種類の

Late-night build session: laptop with code editor and coffee on a quiet desk
  • 時間がわからなくなり、
  • ブラウザのタブが増殖し、
  • 午前2時のアイデアは素晴らしく感じます。
  • そして朝9時の時点では少し怪しい。

しかし、ビルダーなら誰もが知っている瞬間がある。物事がカチッとはまる瞬間だ。

ページが瞬時に読み込まれる。

その瞬間のためなら、カフェインの代償も払う価値がある。

誇りに思うこと(「動く」以上のもの)

私は多くのサイトをローンチしてきた。

というのも、私は自分の人生で、こんなことができるとは思ってもいなかったから。カジュアルにAIで生成したパーソナルウェブサイトをリリースするなんて:

  • ピクセルパーフェクトで、
  • 極めて高速で、
  • デフォルトでSEO対応している、
  • スケール対応を念頭に設計され、
  • 翻訳に対応でき、
  • スキーマ対応で、
  • 実験に向けて将来性を備えている、

...プラグインの不安もなく、パフォーマンスの負債もなく、応急処置的な機能もない。

構造が重要なのだ。

パフォーマンスは最適化ではなく、設計された

このサイトが高速に読み込まれるのは、「後から最適化したから」ではない。

高速に読み込まれる理由は、

  • 不要なオーバーヘッドがない。
  • 肥大化したランタイムはなく、
  • 検索エンジンと戦う不要な複雑性もない。

パフォーマンスはチェックリスト項目ではなかった。

それがすべてを変える。

通常の苦労なしのSEO

SEOはしばしば以下のように扱われている:

  • 事後対応として、
  • プラグインとして、
  • トグルとして、
  • チェックリストとして。

ここでは、SEOは構造的です。

クリーンなURL。予測可能なメタデータ。構造化されたコンテンツ。スキーマ対応。翻訳対応。

これらはハックではない。

なぜ、スタックに名前をつけなかったのか(意図的に)

プラットフォームやシステムを列挙していないことにお気づきかもしれません。

それは意図的です。

なぜなら、ツールは変わるから。原則は変わらない。

ここで得るべきは、次のようなものではありません:

「私が使ったものを使いなさい」

重要なポイントは:

「AIを使う場合でも、このように考え抜くこと」

このサイトは何か(そして何ではないか)

このサイトは:

  • 生きた実験、
  • 個人的な遊び場、
  • 思考の場、
  • アイデアを素早く形にする場所。

そうではない:

  • 完成していない、
  • 凍結していない、
  • または完璧なふりをすること。

コンテンツを追加し続けます。

それが重点です。

なぜこれが私にとって重要なのか

これを構築することで、シンプルなことを思い出させてくれた:

ウェブの喜びはツールではなく、意図的な創造にあります。

AIはウェブサイト構築を高速化する。

しかし本当の仕事はまだこれだ:

  • 何が重要かを決定すること、
  • シンプルさを選択すること、
  • ユーザーの時間を尊重すること、
  • 思慮深くリリースすること。

それは変わっていません。

次は何か

これはほんの始まりに過ぎない。

追加予定のもの:

  • より多くの執筆、
  • 実験、
  • 小さなツール、
  • 遊び心のあるアイデア、
  • そして他のビルダーたちを笑顔にするような、いくつかのものもあるでしょう。

あなたが気にかけているのが次のいずれかなら:

  • WordPress、
  • パフォーマンス、
  • SEO、
  • AI、
  • または単により良く、より速く、より思慮深いAIウェブサイトを構築すること

ようこそ。

関連記事

→2026年のプロンプトエンジニアリング:それが何で、どのくらい稼げるのかPrompt engineering in 2026: what it is and what it pays

→2026年のAEOとGEO:Tavily、Winston、スキーマを使った実践的なプレイブックAEO and GEO in 2026: a practical playbook with Tavily, Winston, and schema

→WordPress対Next.js(2026年):正直な比較WordPress vs Next.js in 2026: my honest comparison

→2026年のヘッドレスWordPress:完全な実践ガイドHeadless WordPress in 2026: the complete practical guide

→EmDash CMSとの1週間:WordPressの代替案をテストMy week with EmDash CMS: the WordPress alternative tested

よくある質問

AIで24時間でウェブサイトを構築できますか?

はい、ただし注釈があります。AIがこのサイトの構築の大部分を担当しましたが、それでも実際の時間、判断、そしてカフェインが必要でした。24時間の制約は集中力を強制しました:コンテンツをプレゼンテーションから分離し、定型文はAIに頼り、AIが全部構築してくれるというのはほぼ本当ですが、完全ではありません。

AIは本当にウェブサイト全体を構築してくれるのですか?

完全ではありません。AIは構築を大幅に加速させましたが、全体を通じて方向性、修正、判断が必要でした。コンテンツとプレゼンテーションを分離するという中核となるアーキテクチャ上の決定は人間によるものです。ここではAIは高速な協力者であり、放っておくことができる自律的なビルダーではありません。

なぜ24時間でパーソナルサイトを再構築するのか?

その制約そのものが目的でした。厳しい期限は過度な検討を排除し、本質的な決定を強制します。また、AI支援開発がどこまで進んだかの真正なテストでもあります。結果は機能するサイトと、AIが役立つ場面と まだ役立たない場面についての正直な教訓です。

コンテンツとプレゼンテーションを分離することの利点は何か?

コンテンツが表示方法に依存せず独立して存在できるため、デザインを変更したり、フロントエンドを追加したり、プラットフォームを変更したりしてもコンテンツを書き直す必要がありません。これはこのビルドの中核となる決定であり、ヘッドレスアーキテクチャの背後にある同じ原則です。

< BACK