プラカンブログSTAFF BLOG

2015.08.07

レスポンシブWebデザインについて改めて考えてみる

sample

こんにちは、デザイナーの(杉)です。

だいぶ浸透してきた「レスポンシブWebデザイン」。よく案件を受ける上で「レスポンシブでお願いします。」という声が多くなってきました。

しかし、流行っているからというだけで、安易に対応することがいいとは思えないのが正直なところ。今まで制作して感じたことを自分なりにまとめてみました。


そもそもレスポンシブWebデザインとは?

レスポンシブWebデザインとは1つのHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイス対応できるWebサイト制作手法のことを言います。
その中でもある特定の画面サイズに対応する手法や、ユーザのコンテキストに合わせて表示する内容を切り替える手法はアダプティブ・デザインと呼ばれています。

私の見解ではレスポンシブWebデザインはアダプティブ・デザインも含めた意味で理解しています。人によっては全く違った意味を持つことがあるので、注意が必要です。


レスポンシブWebデザインのメリット・デメリット

ユーザーに対してではなく、運用する側・制作する側から見たメリット・デメリットをまとめました。

メリット

  • 1つのHTMLファイルで様々なデバイスに対応するので、更新作業が比較的楽になる。
  • 将来的に現れるであろう様々な端末にも対応しやすくなる
  • URLが1つ、リダイレクト設定が不要
  • Googleもサイトの構築手法として「レスポンシブWebデザイン」を推奨している

デメリット

  • 通常のPCサイトの様に全ての情報を盛り込むのではなく、コンテンツを精査しスマートフォンの小さな画面でも閲覧しやすい情報構造が必要
  • サイト設計・構築が複雑なため、開発コストがかかる
  • IE8以下などの古いブラウザには基本的に対応してない
  • ソースコードが複雑になるので、メンテナンスを行う場合CSS等の知識が必要
  • 構造によっては、ソース量が増え、読み込みに時間がかかってしまう

正直、サイトを作成する側の人間からすると、メリットよりもデメリット(気を付けなければいけない事)が多く、この認識が甘いと痛い目にあいます。

特に「コンテンツを精査しスマートフォンの小さな画面でも閲覧しやすい情報構造が必要」が重要で、PCサイトありきで「レスポンシブ」に対応すると、少なからずスマートフォンなどの小さな画面サイズ時に、無理が生じます。それをcssやjavascriptで対応することで、ソースの内容が増え、読み込みにも時間がかかり、結果ユーザビリティーの低いサイトになると思います。
また制作する上でも、開発コストや時間が大幅にかかってしまう可能性もあります。


レスポンシブWebデザイン向きなサイト・不向きなサイト

レスポンシブWebデザイン向きなサイト

■ニュースやブログ等の情報伝達向けのサイト

移動中やPCの触れない環境でも閲覧する可能性の高いサイトには向いていると思います。また更新頻度が高いので、ワンソースだけで対応ができるのも大きな魅力です。

■ECサイト

こちらも更新頻度が高くリアルタイムの情報が必要になるので、ワンソースで対応できるのは有利だと思います。また、外部からのリンクを張られた際、同じURLになるので、複数のURLに混乱せずサイトのURLをシェアすることができます。
ただし、運用するプラットフォームによってはレスポンシブに対応していない場合があるので、使用できるプラットフォームが限られてしまうデメリットもあります。

レスポンシブWebデザイン不向きなサイト

■情報量の多いサイト

そもそもレスポンシブWebデザインは「モバイルファースト設計」を念頭に設計することが理想とされており、情報をできるだけシンプルにしていくことが必要になります。
単純にサイズに合わせるだけでは逆にユーザーの見ずらいサイトになってしまいかねません。
また、表が多いサイトは、非常にレスポンシブWebデザインには相性が悪く、「最適」とは程遠い結果になってしまいます。

■IE8等の古いブラウザでもみられる可能性の高いサイト

