---
title: "Magic Patternsで生成したHTMLスライドをレビュー用URLにして共有する方法"
description: "Magic PatternsでHTMLスライドを生成したあと、社外レビュアーに安全に届けたい人向け。ログイン不要URL・パスワード認証・期限設定の使い分けと、外部スクリプト混入リスクの確認手順を解説し、フィードバックを効率よく回収できる体制づくりを判断できる。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/magic-patterns-slide-html-review-url"
markdown: "https://giga-site.com/articles/magic-patterns-slide-html-review-url/index.md"
category: "AI活用"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Magic Patternsで生成したHTMLスライドをレビュー用URLにして共有する方法

Magic PatternsでHTMLスライドを生成したものの、「このリンクどこで見ればいい？」と聞かれて詰まった経験はないだろうか。ツール側のシェアリンクはログインを要求する場合があり、社外のデザイナーや経営陣に送るには不向きなことが多い。ギガサイト便のようなHTML専用の共有サービスを使えば、zipをアップロードするだけで認証付きURLを3秒で発行でき、スライドの表示確認からフィードバック収集まで一気通貫で完結する。

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

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

Magic PatternのエクスポートHTMLはCDN経由のReactランタイムを読み込む構成が多く、そのURLを直接Slackに貼っても受信側はMagicPatterns.comへのログインを求められることがある。社外レビュアーがアカウントを持っていなければその時点でレビューが止まる。

スライドはページ数が多いほどナビゲーションJSが複雑になり、ローカルで`file://`として開いたときと、HTTPサーバー越しに開いたときで動作が変わる場合がある。「手元では動くのに共有先では矢印キーが効かない」という報告が出てから原因を探るのは時間のロスだ。共有前にHTTPサーバー環境で必ず動作確認を行うこと。

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

## URL化する前の確認点

HTMLファイルをテキストエディタで開き、`<script src=`タグをすべて洗い出す。Magic PatternsがバンドルしたCDNスクリプト以外に、自分が編集で追加したGoogle Analytics等が混入していないか確認する。スライドが営業資料の場合、競合他社のドメインへのビーコンが埋まっていると情報漏洩リスクになる。

スライドのHTMLが画像を相対パスで参照している場合、zipにまとめる際にディレクトリ構造を崩さないよう注意する。`../img/hero.png`のような参照は、zipを展開せずそのまま共有サービスにアップロードすれば通常解決されるが、手作業でHTMLだけを抜き出すと画像が表示されなくなる。

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

## 認証と期限の決め方

社外のデザイン会社1社にだけレビューを依頼する場合は、パスワードを別途Slackで送るシンプルな運用が素早い。会社全体でスライドを回覧する場合は、会社ドメイン認証（例：`@example.co.jp`のメールアドレスでのみアクセス可）を設定することで、転送されたURLが外部に漏れても内容が露出しない。

スライドのレビュー期限は発表日の3日前を目安にするとよい。期限を過ぎたURLを残しておくと、古いバージョンのスライドへのリンクが社内Wikiに残り続け、参照ミスを招く。ギガサイト便では期限後のアクセス時に「このURLは期限切れです」と表示させる設定が可能なので、差し替え忘れを防げる。

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

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

スライドのレビューで「全体的にどうですか？」と聞くと、返ってくる意見が抽象的になりがちだ。依頼メールやSlackメッセージには「3枚目のグラフの読み方が伝わるか」「CTA文言の強さは適切か」など、スライドのページ番号と観点をセットで明記すると具体的なフィードバックが得やすい。

修正後に同じURLでコンテンツを差し替えられるサービスなら、レビュアーはブックマークを更新しなくてよいと事前に伝える。一方で「差し替えた」という通知は別途Slackで行い、古い版と新しい版が混在する混乱を防ぐ。最終承認済みの版は別スラグのURLに固定しておくと、後で「いつ承認されたか」の確認が容易になる。

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

## よくある質問

### Magic PatternsのHTMLスライドをzipにまとめるとき、フォント指定が崩れることがありますか？

CDNからWebフォントを読み込む構成の場合、共有URLを開く端末がインターネット接続できていればフォントは正常に表示されます。オフライン環境向けには、フォントファイルをzipに同梱してCSSのfont-face参照をローカルパスに書き換える必要があります。

### スライドが20枚以上あるとアップロードに時間がかかりますか？

画像の多いスライドは総ファイルサイズが10MB超になることがあります。アップロード前にImageOptimなどで画像を圧縮し、5MB以下に抑えると転送が速くなり、レビュアー側の読み込み時間も短縮できます。

### 複数バージョンのスライドを同時に共有してA/Bレビューしてもらえますか？

スラグを分けてそれぞれアップロードすれば、バージョンAとバージョンBで別々のURLを発行できます。依頼文にどちらがAでどちらがBかを明記し、比較観点を具体的に伝えると回答精度が上がります。

## 関連記事

- [Magic Patternsで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/magic-patterns-lp-draft-review-url/index.md)
- [Magic Patternsで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/magic-patterns-admin-mock-review-url/index.md)
- [Magic Patternsで生成したフォーム付きページをレビュー用URLにして共有する方法](https://giga-site.com/articles/magic-patterns-form-page-review-url/index.md)
- [Magic Patternsで生成した社内ツール風プロトタイプをレビュー用URLにして共有する方法](https://giga-site.com/articles/magic-patterns-internal-tool-prototype-review-url/index.md)
- [Firebase Studioで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/firebase-studio-slide-html-review-url/index.md)
- [Google Stitchで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/google-stitch-slide-html-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Magic Patternsで生成したHTMLスライドをレビュー用URLにして共有する方法",
  "description": "Magic PatternsでHTMLスライドを生成したあと、社外レビュアーに安全に届けたい人向け。ログイン不要URL・パスワード認証・期限設定の使い分けと、外部スクリプト混入リスクの確認手順を解説し、フィードバックを効率よく回収できる体制づくりを判断できる。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/magic-patterns-slide-html-review-url",
  "url": "https://giga-site.com/articles/magic-patterns-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": "Magic PatternsのHTMLスライドをzipにまとめるとき、フォント指定が崩れることがありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CDNからWebフォントを読み込む構成の場合、共有URLを開く端末がインターネット接続できていればフォントは正常に表示されます。オフライン環境向けには、フォントファイルをzipに同梱してCSSのfont-face参照をローカルパスに書き換える必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "スライドが20枚以上あるとアップロードに時間がかかりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画像の多いスライドは総ファイルサイズが10MB超になることがあります。アップロード前にImageOptimなどで画像を圧縮し、5MB以下に抑えると転送が速くなり、レビュアー側の読み込み時間も短縮できます。"
      }
    },
    {
      "@type": "Question",
      "name": "複数バージョンのスライドを同時に共有してA/Bレビューしてもらえますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "スラグを分けてそれぞれアップロードすれば、バージョンAとバージョンBで別々のURLを発行できます。依頼文にどちらがAでどちらがBかを明記し、比較観点を具体的に伝えると回答精度が上がります。"
      }
    }
  ]
}
```