コデックス（codex）vibeコーティングでホームページ制作、『AIエージェントはプロンプト一枚で完了するのか？』

最近YouTubeを見ていると、AIでアプリやホームページを一瞬で作る動画をよく見かけます。メニュー表に載せるコーヒーの種類をいくつか書くだけで、簡単なプロンプト一枚でメニューアプリを作ったという動画もあります。確かにAIは以前よりずっと多くの作業を担ってくれるのは間違いありません。私もコデックスを使ってホームページを作成したり、ブログ管理ページを修正したり、サーバーにアップするファイルを整理したり、内部管理用プログラムも作っています。しかし、実際の業務で使うと一つだけはっきりしていることがあります。

こちらが私がコーティングしている様子です。二台のパソコンを使い、並列で使用しています。

プロンプト一枚でそれっぽい画面は作れます。しかし、実際に運用可能なホームページを完成させるのは全く別の問題です。コデックスでホームページ作りが簡単だった理由は、先週の金曜日の夜、平日に中断していた「コリアマック」ホームページの作業を続けながら使っていたチャットを整理したものです。

私は以前ホームページ制作会社で働いていました。企画も行い、コーディングも担当し、デザインもある程度手掛けました。メイン業務はデザインだけではありませんでしたが、ホームページが制作される全体の流れはずっと見てきました。

ブログを始める前は、ホームページ会社でプロジェクトマネージャーに近い役割もしていました。業者との相談、必要なメニューの整理、デザイナーや開発者への修正指示、完成後はクライアントとのやり取りで細かい調整を終わらせることが多かったです。そのため、コデックスを使ってホームページを作ることは私にとってはかなり簡単でした。最初からホームページの構造がどうあるべきか分かっており、どこに問題が生じるかもある程度予測できたからです。

HTMLも私はメモ帳から始めました。メモ帳を開いて、この文書はHTMLだと定義し、保存するときに拡張子をHTMLにすればウェブ文書になります。そこにリンクを入れ、画像を入れ、ページをつなげればホームページになります。今見るととても単純に聞こえますが、ホームページの始まりは結局そうした構造です。その上にデザインが乗り、データベースが入り、管理画面がつき、問い合わせフォームや検索機能が組み込まれて、どんどん複雑になっていくのです。

昔はゼロボードをよく使いました。ゼロボードのDBを切り取って使い、必要な情報を引き出し、APIのような方式で入力欄や一覧を作ることもありました。今はその作業の多くをコデックスが代わりにやってくれます。そのためコデックスは便利です。以前は開発者やデザイナーに説明していたことを、今はコデックスに説明すればよくなりました。

一ヶ月間でコデックスで作ったもの

ブログにそっくりなホームページです。

まず多くの方が最も興味を持つのはブログのアーカイブ化です。ブログを自動的にウェブページに移し、GoogleサーチコンソールとNAVERサーチアドバイザーにアドレスを登録してウェブページ検索の露出を目指したホームページです。

コデックスを本格的に使い始めてまだ一ヶ月ほどです。しかしその間に作ったものは結構多いです。自分のブログやホームページ関連の作業を行い、クライアントのホームページもいくつか制作しました。今の時点でクライアントホームページ2〜3件をコデックスで制作しました。

サブコンにあるコデックスをコントロールするパネルです。Naverのコメント自動化も見えますね。

またサブコンを管理するアプリのようなツールも作りました。メインPCからサブPCに作業を送り、サブPCで実行中の作業を確認できる仕組みです。

さらに取引先管理ソリューションも作りました。サーバーにアップして、私がスケジュール、取引先情報、取引先ごとのタスク、チェックリストを管理できる内部プログラムです。一人で作業していると頭の中だけでは覚えきれないことが多いので、こうした管理ツールが必要でした。

