実案件の画面設計にAIを使う機会が増えてきたので、今回はKiroを使ってレイアウト検証を行ってみました。
なお、実案件の仕様は公開できないため、本記事で扱う内容はすべて検証用に作成した仮想仕様になります。
検証に使用した仕様
今回Kiroに依頼した内容は以下です。
- 商品は最大4階層のカテゴリ構造
- 価格は複数種類（通常・セール・契約別など）
- 価格には適用期間があり、重複の可能性あり
- 顧客グループごとに価格切替が可能
- 一覧性と編集しやすさの両立が必要
業務画面としてはそれなりに複雑な部類で、人がゼロから設計するとそれなりに時間がかかる内容です。
まずは1案目のレイアウト
商品ごとに価格を設定する画面を作成したいです。
以下の条件があります。
・商品は最大4階層のカテゴリ構造で管理されている
・価格は「通常価格」「セール価格」「契約別価格」など複数種類がある
・価格には適用開始日・終了日があり、期間が重複する場合がある
・特定顧客グループごとに価格を切り替え可能
・一覧性を保ちながら、条件ごとに編集しやすいUIにしたい
複雑な条件でも見やすく操作しやすい画面レイアウトを提案し、HTMLサンプルを作成してください。
上記の内容をそのままKiroに依頼したところ、およそ5分程度でHTML付きのレイアウト案が生成されました。
構成としては、いわゆる業務システムの王道パターンです。
提案内容（1案目）
- 左：カテゴリツリー
- 上：フィルタ（顧客グループ・期間・状態など）
- 中央：価格一覧（テーブル）
- 下：期間タイムライン
- 右：詳細編集パネル
特に良かったポイントは次の通りです。
- 階層カテゴリはツリーで絞り込みできるため、一覧性を維持したまま操作できる
- 価格はテーブルで横並びに確認でき、比較しやすい
- 期間の重複をタイムラインで表現しているため、視覚的に把握しやすい
- 編集は右側パネルで完結し、画面遷移が不要
全体として、「そのまま使えそう」と感じる完成度でした。
別パターンも出してみる
続いて、同じ仕様で別レイアウトを依頼してみました。
同じ仕様で、全く異なる画面レイアウトを提案し、HTMLサンプルを作成してください
この一文を追加するだけで、まったく違う方向の提案が出てきます。
提案内容（2案目）
- 上：カテゴリをチップ形式で横展開
- 中央：カンバン形式（価格種別ごとの列）
- 通常価格
- セール価格
- 契約別価格
- 各カードに価格・期間・顧客情報を表示
- 詳細はモーダルで編集
こちらは1案目とはかなり性格が違い、
- テーブル型 → 正確な確認・一括編集向き
- カンバン型 → 状態把握・直感的操作向き
という使い分けができる印象でした。特に、
- 価格種別で分けることで構造が理解しやすい
- カード単位で重複や状態が分かりやすい
といった点は、自分だけでは出しにくい発想だったと感じます。
既存デザインに寄せる
レイアウトの方向性が決まったら、次はデザイン調整です。
実案件では当然、
- 既存システムの色
- UIのトーン
- ボタンやカードの見た目
を合わせる必要があります。
そこで、以下の既存の画面HTML（商品検索画面）を参考として渡し、
このデザインに寄せて調整してほしい
と依頼しました。
デザイン調整の結果
結果として、
- 配色（ブルー系）
- カードの質感
- ボタンのデザイン
- 余白・角丸などのトーン
が揃い、既存システムと統一感のある画面に調整されました。
このあたりも、細かい指示を積み重ねるというより、参考HTMLを1つ渡すだけで一気に方向が揃うのが便利です。
HTMLで作ることのメリット
今回試していて特に良いと感じたのが、HTML形式でアウトプットできる点です。
単なる画像や設計書と違って、
- 実際にクリックできる
- 展開・開閉の動きが確認できる
- モーダルやパネルの挙動が分かる
といった“操作感”まで含めて確認できるのが大きなポイントです。
そのため、
- お客様に画面のイメージを伝えやすい
- 「こう動く想定でしたか？」とその場で確認できる
- 説明だけでは伝わりにくい部分も補完できる
結果として、
認識のすり合わせがしやすく、認識齟齬が発生しにくくなります
この点は、ワイヤーフレームやExcel仕様書だけで進める場合と比べて、かなり効果を感じました。
実際に使って感じたメリット
今回の検証を通して感じたポイントです。
・叩き台がすぐに作れる
ゼロから考える必要がなく、短時間でベースが出来上がります。
・複数案の比較が簡単
違う方向性のUIをすぐに出せるので、検討の質が上がります。
・アイデアの幅が広がる
自分では思いつかないレイアウトが出てくることがあります。
・デザイン調整まで対応可能
既存HTMLを渡すことで、見た目の統一も取りやすいです。
・HTMLなので説明しやすい
動き込みで確認できるため、関係者との認識合わせに使いやすいです。
まとめ
今回の流れはシンプルです。
- 要件をそのまま渡してレイアウト作成
- 別パターンも出させる
- 既存HTMLを渡してデザイン調整
これだけで、
- 画面設計
- UI比較
- デザイン調整
まで一通り揃います。
作業時間としても、1から作る場合と比べてかなり短時間（今回は約5分程度）で、かつ十分に使えるレベルの成果物が得られました。