1. YouWareとは何か：概念と本質

「どのツールを使えばいいか？」
→ ツールに依存
→ ツールの機能に縛られる
→ ツールが変わると対応できない

「自分の思考プロセスをどう最適化するか？」
→ 自分が主体、ツールは手段
→ どんなツールでも活かせる
→ 本質的なスキルが身につく

1.2 なぜYouWareが重要なのか

バイブコーディングの成否は、プロンプト設計で90%決まります。同じツールを使っても、プロンプトの質によって、生成されるコードの品質は天と地ほど違います。

プロンプト品質と結果の関係

論理的帰結：プロンプト設計のスキルを磨くことが、バイブコーディングで成功するための最短ルートです。

1.3 YouWareの3つの柱

2. INTJ認知機能とプロンプト設計の相性

2.1 INTJ認知機能スタックとプロンプト設計

INTJ的認知機能は、プロンプト設計と構造的に完璧にマッチしています。

【悪い例】「ToDoアプリを作って」
【Ni活用】「仕事のタスク管理を効率化し、
優先度に基づいて次にやるべきことを
明確にするToDoアプリを作成したい」

【Te活用の構造化プロンプト】
【目的】〇〇を実現
【機能】
- 機能1：具体的説明
- 機能2：具体的説明
【技術】使用技術を明示
【制約】時間・リソースの制約

2.2 Ni-Te統合によるプロンプト設計の最適化

INTJ最大の強みであるNi-Te統合は、プロンプト設計において以下の効果を発揮します：

3. プロンプト設計の5つの原則

「ToDoアプリを作って」

【目的】
個人用のタスク管理アプリを作成したい

【背景】
現在、紙でタスク管理しているが、非効率
デジタル化して、効率を2倍にしたい

【成功基準】
- タスクの追加・削除が1秒以内
- シンプルで直感的なUI
- データが永続化される
- 優先度でソートできる

「Webアプリを作って」

【技術制約】
- フロントエンド：React + TypeScript
- バックエンド：不要（ローカルストレージ）
- デザイン：Tailwind CSS使用
- ファイル構成：1ファイルで完結

【時間制約】
- 実装時間：30分以内

【スキル制約】
- 私はReact初心者
- コメントを詳しく書いてほしい

「データを可視化して」

【データ例】
```csv
日付,売上,カテゴリ
2026-01-01,100000,商品A
2026-01-02,150000,商品B
2026-01-03,120000,商品A
```

【期待する出力】
- 折れ線グラフ（日別売上推移）
- 棒グラフ（カテゴリ別売上）
- 集計テーブル（合計、平均）

【参考デザイン】
- ダークモード
- モダンでミニマル
- Googleアナリティクスのようなダッシュボード

「完璧なECサイトを作って」

【フェーズ分割】
Phase 1：商品一覧ページ（今回）
Phase 2：カート機能
Phase 3：決済機能
Phase 4：管理画面

【今回のスコープ】
Phase 1のみ実装してください

【Phase 1の要件】
- 商品一覧表示（グリッド）
- 商品詳細モーダル
- 検索・フィルター機能
- レスポンシブ対応

（一度作って終わり）

【初回プロンプト】
「ToDoアプリを作成してください」
→ 基本機能が動作

【フィードバック1】
「ボタンの色を青色（#3498db）に変更してください」
→ デザイン改善

【フィードバック2】
「完了したタスクは薄く表示し、取り消し線をつけてください」
→ UX改善

【フィードバック3】
「カテゴリ機能を追加してください」
→ 機能拡張

4. 実践テンプレート集（10種類）

4.1 基本テンプレート

テンプレート1：Webアプリ作成

【目的】
[何を実現したいか]

【機能要件】
- [機能1]
- [機能2]
- [機能3]

【技術要件】
- フロントエンド：[React/Vue/Vanilla JS等]
- バックエンド：[Node.js/不要等]
- デザイン：[Tailwind/CSS等]

【制約】
- 実装時間：[時間]
- ファイル数：[数]

【デザイン】
- テーマ：[ダーク/ライト]
- カラー：[色]
- スタイル：[ミニマル/リッチ等]

テンプレート2：データ分析ツール

【データ】
[CSVやJSONのサンプルを貼り付け]

【分析内容】
- [分析1]
- [分析2]

【出力形式】
- グラフ：[折れ線/棒/円等]
- レポート：[HTML/PDF等]

