VibeCodingでPEK2025サイトを構築した話
はじめに
PEK2025 の WebSite開発チームのリーダーをしている ishikawa-pro です。
今回、このPEK2025のウェブサイト構築において、VibeCodingという手法を活用しました。
VibeCoding（バイブコーディング）とは、AIを活用して「デザインから実装まで」を高速に行う新しい開発スタイルで、「雰囲気（vibe）を伝えるだけでコーディングが進む」という感覚に由来します。具体的なツールや手法は問わず、デザイン生成やコーディング、AIによるアシストなど、各工程で最適なAIツールを柔軟に組み合わせることで、プロンプトベースで一気通貫にWeb開発を進められるのが特徴です。
本記事では、v0を使ったデザイン作成から、Clineを活用した実装まで、実際の開発プロセスを詳しく解説します。
技術スタック紹介
今回のPEK2025サイト開発では、以下の5つの主要技術を組み合わせたVibeCodingアプローチを採用しました。
v0（Vercel製ジェネレーティブUIデザインツール）
v0は自然言語から即座にReact/Next.jsなどのUIコンポーネントを生成するVercelのサービスです。コードも同時に生成されるため、そのままコピペで使用できます。
Cline（VS Code拡張・自律型コーディングエージェント）
ClineはPlan（設計フェーズ）とAct（実行フェーズ）を分離し、コードベースを解析してタスクリストを提示後、ユーザー承認ごとにファイル生成・編集・コマンド実行を自動化します。
https://github.com/cline/cline
OpenRouter
OpenRouterは複数のLLM（大規模言語モデル）を束ねる統合APIゲートウェイです。さまざまなAIモデルを一元的に利用でき、用途やコストに応じて最適なモデルを選択できます。
Claude Sonnet 4
Claude Sonnet 4は Anthropic 社が開発した高性能なLLMです。
今回は OpenRouter 経由で利用しました。
https://www.anthropic.com/news/claude-4
Astro（Islands Architecture）
Astroはページ全体を静的HTMLとし、必要部分だけをJavaScriptの”Islands”として動的化する設計で、初回ロードが軽量でSEOに強いフレームワークです。
開発フロー詳細
1. v0でのティザーページ初期生成
PEK2025のロゴおよびカラーパレットがすでに決定していたため、それらを活用してv0にティザーページを作成してもらいました。
入力内容：
- カンファレンス名：Platform Engineering Kaigi 2025
- ロゴ画像
- カラーパレット：#006FB8, #5F5F9D, #ED951D, #F4BD00
出力結果：
- Next.js + ReactベースのHTML/CSSコード
- v0のzipダウンロード機能を使用
- ロゴや色味が即座に反映された、ブランドトーンに沿ったデザイン
この段階で、ティザーページの大枠となるデザインを高速で用意することができました。
2. ClineによるAstroプロジェクトへの移植
v0で生成されるのはNext.js用のコードのため、そのままでは既存のAstroプロジェクト（src/pages/pek2025以下）に組み込めません。
そこで、 Cline を利用して Astro としてコードを移植させました。
既存プロジェクト構造：
src/pages/
├── cnia/ # Cloud Native Inovators (CNIA) のホームページ
├── pek2024/ # PEK2024イベントページ
└── pek2025/ # PEK2025イベントページ（新規追加）移植手順：
-
リポジトリ直下に、v0からダウンロードしたzipを展開
-
Clineに指示：
「./pek2025-teaser に next.js で書かれたサイトがあります。
このサイトのトップページを、Astro として ./src/pages/pek2025 に移植して欲しいです。」
Clineは、ページ構成やスタイル、アセットの配置などを理解し、必要な部分をAstroコンポーネントに変換してくれました。具体的には：
- Next.jsのコンポーネント構造をAstroの
.astroファイルに変換 - CSSスタイルの適切な配置
これにより、v0で作成したティザーページをベースに、Astro上で動作する実サイトを構築することができました。
実際に作成したサイト
v0 で生成したデザイン(比較用)
3. v0のfork機能を活用したページ展開
トップページは上述した流れで開発できましたが、その後もトップページにコンポーネントを追加したり、新しいページを作成したりなど、サイトをどんどん拡張していく必要があります。そのようなケースでも v0 を活用しました。
v0には「Chatによって作成した成果物をfork（分岐）して再利用する機能」があります。これを活用することで、他のページやコンポーネントのデザイン作成も効率的に行いました。
実際の運用方法：
-
最初に作ったティザーページの成果物をfork
-
fork した新しいChat上で追加指示
- 「登壇者一覧ページを追加したい」
- 「タイムテーブルを作成したい」
-
各ページやコンポーネントがティザーページと一貫性のあるトーン＆マナーで設計される
この手法のメリット：
- トンマナの統一：ブランドの雰囲気を保ったままページ展開が可能
- Chatのコンテキストを切り離せる：fork によりv0の会話履歴がリセットされ、長すぎるコンテキストによる出力精度の低下を防げる
- Chat ごとの目的分離：トップページ、スピーカーページ、タイムテーブルなど用途別にChatを分けて管理できる
v0 で生成されたデザイン
プロポーザルの一覧ページ
プロポーザルの詳細ページ
かかった費用
今回の VibeCoding でかかった費用についても簡単にまとめておきます。
v0
v0は、無料プランからPremium、Team、Enterpriseまで複数のプランが用意されており、基本的には月額＋クレジット（トークン）課金の仕組みです。Freeプランでも毎月一定量のクレジットが付与され、個人のモック作成や小規模なページ生成には十分利用できます。Premiumプラン（$20/月）ではFigma連携やAPI利用など、より高度な機能が解放されるのが特徴です。
今回は個人的にPremiumプランを契約していたためPremiumを利用しましたが、今回のPEK2025のような1サイト分程度のページ構成であれば、Freeプランでも十分作成可能だと思います。大規模なプロジェクトやFigma連携などが必要な場合以外は、まずはFreeプランから試してみるのもおすすめです。
Cline
Cline 自体にお金はかかりませんが、 OpenAI や Claude の API を利用するのにお金がかかります。
Cline は Session や Chat 単位でいくら費用がかかっているのかが表示されるので、安心して利用できるのも良い点です。
一番最初に v0 で生成したコードを、 Astro として移植した際にかかった費用は $3.8376 でした。
初めて実行した時は、すごくお金がかかってうまく行かなかったらどうしようかと思いましたが、想像以上に安くて驚きました。
一度 src/pages/pek2025 の土台ができてしまえば、ページ追加やコンポーネント作成の実装コストは下がるので、それ以降の実装ではさらに安い API 使用量で実装できるようになってます。
まとめ
今回のPEK2025サイト開発では、v0、Cline、Astro を組み合わせたVibeCodingにより、以下のような開発フローを実現しました：
- v0で素早くブランドに沿った初期デザインを作成
- Clineを使ってNext.jsからAstroへ自動変換・移植
- v0のfork機能でトンマナを保ったままページ展開
AIツールの特性を理解しながらうまく活用することで、デザインから実装、公開までの流れをスムーズに進めることができました。 v0 と Cline の組み合わせは、コード変換や構造設計のような手間のかかる工程を、ほとんどストレスなくこなせる強力なワークフローだと感じました。
また、今回は専任のデザイナーがいないチームでの開発でしたが、v0 を使うことで一定のクオリティを保ちながらも、かなりのスピード感でサイトを仕上げることができました。 昨年のカンファレンスサイトの制作にも関わっていたのですが、そのときと比べても体感で数倍から十数倍は速く開発が進んでいたと思います。
今後もこうした VibeCoding 的なアプローチを取り入れながら、より良い開発体験と成果物の両立を目指していきたいと思います。