EXPERIMENT #001
STATUS：COMPLETED
TOOLS：ChatGPT / Codex / WordPress / Local / Git / Duplicator
CATEGORY：AI × Web制作
「AIを使って副業をやってみたい。」
そこから始めた最初の実験が、このK&M DearsのWebサイト制作でした。
ただ、今回やりたかったのは「ChatGPTにHTMLを書いてもらう」みたいな使い方ではありません。
AIに実際の開発作業まで任せたら、Web制作はどこまで変わるのか。
それを自分で試してみることにしました。
まずは、昔のサイト整理から始まった
K&M Dearsは、以前個人事業をしていたときに使っていた屋号です。
サーバーを見ると、昔作ったWordPress、使わなくなったドメイン、データベースなどがいろいろ残っていました。
そこで最初にやったのが、まさかのサーバーの大掃除。
必要なサイトはバックアップして、不要になったWordPressやデータベースを整理。
そのうえでK&M Dearsを、
「AI・Web・自動化を実際に試して、その結果を公開する場所」
としてもう一度作り直すことにしました。
Codexにいきなり本番サイトを触らせない
開発環境にはLocalを使いました。
自分のPC上にWordPressを作り、そこでAIに開発してもらいます。
本番サーバーを直接AIに触らせるのではなく、
Local → 開発・確認 → 問題なければ本番へ
という流れです。
そして、実際にコードを書く担当として使ったのがCodexでした。
「Gitってサービスの名前やと思ってた」
ここでGitが登場しました。
最初は正直、
「GitってGitHubみたいなサービスの名前やったっけ？」
くらいの感覚。
ところが説明を聞いていると、
「変更履歴を管理する」
「コミットする」
「前の状態に戻せる」
……なんか聞いたことがある。
そういえば昔SEをしていた頃、Subversionを使っていました。
「あー、これの仲間か！」
ここでようやく理解。
AIが大量のファイルを変更できるからこそ、問題が起きたときに戻せるGitは、AI開発でもかなり重要だと分かりました。
CodexにWordPressを見せてみる
LocalのWordPressフォルダをCodexに渡します。
ただし最初の指示は、
「まだ変更しないで。まず環境を確認して」
でした。
CodexはWordPressのバージョン、PHP、MySQL、テーマ構成、Gitの状態などを調査。
その結果を見てから、
WordPressコアは変更せず、K&M Dears専用テーマを作る
という方針にしました。
ここから実装開始です。
「これ、許可してええん？」
Codexが作業を始めると、何度も確認画面が出てきます。
「Gitの状態を確認していい？」
「ローカルサイトにアクセスしていい？」
「このコマンドを実行していい？」
最初は、
「なんかめっちゃ許可求めてくるんやけど（笑）」
という感じでした。
でも、これは逆に安心材料でもありました。
AIがPC上で何かを実行するとき、人間が確認できる。
最初なので自動承認にはせず、内容を確認しながら一つずつ許可して進めました。
しばらく待つと、本当にサイトができた
そしてCodexがテーマを作り、WordPressで有効化。
ブラウザを開くと――
普通にサイトができていました。
しかも単なるテンプレートではなく、
「AIを、使ってみる。
作ってみる。
仕事にしてみる。」
というコンセプトを中心に、
Experiments、Works、Journal、Aboutなどが構成されたK&M Dearsのサイトです。
デザインも、いかにも「AI企業」という黒背景・ネオンではなく、研究ノートや小さな実験室のような雰囲気になりました。
でも、AIが作ったものをそのまま採用したわけではない
完成した画面を見ていると、気になるところも出てきます。
特にWorks。
まだ完成した実績がないので、大きな空欄になっていました。
「ここ、なんかもう一工夫ほしいな。」
そこで、
このK&M Dearsサイト自体を「制作・検証中の最初のWork」として見せたらいいんじゃないか？
という方向に修正。
AIが作る。
人間が見る。
気になるところを判断する。
AIに修正してもらう。
この繰り返しでした。
一番変わったのは「人間がやる仕事」だった
今回、自分ではほとんどコードを書いていません。
でも、何もしていないわけではありませんでした。
何を作るのか。
誰に見せるのか。
どんなサイトにするのか。
AIの提案を採用するのか。
どこを直すのか。
何を公開していいのか。
判断する場面は、むしろかなり多かった。
以前Webサイトを作っていた頃は、自分でHTMLやCSSを書き、WordPressを触っていました。
今回は、その実装部分をかなりAIに任せています。
その結果、人間の役割が、
「コードを書く人」から「方向を決めて、判断する人」へ
少し移動したように感じました。
今回のAIチーム
今回の役割分担はこんな感じでした。
自分
方向性を決める・判断する・承認する
ChatGPT（チャッピー）
企画・サイト設計・文章・Codexへの指示・レビュー
Codex
WordPressテーマの実装・Git操作・動作確認・修正
一人で作っているのに、感覚としては小さな制作チームに近い。
これは今回かなり面白かったところです。
EXPERIMENT #001：本番公開まで完了
この記事を書き始めた時点では、このサイトはまだ本番公開前でした。
この記事自体も、
実験中の会話をChatGPTが記事にまとめ、それをCodexに渡してWordPressへ掲載する
という方法で作りました。
この記事を含むK&M Dearsを本番環境へ公開するところまでを、今回の実験の完了条件にしていました。そして今回、その本番公開まで実施できました。
Localから、本番環境へ
Local上で制作・検証したWordPressサイトを、Duplicatorを使って本番環境へ移行しました。サイトファイルとデータベースを移し、本番用には新しいMariaDB 10.11のデータベースを作成して移行しました。
LocalのURLから、本番URLのhttps://kandm-dears.netへの置換も正常に完了。HTTPSで表示できることを確認しました。
公開後は、トップページ、ExperimentsとEXPERIMENT #001、WorksとWORK #001、Journal、About、Contactを確認しました。EXPERIMENT #001とWORK #001の間のリンクを含め、リンク・画像・レイアウト・日本語表示にも問題はありませんでした。
「作らせる」から、公開まで進める実験へ
今回できたのは、AIにサイトを作らせることだけではありません。環境を整え、できたものを確認し、何を採用してどこを直すか判断し、実際の本番公開まで、人間とAIで進められました。
Localでの制作から本番公開と確認まで到達したことを、EXPERIMENT #001の結果とします。今回の実験は、これで完了です。
そして次は、この仕組みをもっと自動化できないか試してみたいと思っています。
試す。
作る。
結果を見る。
使えるものにする。
K&M Dearsでは、そんな実験をこれから記録していきます。