何が共有しづらいのか
Google Stitchが生成する管理画面モックはGoogleのMaterial You準拠のコンポーネントを多用するため、ローカルで表示できても別の環境に持ち出すとフォントやアイコンが崩れることがある。特にGoogleのNoto FontsやMaterial Iconsをウェブフォントとして読み込んでいる場合、ネットワーク接続のない環境では表示が乱れる。
管理画面モックに含まれるテーブルやリストの行数が多い場合、スクロール操作でどのデータが強調表示されるかというインタラクションがレビュアーに伝わりにくいことがある。画面操作の説明を文章で伝えるより、URLを渡して実際に操作してもらう方が認識のズレが少ない。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
管理画面モックに含まれるナビゲーションリンクのhref属性が、他の内部ページのファイルパスを指している場合、その相対パスでアップロード後も解決できるかを確認する。zipにまとめてアップロードする際はフォルダ構造をHTML内の相対パスと一致させることが必要だ。
Google Stitchが生成するコードにはGooglebotへの最適化メタタグが含まれる場合がある。`<meta name='robots' content='index, follow'>`が残っていると、レビュー用URLが検索エンジンにインデックスされる可能性がある。公開前に`noindex`に変更するか、ロボットタグを削除しておく。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
管理画面モックの確認は開発チームと業務担当者が混在する場合が多い。全員が同じ会社ドメインのメールアドレスを持っているなら、会社ドメイン認証が最も運用コストが低い。社外ベンダーがレビューに参加する場合はパスワード認証を追加し、ベンダー担当者にだけパスワードを伝える形にする。
管理画面のモックレビューは設計フェーズによって複数回実施されることが多い。最初のレビューが終わった時点でURLを一時無効化し、次のイテレーション後に差し替えたHTMLで再発行すると、古いモックと新しいモックが混在するリスクを防げる。URLの管理は専用のスプレッドシートに発行日・バージョン・有効期限を記録すると追いやすい。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
管理画面のモックレビューで最も重要な確認は「業務担当者がこの画面だけで必要な作業を完結できるか」という点だ。レビュー依頼時に「実際の月次報告の操作を想定して触ってみてください」などシナリオを提示すると、抽象的な感想ではなく業務に即した具体的なフィードバックが集まりやすい。
フィードバックを集めた後は「UI変更が必要な項目」「データ構造の変更が必要な項目」「優先度が低い改善案」に分類してバックログに入れると、開発計画への反映がスムーズになる。レビュアーからのコメントを分類せずにそのまま受け取ると、全部直さなければいけないような印象を与えてしまうため、優先度の判断は開発側が行うと伝えておくとよい。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
管理画面モックの一部の画面だけを特定のレビュアーに見せたい場合はどうすればよいですか？
対象画面のHTMLだけを別ファイルにして個別URLを発行し、そのURLだけを該当レビュアーに共有する方法が最もシンプルです。URLごとにパスワードを変えることもできます。
モックに含まれるグラフや集計数値が本番データのように見えて誤解を招く場合の対処法は？
グラフの凡例や数値の近くに「サンプルデータ」とラベルを入れるか、あり得ない数値（例：9,999,999）を使うことで本番データではないとわかるようにすることを推奨します。
Google Stitch以外のツールで生成したHTMLと組み合わせてアップロードできますか？
アップロードするのは通常のHTMLファイルやzipなので、生成ツールに関わらず組み合わせてアップロードできます。ただしツールごとに依存するCSSやJSが異なるため、表示の確認は必須です。