Microsoft Designerで作ったビジュアルを共有する方法

Microsoft Designerのビジュアルを共有するときの悩み

Microsoft Designerで作った画像は、PNGやJPEGとして書き出せます。1枚だけならメールやチャットに添付すれば済みますが、配色違いやサイズ違いの複数案を一度に見てもらいたいとき、添付ファイルが増えてどれがどれか分かりにくくなります。

画像ファイルをまとめて送ると、相手は1枚ずつ開いて見比べる手間がかかります。さらにファイル名だけでは案の意図が伝わらず、「A案のここを直してほしい」といったやり取りもしづらくなります。

そこで、複数のビジュアルを1つのページに並べたHTMLギャラリーを作り、URLひとつで全案を見渡せるようにすると、確認も指摘も格段にスムーズになります。

ビジュアルをHTMLギャラリーにまとめる

Microsoft Designerから書き出した画像を、シンプルなHTMLファイルに並べるだけでギャラリーになります。専門知識がなくても、imgタグで画像を縦に並べ、各案の見出しと簡単な説明文を添えれば十分です。

画像とHTMLファイルを1つのフォルダにまとめ、ZIP圧縮しておくと、そのまま一式として扱えます。相対パスで画像を参照しておけば、どこで開いてもレイアウトが崩れません。

AI生成HTMLを共有する前の安全チェック

Microsoft Designerで作ったビジュアルを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

• 外部送信: form action、fetch、script src、iframeの向き先を確認する
• 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
• 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
• 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

期限付きの共有URLを発行する手順

作ったHTMLギャラリーは、ギガサイト便のトップページにドロップするだけで共有URLになります。HTMLファイル単体でも、画像を含むZIPでもそのまま受け付けられ、その場で 〇〇.giga-site.com 形式のURLが発行されます。

1. Microsoft Designerで各案を画像として書き出す
2. 画像を並べたHTMLを作り、画像と一緒にZIPにまとめる
3. ギガサイト便のトップにZIPをドロップして共有URLを発行する
4. 認証方式と公開期限を設定する
5. 発行されたURLを依頼者やチームに送る

見せたい相手だけに届ける認証設定

発行する共有ページには、URLのみ・パスワード・メール認証（ワンタイムコード）・会社ドメイン認証の中から認証方式を選べます。社外のクライアントに見せるならパスワード、社内の特定チームに限るなら会社ドメイン認証が向きます。

一時公開ページにはnoindexが付くので検索結果には出ませんが、noindexはアクセス制御ではありません。関係者以外に見られたくないビジュアルなら、認証を併用して守るのが安全です。

公開期限と差し替えで運用を楽にする

レビュー用の共有には公開期限を設定しておくと、確認が終わった後にURLが残り続ける心配がありません。無料プランでも最長7日まで公開でき、短期のレビューには十分です。

指摘を受けてビジュアルを直したら、同じURLのままファイルを差し替えられます。リンクを送り直さずに中身だけ更新できるので、修正のたびに新しいURLを案内する手間が省けます。

確認の効率を上げる小さな工夫

アクセスログを見れば、誰がいつギャラリーを開いたかを確認できます。依頼者がまだ見ていないのか、見た上で返事を保留しているのかが分かり、催促のタイミングを判断しやすくなります。

対面の打ち合わせやイベントで見せるなら、QRコードを配布する方法もあります。スマホですぐにギャラリーを開いてもらえるので、その場で反応を聞きたいときに便利です。