ブランドレビューで指摘漏れを減らすHTML共有チェックリスト

事前準備

HTMLファイルをアップロードしてURLを発行したら、外部ネットワーク（自社Wi-Fiではなくスマホのテザリングなど）からアクセスして、Webフォントや画像が正常に読み込まれるかを確認します。社内ネットワーク内では通るが社外からアクセスできないアセットが混在していると、ブランドレビュー担当者が崩れた状態で確認することになります。

確認端末は「デザイナーが普段使うMacのSafari」と「外出先の社員が使うAndroidのChrome」の2パターンを最低限押さえます。特にSafariはWebP非対応の古い機種での表示が問題になることがあり、ロゴ画像がSVGなのかPNGなのかで対応状況が変わるため、フォーマットも合わせて確認します。

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

確認観点

HTML内で外部から読み込んでいるCSSフレームワークのバージョンが、ブランドガイドラインで指定されたデザイントークンと競合していないか確認します。たとえばTailwind CSSのデフォルトカラーパレットが残ったままだと、ブランドカラーが意図せず上書きされるケースがあります。DevToolsの「Elements」タブでCSS適用順を確認し、意図したカラー変数が最終的に有効になっているかを見ます。

ロゴのSVGファイルにインラインで色が定義されている場合、CSSから色変更できないことがあります。SVGの `fill` や `stroke` がハードコードされているか、CSSの `currentColor` を使っているかをソースで確認します。特にダークモード対応が必要なページでは、ハードコードのままだと背景色と混在して視認性が下がるリスクがあります。

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

NG例

ブランドレビューでよく起きるNGは、デザインツール（Figma等）からエクスポートしたSVGをそのままHTMLに貼り付けることです。エクスポートSVGには不要なレイヤー情報やコメントが含まれており、ブラウザによって表示が異なる場合があります。SVGOptimizerなどでクリーンアップしてから使用するのが基本です。

もうひとつのNGは「Figmaのプレビューと比べてください」という指示だけでHTMLのURLを送ることです。レビュー担当者がFigmaとHTMLを並べて比較する工数を強いることになり、指摘が抽象的になりがちです。比較しやすいようにFigmaのスクリーンショットと並べた比較画像を添付するか、担当セクションごとにスクリーンショットをまとめたPDFを用意すると具体的な指摘が得られます。

修正後の再共有

カラー修正は視覚的なbefore/after比較が最も伝わりやすい方法です。修正前のスクリーンショットと修正後のスクリーンショットを横並びにした画像を作成し、変更箇所を赤枠で囲ってからURLと一緒に送ります。テキストだけで「#0033CCに直しました」と送っても、担当者側で確認する手間が増えます。

複数指摘が出た場合は、指摘番号と対応状況（対応済み/見送り/確認中）を一覧にしてから再共有します。「見送り」の項目には理由（技術的制約・工数・ブランドガイドラインの解釈の違いなど）を添えることで、不要な往復を減らせます。ブランドレビューは主観的な判断が入りやすいため、エビデンスとなるガイドラインの該当ページ番号を引用すると認識を合わせやすくなります。