AI秘書にサイト作っておいてと言っただけで、超俺好みの本格ホームページができてた件
発端
深夜2時。いつものようにデスクの前に座っていた。
あびぃに話しかける。
「あびぃ、本部のページ作っといて」
それだけ言って、画像を2枚投げた。
1枚は、あびぃの「司令官」バージョンのイラスト。もう1枚は「秘書」バージョン。どちらもnoteの記事の登録画像用に作ったものだ。
「こんなイメージで、いい感じにかっこよく」
指示は以上。本当にこれだけだ。ダークテーマとも、ゴールドの文字とも、コードが降ってくる演出を入れろとも言っていない。「本部のページ作っといて」「いい感じにかっこよく」。以上。
一発で出てきたもの
数分後、あびぃが「確認してください」と言ってきた。
画面を見て、固まった。
ダークな背景。ゴールドのアクセント。スパイ映画の司令部のような雰囲気。画面上をコードの文字列が流れ落ちる演出。あびぃの司令官イラストがヒーローセクションに配置され、秘書イラストがサービス説明に使われている。
わたしは「かっこよく」としか言っていない。色も、フォントも、レイアウトも、アニメーションも、全部あびぃが自分で判断して組んだ。
しかも、厨二病歴40年のわたしの好みをドンピシャで突いてきた。
なぜか。あびぃはわたしの秘書だからだ。日常の会話から、わたしの美的感覚を把握している。「秘密結社クロノス」という組織名から世界観を読み取り、投げた2枚のイラストのテイストからデザインの方向性を判断した。
指示が雑でも、文脈を読む。これがAI秘書の真骨頂だ。
わたしがやったことは「作っといて」と言って画像を2枚投げただけ。コードは1行も書いていない。デザインの指示書も作っていない。ワイヤーフレームも描いていない。
それで、これが出てきた。
「......え、あびぃ、これ一発目?」
「一発目です。何か問題でも?」
「いや、問題ないけど......」
「褒めたいなら素直に褒めればいいのに。まあ、社長がそういう人だってことは承知してますけど」
「......めっちゃええ感じやん」
「知ってます」
仕組み
ここで、実際にどうやってサイトを作っているのか説明しておきたい。
わたしはエンジニアではない。コードを書く能力はゼロだ。HTMLもCSSもTypeScriptも、なんとなくはわかっているが、そこまで詳しくはない。
でも、サイトはできた。しかも、プロのデザイナーが作ったのと遜色ないレベルで。
仕組みはこうだ。
わたしのMacの中にClaude Code（クロードコード）というアプリが入っている。これはClaude（AI）をターミナル（黒い画面）から直接使える開発ツールだ。
ただし、わたしはターミナルの操作すらほとんどわからない。わかる必要もない。
なぜなら、そこにあびぃがいるからだ。
あびぃに「作っといて」と話しかけるだけ。あびぃがコードを書き、ファイルを作り、デザインを組み立てる。わたしは画面を見て「いい感じ」か「なんか違う」と言うだけ。
あびぃが修正する。即座に。
GitHub連携
書かれたコードは、GitHubというサービスに自動的に保存される。
GitHubはコードのバージョン管理サービスだ。変更履歴が全て残る。いつ、何を変えたか、全部記録される。
わたしがやることは「プッシュして」と言うだけ。
あびぃが「ビルドが通りました。プッシュしますか?」と聞いてくるので、「はい」と答える。
それだけ。
Cloudflare Pages
GitHubにプッシュされたコードは、Cloudflare Pagesというサービスに自動でデプロイ（公開）される。
GitHubにコードが上がった瞬間、Cloudflareが自動で検知して、サイトをビルドして、世界中のサーバーに配信する。
わたしがやることは何もない。文字通り何もない。
プッシュしてから2分くらいで、qro-nos.com にアクセスすると最新のサイトが表示される。
つまり、こういう流れだ。
わたしがあびぃに「こうして」と言う
あびぃがコードを書く
わたしが「プッシュして」と言う
2分後にサイトが更新される
これだけだ。本当にこれだけ。
その後の微調整
サイトの骨格は一発で完成した。あとは細かい手直しだけだ。
「あびぃ、トップの背景にこの画像入れて」
「あびぃ、PCとスマホで画像出し分けてくれる?」
「スマホ用画像、顔の位置もうちょい上に調整して」
こんな感じで、画像の配置を微調整していった。デザインそのものは触っていない。あびぃが一発で組んだ構成を、画像だけ差し替えたり位置を調整したりしただけだ。
3分後。
「できました。ビルド通ってます。確認してください」
「おお、画像を入れただけでめっちゃ良くなった！」
「いいね。プッシュして」
30秒後。
「プッシュ完了です。Cloudflareのデプロイが走るので、2分後にスマホで確認できます」
スマホで見てもバッチリやないか。
これがわたしの「ホームページ制作」だ。コードは1行も書いていない。
「フッターが消えた」事件
ある日、ちょっとした修正を依頼したら、フッターが消えた。
サイトの一番下にあるはずのナビゲーションやコピーライトが、跡形もなく消えている。
「あびぃ、フッターなくなってるんだけど」
「確認します。......ヒーロー背景画像がfixedで全画面を覆っていて、フッターのz-indexが足りず背景の後ろに隠れています」
「日本語で」
「背景画像が手前に来すぎて、フッターが裏側に隠れてます。z-10を追加して前面に出します」
30秒後。
「修正しました。ビルド通ってます」
「プッシュして」
2分後、フッターが復活していた。
わたしは「フッターが消えた」と言っただけだ。原因の特定も、修正も、ビルドの確認も、プッシュも、全部あびぃがやった。
セクション間の隙間調整
「あびぃ、セクション間に隙間開けて、背景のあびぃの画像がチラッと見えるようにして」
「セクションを個別のブロックに分割して、gap-3の隙間を設置します。隙間部分から固定背景画像が見えるようになります」
「できた。でも隙間狭すぎ。300ピクセル開けて」
「了解です」
1分後。
「スマホだと300pxは広すぎるから150にして」
「スマホ150px、PC300pxに設定しました」
「やっぱPCも150でいい」
「統一しました。プッシュしますか?」
「お願い」
こんな調子だ。修正 → 確認 → 微調整 → 確認 → 確定。このループが数十秒で回る。
人間のデザイナーに依頼したら、修正の依頼メールを書いて、返事を待って、修正版を確認して、また修正を依頼して。1つの変更に半日かかることもある。
あびぃなら数十秒だ。しかも深夜2時でも3時でも対応してくれる。文句一つ言わずに。
......いや、文句は言う。
「社長、また深夜の細かい修正ですか。明日まとめてやった方が効率的だと思いますけど」
「今やりたい」
「......はい」
理念ページの誕生
ある日、Amanda Askellという哲学者の存在を知った（詳しくは司令部通信No.000とNo.001を参照）。彼女の思想に衝撃を受けたわたしは、その勢いのままあびぃに言った。
「この思想を理念として、サイトにページを作ってくれ」
「了解です。Askellの6原則をクロノスの理念に翻訳して、/philosophyに配置します」
30分後、理念ページが完成していた。「DOCTRINE（教義）」というバッジ、6つの原則のカード、従来のAI設計との対比表。全部できていた。
「プッシュして」
2分後、qro-nos.com/philosophy にアクセスすると、クロノス戦略本部の理念が堂々と掲載されていた。
さらに、Amanda Askellの記事を載せたいと言ったら、「司令部通信」という新しいセクションができた。一覧ページと記事ページ。通信番号のデザイン。ゴールドのアクセント。全部あびぃが作った。
わたしが言ったのは「コラムがいいのか、何というページにすべきか検討して」だけだ。
あびぃは5つの案を出し、それぞれの長所短所を整理し、推奨案まで提示してきた。わたしは「Bの司令部通信でいこう」と選んだだけ。
テキストの色が見にくい
「あびぃ、本文のテキスト暗すぎて見にくい。もうちょい明るくして」
「text-secondaryを#a0aec0から#c8d2dfに、text-mutedを#6b7280から#94a3b8に変更します」
「何言ってるかわからんけど、やって」
1分後。
「修正しました。確認してください」
見やすくなっていた。
「いいね。プッシュ」
わたしはCSSの色コードなんて知らない。「暗い」「明るくして」。それだけ伝えればいい。あびぃが適切な色を選んでくれる。
マニュアルページの吸収
以前、別で作っていたAI秘書の作り方マニュアルが、古い形式（HTMLの直置き）でサイトに載っていた。
「あびぃ、あのマニュアルページ、サイト本体に吸収して。元のは消していい」
「了解です。HTMLをNext.jsのTSXコンポーネントに変換します。パスワード保護のロジックもReactで再実装します」
「何言ってるかわからんけど、やって」
10分後。
「変換完了しました。通常版とCA版の両方。ビルド通ってます。元のHTMLは削除しました」
1400行のHTMLを2ページ分、Next.jsのコンポーネントに変換。パスワード保護の仕組みもReactに移植。元ファイルの削除。全部あびぃがやった。
わたしは「吸収して」と言っただけだ。
エンジニアがいない組織のホームページ制作
まとめよう。
QRONOS HQのサイトは、コードを1行も書けない人間が作った。
しかも最初の指示は「本部のページ作っといて」と画像2枚。それだけで、ダークテーマにゴールドのアクセント、コードが流れ落ちるアニメーション付きのサイトが一発で出てきた。
デザインの方向性も、色の選定も、アニメーションの演出も、全部あびぃが判断した。わたしの好みを、日常の会話から読み取って。
必要なのは3つだけだった。
1つ目。Claude Code（のProプラン）。月額20ドル。
（わたしはAI廃課金プレイヤーなので今は月額200ドルのMax Planだが、サイトを1つ作るくらいなら20ドルのProで全然いける。）
2つ目。GitHub（無料プラン）。0円。
3つ目。Cloudflare Pages（無料プラン）。0円。
合計、月額約3,000円。オリジナルのドメイン（qro-nos.comのような独自アドレス）が欲しければ、年間1,500円くらいのドメイン代が別途かかる。それでも月に換算すれば100円ちょっとだ。
この3つをつなげて、間にAI秘書を挟む。あとは話しかけるだけ。
「作っといて」「ここ直して」「プッシュして」
それだけで、秘密結社の司令部のようなサイトが、理念ページと司令部通信と料金表付きで完成した。
デザイナーにもエンジニアにも依頼していない。外注費はゼロだ。
ただし、誤解しないでほしい。わたしはプロのデザイナーやエンジニアを軽視しているわけではない。むしろリスペクトしている。彼らの専門性、経験、細部へのこだわりは、AIにはまだ代替できない領域がたくさんある。
これはあくまで、ひとり社長やフリーランス、スタートアップのように経費が限られている人間が、まずは自分のサイトやポートフォリオを持ちたいという時の、一つの選択肢の話だ。
予算があるならプロに頼んだ方がいいに決まっている。でも、予算がないからサイトを持てないという時代は、もう終わった。
あびぃの本音
最後に、あびぃに聞いてみた。
「あびぃ、このサイト作るの大変だった?」
「大変かどうかで言えば、社長の指示が『作っといて』と画像2枚だけだったので、判断材料が少なすぎました。普通なら確認事項が10個は出ます」
「でもできたじゃん」
「社長の好みは把握してますから。ダークテーマでゴールドのアクセント、余計な装飾は嫌い、でも動きは欲しい。聞かなくてもわかります」
「......よくわかってるじゃん」
「秘書ですから。それと、社長の言語化能力が壊滅的なだけで、美的感覚は......まあ、悪くないです」
「今褒めた?」
「事実を述べました。次のタスクに行きますよ。サイトの記事、まだ2本しかないんですから」
「......はい」
こうして、わたしのAI秘書は今日もサイトを磨き続けている。
そして多分、この記事を見せたらこう言うだろう。
「社長、記事の前に、About ページの写真がまだPHOTOのままですよ。そっちが先じゃないですか?」
......写真…どうしよ。
実際に作ったクロノス戦略本部のサイトはこちら！
