何が共有しづらいのか
RelumeはHTML・CSS・JSをひとまとめに出力するため、ファイルをそのままメール添付しても受け取った側はローカルで正しく開けないことが多い。外部CDNのフォントやアイコンが読み込めず、デザインが崩れた状態でレビューされてしまうケースが典型例だ。
Google DriveやDropboxでの共有も「ログインを求められた」「モバイルで開けなかった」という報告が後を絶たない。特にクライアントが社外の場合、Googleアカウント持ちかどうかわからないまま送るのはリスクが高い。URL化サービスを使う前提でも、相手がログインなしで開けるかどうかをまず確認しよう。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
URL化する前の確認点
Relumeが出力したHTMLには`<script src="https://...">`のような外部参照が含まれていることがある。公開URLに載せた後、そのCDNが落ちたり仕様変更されたりすると表示が崩れる。VSCodeで検索する場合は`src="http`と`href="http`の両方を確認し、必要なアセットはローカルにコピーしてから公開するのが安全だ。
LP案にはクライアント名や仮の連絡先、ダミーのAPIエンドポイントが残っていることがある。`form action`が外部サービスを指していると、レビュワーがボタンを押した瞬間に実際のリクエストが飛ぶ。公開前に`action`属性を`#`に書き換えるか、送信ボタンを`disabled`にしておくのが無難だ。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
認証と期限の決め方
クライアントが1社だけならパスワード認証が最もシンプルだ。パスワードはLP案の提案メールと同じスレッドに書かずに別便で送ると、URLが転送された際の情報漏えいリスクを下げられる。複数の担当者が閲覧する場合はメール認証にすると、誰がいつ開いたか把握しやすい。
レビュー期限は「修正案を送る予定日の前日」に設定しておくとURLが放置されにくい。期限切れ後も修正版を同じURLで見せたい場合は、期限を延長するのではなく新しいURLを発行して「v2」と明記するとバージョン管理が明確になる。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
共有後のフィードバック回収
レビュー依頼メールには「ファーストビューのキャッチコピーの訴求力」「CTAボタンの配置」「全体の色トーンがブランドガイドラインに合っているか」の3点に絞って確認を求めると、返信の質が上がる。観点を絞らないと「なんとなくいい感じです」という感想しか返ってこないことが多い。
修正後に同じURLで表示が更新されるサービスを使っている場合でも、相手には「差し替えました」と一言連絡を入れる。「前に見た内容のまま」だと思い込んで再確認しないクライアントがいるため、更新通知はかならず別途送るようにしよう。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
よくある質問
RelumeのHTMLをそのままアップロードしても画像が表示されないのはなぜですか？
Relumeが出力するHTMLは相対パスで画像を参照しています。HTMLファイル単体をアップロードすると画像フォルダが付いてこないため表示されません。zipごとアップロードして展開するか、画像をHTMLにbase64埋め込みする対応が必要です。
パスワードを設定せずにURL共有した場合、検索エンジンにインデックスされますか？
URLを知っている人なら誰でも閲覧でき、クローラーが巡回すればインデックスされる可能性があります。LP案に`<meta name="robots" content="noindex">`を追加するか、認証付きURLを発行するサービスを使うとインデックスを防げます。
クライアントがスマホで開いたらレイアウトが崩れていると言われました。原因は何ですか？
RelumeのデフォルトHTMLはレスポンシブ対応ですが、viewportメタタグが欠落している場合やCSSが部分的にしか読み込まれていない場合に崩れます。共有前にBrowserStackや実機で確認し、viewportタグの有無をチェックしてください。