【技術】
- 言語：[Python/JavaScript等]
- ライブラリ：[Pandas/D3.js等]

テンプレート3：API連携アプリ

【API情報】
- エンドポイント：[URL]
- 認証：[APIキー/OAuth等]

【機能】
- [APIから取得するデータ]
- [データの加工方法]
- [表示方法]

【エラーハンドリング】
- APIエラー時：[対応]
- ネットワークエラー時：[対応]

4.2 上級テンプレート

テンプレート4：SaaS開発

【サービス概要】
- サービス名：[名前]
- ターゲット：[想定ユーザー]
- 価値提案：[何を解決するか]

【MVPの機能】
1. [必須機能1]
2. [必須機能2]
3. [必須機能3]

【技術スタック】
- フロントエンド：[技術]
- バックエンド：[技術]
- データベース：[技術]
- 認証：[技術]
- ホスティング：[サービス]

【Phase分割】
Phase 1：[MVP] - 今回
Phase 2：[機能追加]
Phase 3：[最適化]

5. 実践例：Before/Afterで効果を検証

5.1 売上管理アプリの事例

Before：曖昧なプロンプト

「売上管理アプリを作って」

結果：何度も修正が必要、期待と違う機能、所要時間2時間

After：YouWare思考のプロンプト

【目的】
月次売上を管理・分析するアプリを作成したい

【機能要件】
- CSVアップロード
- 月別売上グラフ（折れ線）
- 商品別売上ランキング（棒グラフ）
- 前月比の表示
- HTMLレポート生成

【技術要件】
- Python + Streamlit
- Pandas（データ処理）
- Plotly（グラフ）

【データ形式】
```csv
日付,商品名,売上
2026-01-01,商品A,10000
2026-01-01,商品B,15000
```

【デザイン】
- ダークモード
- シンプルで見やすい

【制約】
- 実装時間：30分以内
- 1ファイルで完結

結果：一発で期待通り、追加機能も実装、所要時間20分

効果の比較

6. 上級テクニック5選

6.1 テクニック1：コンテキストの活用

同じ会話内で過去のやり取りを参照させることで、一貫性のあるコードを生成できます。

【プロンプト1】
「ToDoアプリを作成してください」

【プロンプト2（同じ会話内）】
「先ほど作成したToDoアプリに、カテゴリ機能を追加してください」

→ AIは過去の会話を参照し、既存のコードに統合した形で機能追加

6.2 テクニック2：ペルソナ設定

AIに専門家の役割を与えることで、コードの品質が向上します。

「あなたは10年の経験を持つシニアフロントエンドエンジニアです。
以下の要件で、プロダクションレベルのコードを作成してください：

【要件】
- React + TypeScript
- エラーハンドリング完備
- アクセシビリティ対応
- パフォーマンス最適化
- 詳細なコメント付き」

6.3 テクニック3：制約駆動設計

あえて厳しい制約を設けることで、シンプルで洗練されたコードが生成されます。

【制約】
- ファイル数：1つのみ
- 外部ライブラリ：使用禁止
- コード行数：100行以内

この制約の中で、最高のToDoアプリを作成してください

6.4 テクニック4：分割統治法

複雑な問題を小さな単位に分割し、個別に解決してから統合します。

6.5 テクニック5：リファクタリング依頼

「以下のコードをリファクタリングしてください：

【現在のコード】
[コードを貼り付け]

【改善ポイント】
- 可読性向上
- パフォーマンス最適化
- エラーハンドリング追加
- DRY原則の適用」

7. 失敗事例と対策

7.1 失敗1：曖昧すぎるプロンプト

プロンプト：「良い感じのアプリを作って」

対策：「良い感じ」を具体化。デザイン、機能、技術を明示する。

7.2 失敗2：詳細すぎるプロンプト

プロンプト：500文字以上の詳細な仕様書

対策：本質的な要件に絞る。細かい実装はAIに任せる。

7.3 失敗3：一度に完璧を目指す

プロンプト：「完璧なECサイトを作って」

対策：段階的に進める。MVPから始める。

9. まとめ

プロンプト設計は、バイブコーディングの核心です。

AI Logic Labは、INTJ戦略アーキテクトによる認知最適化フレームワークを通じて、AI時代を論理的に生き抜く知的プラットフォームを提供しています。