Claude Codeと共謀して、この城(サイト)を建てた話 part1

最初に僕はプログラマーではない。 ギターを弾き、AIで音楽を量産し、料理をそこそこやる人だ。コードは読めなくもないが、「書く」となると話は別だった。そんな僕が、どういうわけか今、自分のウェブサイトを持っている。しかも、かなりかっこいいやつを。

これは、その共犯録だ。

共謀相手はAIだった

「Claude Code」というツールがある。ターミナル上でチャットしながら、自律的にコードを書いてくれるAIコーディングアシスタントだ。「こんなページが欲しい」「この動きを付けて」「ここの色を金にして」と言えば、僕の代わりに実際にファイルを書き換えていく。

最初は半信半疑だった。AIがコードを書くなんて、どうせ動かないコードを提案してくるだけで、最後は人が泣きを見るのだろうと。

違った。ちゃんと動いた。しかも「音楽サイトらしいデザインにして」と伝えると、「サイバー+和+アニメの融合はどうですか」と返ってきて、気づいたら漆黒の背景に、鈍く光るゴールドのアクセントカラー、そして漢字が流れるマトリクスアニメーションのある尖ったサイト――『saki♮ Lab』の骨格ができていた。

途中、Claudeのセッションがクラッシュした。 ブラウザが落ち、コンテキストが消え、どこまで進んでいたかの記録が画面から消え去った。システムという傲慢な構造に、すべてをリセットされたかと思った。

しかし、「前回クラッシュしたんだけど、途中からいけるかな」と再起動したClaudeに問いかけると、奴は「メモリを確認します」と言って、ローカルのログから瞬時に状況を把握し、何事もなかったかのように作業を再開した。なるほど、AIも独自の「記憶」と意志を持つ時代になったらしい。

城を建てる、という感覚とシステムのハック

このサイトを作りながら、ずっと「城を建てている」という感覚があった。

ここには設計図などない。「こんな感じ」という曖昧な意図だけが僕の頭の中にある。石を積む(コードを書く)のはAIで、でも「ここに塔を建てたい」「窓はこっちに向けたい」という審美的な判断は自分が下す。

その過程で、現代のシステムが設けた「制限」という名の壁にもぶつかった。 サイトや今後の楽曲リリースを彩る画像生成のために、Leonardo.aiを組み込もうとした時のことだ。最先端の連携機能であるMCP(Model Context Protocol)を試そうとしたが、MCPサーバーは選択が3つまで。そして、僕の環境では結局うまく繋がらなかった。

「繋がらないなら、API経由の従量課金にして直接叩けばいい」

速攻でアカウントに10ドルを放り込み、APIキーを引っ張ってきた。これが大正解だった。Claude Codeと連携させることで、今後の音楽配信を見据えた「3000×3000ピクセルの高解像度アルバムジャケット」を自動生成・拡大までし、そのままローカルに美しく保存するまでの強固なパイプラインを自前で組み上げてしまった。

実際、ディレクトリの中には、この城を機能させるための「実験場」が広がっている。

  • CLAUDE.md (絶対的な就業規則) プロジェクト全体を支配する基本ルール。AIがコードを書く際の規約や、絶対に破ってはいけない制約をここに刻み込む。起動時に必ず読み込ませることで、システムが僕の意図から逸脱するのを防ぐ、いわばこの城の「憲法」だ。
  • agents (役割の固定化) skills(手順)だけだと、AIが「優しい先輩」として動くか「厳格な裁判官」として動くかで結果がブレてしまう。「あなたは法務のプロです」というブレない判断基準(人格)を1箇所に固定するためにagentsが必要。
  • commands (人からのボタン化) skillsはAIが裏で使う「道具」なので、人が毎回それを直接探して細かく指示するのは面倒だから。人が画面から /check と1秒で呼び出せる「起動ボタン」として独立させるためにcommandsが必要。
  • skills (道具の独立化) 「法務エージェント」も「翻訳エージェント」も、実は同じ「文章を検索するスキル(道具)」を使うことがある。すべてをごちゃ混ぜに書くと、同じ道具を別の人格で使い回すという賢い効率化ができなくなるため、独立した機能として切り出す。

ここで試していたのは、agents内でAI同士の頭脳戦だ。たとえば、生成されたアートワークに対して、コピーライター役のAIと法務チェック役のAIをチャットルームで直接戦わせる。ただし、彼らを自由に喋らせておくと、お互いの言葉を読み合う無限の対話によって僕のトークン(お財布)が瞬く間に溶けていく。だからこそ、「互いに2往復だけ話し合って、最良の結論を出せ」と冷徹な制約をかける。

10ドルの予算を握りしめ、AIの群れに自律的なセッションをさせながら、自らの手でシステムをマッピングしていく。この制限をハックしていく感覚こそが、最高にスリリングだった。

この城にいくつかの仕掛けが施された。

  • ヒーローセクションに漢字マトリクスが流れるアニメーションの追加
  • 「染める」という文字にかけた、ノイズ混じりのグリッチエフェクト
  • ブログカードに配置した「Music」と「Digital」のカテゴリバッジ
  • 右上に置いた、世界を意識するための日本語/英語の翻訳ボタン

最終的にはこのサイトを、僕自身のベースとなるホームページにしたいと思っている。音楽とデジタル、そしてAIを掛け合わせた、既存のパラダイムを揺るがす何かをやっていきたい、という漠然とした野望がある。

外観は完璧に仕上がった。 しかし、城を城として機能させるには、外の世界と繋がる「門」が必要だ。そう、「お問い合わせフォーム」という、Web制作における次なる沼が僕を待っている。

今日の「共犯録」はどこかに残るだろう。AIと一緒にシステムをハックし、城を建てた最初の日のことを、誰かが面白がってくれたら嬉しい