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

公開日: : 最終更新日: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の進化は著しく、いつどこで大きな変化が起こるか分かりません。
より良いホームページを目指すのであれば、常に色々なホームページを覗いてみて、ご自身のホームページと見比べてみてください。
おやっ?と思われたポイントがより良いホームページを作るためのきっかけになるかもしれません。

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

関連記事

lock

あなたのホームページは大丈夫?セキュリティを支えるSSLとは

サービスの予約やお申込み、商品の購入まで何でもホームページ上でできることが当たり前になった昨今、個人

記事を読む

mailform

今すぐお問い合わせ数アップ!?フォームのテクニック

あなたの会社のホームページの「目的」はなんでしょうか? 営業で、商品の販売、資料請求の受付や、採用

記事を読む

gyouretsu

売れるネットショップにするためにできる5つのこと

ネットショップをオープンしたら、ぜひ「売れるネットショップ」にしたいですよね。でも開店しただけでは「

記事を読む

blog

ウェブデザインにもトレンドがある?最近の流行を見てみよう

ウェブデザインのトレンドとは ファッションやスイーツと同じように、実はウェブデザインにもトレンドが

記事を読む

shingou

購買意欲アップも可能!?色が与える心理効果

色というのは無意識のうちに「心理」に影響を与えているものなのだそうです。 例えば「信号」だと、

記事を読む

ScreenClip

コンバージョン率が上がる理想の入力フォームの形とは?

コンバージョンとは、ユーザーからのお問い合わせ・資料請求や会員登録など、そのサイトが設定している目標

記事を読む

iOS

こんなに違う?!スマホとPCの検索キーワード

今後PCとスマートフォンからの検索結果は変わる 前回Googleが2015年2月26日に、ホームペ

記事を読む

150123

「コーポレートカラー」って何?色に込めたい企業戦略

あなたの会社の「コーポレートカラー」は何色ですか?決まっていますか? 「コーポレートカラー」という

記事を読む

youtube

競合他社と差をつける!Youtubeを使ったSEO対策!

Youtubeとはもちろん誰もが知っている動画投稿サイトです。しかし動画サイトとホームページのSEO

記事を読む

img_kaiketsu2_01

企業ホームページに、スマートフォン対応は必要か否か

現代は企業にホームページがあるのは当たり前となっています。しかしこれだけスマートフォンの普及が進

記事を読む

1804
広告を使って集客してみよう!リマーケティング広告編

自社のホームページがどうやって集客しているのか、みなさんはどれくらいご

Image11
ブラウザのセキュリティ強化で全ページSSL導入の必要が?

皆さんはインターネットを使われる際に、ブラウザの変化に気づかれたことは

1803
わかりやすいホームページって何だろう…情報の精査と選別

ホームページのリニューアルなど、新たに作成するも含め、お客様からよく言

1802
お問い合わせメールの前と後に、私たち企業ができること

私は普段、お客様からのご依頼を受けてホームページを作成したり、更新した

thm
時代はスマホ中心へ!モバイルファーストインデックスとは

2015年5月にGoogleから、「Google検索はパソコンよりもス

→もっと見る

PAGE TOP ↑