ワイヤーフレーム
ようこそ
ワイヤーフレームエリアでは、UIレイアウトを視覚的にデザインおよびプロトタイプできます。コーディング前にアプリの構造を計画するためのワイヤーフレームを作成します。ワイヤーフレームを初めて開くと、開始するためのワイヤーフレームを作成カードが表示されるウェルカム画面が表示されます。また、右上隅の+ 新規ワイヤーフレームボタンも使用できます。
主な機能
手動デザイン
ビジュアルキャンバスエディターを使って手動でワイヤーフレームを構築 — コンポーネントをドラッグ＆ドロップしてスクリーンをデザインします。
AI搭載生成
作りたいものを説明すると、AIがワイヤーフレームドキュメントとフレームを自動的に生成します。
音声入力
内蔵マイクボタンまたは中クリックを使用して、音声でワイヤーフレームの説明をディクテーションします。
ワイヤーフレームからコードへ
ワイヤーフレームが完成したら、コード生成に直接送信 — デザインから動作するコードまでシームレスなワークフローで実現します。
ワイヤーフレームの作成
ワイヤーフレームを作成または+ 新規ワイヤーフレームをクリックして作成ダイアログを開きます。タイトルを入力し、ターゲットプラットフォーム（モバイル、デスクトップ、またはウェブ）を選択し、ワイヤーフレームの説明を記述し、手動モードまたはAI搭載モードを選択します。
プロジェクトセットアップフィールド
タイトル
ワイヤーフレームリストで後から識別できるように、ワイヤーフレームプロジェクトに名前を付けます。
プラットフォーム
ターゲットプラットフォーム（モバイル、デスクトップ、またはWeb）を選択して、ワイヤーフレームのレイアウトと制約を調整します。
説明
構築したいものを説明します。これはAI搭載モードでドキュメントとフレームを生成するために使用されます。マイクボタンによる音声入力に対応しています。
モード
手動を選択してキャンバスエディターに直接移動するか、AI搭載を選択してAIにドキュメントとフレームを生成してもらいます。
手動モード
手動タブを選択して作成をクリックすると、ワイヤーフレームキャンバスエディターに直接移動し、すぐに画面の構築を開始できます。デザインの明確なアイデアがあり、最初から完全なコントロールが必要な場合に最適なオプションです。
手動モードの使用場面
具体的なデザインが念頭にあり、自分で構築したい場合。
洗練する前に大まかなレイアウトを素早くスケッチしたい場合。
最初からすべての要素を完全にコントロールしたい場合。
AI搭載モード
AI搭載タブを選択すると、追加のオプションが表示されます。説明を入力または音声入力し、オプションで個別のフレームを定義し、上部のドロップダウンから希望のAIモデルを選択し、生成をクリックしてAIにワイヤーフレームのドキュメントを作成させます。
仕組み
詳細を入力
タイトルを入力し、プラットフォームを選択し、プロジェクトの説明を記述します。
フレームの定義（オプション）
フレームの定義タブに切り替えて、AIに生成させたい個々のスクリーンまたはビューを指定します。
AIモデルを選択
ドロップダウンからお好みのAIモデルを選択します（例：Claude Code、Opus 4.6）。
生成
生成をクリックしてAIドキュメント生成を開始します。ドキュメントが作成されている間、ワイヤーフレームプロジェクトがリストに表示されます。
フレームのビルド
ドキュメントが完了したら、ワイヤーフレームエディターから各個別フレームの生成を開始できます。
AIで強化
AI搭載モードでは、AIで強化ボタンをクリックすると、AIを使用して説明を強化するダイアログが開きます。説明フィールドに入力した内容を取得し、指示に基づいて改善します — ワイヤーフレームを生成する前に、より詳細で、構造化された、包括的なものにします。
強化オプション
AIモデル
説明の強化に使用するAIモデルを選択します（例：Claude Code、Opus 4.6）。
強化の指示
AIが説明をどのように改善すべきかの具体的な指示をオプションで提供します。音声入力に対応しています。
説明を強化
クリックして強化を実行します。AIがあなたの入力と指示に基づいて説明を書き直し、改善します。
ドキュメント生成
AI搭載モードで生成をクリックすると、ワイヤーフレームプロジェクトがドキュメント生成中...のステータスでワイヤーフレームリストに表示されます。AIは、定義したタイトル、プラットフォーム、説明、フレームに基づいてプロジェクトの構造化ドキュメントを作成しています。
次のステップ
ドキュメント生成
AIがあなたの説明に基づいて、各スクリーン、コンポーネント、レイアウトを定義する構造化ドキュメントを作成します。
フレーム生成
ドキュメントが完了したら、ワイヤーフレームを開いてエディターから各個別フレームの生成を開始できます。
調整
フレームが生成された後、キャンバスエディターでコンポーネントを手動で調整、追加、削除してデザインを微調整できます。