Trae × Claude-3.7-Sonnetで通用UIプロトタイプを自動作成（プロンプト付き）

はじめに

皆さん、こんにちは！NakamuraKaitoです。先日、自分が温めていた旅行アプリのアイデアを形にしようと思ったんですが、UIデザインでつまずいてしまいました。

Figmaを開いて30分...何も進まず。「やっぱりデザインとか苦手だな」と諦めかけたその時、Trae+Claude-3.7-Sonnetの組み合わせでたった一回のプロンプト入力でHTML+CSSの完全なプロトタイプが作れると知って衝撃を受けたんです！

今日はその方法を皆さんにシェアします。これを知れば、エンジニアじゃなくても、デザイナーじゃなくても、誰でも数分でアプリのUIプロトタイプが作れるようになりますよ！

記事ではClaude-3.7-Sonnetを使用していますが、Claude-4-Sonnetなど他の最新モデルでも問題なく利用できます。

なぜ今までのUI開発は大変だったのか？

従来のUI開発フローって、こんな感じでしたよね：

1. 専門ツールの壁：Figma、Sketch、XDなど専門知識が必要
2. コーディングの壁：HTML/CSS/JSの知識がないと実装できない
3. チーム連携の壁：PM→デザイナー→エンジニアの連携が必要で時間がかかる

多くの人にとって、この工程は本当に苦痛なはずです。「アイデアはあるのに形にできない」というジレンマ...分かる人には分かるはず。

Trae+Claude-3.7-Sonnetの組み合わせが最強な理由

私が試した中で、Trae+Claude-3.7-Sonnetの組み合わせが圧倒的に効率が良かったです！その理由は：

Traeの強み

• 複数ファイル生成：一度に複数のHTMLファイルを生成・管理できる
• コード補完：生成されたコードの修正も簡単
• プロジェクト管理：フォルダ構造も含めて管理できる

Claudeの強み

• 文脈理解力：複雑な指示も正確に理解してくれる
• デザインセンス：見た目も美しいUIを生成できる
• 多言語対応：日本語の指示でも完璧に対応

正直、他のAIと比べても、Claudeのデザインセンスは頭一つ抜けてると感じます。特にiOS風UIの再現度は驚異的です！

なぜClaude-3.7-Sonnetを選ぶのか？

現在、TraeのClaude-4-Sonnet（Beta）も利用可能ですが、私がUI開発にClaude-3.7-Sonnetをおすすめする理由があります：

• 安定性重視：ベータ版ではなく、十分にテストされた3.7の方が実務では安心
• コスト効率：同等の結果なら、より経済的な3.7を選ぶのが合理的
• 応答速度：特にUI生成では、3.7の方が処理が速いケースが多い
• 互換性：既存のプロンプトが3.7で最適化されているため、再調整の手間が不要

新しいものが常に良いとは限りません。特にプロトタイピングのような実用的な場面では、安定性と予測可能な結果が重要です。もちろん、将来的にClaude-4が十分に安定したら移行する価値はあるでしょう！

プロンプトの解剖学：なぜこれが効くのか

私が試行錯誤して見つけた、効果的なプロンプトの構造を解説します：

1. 役割設定が重要

あなたはUIデザインとプロダクト設計に精通したフルスタックエンジニアです。

2. 明確な目標設定

目標は「旅行日程プラン」iOSアプリの開発です。
コアタスク：複数ページのHTMLプロトタイプを生成し、基本操作をサポート。

3. 具体的な実行ポイント

実行ポイント：
- 機能とページの明確化：アプリの主要機能モジュールを設計し、HTMLページ一覧を作成
- プロダクト・UI/UX設計：
  - PM視点：ページフローと操作ロジック設計
  - デザイナー視点：モダンiOS風、美しくユーザーフレンドリー

4. 技術的な制約を明示

技術仕様：
- HTML5 + Tailwind CSS + Font Awesome + JavaScript
- 画像素材はUnsplash使用
- コードは簡潔で可読性高

5. 具体的な出力要件

