アイコンは並べて見比べる
アイコンは単体で見ると良し悪しの判断が難しく、他の候補やセット内の他アイコンと並べて初めてトーンの統一感が見えてきます。AIで生成した候補をバラバラに送ると、選ぶ側は全体像を掴めません。
候補をグリッド状に並べて一覧にすると、線の太さや余白、画風のばらつきが一目でわかり、セットとしてそろっているかを評価しやすくなります。
グリッド一覧のHTMLを作る
アイコン画像をタイル状に並べ、各アイコンに名前や番号を添えます。背景色を切り替えられるようにしておくと、明るい画面と暗い画面の両方での見え方を確認できます。
生成AIに「アイコン画像を格子状に並べ、番号とキャプションを付けた一覧ページを作って」と頼めば雛形が手に入ります。アイコン画像とこのHTMLを同じフォルダにまとめて扱います。
AI生成HTMLを共有する前の安全チェック
AIで作ったアイコンセットを一覧で共有して選んでもらう方法では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
選定を依頼する手順
アイコン画像が多いので、フォルダごとZIPにして公開します。次の手順で、関係者はリンク一つで全候補を見比べ、番号で選べる状態になります。
- アイコン画像に通し番号を振ってファイル名を整える
- グリッド一覧のHTMLを用意し各アイコンに番号を表示する
- 画像とHTMLをフォルダにまとめZIPに圧縮する
- ギガサイト便にドロップし認証と公開期限を設定する
- URLを関係者に送り、番号で採用候補を回答してもらう
選びやすくする工夫
番号を振っておくと「3番と7番が良い」のように回答してもらいやすく、意見の集約が楽になります。用途別にグループ分けしておくと、関係者は目的に合うアイコンを探しやすくなります。
アクセスログで誰がいつ見たかを把握できるので、回答が来ていない人にリマインドできます。対面の打ち合わせではQRコードを配ると、その場で各自の端末から一覧を開いてもらえます。
差し替えと公開範囲の管理
選定の途中で候補を追加・削除したくなっても、同じURLのままファイルを差し替えられます。関係者は同じリンクを開くだけで最新の候補一覧を見られるため、混乱が起きません。
未公開のブランド向けアイコンは外部に漏らしたくないので、認証を設定して閲覧者を限定します。URLのみ・パスワード・メール認証・会社ドメイン認証から選べます。一時公開ページにはnoindexが付きますが、これはアクセス制御ではないため、必ず認証を併用してください。
よくある質問
明るい背景と暗い背景の両方で確認できますか
一覧ページに背景色を切り替えるボタンを用意しておけば、ライトとダークの両方での見え方を確認できます。アイコンの視認性は背景で大きく変わるため、両方を見比べてもらうと選定の精度が上がります。
選ばれたアイコンだけ後で渡せますか
採用が決まったら、選ばれたアイコンだけをまとめ直して同じURLのまま差し替えれば、関係者は最終セットを同じリンクで受け取れます。元の候補を残したい場合はフォルダを分けて管理してください。
アイコンの形式は何でも共有できますか
ブラウザで表示できる画像形式であれば一覧に並べられます。SVGやPNGなどをHTMLで参照する構成にし、フォルダごとZIPでアップロードすれば、形式が混在していても一覧表示できます。
選定が終わったら一覧を消せますか
公開期限を設定すれば、期限切れで自動的に閲覧できなくなります。無料プランは最長7日まで設定できるため、短期の選定用途に向いています。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。