---
title: "HTMLコンポーネントカタログ（Storybookビルド）を共有する方法"
description: "StorybookをビルドしてできたUIカタログをデザイナーやクライアントに確認してもらいたいフロントエンド開発者向け。アカウントなしでURLを開くだけで閲覧できる認証付き共有の仕組みと、レビューを回すための運用フローを解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/storybook-component-html"
markdown: "https://giga-site.com/articles/storybook-component-html/index.md"
category: "コンテンツ別"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# HTMLコンポーネントカタログ（Storybookビルド）を共有する方法

Storybookで作るUIコンポーネントカタログは、静的ビルドすればそのままブラウザで閲覧できる成果物になります。これをチームやデザイナー、クライアントに見てもらうには、認証付きの一時URLが手軽です。本記事ではStorybookビルドを安全に共有する方法をまとめます。

> Source HTML: https://giga-site.com/articles/storybook-component-html
> Article index: https://giga-site.com/articles/index.md

## Storybookの静的ビルドは配布できる成果物になる

Storybookはbuild-storybookなどのコマンドで静的ファイルとして書き出せます。出力されるのはHTMLとJS、CSS、画像などのまとまりで、サーバーがなくてもブラウザで開けば各コンポーネントのストーリーを閲覧できます。

この静的ビルドをそのまま渡せば、開発環境を持たないデザイナーやプロダクトマネージャー、クライアントでも、実際に動くUIコンポーネントの一覧を確認できます。コードを動かさずに最新のUIをレビューしてもらえるのが利点です。

ビルド成果物は複数ファイルの集合なので、まとめて1つのURLで配信できると共有がスムーズになります。

## コンポーネントカタログ共有で気をつけたい点

UIカタログには未公開のデザインや、開発中の機能が含まれることがあります。誰でもアクセスできるURLに置くと、リリース前の情報が外部に漏れるリスクがあります。閲覧範囲を制御できることが前提になります。

レビューは何度も往復するため、修正のたびに新しいURLを発行して送り直すのは煩雑です。同じURLのまま中身を差し替えられれば、レビュアーは常に最新のカタログを同じリンクで確認できます。

また、誰がいつ見たかが分かると、レビュー依頼が確認されたかの把握に役立ちます。

## 共有前チェックリスト

HTMLコンポーネントカタログ（Storybookビルド）を共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。

チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
- 操作: ボタン、リンク、フォーム、遷移先を確認する
- 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
- 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める

## Storybookビルドをチームへ共有する手順

具体的な共有の流れを、ギガサイト便を使う例で示します。Storybookの静的ビルドはCSS/JS/画像を含むため、出力ディレクトリをまとめてZIPにしてアップします。

1. Storybookをビルドして静的ファイル(通常はstorybook-staticなどの出力)を生成する
2. 出力ディレクトリ一式を1つのZIPにまとめる
3. トップページにZIPをドロップして共有URLを発行する
4. 閲覧範囲に応じて認証方式を選ぶ(社内なら会社ドメイン認証、限定共有ならパスワードやメール認証)
5. 発行されたサブドメインURLをチームに共有し、必要に応じてアクセスログで閲覧状況を確認する

## 社内・社外で認証方式を使い分ける

閲覧者が社内メンバーに限られるなら、会社ドメイン認証が便利です。その企業のメールアドレスを持つ人だけがアクセスできるため、URLの取り扱いに神経質にならずに済みます。社外のクライアントやパートナーに見せる場合は、パスワード認証やメール認証(ワンタイムコード)で相手を絞ります。

一時公開ページにはnoindexが付くため検索結果には出ませんが、noindexはアクセス制御ではありません。未公開のUIを守るには、必ず認証を併用してください。利用できる認証方式はURLのみ・パスワード・メール認証・会社ドメイン認証の4種類です。

アクセスログを使えば、レビュー依頼したメンバーがカタログを開いたかどうかを把握でき、フォローのタイミングを計れます。

## レビューの往復を同じURLで回す

UIの修正とレビューは何度も往復します。Storybookを再ビルドするたびに新しいリンクを送るのではなく、同じURLのままファイルを差し替えれば、レビュアーは常に同じリンクで最新のカタログを確認できます。古いビルドを見てしまう行き違いも防げます。