出力要件：
- index.htmlをメインページとして生成
- 子ページは機能ごとに命名（schedule.html / map.html / profile.html）
- すべてのページはiOS風
- index.htmlでは各行に主要機能2つを表示
- すべての出力（コメント・テキスト含む）は日本語

この構造に従うことで、AIに明確な指示を与え、高品質なUIを生成できるのです。

実践！旅行プランアプリのUIを一発生成

実際にやってみましょう！今回は「旅行日程プランアプリ」のUIプロトタイプを作ります。

手順1：プロジェクトの作成

まずは「travel-app-prototype」という名前の新規プロジェクトを作成します。

手順2：魔法のプロンプトを入力

「魔法のプロンプト」をTraeに貼り付けるだけです。

ヒント: 具体的な魔法のプロンプト内容は記事の最後に掲載しています。ぜひ最後までお読みください！

手順3：生成されるのを待つ（約1分）

待っている間、コーヒーでも飲みましょう☕

手順4：生成されたUIを確認

すごくないですか？ たった1分で：

• index.html：メインメニュー画面

• schedule.html：旅行スケジュール管理画面

• map.html：地図表示・スポット管理画面

• profile.html：ユーザープロフィール画面

が全部生成されました！しかも実際に動くんです！ボタンをクリックすれば画面遷移するし、フォームに入力すれば値が保存される。これ、マジで革命的ですよ。

応用編：UI + API一体化

HTMLプロトタイプは視覚的に操作可能ですが、最終的に動作させるには API接続 が必要です。

そこで Apidog を活用：

• Mock API生成：フロントエンドと即接続可能
• テストケース自動生成
• ドキュメント・デバッグ・テスト統合

ワークフロー：
TraeでUI生成 → ApidogでAPI提供 → 実動作可能なDemo作成

魔法のプロンプト：コピペで使える完全版

以下が今回使用した「魔法のプロンプト」の完全版です。コピーしてTraeに貼り付けるだけで、あなたも同じUIを生成できます！

    あなたはUIデザインとプロダクト設計に精通したフルスタックエンジニアです。
    目標は「旅行日程プラン」iOSアプリの開発です。
    
    コアタスク：複数ページのHTMLプロトタイプを生成し、基本操作をサポート。
    
    実行ポイント：
    
    - 機能とページの明確化：アプリの主要機能モジュールを設計し、HTMLページ一覧を作成
    - プロダクト・UI/UX設計：
      - PM視点：ページフローと操作ロジック設計
      - デザイナー視点：モダンiOS風、美しくユーザーフレンドリー
    
    技術仕様：
    
    - HTML5 + Tailwind CSS + Font Awesome + JavaScript
    - 画像素材はUnsplash使用
    - コードは簡潔で可読性高
    
    出力要件：
    
    - index.htmlをメインページとして生成
    - 子ページは機能ごとに命名（schedule.html / map.html / profile.html）
    - すべてのページはiOS風
    - index.htmlでは各行に主要機能2つを表示
    - すべての出力（コメント・テキスト含む）は日本語
    
    index.htmlから順にHTMLプロトタイプを生成し、続いて他の機能ページも生成してください。

応用ヒント: 自分のプロジェクトに合わせて、目標や技術仕様、出力要件を変更してみましょう！

まとめ：AIが変えるUI開発の未来

Trae+Claude 3.7 Sonnetの組み合わせは、UI開発の常識を根本から覆します：

• 時間短縮：数日→数分へ
• コスト削減：専門家不要で高品質UI
• アイデア検証の高速化：思いついたらすぐ形に

私自身、この方法を知ってから個人開発のペースが劇的に上がりました。アイデアを温め続けるだけでなく、実際に形にして検証できるようになったんです。

もちろん、プロのデザイナーやフロントエンドエンジニアの価値がなくなるわけではありません。むしろ、彼らはより創造的な部分に集中できるようになるはずです。

皆さんも是非試してみてください。きっと「こんなに簡単でいいの？」と驚くはずです！