レスポンシブデザインって何？

WEBサイトを制作する上でよく聞くレスポンシブデザインという言葉

今回は、よく似たモバイルフレンドリーとあわせて解説してみたいと思います。

レスポンシブデザインとは

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。

特徴

レスポンシブデザインを採用すると、PC用サイトとモバイル用サイトを別々に作る必要がありません。共通のwebサイトを1つ構築して、URLやHTML(画像やテキストを表示するために必要なコード)も、ページごとに1種類ずつ用意すれば良いのです。このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。

以前は、スマホなどが普及しておらずパソコン用表示のHTMLと携帯電話向けサイトなどと言われHTMLなども別々に作っていた時代もありました。

現在ではそういったことではなくCSS（カスケードスタイルシート）により画面サイズに合わせた表示方法を採用しておりワードプレスなどではテーマでレスポンシブデザインを採用するのがお約束になっているほどですね。

そういう意味では、アメブロやFC2ブログなどは、レスポンシブデザインではないのです。

モバイルフレンドリーとは

モバイルフレンドリーとは、モバイルサイトがユーザーにとって使いやすいことを示す概念です。スマートフォンなどのモバイル端末で来訪したユーザーがサイトを問題なく閲覧できるサイトを、Googleはモバイルフレンドリーと評価します。

モバイルフレンドリーの基準

モバイルフレンドリーなサイトと認められるには、モバイルユーザーにとってサイトが使いやすい設計になっていることが必要です。Googleはモバイルフレンドリーの基準として、以下の４点を挙げています。

・携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
・ズームしなくても判読できるテキストを使用していること
・ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
・目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

よく同じように捉えられている方も多いのですが、似て非なるものでレスポンシブデザインがイコールモバイルフレンドリーではないのでご注意ください。

といっても初心者の方には同じようなものと説明することもありますけどｗ