複数案は並べて初めて評価できる
参考UIをもとにAIで作り直すと、配色やレイアウトの違う案が次々に生まれます。一案ずつ別々に見せると印象が薄れ、関係者の意見もばらつきがちです。
案同士を並べて見せると、相対的にどれが良いかの判断が一気にしやすくなります。比較の土俵をそろえることが、意思決定を早める近道です。
再現案を一つのページに集める
各案を独立したHTMLとして作り、それらを一覧する比較ページを用意します。比較ページから各案へリンクするか、横並びで埋め込むかは案の数と画面の広さで決めます。
案にはA案・B案のようにラベルを振り、判断しやすいよう短い説明を添えます。生成AIに「複数のデザイン案を切り替えて比較できるページを作って」と頼めば、土台はすぐ用意できます。
AI生成HTMLを共有する前の安全チェック
参考UIをAIで作り直したデザイン案を共有して比べる方法では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
比較用URLを作る手順
案ごとのファイルと比較ページをまとめて公開します。次の手順で、関係者がリンク一つで全案を見比べられる状態を作れます。
- 各再現案をフォルダに分けて整理する
- 全案へ移動できる比較ページをトップに置く
- 全体を一つのZIPに圧縮する
- ギガサイト便にドロップし認証と公開期限を設定する
- 発行されたURLを関係者に配り、案ごとに意見を集める
反応の集め方を決めておく
ただ見せるだけでなく、どの観点で評価してほしいかを事前に伝えると、もらえる意見の質が上がります。配色・情報量・操作のわかりやすさなど、軸を絞って依頼しましょう。
アクセスログで誰がいつ見たかを把握できるので、まだ見ていない関係者にリマインドできます。対面のレビューではQRコードを配ると、その場で手元の端末から各案を触ってもらえます。
参考元への配慮と公開範囲
参考にしたUIにはデザインの権利が伴います。作り直した案は社内検討の参考にとどめ、公開範囲を関係者だけに限るのが安全です。
ギガサイト便ではURLのみ・パスワード・メール認証・会社ドメイン認証から認証を選べるので、社内検討なら会社ドメイン認証で範囲を絞れます。一時公開ページにはnoindexが付きますが、これはアクセス制御ではないため、見せたくない相手がいるなら認証を併用してください。
よくある質問
何案くらいまで並べて比較できますか
技術的な上限ではなく、評価のしやすさで決めるのが現実的です。一度に判断できるのは三案から五案程度が目安で、それ以上は前段で絞ってから比較ページに載せると意見がまとまりやすくなります。
案を追加・差し替えしたいときはどうしますか
同じURLのままファイルを差し替えられるので、案を追加したり古い案を消したりしても、関係者には同じリンクのまま最新の比較ページを見てもらえます。リンクを送り直す必要はありません。
誰がどの案を見たか把握できますか
アクセスログで誰がいつ閲覧したかを確認できます。ただしページ内のどの案を支持したかまでは記録されないため、評価そのものは別途アンケートやコメントで集めてください。
比較レビューが終わったら案を非公開にできますか
公開期限を設定すれば、期限切れで自動的に閲覧できなくなります。無料プランは最長7日まで設定できるため、短期の比較レビューに向いています。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。