見出し画像

Webアプリリリースまで残り1日しかなかったけどLPをv0、ChatGPT、Claudeをフル活用したら何とか間に合った話

江原大智｜エンジニア｜ロードミント株式会社

こんにちは、トカエル開発者の江原です。
前回の記事「AIが書いた9割のコードでWebサービスをリリースした話」では、AIを活用してWebサービスを開発した経験を共有させていただきました。

今回は、その続編として、トカエルのランディングページ（LP）の開発においても、AIを活用した事例をご紹介したいと思います。

LPはこちら

なぜLPの開発にAIを活用したのか？

AIを活用した最大の理由は「時間」でした。
サービスローンチまでに残された時間はわずか1日。
この極めて短い期間でLPを完成させる必要がありました。

さらに、以下の理由もAI活用の決め手となりました：

  1. デザインの一貫性確保: AIは一度設定したデザインテーマを一貫して適用できる

  2. レスポンシブ対応の効率化: 様々な画面サイズへの対応をAIが自動的に提案

  3. 最新のベストプラクティス導入: AIが現代的なデザインパターンを自然に取り入れてくれる

AI活用の具体的な流れ

Step 1: 必要なセクションの洗い出し

まず、ChatGPTに効果的なLPに必要なセクションを列挙してもらいました。

使用したプロンプト例：

Webサービスのランディングページに必要な標準的なセクションを列挙してください。
特に、物々交換プラットフォームのサービスに適したセクション構成を考慮してください。
各セクションの目的も簡潔に説明してください。

※実際にはサービス内容はもっと詳細に書きました。

ChatGPTからは以下のようなセクションが提案されました：

  • ヒーローセクション（サービス価値の即時伝達）

  • 主な特徴（3-4つの核となる機能）

  • 使い方ステップ（簡単な利用手順）

  • よくある質問（不安の解消）

  • CTAセクション（登録促進） など

Step 2: デザインとコードの生成

セクションの構成が決まったら、v0を使用してデザインとコードの生成を行いました。

v0はデザインを得意とするAIで、Next.jsやスライド作成によく用いられるようですが、今回はhtmlのコードを出力しました。

使用したプロンプト例：

以下の要件でLPを作成してください：
1. サービス概要：
   - 漫画の物々交換プラットフォーム
   - 全巻セット専門
   - 現金取引なし（送料のみ）
   - 簡単なマッチングシステム

2. 技術要件：
   - Tailwind CSS使用
   - レスポンシブ対応
   - モダンでクリーンなデザイン

3. セクション構成：
   [ChatGPTから得たセクションリスト]

4. デザイン要件：
   - テーマカラー：漫画の交換から連想される色を使用
   - シンプルで直感的なレイアウト

Step 3: コンテンツの最適化

v0で生成した基本的なデザインとコードの土台に対して、Claudeを使ってコンテンツの改善を行いました。Claudeは特に日本語の文章生成に優れているため、以下のような最適化に活用しました：

セクションごとの文言ブラッシュアップ

以下のヒーローセクションの文章をより魅力的な日本語に改善してください：
[現在の文章]
特に以下の点を意識して：
- サービスの特徴が端的に伝わること
- 親しみやすい表現
- 説得力のある言い回し

新規コンテンツの追加

漫画の物々交換サービスのメリットについて、
以下の観点から魅力的な文章を作成してください：
- 経済的なメリット
- 本棚の整理
- 新しい作品との出会い

ユーザーへの呼びかけ文の作成

サービス登録を促すCTAセクションの文章を作成してください。
押し付けがましくない、かつ行動を促す適切な表現を使用してください。

Step 4: 反復的な改善

各AIツールの特性を活かしながら、以下のサイクルで改善を重ねました：

  1. v0: デザインの調整とコード生成

  2. Claude: 文章の改善と新規コンテンツの追加

  3. 確認と修正点の洗い出し

  4. 再度それぞれのAIに最適化を依頼

得られた学び

1. プロンプトエンジニアリングの重要性

  • 具体的な要件を明確に伝えることの大切さ

  • 段階的に詳細化していく approach の有効性

  • 複数のAIを使い分けることでの相乗効果

2. 時間効率の劇的な向上

  • 通常1週間かかるLP制作がたった1日で完了

  • デザインからコーディングまでの一貫した作業

  • 修正サイクルの短縮

3. 品質の確保

  • モダンな実装手法の自動的な採用

  • レスポンシブデザインの的確な実装

  • アクセシビリティへの配慮

さいごに

1日という極めて短い期間でのLP制作は、AIの力なしには実現不可能でした。
特に、複数のAIツールを使い分け、それぞれの特性を活かした段階的なアプローチが効果的でした。
とはいえ、AIツールを複数登録することは予算的にも負担が大きいです。

私が今回、有料AIサービスにひとつだけ課金するならv0だと思います。
ChatGPTやClaudeは無料枠でかなり程度使えるので…
最近のサービスだとboltやbabelはバックエンドもフロントエンドも作れてしまうようです。

まだまだ勉強中です。とりあえずChatGPTやClaudeから始めてみるとよいでしょう。

お知らせ

トカエルは現在ベータ版として公開中です。みなさまのフィードバックをお待ちしています。

お問い合わせ: support@tocaeru.com


いいなと思ったら応援しよう！