クライアントPCで「ローカルと見た目が違う」を解決する環境チェックリスト｜現場で使える実践テクニック
こんにちは！
今日は「クライアントPCで『ローカルと見た目が違う』を解決する環境チェックリスト」について解説します。
なぜクライアント環境で見た目が変わるのか
僕も昔ですね、Webサイトを完成させてクライアントに納品したら「あの、画面が違うんですけど…」と連絡されたことがあります。
ローカルではめっちゃキレイに見えてたのに、クライアントのPCで見たら「あ、ほんまや」って感じで。
あの時はめっちゃ焦りました（笑）
実はこれ、Web制作の現場ではめっちゃよくあるんです。
同じHTMLとCSSなのに、環境が違うと見た目が変わってしまう。
理由は大きく分けて4つあります。
- フォントがインストールされていない
- ブラウザのバージョンが古い
- ブラウザキャッシュが悪さをしている
- OSやディスプレイの設定による差異
これらはぜんぶ、開発者側で気をつけることができるんですよ。
チェックリスト化して対処すれば、ほぼほぼ防げます。
フォント設定による違いと対処法
最も多いのがフォント問題です。
僕の経験では、クライアント環境でのトラブルの約60%がフォント関連なんです。
例えば、あなたが開発環境でfont-family: 'Noto Sans JP', sans-serif;と指定してたとします。
ローカルではGoogle Fontsから読み込んでるから見えてる。
でもクライアントのPCがネットに繋がっていなかったり、CDNがブロックされてたら？
フォントが読み込まれず、デフォルトフォントにフォールバックしてしまうんです。
対処法としては、まず外部フォントに頼り過ぎないこと。
CSSのfont-familyスタックを工夫しましょう。
良い例：
font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;
こうすることで、Google Fontsが読み込めなくても、次々とフォールバックしていきます。
最終的にはクライアントのPCにインストールされてるフォントを使うわけです。
WindowsならMeiryoやYuGothic、Macならヒラギノ角ゴとか。
それからですね、もう一つ重要なのがWebフォントの読み込み設定です。
もし外部フォントを使うなら、font-display: swap;をCSSに追加するといいですよ。
フォントの読み込みが遅れても、とりあえずフォールバックフォントで表示されるようになります。
ブラウザキャッシュと表示エンジンの問題
次が、ブラウザキャッシュです。
クライアントのPCで「昔のバージョンが表示されてる」って話、めっちゃよく聞きますよね。
これはCSSやJavaScriptが強くキャッシュされてるせいです。
ローカル開発では僕らは開発者ツールを開いて「キャッシュを無効化して再読み込み」をしてるんですが、クライアントはそんなことしません。
普通にブラウザを開いて見た時に、古いファイルが表示されちゃう。
対処法は、本番環境にアップロードする時に、CSSやJSのファイル名にバージョン番号やハッシュを付けることです。
例えば：
style.css→style.v2024010101.cssscript.js→script.a3f9e2b.js
こうすることで、ファイル更新のたびにURLが変わるので、キャッシュが使われません。
ビルドツール（webpackとかViteとか）を使ってれば、たいていこれが自動でやられます。
それからですね、<meta>タグでもキャッシュを制御できます。
本番環境では以下のようなタグを<head>に入れておくといいですよ：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
あともう一つ、古いブラウザを使ってるクライアントがいたら、表示が崩れることもあります。
Internet Explorer 11とかですね。
今はIEサポートが終了してますけど、まだ使ってるクライアント、いるんですよ…
そういう時は、CSSの互換性に気をつけたり、polyfillを入れたり、グレースフルデグラデーション（古いブラウザでは完全には見えなくてもいい）を念頭に置いて作るといいですよ。
納品前の環境チェックリスト
実際に僕が現場で使ってるチェックリストを、そのままお渡ししちゃいます。
これをクライアント納品の前にやっておけば、ほぼほぼ大丈夫です。
フォント関連
- Google Fontsなどの外部フォントが読み込めない状況を想定した
font-familyスタックになっているか - 文字が中途半端に大きくなったり小さくなったりしないか（font-sizeの計算ミス）
- 日本語フォントの選択は適切か（英字フォントだけ指定してないか）
- Woff2など最新フォント形式に対応しつつ、フォールバックもあるか
キャッシュ関連
- CSSとJSファイルにバージョン番号またはハッシュが付いているか
- 本番環境でのHTTPヘッダーのCache-Controlが適切に設定されているか
- ServiceWorkerを使ってる場合、更新戦略は大丈夫か
ブラウザ互換性
- Chrome最新版とEdge最新版での表示確認
- 必要に応じてSafariの古いバージョンも確認（クライアントが古いMacを使ってる可能性）
display: flexやgridの使用箇所は互換性大丈夫か- CSSカスタムプロパティ（変数）をIEで使ってないか
ディスプレイ・OS設定
- 高DPI（Retina）ディスプレイでぼやけてないか
- Windowsの「テキストサイズの変更」（拡大率100%以外）