「自分の画面」と「相手の画面」は違う

同じサイトなのに、見え方が違う

「サイトが崩れてます」と連絡が来たので開いてみたら、自分の画面ではまったく正常——修正の仕事を始めると、最初の月に必ずこれを経験します。嘘をつかれているわけではありません。あなたとクライアントは、違う環境で同じサイトを見ているのです。

見え方を変える要素は、大きく3つあります。

1. 機械の種類(OS)

パソコンやスマホを動かしている基本ソフトをOSと呼びます(パソコンならWindowsやMac、スマホならiPhoneのiOSやAndroid)。OSが違うと、入っている文字の書体(フォント)が違うため、同じ文章でも太さや幅が変わり、行の折り返し位置がズレることがあります。

2. ブラウザの種類

同じパソコンでも、ChromeとSafariとEdgeでは、ページの解釈に細かな癖の違いがあります。ほとんどは同じに見えますが、凝ったデザインほど「Safariだけ角が丸くならない」のような差が出ます。

3. 画面の大きさ

パソコンの横長画面とスマホの縦長画面では、そもそも並べ方を変えて表示しています(横に3つ並んでいたものを、スマホでは縦に積む、など)。並べ替えの設定にミスがあると、片方の画面サイズでだけ崩れる——「スマホでだけ崩れてます」はたいていこれです。