デザイン（ワイヤーフレーム + 画面遷移）

デザイン は、ワイヤーフレーム（各画面の中身）と画面遷移（画面間のつながり）を 1 つのキャンバス で扱う画面設計ツールです。配色・余白・レスポンシブといった細部はデザイナーが決める前提で、「どんな画面があり、どこに何を置き、どの操作でどの画面へ動くか」 の叩き台までを担います。

案件ダッシュボードのクイックアクセス、またはサイドバーの 「画面設計」グループ →「デザイン」 から開きます。エディタは フルスクリーン で表示され、ツールバー左上から案件ダッシュボードへ戻れます。

• 要件概要書が無くても利用できます（AI 生成を使う場合のみ要件概要書が必要）
• 編集内容は 自動保存 されます。保存し忘れの心配はありません
• 旧「画面遷移図」「ワイヤーフレーム」ページは廃止され、本ツールに統合されました

キャンバス上部のツールバーから描画ツールを選びます。よく使うのは次の 2 つです。

• フレーム（F） — 1 枚が 1 画面。画面の枠を描き、この中に部品を配置します
• コネクタ（C） — フレーム同士をつなぐ矢印。「どの操作でどの画面へ動くか」の遷移を表します

中身は基本図形で低忠実に描きます（ピクセル精度のデザインは対象外）。

• 移動（V）/ 手のひら（H） — 選択・移動とキャンバスのパン
• 矩形（R）/ 楕円（O）/ 直線（L）/ テキスト（T）/ ペン（P） — ボタン・入力欄・見出しなどの部品や注釈
• Undo / Redo — Cmd/Ctrl+Z / Shift+Cmd/Ctrl+Z
• コピー / 複製 — Cmd/Ctrl+C / Cmd/Ctrl+D。グループ化は Cmd/Ctrl+G
• ズーム — Cmd/Ctrl + / −、Shift+1 で全体表示

左のレイヤーパネルで画面・部品の階層を確認でき、右のプロパティパネルで色・サイズ・テキストを調整できます。画像の挿入やアイコンの配置もできます。

ゼロから描かなくても、2 つの方法で叩き台を素早く用意できます。

1. 画面テンプレート — ツールバーのテンプレートボタンからギャラリーを開き、複数選択してまとめて挿入できます。

• カテゴリ: 認証・アカウント / 全体・ナビゲーション / データ操作 CRUD / 入力・処理 / コミュニケーション
• 例: ログイン（中央 1 カラム / 左右 2 分割）、ダッシュボード、一覧（テーブル）、詳細、新規作成フォーム、チャット、カレンダー など
• 挿入後は通常のフレームとして自由に編集できます

2. ✨ AI で画面を生成 — ツールバーの ✨ ボタンからダイアログを開き、作りたい画面を文章で指示すると、編集可能なフレーム+遷移として追加されます。

• 「要件概要書からプロンプトを作成」 を押すと、最新の要件概要書からプロンプトが自動で組み立てられ、入力欄に展開されます
• 展開されたプロンプトは 生成する前に編集できます（画面数を絞る、対象デバイスや条件を足す など）
• モデルは Claude / GPT から選択できます（未設定の場合は自動で代替）

画面設計が固まったら、図をセラー（受注候補）やデザイナーと共有して仕様を確認します。

• キャンバスから書き出し: ツールバーの「書き出し」メニューから PNG（選択のみ / キャンバス全体、1x / 2x） と JSON を書き出せます
• ダウンロードページからまとめて取得: 案件の 「ダウンロード」 ページで、デザインの全体図が 「デザイン.png」 として要件概要書・業務フロー図などと一緒に 1 つの ZIP にまとまります

共有した図は、案件ルームや会議での仕様確認の土台になります。叩き台の段階でセラーと認識を合わせておくと、後工程の手戻りを減らせます。