Vibe

Vibe Alchemy 3.0 Pro

Matrix Edition

基本入力

アプリ名

AIにおまかせ

核心機能・特徴

コーディネート

AIペルソナ

アプリジャンル

デザイン

テーマ設定

レイアウト構造

追加エッセンス

バイブマトリクス

Tone(X):50% Density(Y):50%

Complex（高密度・情報量多）

Minimal（低密度・シンプル）

Serious
（堅実・業務的）

Playful
（遊び心・エンタメ）

イメージプレビュー

Persona

Genre

Theme

Layout

Vibe Alchemy Pro 操作マニュアル

1. はじめに

Vibe Alchemy（バイブ・アルケミー）へようこそ。

本ツールは、あなたの頭の中にある抽象的なアイデア（Vibe）を、AIが理解可能な「高品質なエンジニアリング・プロンプト」へと変換（錬成）する支援アプリケーションです。

生成されるプロンプトをGeminiやChatGPTなどのAIに入力することで、サーバー不要・1ファイルで完結する高品質なWebアプリケーションを即座に作成できます。約39万通りの組み合わせから、あなただけの「賢者の石（理想のアプリ）」を見つけ出してください。

2. 画面構成と基本操作

画面は大きく分けて、左側の「設定エリア（錬成盤）」と、右側の「プレビュー・出力エリア」で構成されています。

ヘッダーツールバー

画面上部に配置されたアイコン群で、全体的な操作を行います。

Undo / Redo (矢印): 操作の取り消し・やり直しが可能です。
モード切替 (太陽/月): 画面のダークモード／ライトモードを切り替えます。
パラメータ管理 (保存アイコン): 設定の保存・呼び出し・バックアップを行います（詳細は後述）。
マニュアル (本アイコン): 簡易ヘルプを表示します。

3. アプリケーション錬成プロセス

STEP 1: 基本入力 (Core Definition)

まずは作りたいアプリの核となる情報を入力します。

アプリ名: アプリの名称を入力します。「AIにおまかせ」にチェックを入れると、AIが機能に基づいて自動で命名します（日本語/英語選択可）。
核心機能・特徴: 「タスク管理ができる」「CSV出力したい」「ドラッグ操作に対応」など、実装したい機能を箇条書きや文章で自由に入力してください。

STEP 2: コーディネート (Coordination)

アプリの「性格」と「種類」を決定します。

AIペルソナ: コードを書くAIの人格を指定します（例：堅牢な設計者、CSSの魔術師、高速化の鬼など）。
アプリジャンル: アプリのカテゴリを選択します（例：SaaS、ゲーム、SNS風など）。

※リストにない場合は「自由入力」を選択し、独自の定義を入力可能です。

STEP 3: デザイン & レイアウト (Design & Structure)

テーマ設定: 配色パターンを選択します。「カスタム設定」を選ぶと、背景色やアクセントカラーを細かく指定できます。
レイアウト構造: 画面の基本構成（サイドバー型、ダッシュボード型、チャット型など）を選択します。

STEP 4: エッセンス注入 (Essence)

「レスポンシブ対応」「データ保存(Local)」「トースト通知」など、アプリに追加したい機能（エッセンス）にチェックを入れます。

自動選択: ジャンルやレイアウトを変更すると、最適なエッセンスが自動的に推奨選択されます（手動で変更も可能です）。

STEP 5: バイブマトリクス (Vibe Matrix)

本ツールの核心機能です。画面下部のマトリクスパッドにある「白いポイント」をドラッグして、アプリの空気感を直感的に調整します。

X軸 (Tone): 左へ：Serious（堅実・業務的）、右へ：Playful（遊び心・エンタメ）。
Y軸 (Density): 上へ：Complex（高密度・多機能）、下へ：Minimal（低密度・シンプル）。

この操作により、プロンプト内の「雰囲気・設計方針」パラメータが動的に変化します。

4. プロンプトの生成と利用

イメージプレビュー

設定を変更すると、右側のカード（Persona, Genre, Theme, Layout）がリアルタイムに更新され、視覚的に現在の構成を確認できます。

生成プロンプト (Output)

すべての設定に基づき、最適化されたプロンプトが「生成プロンプト」エリアに自動生成されます。

コピー: 「Copy」ボタンをクリックすると、プロンプト全文がクリップボードにコピーされます。
AIへ入力: Gemini (Google) や ChatGPT (OpenAI) などのAIチャット欄に、コピーしたプロンプトをそのままペーストして送信してください。
アプリ生成: AIが指示に従い、HTML/CSS/JSが一体となったコードを出力します。

5. パラメータセット管理とバックアップ

ヘッダーの「保存アイコン」から、作成した設定（レシピ）を管理できます。

設定の保存と読込

保存: 任意の名前を入力して「保存」を押すと、現在の設定状態がブラウザ内に保存されます。
読込: 保存済みリストから「Load」を押すと、設定を瞬時に復元します。

バックアップ / 復元（インポート・エクスポート）

保存したパラメータセットをファイルとして管理したり、別の端末へ移行したりできます。

エクスポート (保存): 保存済みの全パラメータセットを .json ファイルとしてダウンロードします。
インポート (読込): エクスポートされた .json ファイルを選択して読み込みます。現在のリストに、ファイル内の設定が追加（マージ）されます。

6. カスタムテーマ機能

テーマ選択で「カスタム設定」を選ぶか、カラーパレット情報を変更したい場合に使用します。

リアルタイムプレビュー: 色を変更すると、プレビュー画面に即座に反映されます。
BG (背景色): アプリ全体の背景色。
Text (文字色): 基本となる文字色。
Accent (強調色): ボタンやリンク、重要な要素に使われる色。
複写: 現在選択中のプリセットテーマの色情報をコピーして、調整のベースにできます。

7. トラブルシューティング・Tips

Q. 生成されたアプリが動かない: A. AIの生成精度による場合があります。もう一度「Regenerate（再生成）」ボタンを押すか、バイブマトリクスを少し動かしてプロンプトを微調整し、再度試してください。
Q. 別のPCで設定を使いたい: A. 「パラメータセット管理」から「エクスポート」を行い、出力されたファイルを別のPCで「インポート」してください。
Q. 画面が真っ白になった: A. ブラウザのキャッシュクリアを試すか、シークレットモードで開いてみてください。

Enjoy your Alchemy.

あなたの想像力が、そのままアプリケーションになる体験をお楽しみください。

基本入力

コーディネート

デザイン

追加エッセンス

バイブマトリクス

イメージプレビュー

生成プロンプト

パラメータセット管理

現在の状態を保存

保存済みリスト

バックアップ / 復元

カスタム設定

Vibe Alchemy Pro 操作マニュアル

1. はじめに

2. 画面構成と基本操作

ヘッダーツールバー

3. アプリケーション錬成プロセス

STEP 1: 基本入力 (Core Definition)

STEP 2: コーディネート (Coordination)

STEP 3: デザイン & レイアウト (Design & Structure)

STEP 4: エッセンス注入 (Essence)

STEP 5: バイブマトリクス (Vibe Matrix)

4. プロンプトの生成と利用

イメージプレビュー

生成プロンプト (Output)

5. パラメータセット管理とバックアップ

設定の保存と読込

バックアップ / 復元（インポート・エクスポート）

6. カスタムテーマ機能

7. トラブルシューティング・Tips