ブラウザサイズからホームページを考えよう神戸Web制作即応隊のブログ。普段使用していないパソコンを使った時やパソコンを新調した時に日々閲覧しているホームページが少し違って見えたことはありませんか?いつも見ていたサイズよりも小さく表示されたり、画面の中央に表示されず左右にずれてしまっていたり、デザインが崩れてしまっていたり...。ホームページは、その時代に主流となっているディスプレイサイズに合わせたサイズで制作されるので、ずっと古いパソコンを使っていて、パソコンを新しく新調したときなどに、ディスプレイサイズの違いなどによって違和感を感じることがあるのです。使用されており、次点に「1366×768」サイズが使用されています。約8年前の、2009年までは「1024×768」サイズが最も主流で、全体の約30%を占めていました。約8年で300px以上のディスプレイのサイズアップがあり、それと比例するように、ホームページのサイズも大きくなっているのです。高解像度ディスプレイ主流時代は間近?パソコンのサイズアップ自体は今後飽和していくでしょうが、ディスプレイ事体の技術は日々進化しています。スマートフォン「iphone」に採用されており、他のスマートフォンとサイズ自体は大差ないのですが、「Retinaディスプレイ」という高解像度ディスプレイを使用することにより、従来の画面よりもより綺麗に画面を映し出すことができるのです。「有機ELディスプレイ」は現在テレビの液晶として注目されていますが、将来的にパソコンのディスプレイとしても主流になっていくのではないかと考えられます。高解像度ディスプレイを使用することによって、今までよりも更に鮮明に美しく画像を表示できるようになるため、商品紹介で使用するページなどですと、ユーザーへより良い商品画像で商品をアピールすることができるようになります。高解像度ディスプレイに合ったサイズの画像やページを使用していない場合、画像やページが非常に小さく表示されてしまったり、ディスプレイサイズに合わせて無理やり引き伸ばされて表示されてしまうことがあり、ページの崩れや画像の荒れが起こってしまうことがあります。パソコンで見たときは綺麗に表示されていた画像が、スマートフォンでみると画像が荒れてしまっていた!という体験をされたことがある方は、このようなディスプレイ解像度による表示の違いの問題が原因だと考えられます。インターネット上で表示する画像を、パソコン、スマートフォン、タブレット、それぞれのブラウザサイズに適した表示サイズにするために、商品画像ページやブログ、SNSへ画像を投稿する際は「横幅750px以上」を目安に投稿することをお勧めします。「横幅750px」というのは現在日本で50%以上のシェア率があるiphoneの最新機種のサイズを参考にしたサイズです。ブログやSNSへ投稿した場合は自動的に画像が、使用しているブラウザに適した表示にリサイズされるので、できるだけ横幅750pxに近い、大きめのサイズの画像を投稿しましょう。高解像度ディスプレイに合ったホームページを作るためには?今後、より高解像度のパソコンやスマートフォン、タブレットが主流になると考えられますが、それなら、時代にあったホームページはどうやって作ればいいの?と思われるかもしれません。解決策の一つとしては、「定期的にデザインを見直し、更新する」という方法が考えられますが、毎年毎年ホームページのデザインを変更するのは手間もコストもかかってしまうので、いい方法とは言えません。一つの方法として考えられるのが「レスポンシブデザインの採用」です。ホームページに興味をお持ちの方であれば、「レスポンシブデザイン」について、すでにご存じかもしれませんが、簡潔に説明させていただきます。」はディスプレイサイズの大小にとらわれることなく、ディスプレイサイズに適したサイズのホームページを表示することができるデザインのことです。このデザイン方法でホームページを作成することによって、パソコン、スマートフォン、タブレット、どのようなデバイス、ディスプレイサイズでもユーザーが一番閲覧しやすいデザインでホームページを表示できるのです。当社のWeb制作即応隊ページ(http://www.web-balloon.com/)もレスポンシブデザインで作成しています。スマートフォンとパソコンで当社のホームページへアクセスした際に、それぞれどのように表示されているか、デザインの違いを是非ご覧になって、レスポンシブデザインを体感してみてください!まとめブラウザサイズへの対策として、レスポンシブデザインのご紹介をしましたが、レスポンシブデザインでホームページを作成すれば、半永久的にサイトデザインについて考えなくてもいい、というわけでもありません。インターネットやITの進化は著しく、いつどこで大きな変化が起こるか分かりません。良いホームページを目指すのであれば、常に色々なホームページを覗いてみて、ご自身のホームページと見比べてみてください。おやっ?と思われたポイントがより良いホームページを作るためのきっかけになるかもしれません。モバイル向けを最優先に考えることを「モバイルファースト」と呼びます。・商談に記事を読む知っておきたい!TPOに応じたフォントの選び方ご存知の通り、フォントにはたくさんの種類があります。かっこいいフォント、おしゃれなフォント、スマ記事を読むSEO対策に効くスマートフォンサイトのデザインとは?2015年2月27日、Googleが公式に発表した「ウェブサイトがモバイルフレンドリーかどうかをラン記事を読む企業がホームページをFacebookと連携させる意味とは?数あるソーシャルメディアの中でも特に、ホームページとの連携に積極的なのがFacebookです。何気な記事を読むYoutubeからホームページに人を呼ぶ動画作りとは!?前回は、Youtubeが実はホームページのSEO対策につながる、というお話でしたが、今回は実際にどん記事を読む競合他社と差をつける!Youtubeを使ったSEO対策!Youtubeとはもちろん誰もが知っている動画投稿サイトです。動画サイトとホームページのSEO記事を読む企業ホームページに、スマートフォン対応は必要か否か現代は企業にホームページがあるのは当たり前となっています。記事を読む人を集めるホームページのタイトルの付け方とは皆さんはホームページのタイトルはどのようにつけていますか。ここで言うタイトルとは、デザイン上のタ記事を読む何を?誰に向けて?サイトコンセプトを考えようホームページを作る前に、最も重要と言えるのは「サイトコンセプト」を考えることではないでしょうか。