こういったものは昔なら別途開発者を呼ぶか、私自身が長い時間をかけてコーディングしなければならなかった作業です。しかし今はコデックスと対話しながら構造を組み立て、ファイルを作り、サーバーにアップし、エラーを修正しながら完成させられます。この部分だけを見ると、「もうAIがすべて作り上げる時代になった」と言えるかもしれません。でも実際にはここで話が終わりません。

速くなった部分と変わらない部分

コデックスを使って最も短縮されたのはコーディングとデザインの実装です。体感としてコーディングと画面構築は90%以上減ったと思います。昔は開発者が直接作らなければならなかった入力フォームや一覧ページ、管理画面、DB接続、簡単なAPIのような作業をコデックスがかなり担当します。

それぞれのホームページには検索用のブログアーカイブページも付け加えています。

デザインも同様です。希望する雰囲気や配置を説明すればコデックスがCSSを組み、レスポンシブ構造を作り、モバイルで崩れる部分もある程度修正してくれます。ですが短縮されない部分もあります。企画は依然として人間がしなければなりません。どのメニューが必要か、どの情報を先に見せるべきか、業者が実際に望んでいることは何か、顧客がホームページで何を見て問い合わせするのかを判断する必要があります。

資料の整理も必要です。業者から提供された写真がどの商品なのか、どんな順番で見せるべきか、どの内容は公開してよいか、どの内容は除くべきか整理しなければなりません。クライアントとの相談も変わりません。完成後に「ここを少し変えてください」「検索窓も入れてください」「問い合わせフォームの項目をもう一つ追加してください」という依頼が続きます。サーバーへアップロードと実際の公開画面の検証も行います。ローカルで見える画面とサーバー上で見える画面が違うことがあり、モバイルでのみ崩れるケースもあります。結局コデックスが削減するのは実装の時間だけです。しかしホームページを完成品にするための判断や検証は依然として人間の仕事です。

400ページ規模のホームページを作って感じたこと

最近、コデックスでかなり大規模なホームページを手がけました。ページ数で言うと400ページに近い構造でした。大枠を作るのに思ったより時間はかかりませんでした。約2時間30分ほどで基本構造ができました。

この部分だけを見ると本当に驚くほどの速さです。昔のやり方ならデザイナー1名、開発者1名、コンテンツを入れるエディター、そして全体を管理する人がついて一ヶ月近くかかるボリュームです。しかし大きな構造が早くできたからといってホームページが完成するわけではありません。検索窓を入れ、入力フォームを整え、小さなバグを修正し、ページごとの詳細内容を調整するにはまた時間がかかります。大きな機能ではなくても実際に運用できるレベルに仕上げるには2日以上かかることもあります。私も一日中フルでは作業できません。集中しても一日に2〜3時間ずつ分けて作業します。そうして数日かけて1週間以内にある程度完成させました。とはいえ昔と比べると大きな変化です。昔は複数人で分担していた作業を今は一人でこなせます。ただ一人で処理するということは、一人でAからZまで全て確認するという意味でもあります。AIはデザイナーや開発者のかなりの部分を代わりにやってくれますが、PMや企画者、検証者の役割までなくしてはくれません。

ホームページ制作においてデザインとコーディングは全てではないのです。

多くの方はホームページ制作をデザインとコーディングだけだと思いがちです。画面を美しく作り、ボタンを押せるようにすれば終わりと思い込みがちです。しかし実際の制作ではデザインやコーディングが占める割合はそこまで全てではありません。もちろん重要な部分ですが、ホームページが運用されるためにはその前後にずっと多くの作業があります。

業者がどんな仕事をしているか理解しなければなりません。顧客がどんな検索語句で訪れるか考えなければなりません。トップ画面でどんなメッセージをまず出すか決めなければなりません。問い合わせ用の電話番号、カカオトーク、フォーム、地図、商品説明、ブログ連動なども整理します。完成後も作業は残ります。実際に入ってみると画像が大きすぎたり、モバイルでボタンが下に押し出されたり、サーバーではパスが違ったりすることがあります。こうした部分を一つずつ確認しながら直していきます。

