【うぇぶ解説】その6 なぜ画面表示が違う?

imac.jpg

お客様からウェブサイトの製作を受注した際、ある程度サイトのデザインや構築が出来上がり、サーバー上に仮アップしてチェックをお願いするときに、よくお客様から

「テキストの行末がバランスが悪いので字詰めを変えてほしい」
「テキストの行末を揃えるのに改行して!」

などとご指摘をうけることがよくあります。

パンフレットやカタログなど紙媒体の校正であれば、もちろんご指示に従うことがほとんどなのですが、ウェブの場合は原則お客様に以下のように説明をしてそのまま進めることになります。

現状では、ホームページを閲覧した時に表示されるフォントサイズには標準というものは存在せず

  • モニターの画面サイズ・解像度
  • OSの種類
  • パソコン内のフォント環境
  • ブラウザの種類やバージョンの違い
  • ブラウザでの設定条件(文字サイズの切替など)

など閲覧環境によってフォントの大きさや種類、改行位置などがそれぞれ違っており、その結果表示されるサイトのレイアウトもそれぞれ違う状態になってしまいます。

例えば電話でお打合せをしていたとして、お客様がご覧になられているパソコン(もしくはスマートフォン・タブレット等)で表示されている画面と、話をしながら見ている弊社のパソコンの画面でも見え方が変わっている可能性があり、更に言えば、公開後にみていただくユーザーの環境によっても見え方が千差万別となるため、お客様のモニター画面で見える状態でレイアウトを最適化しても、多くのユーザーの画面では同じように表示されているとは限らず、最悪の場合表示が崩れてしまう恐れもあります。

例えば、弊社で使っているパソコンやスマートフォン、タブレットでそれぞれ弊社ウェブサイトのトップページを表示しますと、

私が普段使っている、MacbookAirの11インチモデルでは、

MacbookAir_11inch.jpg

同じく併用しているiMacの2007年モデル(20インチ)だと

iMac_2007.jpg

iMacの2012年モデル(27インチ)だと

iMac_2013.jpg

さらにWindowsのノートPC(HP製・15インチ)ですと

windows_15inch.jpg

iPhone 5Sでは
iPhone.jpg

iPad2の縦画面は、

iPad.jpg

と、このように画面のサイズ(インチ数)や解像度(ピクセル数)によって、見え方がマチマチであることが分かります。

さらにテキストで同じように見ていくと

MacbookAir 11インチ
MacbookAir_11inch_02.jpg


iMac2007年
iMac_2007_02.jpg

iMac2012年
iMac_2012_02.jpg

WindowsノートPC
windows_15inch_02.jpg

iPhone5S
iPhone_02.jpg

iPad2(横画面)
iPad_02.jpg

というように、それぞれフォントの種類、大きさ、改行の位置が微妙に違うのが分かります。

特に昨今はスマートフォンの普及により、スマホ画面でのサイトの閲覧の割合が非常に増えてきていますが、スマホの場合は縦画面で見ることが多いので、横画面でみるパソコンに比べて改行の位置がどうしても大きく変わります。

ですので、サイトの立ち上げ時には、自分の普段閲覧している環境のみならず、他の閲覧環境での見え方も十分に意識して、最大公約数的によりベターな表示を決めていく必要があるのです。


【関連記事】
【うぇぶ用語解説】その1 ドメイン(前編)
【うぇぶ用語解説】その1 ドメイン(後編)
【うぇぶ用語解説】その2 レンタルサーバー
【うぇぶ用語解説】その3 ホームページはどうやって作るの?
【うぇぶ用語解説】その4 ホームページには何を載せるの?
【うぇぶ解説】その5 セキュリティは大丈夫?
 

カテゴリ

アーカイブ

プロフィール

堀尾武史
株式会社からふね屋 代表取締役

昭和36年生まれの丑年
京都生まれ京都育ちの印刷屋四代目社長。
小学1年から大学4年まで剣道にひたすら明け暮れ、一応各年代で全国大会には出場、入賞なども果たす。
同志社大学卒業と同時に親戚の印刷会社で修行、ここで大いにしごかれ現在に至る。
自社にあった活版印刷から写植、フィルム時代を経て現在のDTPまでひと通り印刷については経験、美しい印刷を愛す。
趣味はお酒とアート鑑賞、読書、音楽(JAZZ・ROCK・POP・REGGAE・CLASSICなどオールランド)、TV鑑賞(ガイアの夜明け・カンブリア宮殿・たけしアートビートなどがお気に入り)、ウォーキング。