ホームページ制作の確認をしていると、こんなご指摘をいただくことがあります。
「この文字、ここで改行しないようにできますか？」
「私のパソコンだと少し色が違って見えます」
「この位置をもう少し右にしてください」
もちろん、明らかな表示崩れや見にくさがあれば修正する必要があります。
ただし、ホームページには印刷物とは大きく違う特徴があります。
見る人のパソコン、スマートフォン、画面サイズ、ブラウザ、設定によって、見え方が少しずつ変わるということです。
つまり、今あなたが見ているホームページの表示が、すべての人にまったく同じように見えているわけではありません。
今回は、ホームページを確認するときに知っておいてほしい「表示環境による違い」について、できるだけ分かりやすく解説します。
ホームページは印刷物のように「全員まったく同じ」にはならない
チラシやパンフレットであれば、完成した印刷物は基本的に全員が同じものを見ます。
文字の位置も、写真の大きさも、改行位置も同じです。
しかしホームページは違います。
見る人によって、
- パソコンの画面サイズ
- スマートフォンの機種
- タブレット
- ブラウザ
- 画面の拡大率
- 文字サイズの設定
などが異なります。
そのため、ホームページは「1枚の固定されたデザイン」ではなく、環境に合わせて形を変えるものと考えた方が分かりやすいでしょう。
ホームページの改行位置は画面幅によって変わる
特によくあるのが、文章の改行についてのご相談です。
例えばパソコンでは、
「地域に密着したサービスを提供しています」
と1行で表示されていても、スマートフォンでは画面幅が狭いため、
「地域に密着したサービスを
提供しています」
のように途中で改行されることがあります。
これは不具合ではありません。
画面幅に合わせて自動的に文字が折り返されている正常な表示です。
さらに同じパソコンでも、ブラウザのウィンドウを少し狭くすれば改行位置は変わります。
そのため、
「自分のパソコンではここで改行されているから、全員ここで改行してほしい」
という指定は、Webでは必ずしも現実的ではありません。
パソコンとスマートフォンではホームページのレイアウト自体が変わる
現在のホームページ制作では、パソコン、タブレット、スマートフォンなど、それぞれの画面サイズに合わせてレイアウトを調整するレスポンシブWebデザインが一般的です。
例えばパソコンでは、
写真 ｜ 文章
のように横並びになっていても、スマートフォンでは、
写真
↓
文章
のように縦並びになります。
これはパソコンのデザインをそのまま小さくしているのではありません。
スマートフォンでも読みやすく、操作しやすくするためにレイアウトを変えているのです。
そのため、PC版とスマホ版で多少見え方が違うのは当然です。
ホームページの色もすべての端末で同じには見えない
意外と知られていないのが色の違いです。
同じホームページでも、
- モニターの種類
- 画面の明るさ
- 色温度
- ディスプレイ設定
- スマートフォンの機種
などによって、色の見え方は少しずつ変わります。
例えば、制作会社のモニターでは落ち着いた青に見えていても、別のパソコンでは少し明るく見えることがあります。
スマートフォンではさらに鮮やかに見えることもあります。
つまり、
「私の画面でこの色に見える＝すべての人に同じ色で見える」
というわけではありません。
もちろんブランドカラーなどはできるだけ正確に設定しますが、最終的な見え方は閲覧する機器にも左右されます。
フォントも環境によって変わることがある
文字の見え方も、すべての端末で完全に同じとは限りません。
ホームページではWebフォントを使用することもありますが、サイトの仕様や通信環境、端末などによって、代替フォントが表示される場合があります。
また、パソコンとスマートフォンでは同じフォントでも文字幅がわずかに違って見えることがあります。
すると当然、
- 1行に入る文字数
- 改行位置
- 文章全体の高さ
も変わります。
ホームページで「1文字単位まで全員同じ位置に表示する」という考え方は、基本的には向いていません。
ブラウザによってもホームページの見え方は少し変わる
ホームページを見るためのソフトを「ブラウザ」といいます。
代表的なものには、
- Google Chrome
- Microsoft Edge
- Safari
- Firefox
などがあります。
制作時には主要な環境で問題なく閲覧できるよう確認しますが、ブラウザごとに文字の描画や細かな表示処理が異なるため、数ピクセル単位まで完全に同じ表示になるとは限りません。
これもWebという媒体の特徴です。
ホームページ確認で見るべきなのは「1ピクセルの違い」ではない
ここまで読むと、
「ではホームページの確認は何を見ればいいの？」
と思うかもしれません。
ホームページ制作の確認で本当に見てほしいのは、例えば次のような部分です。
- 文字が読みにくくないか
- 内容に間違いがないか
- 必要な情報が見つけやすいか
- ボタンが押しやすいか
- スマートフォンでも問題なく使えるか
- 会社のイメージがきちんと伝わるか
反対に、
「自分のパソコンではこの文章が2行だから1行にしたい」
「この位置をあと3ミリ右にしたい」
といった調整は、別の端末ではまた違う見え方になる可能性があります。
一つの画面だけを基準に細部を詰めすぎると、かえって他の端末で見にくくなることもあります。
大切なのは「どの端末でも同じ」ではなく「どの端末でも使いやすい」こと
ホームページ制作で目指しているのは、
すべての端末でまったく同じ見た目にすること
ではありません。
大切なのは、
どの端末で見ても、内容が伝わり、問題なく利用できること
です。
例えば、パソコンでは横並びの方が見やすい。
スマートフォンでは縦並びの方が見やすい。
それなら、あえて違うレイアウトにします。
ホームページは、端末に合わせて柔軟に変化するからこそ使いやすいのです。
自分の見ているホームページが「唯一の正解」ではない
ホームページを確認するとき、一番知っておいていただきたいのはここです。
今、自分のパソコンやスマートフォンで見えている状態は、たくさんある表示環境のうちの一つです。
もちろん気になるところがあれば、制作会社へ伝えていただいて問題ありません。
ただ、そのときに、
「この端末ではこう見えているけれど、他の環境ではどうですか？」
という視点を持っていただけると、より良い確認ができます。
制作会社では、一つの画面だけではなく、さまざまな画面幅やスマートフォン表示を考えながらホームページを設計しています。
まとめ：ホームページは「変化する媒体」だと知っておこう
ホームページはパンフレットやチラシとは違います。
閲覧する環境によって、
- 文章の改行位置が変わる
- レイアウトが変わる
- 色の見え方が変わる
- フォントの見え方が変わる
- 写真や余白の大きさが変わる
ことがあります。
これはホームページの欠点ではありません。
さまざまな端末で見てもらうために必要なWebの仕組みです。
だからこそホームページを確認するときは、
「自分の画面で1ピクセル単位まで思い通りになっているか」
ではなく、
「いろいろな人が、いろいろな端末で見ても、きちんと内容が伝わるか」
という視点で確認してみてください。
自分の見えている世界だけを基準にするのではなく、実際にホームページを見る多くのユーザーを基準にする。
それが、良いホームページを作るための大切な考え方です。
＼ 最新情報をチェック ／
