ブラウザサイズからホームページを考えよう

公開日: : 最終更新日:2017/07/26 ホームページデザイン, ホームページ制作

普段使用していないパソコンを使った時やパソコンを新調した時に日々閲覧しているホームページが少し違って見えたことはありませんか?
いつも見ていたサイズよりも小さく表示されたり、画面の中央に表示されず左右にずれてしまっていたり、デザインが崩れてしまっていたり…。

ホームページは、その時代に主流となっているディスプレイサイズに合わせたサイズで制作されるので、ずっと古いパソコンを使っていて、パソコンを新しく新調したときなどに、ディスプレイサイズの違いなどによって違和感を感じることがあるのです。

StatCounter-resolution-JP-monthly-201606-201706-bar (1)2016年6月~2017年6月の間に日本で使用されているディスプレイサイズの割合
出典:StatCounter(http://gs.statcounter.com/screen-resolution-stats/desktop/japan/#monthly-201606-201706-bar

2017年現在では、「1920×1080」サイズのディスプレイ が一番使用されており、次点に「1366×768」サイズが使用されています。
約8年前の、2009年までは「1024×768」サイズが最も主流で、全体の約30%を占めていました。
約8年で300px以上のディスプレイのサイズアップがあり、それと比例するように、ホームページのサイズも大きくなっているのです。

高解像度ディスプレイ主流時代は間近?

パソコンのサイズアップ自体は今後飽和していくでしょうが、ディスプレイ事体の技術は日々進化しています。
例えば、身近な高解像度 ディスプレイでは「Retinaディスプレイ」「有機ELディスプレイ」 などがあります。
「Retinaディスプレイ」 はスマートフォン「iphone」に採用されており、他のスマートフォンとサイズ自体は大差ないのですが、「Retinaディスプレイ」という高解像度ディスプレイを使用することにより、従来の画面よりもより綺麗に画面を映し出すことができるのです。
また、「有機ELディスプレイ」は現在テレビの液晶として注目されていますが、将来的にパソコンのディスプレイとしても主流になっていくのではないかと考えられます。

高解像度ディスプレイの落とし穴

高解像度ディスプレイを使用することによって、今までよりも更に鮮明に美しく画像を表示できるようになるため、商品紹介で使用するページなどですと、ユーザーへより良い商品画像で商品をアピールすることができるようになります。
しかし、高解像度ディスプレイに合ったサイズの画像やページを使用していない場合、画像やページが非常に小さく表示されてしまったり、ディスプレイサイズに合わせて無理やり引き伸ばされて表示されてしまうことがあり、ページの崩れや画像の荒れが起こってしまうことがあります。
Imageパソコンで見たときは綺麗に表示されていた画像が、スマートフォンでみると画像が荒れてしまっていた!という体験をされたことがある方は、このようなディスプレイ解像度による表示の違いの問題が原因だと考えられます。
インターネット上で表示する画像を、パソコン、スマートフォン、タブレット、それぞれのブラウザサイズに適した表示サイズにするために、商品画像ページやブログ、SNSへ画像を投稿する際は「横幅750px以上」を目安に投稿することをお勧めします。
「横幅750px」というのは現在日本で50%以上のシェア率があるiphoneの最新機種のサイズを参考にしたサイズです。
ブログやSNSへ投稿した場合は自動的に画像が、使用しているブラウザに適した表示にリサイズされるので、できるだけ横幅750pxに近い、大きめのサイズの画像を投稿しましょう。

高解像度ディスプレイに合ったホームページを作るためには?

今後、より高解像度のパソコンやスマートフォン、タブレットが主流になると考えられますが、それなら、時代にあったホームページはどうやって作ればいいの?と思われるかもしれません。
解決策の一つとしては、「定期的にデザインを見直し、更新する」という方法が考えられますが、毎年毎年ホームページのデザインを変更するのは手間もコストもかかってしまうので、いい方法とは言えません。
もう一つの方法として考えられるのが「レスポンシブデザインの採用」です。
ホームページに興味をお持ちの方であれば、「レスポンシブデザイン」について、すでにご存じかもしれませんが、簡潔に説明させていただきます。
「レスポンシブデザイン 」はディスプレイサイズの大小にとらわれることなく、ディスプレイサイズに適したサイズのホームページを表示することができるデザインのことです。
このデザイン方法でホームページを作成することによって、パソコン、スマートフォン、タブレット、どのようなデバイス、ディスプレイサイズでもユーザーが一番閲覧しやすいデザインでホームページを表示できるのです。Image当社のWeb制作即応隊ページ(http://www.web-balloon.com/)もレスポンシブデザインで作成しています。
スマートフォンとパソコンで当社のホームページへアクセスした際に、それぞれどのように表示されているか、デザインの違いを是非ご覧になって、レスポンシブデザインを体感してみてください!

まとめ

ブラウザサイズへの対策として、レスポンシブデザインのご紹介をしましたが、レスポンシブデザインでホームページを作成すれば、半永久的にサイトデザインについて考えなくてもいい、というわけでもありません。
インターネットやITの進化は著しく、いつどこで大きな変化が起こるか分かりません。
より良いホームページを目指すのであれば、常に色々なホームページを覗いてみて、ご自身のホームページと見比べてみてください。
おやっ?と思われたポイントがより良いホームページを作るためのきっかけになるかもしれません。

ホームページの改修やレスポンシブデザインでのホームページ作成は、是非ユーシステムへご相談ください!

関連記事

b7de25cce3b88336538f2c6208b07aa5_s

Webで売る!決済方法について知ろう

ネットショップをスタートさせて、直接的に利益をうむホームページを作ってみると、今まで取引のなかったお

記事を読む

font

知っておきたい!TPOに応じたフォントの選び方

ご存知の通り、フォントにはたくさんの種類があります。 かっこいいフォント、おしゃれなフォント、スマ

記事を読む

097570

そもそもホームページとは?

ホームページ作成初心者の方へ、ホームページというものを作成していく上で、 まずはその仕組みを理解し

記事を読む

427601

サーバーって種類があるけど何を選べばいいの?

サーバーの種類は大きく分けて4つあります。 ・共用サーバー ・専用サーバー ・VPSサーバー

記事を読む

1710

インターネットに安心・安全を…SSLのススメ

「SSL」って何でしょう?聞いたことありますか? 名前だけは聞いたことがある人も、全く何のことか知

記事を読む

s002_578

iPhoneとAndroidって何が違うの?

この2つの一番の違いは開発している会社が違うことです。 iPhoneはOS(中身)ハード(機種

記事を読む

hikaku_ball_man

競合サイトから学ぶ、どんなホームページを作るか

これからホームページをつくろう!またはより良いホームページにリニューアルしよう!というとき、必ず必要

記事を読む

ネットショップ

そもそもネットショッピングとは

自社で取り扱っている商品を、ネットショップで出品してみようかなとお考えの方は いらっしゃると思いま

記事を読む

img_kaiketsu1_02

HPの更新でお困りなら、知らなきゃいけない”CMS”

CMSとは、「コンテンツ・マネジメント・システム」の略で、プログラミングの知識無しに、ホーム

記事を読む

DSC_1715

Googleが語った!モバイル対応していないサイトは順位が下がる!?

Googleが検索順位のアルゴリズムの変更を発表 Googleは2015年2月26日に、ホームペー

記事を読む

1710
インターネットに安心・安全を…SSLのススメ

「SSL」って何でしょう?聞いたことありますか? 名前だけは聞いたこ

3
いつどこからどうやってアクセスしているの?ユーザーの動向を把握しよう!

ホームページを運営されている方が一番気になるのが、ホームページへアクセ

1709
なんぼで出来る?ホームページにかかるお金の話

「結局のところ、なんぼで出来るの?」というご相談をいただくことがありま

170913
2020年末に「Flash」のサポートが終了します

皆様、「Flash」をご存じでしょうか。 「Flash」 はad

田中さん用サムネイル
動画コンテンツを取り入れる!使えるアイディア集

スマートフォンの普及によって身近になったもののひとつは「動画」ではない

→もっと見る

PAGE TOP ↑