はじめに
コーディングは面倒。楽して開発したいがモットーなSE。shunです。
そんな自分が、AIだけを使って静的サイトをひとつ作ってみました。できたのがこのサイト、コピペ de UI です。業務Webアプリでよく使うUIコンポーネントを、コピペで使えるようにまとめた事例集です。
作ってみた感想は「意外といけた」。ただ途中から「あれ、これ大変だぞ」が出てきて、最終的にはバイブコーディングとは真逆の「ルール化」の話になります。そういう話を書きます。
バイブコーディングってなに？
最近よく聞くワードなので簡単に。バイブコーディング（vibe coding）は、AIに自然言語で指示を出しながら作っていくスタイルです。「こういうUIが欲しい」と伝えるとAIがコードを書いてくれる。仕様検討→設計→実装という従来の流れとは違う、ノリと対話で進める感じです。知っている方は読み飛ばしてください。
実際どうやって作ったか
使ったのは Claude Code。VSCodeにClaude Codeの拡張機能を入れて使ってます。拡張機能を入れるとVSCode上でもチャット形式でAIと会話しながら開発できるもので、指示を打ち込むとファイルを直接編集してくれます。
最初にやったのは技術選定からでした。静的サイトにするか、Next.jsのようなフレームワークを使うかを、モックアップを実際に作りながらClaudeと一緒に比較検討しました。保守コスト・運用のしやすさを考えて静的サイトに決定。ホスティングはCloudflare Pagesを選びました。
「どう作るか」の検討をコードを見ながらAIと話し合えるのが、思ったより便利でした。
技術選定が終わったら、いきなりページを作り始めるのではなく、まずルールを決めることにしました。ルールを決めてからページ作りに入って、最初の1ページを丁寧に作ってテンプレート化。そこから同じ構成で事例を量産していく流れです。
CSSの細かい調整や「このコンポーネントのデモページを追加して」みたいな指示が想定より速く形になって、「作る」部分はかなり快適でした。コーディングが専門じゃない自分でも、ちゃんと動くものが作れます。
保守で大変だと気づいた話
事例ページを増やしていく中で、最初に困ったのが「関連事例のリンク」でした。
各事例ページの末尾に関連する事例へのリンクを入れていたんですが、これを最初はHTMLに直書きしていました。Claude Codeがカテゴリや作成日から関連性を判断して、ページ作成のたびにリンクを入れていました。
最初は問題なかったんですが、事例が増えてきて困ったことが起きました。
「新しい事例を追加したら既存ページの関連リンクも見直したい。でも全ページのHTMLに直書きされているので、1ページずつ修正しないといけない」
これが地味に大変で。対策として、事例の情報を管理するJSONファイルを作って、関連リンクをJavaScriptで動的に展開する形に変えました。JSONを1箇所直すだけで全ページに反映されるようになって、だいぶ楽になりました。
別の問題として、事例が増えてきたときにサイト内の回遊性が悪かったのも気になって、サイドバーに索引を追加しました。これもJSで動的に生成する形にして、トップページと事例ページ両方に表示できるようにしています。
こういうことが積み重なって「作れることと保守できることは別だな」と実感してきました。
ルール化で解決した
振り返ると、うまくいった部分は「ルールを先に決めてからAIに指示した」ところに集中していると思います。
このプロジェクトでは、AIへの指示をまとめる CLAUDE.md というファイルを最初に作りました。Claude Codeはこのファイルを作業前に自動で読んでくれるので、毎回ゼロから説明しなくて済みます。
CLAUDE.md 自体には「このプロジェクトのルール一覧と、詳細はどのファイルに書いてあるか」を書きました。詳細なルールはテーマごとに別ファイルに分けています。
実際に作ったルールファイルはこんな感じです。
サイト全体の構成・技術スタックのルール
使うHTML/CSS/JSのルール、ディレクトリ構成、ファイル命名規則など。「このプロジェクトはフレームワーク不使用の静的サイトです」というのもここに書いてあります。
事例ページのレイアウト規約
事例ページの構成順（機能説明→デモ→サンプルソース→AIプロンプト）、各セクションのクラス名のルール、デモに必ずリセットボタンを付けることなど。これを決めておくと「このページだけ構成が違う」がなくなります。
SEO・セキュリティのルール
全ページ共通のmetaタグのテンプレート、OGP設定の書き方、セキュリティヘッダーの設定方法、リリース前のチェックリストなど。SEOって地味に覚えることが多いので、ルールにしておくと抜け漏れが減ります。
このようにルールを整備してから「新しい事例ページを追加して」と指示すると、AIが毎回同じルールに沿って作ってくれるようになりました。最初からこの状態にしておけばよかった、とは思います。
逆にルールがなかった部分（関連リンクの直書き問題がまさにこれ）は、あとから直すのが大変でした。AIへの指示がブレると成果物もブレる。ルール化はAIを使う前提の設計みたいなものだと思っています。
まとめ
バイブコーディングで「作る」こと自体は、思ったよりずっと簡単でした。コーディングが面倒な自分でも、AIに指示を出せればちゃんと形にできます。
ただ続けていくためには、ルール化が必要でした。AIへの指示をMDファイルのドキュメントとして残して、ページの作り方・確認項目を統一する作業。これは設計の話に近くて、コーディングスキルとはまた別の知識が要る部分です。
今回一番痛感したのが、設計・ルール化の重要性でした。「AIで作れる時代になった」は本当だと思います。ただ関連リンク問題のような泥臭い経験も、設計の引き出しがあれば最初から避けられたかもしれない。AIを使いこなすほど、設計・構造化の考え方の重要性は増していくなと感じています。
設計の考え方は独学だと偏りがちで、体系的に学べる場を探すのも一つの手だと思っています。今はオンラインでAIを使った開発手法なども容易に学習できますので、そういったものを利用して自己学習を進めるのもよいかもしれません。