ギガサイト便
HTMLをURL化
AI活用

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

Create.xyzでHTMLスライドを生成したものの、相手に見せる方法で悩む場面がある。メールにZIPを添付しても展開の手順でつまずく人がいるし、PDFに変換するとスライドアニメーションが失われてHTMLで作った意味が薄れてしまう。URLとして配信する方法を知っておくと、スムーズにレビューを開始できる。

5分で読める

何が共有しづらいのか

HTMLスライドにはキーボードの矢印キーでページを進める操作性が設計されていることが多いが、相手がスマートフォンで開いた場合にこのUIが機能しない。事前にモバイルでのスワイプ操作対応を確認し、対応していない場合は「PCでブラウザを使って開いてください」という案内を共有メッセージに加えておくと余計なトラブルを防げる。

Create.xyzが生成するHTMLスライドはCSSアニメーションを多用することがある。このアニメーションはGPUアクセラレーションを前提に設計されているため、古いPCや低スペックのデバイスでは動作がカクついてレビュアーに「動きが遅い」と言われることがある。共有する前にprefers-reduced-motionメディアクエリ対応を確認するか、アニメーションをシンプルに修正しておくと安心だ。

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

URL化する前の確認点

Create.xyzが生成するスライドHTMLが外部のフォントをGoogleFontsから読み込んでいる場合、中国やEUなどのネットワーク環境によっては読み込みに失敗してフォールバックフォントで表示される。デザインの印象が大きく変わる要因になるため、フォントをBase64でHTMLに埋め込むか、woff2ファイルをZIPと一緒にアップロードすることを検討する。

スライド内に使用しているアイコンがFont Awesomeなどのアイコンフォントライブラリに依存している場合、CDNの読み込み失敗で□や?などの豆腐文字が表示される。公開前にオフラインに設定したブラウザでHTMLを開いて表示を確認するか、SVGアイコンに置き換えて外部依存を排除しておく。

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

認証と期限の決め方

社内向けの業績報告スライドや戦略資料は、会社ドメイン認証を使って社員のみがアクセスできるように設定する。これにより「なぜかURL共有で外部の人にも見えてしまった」というミスを防げる。全員が同じドメインのメールを持っているため、パスワード管理も不要になる。

学会発表や外部カンファレンス向けのスライドを事前にレビュアーに確認してもらう場合は、共有相手が特定の外部人物になる。この場合はメール認証でアドレスを指定するか、発行したパスワードに48時間程度の有効期限を設ける。本番発表が終わった時点でURLを失効させると、発表後に古い資料が出回るリスクを下げられる。

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

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

スライドのレビューで「全体的にフォントを大きくしてほしい」のような大雑把な意見と「3枚目の棒グラフの色が見づらい」のような具体的な意見が混在することがある。共有時に「ページ番号を明記してフィードバックをお送りください」と依頼すると、後者のような具体的な意見が増えて修正作業が進めやすくなる。

スライドを修正して再アップロードする場合、以前の版を見ていたレビュアーに「更新しました」と通知することを忘れがちだ。通知なしに差し替えると、レビュアーがキャッシュ済みの旧版を見て「まだ修正されていない」と返信することがある。差し替えと同時にSlackで通知し、念のためシークレットモードで確認するよう一言添えると混乱を防げる。

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

よくある質問

スライドのページ数が多くHTMLが重い場合、読み込みが遅くなるか？

スライド1枚あたりの画像サイズが大きいと初回読み込みが遅くなる。画像をWebP形式に変換して圧縮するか、ページをまたいで同じ画像を参照する場合はキャッシュが効くように設定しておくと改善する。HTMLサイズ自体の問題であればgzip圧縮対応のサービスを選ぶ。

スライドにスピーカーノート機能があるが、レビュアーにノートを見せたくない場合どうすればよいか？

スピーカーノート用の要素（例：`<aside class="notes">`）をCSSで `display: none` に設定するか、共有用HTMLからノート要素を削除してからアップロードする。プレゼン本番用HTMLとレビュー用HTMLを分けて管理すると差し替えミスが起きにくい。

Create.xyzのスライドHTMLにアニメーションが多く、レビュアーがアニメーション有りと無しを比較したい場合の対応は？

アニメーションON版とOFF版の2つのHTMLを用意して別URLで発行する。OFFはCSSの `animation: none !important` をstyleタグで追加するだけで対応できる。2つのURLを並べてSlackに共有するとレビュアーが切り替えて比較しやすい。

関連記事

「AI活用」の記事をもっと見る →