公開前のWebページを確認しているときに、表示が崩れている部分を発見。そこで制作会社に確認したところ、同じ症状を確認できないと言われてしまった…。こういった食い違いは、Webサイトの制作で意外と多く起きるものです。しかし、なぜWebサイトは見る環境によって違いが生じてしまうのでしょうか。本記事でその理由を丁寧に解説していきます。
■ 見え方が変わる原因はいくつもある
Webサイトの見え方が食い違う原因は、大きく分けると「Webブラウザの違い」「OSの違い」「マシン個別の問題」に分かれます。自分の環境と制作会社とでWebサイトの見え方が違う場合、このうちのどれが原因かを突き止めていく必要があります。原因を突き止めることで、その後の対策が変わってくるからです。
さらに、上記で大別した3つの原因の中には、より詳細な理由が存在します。細かく挙げていくと途方もない数になりますので、ここでは代表的な原因をリストアップしてみましょう。
1.Webブラウザの違い
1-1 Webブラウザによる解釈の違いやバグ
1-2 WebブラウザによるデフォルトCSSの違い
1-3 バージョンによる違い
2. OSの違い
2-1 MacとWindowsの違い
2-2 内蔵フォントの違い
3.マシン個別の問題
3-1 キャッシュが邪魔をしている
3-2 セキュリティソフトの問題
3-3 ユーザ側の設定の問題ここから先は、それぞれの原因の詳細と対策について解説していきます。
●1. Webブラウザの違い
1-1 Webブラウザによる解釈の違い
現在、世の中にはさまざまなWebブラウザが存在しています。Webブラウザは、HTMLやCSS、Javascriptといったデータを読み込んで表示を行いますが、これらのデータの解釈がWebブラウザによって少しずつ違います。同じデータを読み込んでいても、そのデータの解釈が違うことで表示が変わってしまうというわけです。
例えばInternet Explorerでは、一部のフォントを指定したときに文字の下に余白をとってしまう現象があります。結果として、Google Chromeに比べ文字が少し上に寄った見え方になってしまいます。
さらに、Webブラウザによっては、解釈の違いというよりは明らかなバグが放置されていることもあります。中には、多くのエンジニアが指摘しているのに何年間も放置されているようなものまであります。
こうしたWebブラウザごとの解釈の違いやバグを解消するには、問題になっているブラウザ向けに個別のコードを追記する必要が出てきます。制作会社に修正を依頼する場合は、不具合が発生したWebブラウザの種類とバージョンをしっかり伝えることが肝心です。
1-2 WebブラウザによるデフォルトCSSの違い
Webサイトの見た目は、多くの場合CSS（Cascading Style Sheet）というデータによって定義されています。制作会社では、このページの本文の文字サイズは何ピクセル、見出しは何ピクセルといった定義をCSS内に記述しているわけです。
スタイルの定義が行われていないパーツについては、各WebブラウザごとのデフォルトCSS設定に従って表示が行われますが、このデフォルトCSSも、Webブラウザによって異なります。つまり、制作会社がうっかりスタイルの定義をし忘れたパーツは、Webブラウザによって見た目が変わってきてしまうのです。
制作会社は、こうしたトラブルを防ぐためブラウザごとのデフォルトCSS設定をリセットするためのCSSを読み込ませているはずですが、何かのミスでリセット用CSSの読み込みが正しく行われこともあります。この場合も、制作会社に不具合が発生したWebブラウザの種類とバージョンを伝えることで対応してくれるはずです。
1-3 バージョンによる違い
同じWebブラウザでも、バージョンによって表示が異なる場合があります。先ほど述べた「Webブラウザによる解釈の違い」が、バージョンによって変化しているケースがあるからです。
また、バージョンが古いWebブラウザでは、今どきのCSSの定義を解釈できないケースがあります。CSSで定義できる内容は時代が経つことで少しずつ進化しており、利用できる内容（プロパティ）の数も増えています。しかし古いバージョンでは新しく追加されたプロパティを理解できず、その定義が無視されてしまうのです。
多くの制作会社では、表示を保証するWebブラウザとバージョンを決めています。無理に古いバージョンをサポートし続けようとすると、今どきのリッチな演出を実装できなかったり、より複雑な工数が必要になったりするからです。サポートするWebブラウザの条件を見積もりに記載しているケースもあります。サポート条件が事前に明示されていた場合、後からより古いバージョンでの表示をリクエストした場合は追加費用がかかる可能性もあります。注意しましょう。
●2.OSの違い
2-1 MacとWindowsの違い
Google ChromeやFirefoxなどは、MacにもWindowsにもある「クロスプラットフォーム」のWebブラウザです。基本的には、同じWebブラウザならMacでもWindowsでも同じ表示になりますが、まれにOS固有のバグが存在します。
この場合、制作会社側が何らかの方法でバグを回避できるケースもありますが、細かなマイナーバージョンアップで突然バグが発生し、そのあとWebブラウザ側で修正版がリリースされるといったケースもあります。
どのような解決策を講じるかは、バグの内容によって変わってきます。ケースによっては複雑な対応が必要になることもあります。その場合の費用をどうするかは、ケースバイケースだと考えられます。
2-2 内蔵フォントの違い
MacとWindowsでは、標準で搭載されているフォントが異なります。このフォントの違いによって、Webサイトの印象が変わってきます。また、フォントによって文字間が変わり、1行に入る文字数も違ってきます。そのため、Windowsでは1行に収まっていたのにMacでは2行になってしまったというトラブルや、それが引き金になって大きなレイアウトの崩れが生じてしまう可能性もあります。
游明朝体や游ゴシック体など、MacとWindowsの両方にインストールされているフォントもあります。しかしこの場合も、WebブラウザやOSによって少しずつ解釈が異なり、文字間や行間がずれる可能性があります。
この辺りのズレを厳密に修正したい場合は、OSを判別してCSSを書き換えたり、Webフォントを利用するといった方法が考えられます。どんな解決方法を採用するかは制作会社と相談しましょう。
●3. マシン個別の問題
3-1 キャッシュが邪魔をしている
見た目が食い違う原因として意外に多いのが、キャッシュの問題です。キャッシュとは、Webブラウザの表示速度を高めるため、読み込みに必要なデータを一時的にパソコン内に保持しておく技術です。過去に一度訪れたWebページの場合、古いCSSのデータがキャッシュとして残り、その情報を使ってWebページを表示しようとします。
その結果、制作会社が書き換えたCSSの内容が反映されず、その部分の表示が崩れてしまいます。
これが原因の場合、表示が崩れているのはキャッシュが残っているマシンだけで、他のマシンでは崩れずに表示ができるはずです。可能であれば、別のスタッフのマシンでも同じ症状が発生するか、同僚に手伝ってもらってチェックするといいでしょう。
なお、一般的に「スーパーリロード」と呼ばれる方法で再読み込みを行うと、マシン内のキャッシュを使わずにページを表示することができます。スーパーリロードの方法はWebブラウザの種類によって異なりますが、代表的なWebブラウザのスーパーリロード操作を以下にまとめておきます。
Internet Explorer（Win）：ctrlキー＋F5キー
Microsoft Edge（Win）：shiftキー＋F5キー
Google Chrome（Win）：ctrlキー＋F5キー／shiftキー＋F5キー
Google Chrome（Mac）：shiftキー＋controlキー＋Rキー
Safari（Mac）：shiftキーを押しながら更新ボタンをクリック
スマートフォンの場合は、スーパーリロードではなく、「プライベートモード」や「シークレットモード」を使って表示するのが確実です。また、WindowsやMacでも、ときどきスパーリロードで解消できない場合があり、そんな時はやはりプライベートモードやシークレットモードを使うことで解決します。
3-2 セキュリティソフトの問題
PCにインストールしているセキュリティソフトやWebブラウザの機能拡張（アドオン）によっては、広告など一部のコンテンツをブロックする場合があります。これが原因で表示が崩れる可能性もあります。心当たりがある場合は、セキュリティソフトやアドオンを一時的に無効化して再読み込みを試みましょう。
3-3 ユーザ側の設定の問題
例えばGoogle Chromeでは、環境設定でフォントサイズを設定できます。また、標準で使うフォントも別のものに変えることができます。こうしたユーザ側の設定によって、見た目が変わってきてしまうことがあります。自分が過去に設定を変更していて、そのことをすっかり忘れてしまうということも案外あるものです。
■原因の切り分けと対策
表示の崩れに気づいた時は、最初にWebブラウザのキャッシュを疑ってみましょう。スーパーリロードまたはプライベートモード（シークレットモード）でページを再読み込みしてみます。キャッシュの問題であれば、初めてそのページを訪れた人には影響がありませんし、過去に訪れたことがある人でも、時間が経てばキャッシュが消えてるのでそれほど問題はありません。
キャッシュが問題ではないと判断した場合は、他のWebブラウザでも再現されるかどうかを確認しましょう。そのため、Web担当者はMicrosoft EdgeやGoogle Chrome、Firefoxなど、複数のWebブラウザをマシンにインストールしておくのが望ましいです。
崩れが発生する環境（Webブラウザの種類、Webブラウザのバージョン、OSの種類とバージョン）がわかったら、その情報を書き添えて、レイアウトが崩れている画面のスクリーンショットと一緒に制作会社に送りましょう。これらの情報が揃っていると、制作会社も調査がしやすくなります。
また、制作会社に連絡する前に、社内の他のスタッフに協力してもらって、別のマシンでも発生するかどうかを確認しておくといいでしょう。自分のマシンだけで発生している場合、ソフトの設定に原因がある可能性があります。
Webサイトの表示の崩れは、意外と原因の特定が難しいものです。特定の環境だけで発生する問題だとしても、表示の崩れが理由でブランディングを損なう可能性も捨てきれません。細かな問題だと思ってもそのまま見過さず、制作会社と相談しながら解決していきましょう。
関連記事
