正式には「レスポンシブ ウェブ デザイン」ですが、
2012 年に Google 推奨のデザイン方法と
(日本では)紹介されたこともあって、
この方式で構築されたサイトもだいぶ増えてきました。
ここ2年程度の弊社の実感としても、
ウェブサイトのリニューアルを検討されている企業様から
デザインの方向性の一つとして意見を求められることが
多くなったと感じます。
ではすべてのウェブサイトが
このレスポンシブ デザインで作るべきなのか？というと、
かならずしもそうではない、というのが弊社の回答です。
そこで本日は、
- レスポンシブ ウェブ デザインとは何か
- メリットとデメリット
- あなたのサイトはレスポンシブ デザインで作るべきなのか
についてご紹介したいと思います。
目次
本コンテンツの対象となる方
- レスポンシブ ウェブ デザインが何か知りたい方
- レスポンシブ デザインで作るべきか悩んでいる方
レスポンシブ ウェブ デザインとは何か
「レスポンシブ ウェブ デザイン」を一言で説明すると、
『パソコンだけでなく、スマートフォンやタブレットなど、
あらゆるデバイスに対応するウェブの制作手法』
です。
スマートフォンであれば、
パソコン用のウェブサイトを閲覧しても
とりあえず見ることはできると思います。
ですが、
スマートフォンで閲覧したときには
スマートフォン用のレイアウトで見られるように
デザインなどが変わるサイトを、
今回は対象としています。
この技術で作られたデザインを
たくさん見ることができるサイトがあるので参考にご紹介いたします。
◎Media Quieries
http://goo.gl/jNcJ0x
ウェブサイトをパソコン以外に対応させる方法
レスポンシブ ウェブ デザインを含めて、
ウェブ制作の世界において、パソコン以外で閲覧可能にする手法というのは
次の３種類しかありません。
1) レスポンシブ ウェブ デザイン
特徴：同じ URL、同じ HTML ですべてのデバイスに対応する方法
スクリーンの大きさに応じてウェブページのデザインを変化させる
技術(CSS3 のメディアクエリー)を利用します。
2) 動的な配信
特徴：同じ URL でも異なる HTML を用いて各デバイスに対応する方法
ブラウザが送ってくる USER-AGENT という情報に応じて
デザインを変化させるサーバー側の技術です。
3) モバイル向けの別 URL
特徴：異なる URL かつ異なる HTML で各デバイスに対応する方法
デバイスごとに別の URL を用意する方法です。
アクセスしてきたデバイスに合わせて自動的にリダイレクトするかどうかは、
構築する技術によって変わります。
なお、Google はレスポンシブ ウェブ デザインを推奨しています。
レスポンシブ ウェブ デザインのメリット
レスポンシブ ウェブ デザインは、
他の方法に比べて次のようなメリットがあります。
◎コスト面で有利な場合が多い
他の方法だと、デバイスごとに別のデザインを用意しなければならないので、
対応するデバイスの数が増えれば増えるほど、その対応コストがあがります。
スマートフォンなどのデバイスによっては、
ポートレート(縦)とランドスケープ(横)のそれぞれのモードに
合わせなければならない場合もあり、より複雑になっていきます。
レスポンシブ ウェブ デザインであれば、
スクリーンサイズに合わせたデザインが選択されるので、
デバイスの数＝デザインしなければならない数、にはなりません。
◎更新が必要なファイル数が少ない
通常ウェブサイトで提供しているコンテンツに更新があれば、
すべてのデバイスでそのコンテンツが見られるように
更新しなければなりません。
しかし、デバイスの数だけデザインを作っているとなると、
その分だけ更新作業が複雑になります。
また、画像や動画などのコンテンツを含んでいる場合、
スクリーンサイズに合わせた変換などの作業が増え、
更に複雑さが増してしまいます。
レスポンシブ ウェブ デザインであれば、
更新ファイルが少ない分
この問題もかなりの部分が低減されます。
◎URL の問題が発生しづらい
デスクトップとそれ以外のデバイスで URL が違っている場合、
Google Analytics を初めとしたアクセス解析ツールでは、
基本的に別のアクセスと見なします。
本来同じコンテンツは同じレポートに含めたいものですから、
これは問題と言えます。
※Google Analytics では設定で１つにまとめることも可能です
また、振り分けをデバイスごとにしてしまうと、
先のファイルの更新の問題が出てきます。
今後出てくるデバイスにまで対応するとなると
その煩雑さは増す一方です。
レスポンシブ ウェブ デザインであれば、
同じ URL を利用している以上この問題は発生しません。
レスポンシブ ウェブ デザインのデメリット
このように、とてもメリットのある
レスポンシブ ウェブ デザインですが、万能ではありません。
デメリットもあげておきます。
◎ブラウザの表示の拡大・縮小でも動作してしまう
レスポンシブ ウェブ デザインでは
動的にデザインを変える仕組みとして
スクリーンのサイズ(幅)の情報を利用しています。
そのため、ブラウザの機能で表示内容を拡大・縮小してしまうと、
拡大した際にタブレットやスマートフォンと
同じ表示に切り替わってしまって見づらくなる場合が出てきます。
高い解像度のスマホ・タブレットが出てきている現状では、
想定外の表示に変わってしまうことが増えるでしょう。
◎スマホでパソコンのレイアウトを確認できない
普段パソコンで見ているサイトを
スマートフォンで見たいと思った時、
パソコンサイトのレイアウトで
コンテンツを覚えていると、
スマートフォンでコンテンツを
探すことができない場合が出てきます。
表示モードを切り替えられなければ
ページ内検索を行うしかありません。
ですがこの方法でも
スマートフォンのレイアウトで
非表示コンテンツにされているコンテンツを
見つけることは困難です。
◎制作期間がかかる場合がある
通常のデザイン以上に
スマートフォンなどのデバイスで表示した際の
レイアウトを考えながら構築しなければならないので、
通常のレイアウト・デザインに比べて倍以上の手間がかかります。
※この手間がコストに乗っかり、
トータルでは別に作った方が安くなることもあります
特に既存サイトをレスポンシブに変更するのは
元の作りに大きく依存するため、
多くの場合はゼロから作った方が早いと言えます。
◎ユーザーの利用シーンがデバイスによって違う場合
パソコンで提供するコンテンツと
スマートフォンなどのデバイス向けのコンテンツ提供の目的が
そもそも違っている場合、ユーザーにとって有益とは言えません。
◎IE8では動かない
レスポンシブ ウェブ デザインでは
メディア クエリーという技術を利用しているのですが、
Internet Explorer 8 は対応していないため、
レイアウトが壊れます。
Windows XP が終焉を迎えた今、
Internet Explorer 8 のシェアはだいぶ減ったと言えますが、
それでも 2014 年 4 月の段階で 11.6% です。
※Net Applications の情報から
強制的にアップデートができないようにされている
企業ユーザーなどもいますので、
ターゲットによっては見られないサイトを
作ってしまうことになります。
あなたのサイトはレスポンシブ デザインで作るべきなのか
基本的には「Yes」です。
理由は、弊社のお付き合いしている
ほとんどの個人・企業では、
同一コンテンツをデバイスによって変えるような運用を
必要としないからです。
予算、制作期間にしても、
よほどカスタマイズにこだわらなく、
かつWordPress を利用して制作したウェブサイトであれば、
WordPress のテーマ機能である程度カバーできます。
※プラグインによる対応も可能ですので、
レスポンシブ ウェブ デザインがマストではありませんが
ただし、もっとも重視すべきは「ユーザビリティ」です。
作る手法ではありません。
いずれにせよアクセスするデバイスによって
スクリーンサイズは変わるのですから、
『ユーザーが欲しいコンテンツを欲しいタイミングで
手に入れられるようにする手法』
を選択しなければなりません。
まとめ
誤解を恐れずまとめると、
レスポンシブ ウェブ デザインを使うことでメリットがある(大きい)のは、
検索エンジンとウェブ制作業者でしょう。
検索エンジンにとっては
増え続けるコンテンツの対応が簡単になりますし、
ウェブ制作業者にとっては
トータルでの作業コストが減る可能性が高いからです。
ですから、あなたが単に流行だからと
レスポンシブ ウェブ デザインに切り替えようとするのではなく、
メリット・デメリットを踏まえた上で、
ユーザーにとって有益なものを選択する
選択眼を持っていただきたいと思います。
ちなみによく聞く
「WordPress を使えば SEO 対策がばっちりで
アクセス管理なども全部勝手に解決する」
と言うのは大きな誤解です。
テーマ(デザインの機能)の作りに大きく依存しますので、
どうかそういった情報を鵜呑みにしないでいただきたいものです。
その他、IT 関連の疑問があれば、お気軽にご相談ください。
※Excel や Word などのソフトの疑問などでも大丈夫ですよ！