レスポンシブWebデザインを実装する代表的な方法として、CSS3のメディアクエリ(@media)があります。この手法はディスプレイサイズを判断し、サイズに適したレイアウトにする方法です。
しかし、この方法はIE9から認識される技術で、それ以前の古いブラウザの場合は、CSSが全く効かなくなる場合があります。IE8以下の古いブラウザでも閲覧される可能性があるサイトでは、IE8専用のファイルを用意する必要が発生し、開発コストも増えてしまいます。

■デバイス別に独自のデザインにしたいサイト

どの端末で見ても統一感のある構造をもとに作成する手法なので、スマートフォンだけ独自に構造を変えたい場合、基本的に無理が生じます。


レスポンシブWebデザインは必ずしも「最適化」されているわけではありません

レスポンシブWebデザインは、あくまでデバイスやスクリーンサイズに対する適応であって、スピード表示、よりベストなUIの提供ができる最良の方法とは限りません。
デバイス別に最適化されたデザインや、コンテンツに比べると、妥協しなくてはいけない点が発生してしまう事も事実です。

また、デスクトップ用画面で設計した既存のサイトをレスポンシブ化することは、避けるべきだと思います。あくまでデスクトップ上で見た場合に最適化しているサイトを無理やりレスポンシブ化することは、正直言ってナンセンスです。それならば、レイアウトが崩れないように調整したデスクトップ用の画面を表示しているサイトの方が、ユーザーに親切だと私は思います。


Googleから見たレスポンシブWebデザイン

2015年6月時点でGoogle Developersで発表している内容を抜粋します。

  • URL が 1 つなので、ユーザーがコンテンツを簡単に共有したりリンクしたりできます。
  • 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
  • 同じコンテンツのページをいくつも維持管理する手間が省けます。
  • モバイルサイトのよくあるミスが発生する可能性を抑えることができます。
  • ユーザーのデバイスに応じて最適なページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、ユーザーの利便性を損なうおそれがあります(詳しくは、ユーザー エージェントを正しく検出するをご覧ください)。
  • Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントがすべてのバージョンを複数回クロールする必要がありますが、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がることで、サイト内のより多くのコンテンツがインデックス登録され、適切なタイミングで更新されるようになります。

上記の内容を見るとGoogle側の理由もありますが、レスポンシブWebデザインにすることで、制作側からしてのメリットもあり、「リダイレクト」などデバイス別に分けることによって生じる手間をレスポンシブWebデザインでは省くことができます。またレスポンシブWebデザインにする事で「モバイル フレンドリー」の条件を満たしやすくなります。

モバイル フレンドリー化

「モバイルフレンドリー」とは、Googleがモバイル端末(スマートフォン)の表示が最適化されていると認識したページの事です。
フレンドリー化されたページはモバイル版の検索結果に [スマホ対応] というラベルが追加されます。(詳しい内容については別の記事で紹介します。)

今年4月に実施されたモバイル フレンドリー アップデートにより、モバイル検索では、携帯端末で読みやすく使いやすいページの掲載順位が引き上げられるという発表がありました。これによりモバイルサイズに対応したサイトが携帯端末での検索に優位に働くことは間違いありません。

ただし、レスポンシブWebデザインが推奨されているからといってそれだけを優先している意味ではありません。Googleでは、モバイルサイトを構築する際の設定として以下の 3 つを認識しているとのいるようです。

  • レスポンシブWebデザイン(同じURLと1つのHTML/CSS)
  • 動的な配信(同じURLと別々のHTML/CSS)
  • モバイル専用のURL(異なるURLと別々のHTML/CSS)

各方法で正しく設定を行っていれば、「モバイルフレンドリー」サイトとして認識され、特定のURL 形式だけが優先されるわけではありません。


まとめ

レスポンシブWebデザインについて、色々とまとめてみましたが、スマートフォンでも見られることは、今後もっと増えていき、PCサイトの構造だけではユーザビリティーの低いサイトになっていくかと思います。
しかし、あくまでもサイト制作の手法の一つで、全てに優れている方法ではありません。ちゃんとメリット・デメリットを認識し、サイトに適切な構造を提供することが大事だと思います。


以下に今回の記事で参考になったサイトです。

この記事は、SUGIYAMA が書きました。