AI活用

Uizardで生成したHTMLスライドをレビュー用URLにして共有する方法

Uizardのプレゼンテーション機能やHTMLエクスポートを使ってスライド形式のページを作ったとき、社内の承認者に見せるためのURLをどう発行するかは意外と迷う。Uizard自体の共有リンクはアカウントが必要な場合があり、スライドをPDF化すると動的な要素が失われる。HTMLのままURLで共有できれば、ブラウザで開くだけのゼロハードルなレビュー環境が作れる。

何が共有しづらいのか

UizardのHTMLスライドはキーボード矢印キーまたはクリックで画面が切り替わる設計が多い。しかしHTMLをlocalhostではなくファイルとして開いた場合、JavaScriptのhistory APIの挙動が変わり、スライド送りが正常に動作しないことがある。共有サービスにアップロードしてHTTPサーバー経由で開く環境を用意することで、この問題は解消される。

スライドに入れたアニメーション(CSSキーフレームやJS制御のフェードイン)は、エクスポート後のHTMLでも動作するが、スライドの枚数が多い場合は初回ロードに数秒かかることがある。共有前にキャッシュを無効にした状態で読み込み時間を確認し、5秒を超えるようなら画像を圧縮するか不要なアニメーション要素を削除する。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

URL化する前の確認点

スライドのHTMLに埋め込まれたフォントがGoogle Fontsの場合、ファイアウォールでGoogleサービスをブロックしている企業ネットワークで表示が崩れることがある。重要なレビュアーが社内ネットワークのみで作業している場合は、フォントファイルをローカルバンドルするか、システムフォントへのフォールバックをCSSに明示的に記述しておく。

スライドの最終ページに「ありがとうございました」のような結語と連絡先を含めている場合、メールアドレスが公開URLに露出することになる。パスワード認証や会社ドメイン認証を設定していれば問題ないが、オープンURLで共有する場合は連絡先情報を削除するかGoogleフォームのURLに差し替えることを検討する。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

認証と期限の決め方

社内の週次会議で使うスライドを事前共有する場合、会議参加者全員が社内メールを持っているなら会社ドメイン認証が最も適切だ。会議後には不要になるURLなので、期限を会議日の翌日に設定して自動で無効化されるよう設定しておくと管理の手間が省ける。

社外の投資家や取引先にピッチデッキをレビューしてもらう場合は、パスワード認証を設定してミーティング当日にパスワードを口頭で伝える方法が安全だ。ミーティング後にパスワードを変更するか、URLを期限切れにすることで、会議参加者以外への拡散を防げる。

  • 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
  • 特定の相手だけ: パスワードまたはメール認証を使う
  • 会社内だけ: 会社ドメイン認証を検討する
  • 短期レビュー: 期限を設定して古いURLを残さない

共有後のフィードバック回収

スライドのフィードバックは「何ページ目の何を変えてほしいか」が明確になるほど修正コストが下がる。「スライド5枚目の棒グラフは折れ線グラフに変えたほうが時系列変化が伝わりやすい」のような形式での回答を求めると、次の修正指示を出しやすくなる。

フィードバックの回収方法としては、スライドURLとあわせてページ番号の書かれたコメント用テンプレート(「ページ番号 | 観点 | コメント」)をSlackで共有する方法が実用的だ。スレッドに全員が書き込んでいく形式にすると、まとめる手間なく複数人の意見を一箇所に集約できる。

  • 確認してほしい観点を3つ以内に絞る
  • 期限と返信先を明記する
  • 修正後も同じURLで見られるか伝える
  • 最終版と途中版が混ざらないようタイトルを付ける

よくある質問

スライドにスピーカーノートが含まれる場合、共有URLで表示されてしまいますか?

HTMLエクスポートにスピーカーノートが含まれるかどうかはUizardのエクスポート設定に依存します。エクスポート後のHTMLをテキストエディタで開き、スピーカーノートらしき文字列がコメントアウトや非表示divに残っていないか確認してから共有してください。

スライドを横向き表示で作ったのに、スマホで縦向きに表示されてしまいます。どうすればいいですか?

CSSのmax-widthとaspect-ratioを設定してviewportに収まるようにするか、HTMLのmetaタグにviewport指定を追加する対処が一般的です。スマホでのレビューが不要であれば、依頼文に「PCブラウザでの表示を推奨」と明記するだけで十分な場合もあります。

スライドのナレーション音声ファイルもHTMLに含める場合、zipのサイズが大きくなりすぎますか?

MP3形式で1分あたり約1MBが目安で、10分の音声なら10MB程度になります。ほとんどの共有サービスは50MB以下を推奨しており、長時間の音声はCloudflare StreamやYouTube限定公開で別途ホストし、HTMLからiframeで埋め込む構成のほうが管理しやすいです。

関連記事

AI活用

Uizardで生成したLP案をレビュー用URLにして共有する方法

UizardでLP案を生成し、社外マーケターや経営陣にデザインレビューを依頼したい人向け。Uizard特有のHTMLエクスポートの注意点から、ログイン不要URL・パスワード認証の選択基準、フィードバックを1往復で回収するメッセージ設計まで解説する。

5分で読める
AI活用

Uizardで生成した管理画面モックをレビュー用URLにして共有する方法

Uizardで生成した管理画面モックをエンジニアやPMにレビューしてもらいたいデザイナー向け。ダミーデータの取り扱い・会社ドメイン認証の設定手順・エンジニアが答えやすいフィードバック設問の作り方を解説し、開発着手前の合意形成を効率化するための判断材料を提供する。

5分で読める
AI活用

Uizardで生成したフォーム付きページをレビュー用URLにして共有する方法

UizardでフォームUIを生成し、クライアントやPMにデザインレビューを依頼したい担当者向け。フォームの送信無効化手順・入力バリデーションUIの見せ方・フィードバック設問の作り方を解説し、デザインレビューと機能レビューを混同せず進められるかを判断できる。

5分で読める
「AI活用」の記事をもっと見る →