だからホームページ制作は単に画面を作るだけではありません。業者の情報をウェブ上で機能させる作業です。コデックスはこの過程で非常に強力なツールになります。でも方向性を示す人がいなければ、それっぽい画面を作って終わるだけになってしまいます。

プロンプト一枚で作れるものと作れないもの

プロンプト一枚で作れるものはあります。例えばメニューアプリの草案や簡単なランディングページ、テスト用の管理画面、基本的な入力フォームくらいなら十分に作れます。

コデックスに画面構成や機能を説明すれば素早く結果を出せます。しかしプロンプト一枚で作るのが難しいものもあります。実際の業者の資料を反映したホームページ、サーバーにアップして運営するホームページ、検索露出も考慮したページ構造、問い合わせへの誘導を考えた構成、保守も可能な管理画面は単純な一枚のプロンプトで済むことは難しいです。なぜなら画面デザインだけではないからです。資料の整理、コンテンツ構造、DB保存方法、管理者権限、モバイル画面、サーバーパス、バックアップ、セキュリティ、検索露出、クライアントの修正依頼まで全部含まれます。AIが全部やってくれるというのは半分正解です。AIは実行を大幅に減らしてくれます。しかし何を実行すべきか、どこまで合わせるべきか、何をしてはいけないかは人間が決めなければなりません。

コマンド、ハーネス、スキルという言葉について

最近AIコーディングを話すときにコマンド、ハーネス、スキルという言葉がよく出ます。私も今はそう言います。でも正直に言うと、これらの概念はAI時代に突然できた全く新しいものだとは思いません。

サブページをたくさん作るコリアマックのようなホームページは、サブページを作るとAIが自動でメニューをどんどん作り強力なハーネスをかけたものです。

コマンドは昔の開発者への作業指示に似ています。「こうしてください」「ここには触らないでください」「あのファイルは削除しないでください」「終了後にモバイルで再確認してください」などです。これがコマンドです。ホームページを作り続けて修正しても品質が落ちないように作業システムを設計する技術に近いです。こうして作業を進めると自動生成される私のハーネスはメモ（Markdown）形式のハーネス.psになりました。ハーネスは検証基準に近いです。作業が適切に行われたかチェックリストの役割です。スキルは繰り返しの作業の手順です。毎回同じやり方で行う業務をまとめたものです。ブログ記事を書いた後に複製用HTMLを作成し、代表画像を入れ、サーバーにアップし、公開画面を確認するといったルーチンです。言葉は新しくなりましたが、実際の働き方は昔からあったものです。ただ今はその基準と手順を人間が覚えるのではなく、コデックスが読めるファイルや指示で整理する違いがあります。

コデックスをうまく使うには言葉だけでは足りないです。

コデックスを上手に使うにはプロンプトをかっこよく書くだけでは終わりません。むしろ重要なのは作業を分割する能力です。どの作業をコデックスに任せていいのか、どの作業は人が直接確認すべきか、どんなタイミングでは自動で進めてはいけないかを決めることです。ホームページ作業であれば削除や上書きが必要な時は停止すべきです。ブログ作業なら公開ボタンを押す前に止めるべきです。コメント作業ではログインアカウントが違ったりセキュリティコードが出たりしたら停止が必要です。AIに作業を任せるほど中断条件が重要になります。たくさんやらせるよりも、誤動作しないようにすることがより大切です。

それでもコデックスはホームページ制作を変えました。

ここまで話すとAIはあまり役に立たないように聞こえるかもしれませんが、私の考えは逆です。

クイックアイコンの位置を教えようと画面を見てほしいと言ったらコデックスが撮ったスクリーンショットです。

コデックスはホームページ制作のやり方を確実に変えました。以前はアイデアがあっても開発者に説明し、デザイナーに伝え、修正を受けてまた直し、機能が必要なら別途開発スケジュールを組まなければなりませんでした。

Photoshopで説明しても素早く理解します。