サイトの確認をお願いすると、よくこんなご相談をいただきます。
「スマホではきれいなのに、いつものパソコンで見ると文字が大きすぎる」「会議室のモニターで見たら、レイアウトが崩れていた」「デザインの見本と、うちの画面で見た感じが違う」。
多くの場合、サイトが壊れているわけではありません。見ている画面の「横幅」と「表示倍率」が、人によってかなり違うのが理由です。
この記事では、次の3つをなるべく専門用語を使わずにまとめました。
- なぜ同じサイトでも、見る画面によって見え方が変わるのか。
- サイトは作るときに何を優先していて、そのせいで何が起きるのか。
- 「きれいに見えない」と感じたときに、まず確かめてほしいこと。
ホームページ制作をご依頼いただいた方にも、社内でサイトを確認する方にも読んでいただけるように書いています。
見え方が変わる原因はほぼこの3つです
同じサイトでも、見る人のパソコンによって見え方は変わります。原因はだいたい次の3つです。
1. 画面の大きさ（解像度）
ノートパソコンの13インチと、会議室の大きなモニターでは、表示できる量がまったく違います。スマホとパソコンの差ほどではなくても、パソコン同士でもかなりの開きがあります。
2. Windowsの「拡大縮小」の設定（表示倍率）
Windowsには、画面全体の文字やアイコンを大きくする設定があります。「設定」→「システム」→「ディスプレイ」にある「拡大縮小」という項目です。ここが125%や150%になっているパソコンはとても多く、ノートパソコンでは買ったときから125%や150%になっていることもよくあります。
「字が小さくて読みにくいから125%にした」「会議でみんなが見やすいように、モニターを150%にしている」といった理由で、ご自身で変えている方もいます。
3. ブラウザの拡大（ズーム）
ChromeやEdgeでは、Ctrlキーを押しながらマウスのホイールを回すと、ページだけを拡大・縮小できます。気づかないうちに110%や125%になったままのことがあります。
2と3は、どちらも「サイトを拡大して見ている」のと同じことになります。そして、この2つは掛け算で効きます。Windowsが125%、ブラウザも125%なら、実際は約156%に拡大して見ている状態です。
サイトは「文字を守る」か「レイアウトを守る」かを選んで作られています
画面の横幅は、見る人によってバラバラです。そこでサイトを作るときは、「横幅が変わったときに何をそのままにして、何を動かすか」を決めています。この決め方には、大きく2つの考え方があります。
| 文字の大きさを守る作り方 | レイアウトを守る作り方 | |
|---|---|---|
| 横幅が変わると | 文字は同じ大きさのまま、並び方や改行の位置が変わる。 | ページ全体が拡大・縮小され、並び方や改行の位置はそのまま。 |
| いいところ | どの画面でも文字が読みやすい | デザインの見本に近い見た目で表示される |
| 気になりやすいところ | 見本と改行の位置がずれる。横幅が狭いと、文字が大きく見えて窮屈になる。 | 横幅が狭いと文字が小さくなる。大きなモニターだと、文字が大きくなりすぎる。 |
| 向いているページ | 読んでもらうページ（ブログ・お知らせ・会社案内） | 見せるページ（トップページの最初の画面・キャンペーンのページ） |
実際には、どちらか一方だけで作っているサイトは少なく、ページや場所ごとに使い分けています。たとえば、トップの大きなキャッチコピーはレイアウトを守り、本文は文字の大きさを守る、といった具合です。
もうひとつ、画面がある幅より狭くなったら、ページの組み方そのものを切り替える仕組みもあります。横に3つ並んでいたカードが2つになったり、メニューが「≡」のボタンにまとまったりするのがそれです。こうした、画面の幅に合わせて見せ方を変える作り方をまとめて「レスポンシブデザイン」と呼びます。画面の幅に合わせて伸び縮みする作り方は「リキッド（液体の）レイアウト」という呼び方もします。
どの作り方も、どんな画面でも完璧にはなりません。何を優先するかを選んだ結果として、画面によって見え方に差が出ます。
125%・150%の画面ではサイトから見た横幅が狭くなります
画面を拡大すると、サイトから見ると「横幅の狭い画面で開かれている」のと同じことになります。計算はかんたんで、画面の横の画素数を倍率で割るだけです。
よくある横1920画素（フル HD）の画面で計算すると、こうなります。
| Windowsの倍率 | ブラウザの倍率 | サイトから見た横幅 |
|---|---|---|
| 100% | 100% | 1920画素 |
| 125% | 100% | 1536画素 |
| 150% | 100% | 1280画素 |
| 150% | 125% | 1024画素 |
| 175% | 125% | 約878画素 |
画面そのものは横1920画素もあるのに、倍率の組み合わせ次第で、サイトにとっては半分以下の幅になります。横1024画素や900画素を切ると、タブレットと同じくらいの幅です。こうなると、パソコンなのにタブレット用の見せ方に切り替わったり、メニューが「≡」にまとまったりします。
そのうえで、前の章の作り方の違いが重なります。
- 文字を守る作り方のページは、文字が「拡大された大きさ」のまま、狭い幅に詰め込まれます。文字がやたら大きく、改行が多く、窮屈に見えます。
- レイアウトを守る作り方のページは、拡大しても見た目があまり変わりません。「拡大したのに大きくならない」と感じることがあります。
「いつものパソコンだときれいに見えない」というご相談の多くは、この章の表の下の方の状態で起きています。
ええやんは「よく使われる画面」を基準に作っています
どの画面でも見本どおりに見えるサイトは作れません。なので、私たちはまず「どの画面を基準にするか」を決めてから作っています。
ええやんでは、ふだん次の幅を基準にしています（案件によって変えることもあります）。
| 見せ方 | 切り替わる横幅 | デザインの見本の横幅 |
|---|---|---|
| パソコン用 | 1280画素以上 | 1440画素 |
| タブレット用 | 768〜1279画素 | パソコン用の見本をもとに調整 |
| スマホ用 | 767画素以下 | 390画素 |
仕上がりは、375画素（小さめのスマホ）・768画素（タブレット）・1280画素・1440画素・1920画素の5つの幅で確認しています。
前の章の表に当てはめると、横1920画素の画面をWindowsで150%にしても、サイトから見た横幅は1280画素なのでパソコン用の見せ方のままです。ブラウザも125%にすると1024画素になり、タブレット用の見せ方に切り替わります。
- 上の幅は、よく使われている画面の大きさから決めています。サイトの閲覧データがあればそれも見て、お客さまに合わせて調整します。
- 基準より広い画面・狭い画面でも、文字が読めること、ボタンが押せること、レイアウトが重ならないことを確認しています。
- そのうえで、トップの最初の画面など「見た目を優先したい場所」と、本文など「読みやすさを優先したい場所」を分けて作っています。
そのため、ご確認いただくときは、次のことをお願いしています。
- Windowsの倍率とブラウザの倍率を、いったん100%にして見る。見本との違いが、作り方によるものか、倍率によるものかがわかります。
- 「どのパソコンの、どの画面で見たか」を教えてもらう。機種名かモニターの大きさ、それにWindowsの倍率がわかると、こちらで同じ状態を再現できます。
- 気になる場所は、画面のスクリーンショットで送ってもらう。「なんとなく違う」より、「この見出しが2行になっている」のほうが早く直せます。
そのうえで、「社内では会議室のモニターを150%で使うことが多いので、その状態でも見やすくしたい」というご要望があれば、ぜひ相談してください。特定の画面に合わせて調整することはできます。ただし、ほかの画面での見え方とのかね合いもあるので、どこまで合わせるかを一緒に決めさせてください。
自分の画面の倍率を確かめる方法
確認が終わったら、もとの倍率に戻してかまいません。読みやすい倍率で使うのが一番です。
Windowsの倍率
- デスクトップの何もないところを右クリックして、「ディスプレイ設定」を開く。
- 「拡大縮小」（Windows 10では「拡大縮小とレイアウト」）の数字を見る
- 確認のときだけ100%に切り替え、終わったらもとの数字に戻す。
モニターを2台つないでいる場合は、画面ごとに倍率が別々になっています。サイトを見ているほうの画面を選んで確かめてください。
Macの画面の大きさ
「システム設定」→「ディスプレイ」で、「文字を拡大」から「スペースを拡大」までのどこが選ばれているかを見ます。「文字を拡大」寄りになっているほど、サイトから見た横幅は狭くなります。
ブラウザの倍率
ChromeやEdgeでは、アドレスバーの右に虫眼鏡のマークが出ていたら、拡大されている印です。Windowsなら「Ctrl」と「0（ゼロ）」、Macなら「⌘」と「0」を同時に押すと、100%に戻ります。
まとめ
- 同じサイトでも、画面の大きさ・Windowsの倍率・ブラウザの倍率で見え方は変わります。
- 125%や150%の画面では、サイトから見ると横幅が狭くなり、タブレットに近い見せ方になることもあります。
- サイトは「文字の読みやすさ」と「レイアウトの見た目」のどちらを優先するかを、場所ごとに選んで作られています。
- 「きれいに見えない」と感じたら、まず倍率を100%にして見て、それでも気になる場所を画面の写真と一緒に教えてください。
倍率を100%にして確かめたうえで、それでも気になる場所があれば、スクリーンショットと見ている画面の情報を添えてご連絡ください。