カスタムスラッグでURL末尾を分かりやすい名前にしておけば、プロジェクトやブランチごとにカタログを整理しやすくなります。レビュー期間が決まっているなら公開期限を設定し、期間後は自動的に閲覧できなくする運用も有効です。

ギガサイト便は独自ドメインでの本番Webサイト運用ではなく、確認・レビュー・一時共有に向いた位置づけです。常設のコンポーネントカタログは別途ホスティングし、レビューやチーム内共有の段階で活用するのが適しています。

## よくある質問

### Storybookの静的ビルドをそのまま共有できますか?

はい。build-storybookなどで出力した静的ファイル一式をZIPにまとめてアップすれば、ブラウザで開けるコンポーネントカタログとして共有URLで配信できます。レビュアーは開発環境がなくても、動くUIを確認できます。

### 未公開のUIを社外に見せたくありません。

閲覧者が社内なら会社ドメイン認証、社外の限定共有ならパスワード認証やメール認証(ワンタイムコード)で範囲を絞れます。検索結果に出ないnoindexはアクセス制御ではないため、未公開UIを守るには認証を必ず併用してください。

### 再ビルドのたびにリンクを送り直す必要がありますか?

いいえ。同じURLのままファイルを差し替えられるので、再ビルドした最新カタログを同じリンクで見てもらえます。レビュアーが古いビルドを開いてしまう行き違いも防げます。

### レビュー依頼が確認されたか把握できますか?

アクセスログ機能で、誰がいつカタログを開いたかを確認できます。レビューを依頼したメンバーが実際に見たかどうかを把握でき、フォローのタイミングを計るのにも役立ちます。

### 改善後の記事では何を確認できますか？

共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。

## 関連記事

- [デザインシステム・スタイルガイドHTMLを共有する方法](https://giga-site.com/articles/design-system-doc-html/index.md)
- [HTMLニュースレター・メルマガを共有する方法](https://giga-site.com/articles/share-html-newsletter/index.md)
- [HTMLカタログ・パンフレットを共有する方法](https://giga-site.com/articles/share-html-catalog/index.md)
- [HTML操作マニュアルを共有する方法](https://giga-site.com/articles/share-html-manual/index.md)
- [FAQ・ヘルプページのHTMLを共有する方法](https://giga-site.com/articles/share-html-faq-page/index.md)
- [年表・タイムラインHTMLを共有する方法](https://giga-site.com/articles/share-html-timeline/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTMLコンポーネントカタログ（Storybookビルド）を共有する方法",
  "description": "StorybookをビルドしてできたUIカタログをデザイナーやクライアントに確認してもらいたいフロントエンド開発者向け。アカウントなしでURLを開くだけで閲覧できる認証付き共有の仕組みと、レビューを回すための運用フローを解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/storybook-component-html",
  "url": "https://giga-site.com/articles/storybook-component-html",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "コンテンツ別",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Storybookの静的ビルドをそのまま共有できますか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。build-storybookなどで出力した静的ファイル一式をZIPにまとめてアップすれば、ブラウザで開けるコンポーネントカタログとして共有URLで配信できます。レビュアーは開発環境がなくても、動くUIを確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "未公開のUIを社外に見せたくありません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "閲覧者が社内なら会社ドメイン認証、社外の限定共有ならパスワード認証やメール認証(ワンタイムコード)で範囲を絞れます。検索結果に出ないnoindexはアクセス制御ではないため、未公開UIを守るには認証を必ず併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "再ビルドのたびにリンクを送り直す必要がありますか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。同じURLのままファイルを差し替えられるので、再ビルドした最新カタログを同じリンクで見てもらえます。レビュアーが古いビルドを開いてしまう行き違いも防げます。"
      }
    },
    {
      "@type": "Question",
      "name": "レビュー依頼が確認されたか把握できますか?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "アクセスログ機能で、誰がいつカタログを開いたかを確認できます。レビューを依頼したメンバーが実際に見たかどうかを把握でき、フォローのタイミングを計るのにも役立ちます。"
      }
    },
    {
      "@type": "Question",
      "name": "改善後の記事では何を確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。"
      }
    }
  ]
}
```