---
title: "Claude Codeで生成したHTMLスライドをレビュー用URLにして共有する方法"
description: "Claude CodeでHTMLスライドを生成してURLで共有したいエンジニアや企画担当者向け。スライドライブラリの依存関係の扱いや認証設定の判断基準がわかり、すぐに共有できるようになる記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/claude-code-slide-html-review-url"
markdown: "https://giga-site.com/articles/claude-code-slide-html-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claude Codeで生成したHTMLスライドをレビュー用URLにして共有する方法

Claude CodeでReveal.jsやimpress.jsを使ったHTMLスライドを生成しても、ファイルを送るだけでは相手がスライドショーとして表示できないことが多い。URLとして共有すればブラウザで即座に再生でき、矢印キーで操作しながら確認してもらえる。HTMLスライドをレビュー用URLにする際の準備手順と注意点をまとめた。

> Source HTML: https://giga-site.com/articles/claude-code-slide-html-review-url
> Article index: https://giga-site.com/articles/index.md

## 何が共有しづらいのか

Reveal.jsなどのスライドライブラリはHTMLファイル単体ではなく、複数のCSSとJSファイルが同一フォルダに存在することを前提に動作する。HTMLファイルだけをメールに添付しても相手のブラウザではライブラリが読み込まれず、テキストが縦に並ぶだけの画面になる。ZIPにまとめてアップロードできるサービスを使わないと、スライドとして機能するURLを発行できない。

Claude Codeが生成するHTMLスライドには、スピーカーノート機能や全画面モードのキーボードショートカットが含まれることが多い。レビュアーが誤って`s`キーを押すとスピーカービューが開き、「別の画面が出た」と混乱することがある。レビュー用に送る際は「矢印キーでスライドを進め、全画面はF11で切り替え可能です」と操作説明を一行添えるだけで問い合わせが減る。

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

## URL化する前の確認点

HTMLスライドに埋め込まれた図表がSVGインラインの場合は問題ないが、ローカルの画像ファイルを相対パスで参照している場合はZIPに画像フォルダも含める必要がある。`<img src="../images/chart.png">`のような参照がある場合、ZIPのフォルダ構造が元のプロジェクト構造と一致していないとURL発行後に画像が表示されない。

Reveal.jsはデフォルトでフラグメント機能（アニメーション順表示）が有効になっており、Claudeのプロンプト次第でスライド1枚に10以上のクリック操作が必要になることがある。レビュアーが最後まで到達できないリスクを減らすために、レビュー用として`data-fragment-index`を外して一括表示に変更するか、「このスライドには〇枚のフラグメントがあります」と事前に通知する。

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

## 認証と期限の決め方

社外のクライアントへの提案スライドをHTMLで共有する場合、URLが拡散されると競合に内容が見られるリスクがある。パスワード認証を設定してURLとパスワードを別のチャンネルで渡す（URLはSlack、パスワードはメール）ことで、どちらか一方だけが漏れても閲覧できない状態を作れる。

社内の全員に向けた説明会のスライドをURL共有する場合は、認証なしでアクセス可能にする代わりに有効期限を説明会当日から1週間程度に絞るのが現実的だ。期限が切れれば自動的にアクセス不可になり、古いスライドのURLがSlackの過去ログで永遠に閲覧できる状態が続くことを防げる。

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

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

HTMLスライドのレビューでは「スライドの枚数が多すぎる/少なすぎるか」「各スライドのメッセージが一言で伝わるか」の2点に絞ってフィードバックを依頼すると、細かいデザイン修正より先に構成上の問題を特定できる。構成が固まった後にデザインを調整する順番にすることで、手戻りが最小限になる。

スライドのURLとともにLoomで自分が操作するデモ動画を送ると、「何スライド目のどこが不明瞭か」を具体的なタイムスタンプで指摘してもらいやすくなる。テキストコメントだけのフィードバックでは「4枚目」が何の話か確認する往復が生じるため、動画を活用するとコミュニケーションの効率が上がる。

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

## よくある質問

### Reveal.jsのスライドをそのままURLで共有するのに最低限必要なファイル構成は？

index.html・reveal.jsのdist/フォルダ（reveal.css, reveal.js）・plugin/フォルダが最低限必要だ。これらを一つのフォルダにまとめてZIP圧縮し、ギガサイト便にアップロードすることでスライドショーとして動作するURLを発行できる。

### スライドのSpeaker Notesの内容を閲覧者に見せたくない場合はどうすればよいか？

Reveal.jsのSpeaker View（`s`キーで開く）はローカルWebSocketを使うため通常のURL共有では開かないが、念のため`<aside class="notes">`タグの内容を削除してからアップロードすると確実に非公開にできる。

### HTMLスライドのURLをプレゼン当日に大画面で表示したい場合の注意点は？

事前にプレゼン会場のPCとプロジェクターでURLを開いて動作確認しておく。Reveal.jsは全画面表示時にウィンドウ比率に合わせてスケールするが、プロジェクターの解像度によってはフォントが小さすぎる場合があるため、`.reveal`のfont-sizeを調整した別URLを用意しておくと安心だ。

## 関連記事

- [Claude Codeで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-code-lp-draft-review-url/index.md)
- [Claude Codeで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-code-admin-mock-review-url/index.md)
- [Claude Codeで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-code-form-page-review-url/index.md)
- [Claude Codeで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-code-internal-tool-prototype-review-url/index.md)
- [Claude Appsで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-apps-slide-html-review-url/index.md)
- [Canva Codeで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/canva-code-slide-html-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claude Codeで生成したHTMLスライドをレビュー用URLにして共有する方法",
  "description": "Claude CodeでHTMLスライドを生成してURLで共有したいエンジニアや企画担当者向け。スライドライブラリの依存関係の扱いや認証設定の判断基準がわかり、すぐに共有できるようになる記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/claude-code-slide-html-review-url",
  "url": "https://giga-site.com/articles/claude-code-slide-html-review-url",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Reveal.jsのスライドをそのままURLで共有するのに最低限必要なファイル構成は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "index.html・reveal.jsのdist/フォルダ（reveal.css, reveal.js）・plugin/フォルダが最低限必要だ。これらを一つのフォルダにまとめてZIP圧縮し、ギガサイト便にアップロードすることでスライドショーとして動作するURLを発行できる。"
      }
    },
    {
      "@type": "Question",
      "name": "スライドのSpeaker Notesの内容を閲覧者に見せたくない場合はどうすればよいか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Reveal.jsのSpeaker View（`s`キーで開く）はローカルWebSocketを使うため通常のURL共有では開かないが、念のため`<aside class=\"notes\">`タグの内容を削除してからアップロードすると確実に非公開にできる。"
      }
    },
    {
      "@type": "Question",
      "name": "HTMLスライドのURLをプレゼン当日に大画面で表示したい場合の注意点は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "事前にプレゼン会場のPCとプロジェクターでURLを開いて動作確認しておく。Reveal.jsは全画面表示時にウィンドウ比率に合わせてスケールするが、プロジェクターの解像度によってはフォントが小さすぎる場合があるため、`.reveal`のfont-sizeを調整した別URLを用意しておくと安心だ。"
      }
    }
  ]
}
```