ワイヤーフレームを作成・編集する
Acsim Desktopのワイヤーフレームで画面案を作り、AIが何をもとに生成するか、画面遷移や状態をどう確認するかを説明します。
「ワイヤーフレーム」は、画面の構成、表示する情報、操作、画面遷移を早い段階で確認するための成果物です。見た目を完成させることより、利用者が目的を達成できる流れと、必要な状態を関係者で合わせることを目的にします。
複数の画面と遷移を1つのキャンバスで確認できます。
プロジェクト内の画面案は、1つのワイヤーフレームキャンバスにまとめて配置されます。画面ごとに別のワイヤーフレームを作るのではなく、同じキャンバス上で画面と遷移を管理します。
AIは何をもとに生成するか
AIは、まず依頼文に書かれた目的、利用者、必要な画面、操作をもとに生成します。資料がなくても依頼文だけで作成できます。プロジェクト内に情報がある場合は、次の内容も参照します。
- 既存のワイヤーフレーム
- 基本設計書や画面一覧などの設計資料
- システムの利用手順や振る舞いを整理したシステムケース
- ToBe 業務フロー
データモデルは、ワイヤーフレーム生成時に自動で必ず参照される入力ではありません。データモデルの用語や項目を画面へ反映したい場合は、依頼文で対象を明示してください。
既存のワイヤーフレームがある場合、AIは原則として既存画面を残し、新しい画面や状態を追加・変更します。全面的な作り直しが必要な場合は、対象と残す画面を依頼文で指定してください。
ワイヤーフレームを開く
対象のプロジェクトを開き、サイドバーの「デザイン」から「ワイヤーフレーム」を選択します。まだワイヤーフレームがない場合は、AIポータルから新規作成を依頼できます。作成済みの場合は、この画面で複数の画面案と遷移を確認・編集します。
作成を依頼する
AIポータルで、次の情報を含めて依頼します。
- 誰が使う画面か
- その画面で達成したいこと
- 必要な画面と主な操作
- 正常時だけでなく、データがない状態、読込中、エラー、権限不足など必要な状態
- 参照する業務フロー、設計資料、既存画面
- 変更してよい範囲と残す範囲
依頼例:
ToBe業務フローの「見積を作成する」から「承認する」までをもとに、営業担当者向けのワイヤーフレームを作成してください。一覧、作成、確認、承認待ち、差し戻しの画面を含め、画面遷移と主な入力項目を示してください。
既存の受注一覧は残したまま、詳細画面と編集画面を追加してください。データモデルの「受注」と「受注明細」の用語を使い、データがない状態と保存エラーの状態も作成してください。
作成された内容を確認する
次の順で確認すると、見た目だけのレビューになりにくくなります。
- 画面の範囲: 必要な画面がそろい、不要な画面が混ざっていないか
- 利用者の流れ: 開始画面から目的達成まで遷移できるか
- 業務ルール: 権限、必須項目、承認、取消などが反映されているか
- 状態: データなし、読込中、成功、エラー、権限不足などが不足していないか
- 用語: 要求、業務フロー、データモデルと名称がそろっているか
AIが提案した変更は、追加・変更・削除の範囲を確認してから適用します。詳しくはAIの変更提案を確認するを参照してください。
キャンバスで編集する
ワイヤーフレーム画面では、画面の検索、配置変更、ボタンや入力欄などの部品と説明の編集、画面遷移の追加、コメント、レイアウト整理などを行えます。既存画面を複製して状態違いを作ると、通常時とエラー時などを比較しやすくなります。
編集後は保存し、必要に応じて PDF へ出力します。共有前に、画面外へはみ出した要素、読めない文字、途切れた遷移線がないか確認してください。