【実録】Clineを使って2週間でWebサービスをリリースした話 〜海外進出支援サイト構築事例〜
Clineを活用して、どこまで開発を効率化できるのか？
結論：2週間でMVP公開できました。
本記事では、実際にClineを使って海外進出支援サイトを構築した体験をベースに、
- なぜClineを選んだのか？
- どう使ったか？
- どこまで効率化されたのか？
を、リアルな開発事例ベースで紹介します。
🌍 プロジェクト概要
🧩 案件の背景
最近、巷でもAI駆動開発という単語を徐々に耳にするようになりました。
そんな最中、つながりのある企業から、 「1ヶ月以内にサイト公開できる？」 という相談があり本プロジェクトが始動しました。
要件は、「海外進出支援プラットフォーム」（❓） を作ってほしいとのことでした。
最低限必要な機能
- 企業一覧の閲覧
- サブスクリプション決済機能
- 翻訳（英語・日本語）
当然ながら、ゼロからコードを書いていては到底間に合わない、しかもリソースもない。
そんな状況で頼りになったのが「Cline」でした。
👥 人員構成
リソースがなかったので全て私とClineで完結させました。
私は1行もソースコードを書いてません。
| 担当領域 | 担当者 |
|---|---|
| PM（要件定義・進行管理） | 私 |
| フロントエンド実装（Next.js） | Cline |
| バックエンド実装（Express） | Cline |
| データ投入・初期登録 | 私 + Cline |
👍 完成イメージ
🔴 サイトトップ
- 画像もAIで生成
- 画像だけだと寂しかったので動きもつけました
🔴 企業一覧ページ
- カード形式で企業情報を表示
- 部分一致検索、業界・国での絞り込み、並び替えが可能
📝 要件
- 海外進出を考える中小企業向けのPRサイト
- 掲載企業のバナー表示＋サブスク課金（月1,000円税抜）
- 最低限、以下の機能が必要
| 必須機能 | 詳細 |
|---|---|
| 翻訳機能 | 日本語 / 英語の切り替え |
| サブスク決済機能 | クレカ対応（Stripe） |
| ソート機能 | 業種・企業名でフィルタリング |
⚙️ 開発スタック
| 要素 | 技術 |
|---|---|
| フロント | Next.js (App Router) |
| バックエンド | Express.js |
| 決済 | Stripe Subscriptions |
| 翻訳 | Next.js i18n |
| 翻訳 | Vercel |
| 開発基盤 | Cline ← 今回の主役 |
🛠 Clineとは？
Clineは、AIを活用してWebアプリを高速構築できるAI開発プラットフォームです。
フロント・バック・インフラまでカバーしたプロンプト駆動型フルスタック開発が特徴。
特徴：
- Next.js / Express など、モダン技術に対応
- 要件を自然言語で伝えるだけで、画面・API・DB構成を自動生成
- GitHub連携やVercelデプロイまで対応
💡 なぜClineを使ったのか？
開発要件：
- 2週間でリリース必須
- デザイナー／バックエンドエンジニア不在
- インフラも極力シンプルにしたい
この条件に対して、Clineは以下の点で非常に有効でした。
| ニーズ | Clineでの解決 |
|---|---|
| スピード優先 | 要件をプロンプトで伝えるだけで画面・API生成 |
| バックエンド不要論 | Express連携やMock APIを自動で構成 |
| UI実装が面倒 | Shadcn UI対応済みで即パーツ作成 |
| CI/CD管理が手間 | Vercelに自動デプロイ連携可能 |
事前準備
🚀 Clineをどう使ったか？（具体ステップ）
0. ClineをVSCodeに追加
- 拡張機能 Cline をVSCodeに追加して有効化する
実際にClineを使用するにはさらに、
- Clineの設定からAPI経由で使用するAIモデルを選択（私は
claude-3-7-20250219を選択） - AIモデルのプロバイダーで課金設定を行う（私の場合、Anthropic社）
というステップを踏む必要がありますが、今回の記事では時間の関係で割愛させていただきます。
Clineはあくまで箱であり、実際の脳みその部分は、ChatGPTで有名なOpenAIや、Claudeで有名なAnthropicが提供するLLM（AI）が担っているというのは覚えておくといいかなと思います。
1. 要件を自然言語で整理してプロンプトに投入
- 特に深く考えずに、整理した要件をプロンプトに投入！
知り合いからWebサイト作成依頼が来ました。
背景と要件
・海外にビジネス（飲食店出店、中古車販売、人材募集 etc）を進出させたい企業や個人事業主向けのWebサイト
・Webサイト上に会社名やバナーを表示できるエリアがあり、その枠を月1000円のサブスク形式で販売する
・海外進出の予定がある企業や個人事業主が主な顧客となる
仕様
最低限ホームページに必要な機能
1. 翻訳機能（最低限、日本語と英語）
2. サブスク決済機能（最低限、クレカ）
3. ソート機能（掲載されている企業を企業名や業種などでソートする）
決定事項
・フロントはNext.jsを採用（App Router）
・バックエンドはExpressを採用
・CICDはVercelを採用
・決済はStripeを採用
検討中
・翻訳も最短でできる手法が好ましい（データベースやAPIの利用はなるべく避けたい）
・サブスク決済はStripe Subscriptions
MVP1対象外
・管理画面は不要（企業情報の登録等は手動で対応予定）
・企業アカウント登録・ログイン機能は不要
注記事項
・開発期間が2週間最短で実装できるシンプルなアーキテクチャがベスト
・翻訳管理も最短期間でできる方法がよい（拡張性よりもスピード重視）
なにやら、まずは日本語で送った要件を英語で整理し始めました
ある程度待つと、フォルダ構成やファイルが作成されました
プロンプトはこんな感じです
初期構築は完成です
2. 生成された構成を把握 🗂️
AIが自動でフォルダやファイルを生成してくれるのは便利ですが、
「何がどこに、どんな役割で配置されたのか？」 を把握しないと後々混乱します。
そこで私は、以下のようなことをAIに依頼しました。
- 📂 フォルダ構成の説明
→ 各ディレクトリの役割やファイルの用途を視覚的に解説してもらう
→ 以下のようなプロンプトを投げました
各ディレクトリの役割やファイルの用途を視覚的に解説してください（アスキー図で簡易的にプロンプトに表示して）」
- 📝 APIエンドポイントの一覧化
→ 仕様書的に一覧化しておくことで、後の修正依頼がスムーズに
→ 画像：左側がClineプロンプト、右側が実際の生成してもらったAPIエンドポイントの一覧/説明
- 🗺️ 画面遷移図の生成
→ ユーザー導線を俯瞰して確認できる
3. ひたすらプロンプトと会話 💬🤖
ここからはAIとの対話がメイン工程になります。
- 「この文言を変えてほしい」
- 「ボタンの位置がずれている」
- 「このエラーの原因は何？」
- 「もっと余白を広げたい」
といった要望や問題をそのまま日本語で投げるだけ。
するとAIは即座にコードを修正してくれます。
感覚としては、
Slackやチャットツールでエンジニアに依頼しているような感覚
＋その場で修正が反映されるスピード感
「コードを書く」というより、AIとペアプロしているディレクターになった感じです。
4. 人間とAIで協業した箇所 🤝
AIは強力ですが、すべてを任せきりにはできない部分もあります。
特に以下の領域は、人間の判断や手作業が必要でした。
✅ データ投入 📊
- 背景画像や企業ロゴの収集・選定
- 企業情報をExcelで整理 → AIに読み込ませて画面に反映
✅ テスト工程 🧪
- 表示崩れ、リンク切れ、翻訳切替の不具合を目視で確認
- バグや仕様漏れをリスト化し、プロンプトで修正依頼
- 仕様がシンプルなのでテストケースは割愛
- 人間が実機検証でカバー
✅ 微調整 🎨
- 色味、余白、フォントサイズなどの細かいデザイン修正
- 「もっと柔らかい印象に」など感覚的な指示も自然言語で対応可能
結果として、AIが得意な高速実装＋人間のセンスや判断の組み合わせが最も効率的でした。
💭 AI駆動開発をやって感じたこと 🚀
-
📌 README.mdや仕様書は早めに作らせるべき
初期からドキュメント化しておけば、構成の把握や環境構築の迷いが激減します。 -
💬 曖昧な日本語でもOKだが、論理的に伝えると精度が爆上がり
プロンプトは会話形式で十分。ただし条件やゴールを明確にするほど結果は安定。 -
🛠 人間の介在は必ず残る
データ整備・品質担保・センスが問われるデザインは、まだAIに丸投げできない領域。 -
⚡ とはいえスピードは圧倒的
体感で、従来の1/4程度の時間で公開まで持っていけた感覚です。
🏁 さいごに 🎯
このプロジェクトで、私は1行もコードを書いていません。
フロントエンドも、バックエンドも、画面設計すら、すべてClineが自動生成しました。
私がやったことは、
- 何を作るかを考え
- どう見せたいかを言葉にし
- それをAIに伝えることだけ
まさに、**「コードを書かずにサービスを立ち上げる時代」**を肌で感じた2週間でした。