レスポンシブウェブデザイン

今後スマートフォンの普及が多くなることで、スマートフォンに対応したホームページが必須です。

現在、スマートフォンサイトへの対応方法は、PC用サイトと、スマートフォン用サイトをそれぞれ別のファイルで作成して、サイト訪問者のデバイス(PC,タブレット、スマホなど)を判定する方法で、表示するURLを振り分けています。PCなら、そのままのURLへ、スマホなら「sp」などがアドレスの後に付いたURLへ…。

つまり、パソコンからのアクセスの場合は、パソコン用サイトを表示、スマートフォンからのアクセスの場合は、スマートフォン用サイトを表示する といった振り分けが行われています。

方法2としては、最近、レスポンシブウェブデザインといういうものがあります。

レスポンシブウェブデザインとは、1つのファイルで、パソコン用、タブレット用、スマホ用のデザインに対応することができるデザインです。CSS3の新機能、メディアクエリを利用することにより、可能となります。

SEO(サイトの最適化)の観点から有利とも、言われています。
グーグルのガイドラインの中にもホームページ用、スマートフォン用のサイトという2つのファイルを用意するのではなく、1つのファイルでサイトを表示することを推奨しています。

レスポンシブデザインには、スマホ環境で見る場合、3G回線などで、通信速度が遅い場合、不安定な場合があるため、画像のファイルサイズの問題などの課題があります。

LTEが普及してきている今、画像の心配もそこまで気にしなくてもいいような気がしますが…。

ここで、レスポンシブデザインを取り入れているサイトを紹介します。
スターバックス(米)のホームページです。
http://www.starbucks.com/

ブラウザの幅を変えてみれば、横幅によって表示されるデザインが変わります。

ナビが下に落ちたり、動画が小さくなったりします。
これがレスポンシブデザインです。

今後ウェブサイトは、この手法で作成することが標準化されそうです。

関連記事一覧

PAGE TOP