モニターの解像度によってホームページの見え方は異なる

そのサイトレイアウト、ちょっと幅が広過ぎませんか？

これは以前、Webサイト構築初心者であった私がやってしまった失敗なのですが、自分のサイトの横幅(下図参照)を物凄く広く取ってしまったことがあります。

何故そんなことをしたかと言いますと、当時私が使っていたモニターが比較的大きめの解像度で、そのサイズにぴったり合うように作ってしまったのですね。

今思えば笑える話ですが、当時の私はそこで初めてモニターの解像度の違いについて理解したような気がします。

モニターの解像度とホームページの見え方について

モニターの解像度がブログやホームページの見え方にどういった影響を及ぼすか、百聞は一見にしかずなのでとりあえず下の画像を見てください。

※クリックで拡大します。

これは以前GoogleのWebテスト機能として公開されていた「Browser Size」というソフトの画面なのですが、この画面によると横幅を950px～980pxぐらいに収めれば、全体の90%ぐらいのモニター解像度に対応できると言っていますね。

それより小さい解像度だと、奥の方に写っているGoogleのトップページの右側が途中で切れてしまっていることが分かりますよね？

以前私がやってしまった失敗はまさにこれで、自分のモニターではぴったり気持ちよく見えるのですが、他の解像度の小さいモニターだと右側が切れてしまって何とも残念な感じになってしまったのです。

横スクロールバーを動かせば例え解像度の小さいモニターでも全部見れるのですが、ブラウザの横スクロールバーって異常な程ストレスが溜まりますよね。

ですのでもちろん、解像度の違いに気付いた後は速攻で自分のWebサイトを直しました。

最近ではスマートフォン対応も必須になって来ています

また、最近ではモニターの解像度対応の一環として、スマートフォンの画面でも見やすいように表示させることが必須になってきているようです。

Googleの検索エンジンの担当者が言うには、今後(2015年4月以降)はスマートフォン対応がされているか否かを検索結果のランキングの要因とするとのことです。

新しくサイトを立ち上げる人はまだしも、すでに作り上げられたサイトを持っている人は、対応するのに一苦労でしょうね・・・。

ちなみに、もしWordPressを使っているのなら以下のプラグインで対応することも可能ですよ。

• WPtouch Mobile Plugin
• WPtap News Press
• WordPress PDA & iPhone
• WordPress Mobile Pack
• MobilePress

あとは、当サイトで使っている「賢威テンプレート」のように、レスポンシブWebデザインを採用しているWordPressテンプレートを使用するなどでしょうね。

サイトレイアウトは見る人のことを考えて決めましょう

以前の私に言ってあげたい言葉でもありますが、やはりサイトレイアウトは自己満足だけではなく、見る人のことも考えて決めるようにしましょう。

見やすい、読みやすい、そんなレイアウトを心がけることが、人気の出るWebサイトの条件だと今では思います。

まぁ、失敗することも勉強になるので、たまには必要かもしれませんけどね(笑)

▼管理人も使っている！超良コスパのレンタルサーバーはこちら！10日間お試しアリ▼

【エックスサーバーの代表的なプランの一例】

初期費用（税抜）	月額（税抜）	容量	転送量（日）
3000円	1000円	200GB	70GB
MySQL	マルチドメイン	サポート	お試し期間
50個	無制限	電話/メール	10日間

▼レンタルサーバー探してますか？▼

【Check!】各社レンタルサーバーを目的別にご紹介！

• ツイート