Notebook

レスポンシブデザインについて

レスポンシブデザインとは、見ている機種(デバイス)に合わせて自動でデザインを変更し
表示してくれるというものです。

パソコン以外のデバイス、スマートフォンやタブレットからサイトを閲覧することも一般的となり、ユーザーが見る画面の大きさやデバイスを使う環境はとても多様化しています。みなさんもスマートフォンでパソコン用のサイトを見ると、文字が小さくて見づらかったり、ボタンが押しづらいという経験があると思います。

その使い勝手に考慮し、パソコン用のサイトとは別にモバイル用のサイト(スマートフォンサイト)を作るということが、これまで主流でしたが、レスポンシブデザインを使うことで、ひとつのサイトでパソコンやスマートフォン、タブレットなど、それぞれの画面の幅に合わせてサイトの表示が変化し最適なデザインで表示させる、ということが可能になりました。

例えば、以下のようにそれぞれのデバイスでデザインが変化し表示されます。
(左)パソコンでの表示 (右)スマートフォンでの表示

レスポンシブサンプル

サムネイルの並び方やメニューの位置など、使用するデバイスによって自動で見え方が変わります。

別途スマートフォンサイトを作らなくても、ひとつのサイトで様々なデバイスで表示に対応ができ
SEOにも有効と言われています。
(参考)Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法
Google ウェブマスター向け公式ブログ
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

サイト完成後も、ひとつのサイトを更新管理すれば良いので、別々のサイトをいくつも作業する必要がありません。



ただ、デメリットもあります。
コンテンツのボリュームが多い場合など、そもそもモバイル用にサイトの構成やコンテンツ(ボリューム)を考える必要があります。パソコン用のサイトと同じボリュームだと表示が重くなってしまう、スクロールが長くなってしまうなど、結局モバイル用の表示に最適化されなくなってしまうということもあります。

またレスポンシブデザインの場合、スマートフォンでパソコン用の表示をすることはできません。
強制的にスマートフォンサイトのレイアウトで表示されます。

すべてにおいてレスポンシブデザインが万能というわけではありませんが
デバイスがどんどんと多様化してるいま、ひとつの方法としてご提案を行っています。