できること
StackBlitzのプロジェクトはWebContainerという技術で動いており、Node.jsが必要なフロントエンドプロジェクトもブラウザだけで実行できます。VueやReactで作ったコンポーネントのプレビューを、インストール不要でレビュアーに見せることができます。相手がURLを開けばビルドが走り、数秒後には動作するUIを確認できます。
StackBlitzのプレビューURLはログイン不要で開けます。デザインの細部や動作をリアルタイムで確認してもらいながら、チャットでフィードバックをもらうというスピード感のあるレビューが社内では有効です。PCとスマートフォンの表示確認も、URLをデバイスのブラウザで開くだけで完了します。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
できないこと
StackBlitzのプレビューURLにはパスワード保護機能がありません。URLが転送されると、第三者も同じページにアクセスできます。未発表のデザインや機密データが含まれるUIを社外に見せる場合、URLの漏えいルートを制御できないのは大きなリスクです。
期限設定もできないため、StackBlitzのアカウントを削除するかプロジェクトをPrivateにするまでURLは有効なままです。レビュー完了後の無効化を忘れると、古いプロトタイプが永続的に公開状態になります。また、StackBlitzのサービス仕様変更やWebContainer環境の不具合でプレビューが壊れた場合、レビュアーへの影響が予測しにくい点も商用レビューでは考慮が必要です。
認証と期限の違い
StackBlitzのプレビューと認証付き共有サービスの最大の違いは「URLを知っている全員が見られるか、許可した人だけが見られるか」です。StackBlitzは前者であり、ギガサイト便のようなサービスは後者を実現します。パスワード認証なら1つのパスワードで対象者を絞れ、メール認証なら特定のメールアドレスに限定できます。
期限については、StackBlitzは手動管理のみであるのに対し、認証付き共有サービスでは日数を指定して自動失効させられます。「提案期限は今週金曜まで」という案件であれば、期限をサービス側に設定することでフォローアップの手間が省けます。また、期限後に誰かが古いURLを開いてもアクセスできないため、承認フローの混乱を防げます。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
差し替え・レビュー運用
StackBlitzではコードを変更するとプレビューがリアルタイムで更新されます。これはペアプロや社内の即時フィードバックには便利ですが、社外レビューでは「確認中に画面が変わる」という混乱を招きます。レビュー版を確定したらコードの変更を止めるか、プレビューURLではなくスナップショットを渡す運用が必要です。
ギガサイト便のような静的共有サービスでは、ファイルをアップロードした時点のHTMLが固定されます。修正するたびに再アップロードし、同URLで差し替えればレビュアーは同じURLで最新版を確認できます。「最終版と途中版を混同させない」ために、アップロード時のコメント欄にバージョンを記載する習慣をつけると、承認証跡の管理がしやすくなります。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
向いているケース早見表
StackBlitzが向いているのは、フレームワークを使った動的なUIコンポーネントの技術確認です。ReactのStateが絡むインタラクション、Vueのアニメーション、フォームバリデーションの動作確認など、「コードが動いていることを見せる必要がある」場面では代替が難しいツールです。
認証付き共有サービスが向いているのは、静的HTMLやZIPで納品できる成果物のレビューです。LPやバナーHTML、メールテンプレートのプレビュー、デザインシステムのスタイルガイドHTMLなどは、StackBlitzのような実行環境なしでも確認できます。開発にはStackBlitz、共有にはギガサイト便という使い分けで、両方の強みを活かせます。
よくある質問
StackBlitzのプレビューURLはデフォルトで公開されますか?
StackBlitzのプロジェクトはデフォルトでPublicになっており、URLを知っている人は誰でもプレビューを閲覧できます。Private設定に変更することも可能ですが、その場合は共有相手もStackBlitzアカウントが必要になります。
StackBlitzプレビューをパスワードで保護する方法はありますか?
StackBlitzにはプレビューURLへのパスワード保護機能がありません。閲覧者を限定するにはPrivateプロジェクトにして招待制にするか、別の認証付き共有サービスにHTMLをエクスポートして使う必要があります。
StackBlitzで作ったReactコンポーネントをギガサイト便で共有するにはどうすればよいですか?
StackBlitzのプロジェクトでビルドコマンドを実行し、生成されたdistフォルダをZIPにまとめてギガサイト便にアップロードします。静的ファイルとして出力できるフロントエンドプロジェクトであれば、この方法でほぼすべてのケースに対応できます。