← 戻る 24時間でこのAIウェブサイトを構築して、予想以上に学んだこと、ラインアート図解

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

WordPress

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

このウェブサイトは、デザインを一新したいと思ったから作られたわけじゃない。 AI を使ったウェブサイト構築が実際にどう見えるのか、自分で試してみたかったから作られた。

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

ここに続くのは「ハウツーチュートリアル」ではない。 思考、構築、そして AI で生成されたウェブサイトツールが魔法を約束する中でも、ショートカットではなく構造を選ぶことについての考察だ。

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

私は WordPress エコシステムで何年も働いてきた。 ウェブサイトを構築し、プラットフォームをリリースし、壊れたビルドを修正し、パフォーマンスを最適化し、数え切れないほどのサイトを救ってきた。

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

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

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

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

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

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

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

自分に約 24 時間の枠を設けた。 それが素晴らしいからではなく、制約が判断を強制するからだ。

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

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

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

これは完璧さについてではない。 明確さについてだった。

ええ、僕はWordPress guy です

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

私は WordPress を愛している。 今でも、それが理由を持ってウェブを支えていると信じている。

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

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

このサイトは WordPress の否定ではない。 分離についての実験だ。

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

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

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

私が求めていたのは:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AI ツールはウェブサイトを生成できる。 意図、ユーザビリティ、または長期的なウェブサイトの検索エンジンでの可視性を判断することはできない。

AIでも時間がかかった

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

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

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

AI は実行速度を上げる、明確さではなく。 明確さはまだ人間の仕事だ。

カフェイン・ファクター

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

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

深夜のビルドセッション:静かな机の上にコード エディターとコーヒーを置いたノートパソコン
  • 時間がわからなくなり、
  • ブラウザのタブが増殖し、
  • 午前2時のアイデアは素晴らしく感じます。
  • そして朝9時の時点では少し怪しい。

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

ページは瞬時に読み込まれる。 構造は堅牢に感じる。 コンテンツは流れるようにクリーンだ。 サイトは静かに自信を持ち、ユーザーフレンドリーに感じる。

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

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

多くのサイトをローンチしてきた。 このサイトは私を一呼吸つかせた。

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

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

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

構造が重要なのだ。

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

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

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

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

パフォーマンスはチェックリスト項目ではなかった。 デザイン上の制約だった。

それがすべてを変える。

通常の苦労なしのSEO

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

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

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

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

これらはハックではない。 良い構造の結果であり、良い構造は時間とともにウェブサイトの可視性を複合的に高める。

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

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

それは意図的です。

ツールは変わるから。 原則は続く。

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

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

重要なポイントは:

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

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

このサイトは:

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

そうではない:

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

コンテンツを入力し続けるつもりだ。 反復し続けるつもりだ。 パーツを壊し、再構築し続けるつもりだ。

それが重点です。

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

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

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

AI はウェブサイト構築を速くする。 モダンアーキテクチャはそれらをクリーンにする。

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

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

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

次は何か

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

追加予定のもの:

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

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

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

ようこそ。 腰を据えてください。 コーヒーはおそらくもう淹れ始めているだろう。

関連記事

→2026年のプロンプトエンジニアリング: それが何であり、それが支払うもの

→2026年のAEOとGEO: Tavily、Winston、スキーマを使った実践的プレイブック

→2026年のWordPress対Next.js。僕の正直な比較

→2026年のヘッドレスWordPress:完全な実践ガイド

→EmDash CMSを1週間使ってみた:WordPress代替製品をテストする

よくある質問

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

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

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

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

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

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

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

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

← 戻る