こんにちは、アウラの三輪です。
皆様は、Webサイトを何でご覧になっていますか？
パソコン中心の方、スマートフォンの方が圧倒的に多い方、タブレットの方、いろいろだと思います。
Webサイトは様々なデバイス（パソコンやスマートフォンなどの情報端末）から見られており、その画面サイズはバラバラです。
パソコンでは快適に使えたサイトにスマートフォンでアクセスすると、ものすごーく小さく表示されて、拡大（ピンチアウト）しないと文字は読めないしクリックはし辛いし…なんて経験はありませんでしょうか。
これでは、せっかくサイトを訪れてくれたユーザーが、その場で回れ右をしてしまう可能性大。勿体ない。どうにかせねばなりません。
どんな画面サイズのデバイスからアクセスしても、快適に利用できるWebサイトを構築するための手法、それがレスポンシブデザインです。
上は、アウラのサイトを画面サイズの違うデバイスで表示したイメージ。それぞれの場合で、レイアウトが変わっているのがお分かりいただけるかと思います。
検索エンジンGoogleでの、レスポンシブデザインの定義は、下記のとおり。
「レスポンシブ ウェブ デザイン」（RWD）とは、ユーザーがパソコン、タブレット、スマートフォンのいずれでアクセスする場合でも、ページでは同じ URL とコードを使用し、画面サイズに応じて表示の調整のみを行うこと（違いに対応すること =「レスポンシブ」）を指します。
レスポンシブに対応したサイトは、CSS（Webページの見た目を整える言語）によって、デバイスに合わせてレイアウトを切り替えます。
CSSファイルにレイアウトの切り替え方を記述しておくことで、閲覧側の環境によって、1つのページの見せ方を変えられるわけです。
「responsive（反応する、応答する）」という言葉どおりの動きですね。
初期のモバイルサイトは、モバイル専用ページをパソコン用とは別に用意していました。同じ組織のサイトなのにURLが異なる上、情報更新作業もページの数だけ必要です。管理が煩雑になるだけでなく、ユーザーに見せたい場合はURLをそれぞれ送らなければなりませんでした。
レスポンシブに対応することで、そのあたりの問題が一気に解決します。同じページの見せ方を変えるだけなので、ユーザーはどの端末から見ても、同じ情報にアクセス可能になるのです。
また、レスポンシブデザインは、SEO（検索エンジン最適化）にも有効です。
Googleは、スマートフォン用に表示が最適化されたWebサイトが検索結果の上位に表示されやすくなる「モバイルフレンドリー」を導入し、そのページがスマートフォン表示に対応しているかを、モバイル検索における順位決定の要因としています。
更にGoogleは、ページの評価基準をパソコンサイトからスマートフォンサイトに変更しました。キーワード検索による表示ページの選定、検索順位の位置づけの判断、それらがモバイルサイトを基準に行われます。スマートフォンでの表示に最適化されていないサイトは、順位が後退していきます。
この「モバイルファーストインデックス」と呼ばれる施策にも、レスポンシブデザインにすることで対応できます。
表示させるファイル（ページ）が1つなので、スマートフォンでは不要なデータ（パソコン向けの記述）も読み込まれます。
また、パソコンに比べて性能やネットワーク速度が下回るスマートフォンでは、表示に時間がかかってしまう場合があります。
制作についても、レスポンシブに対応していないサイトよりもコーディングが複雑になるため、製作工数の増加は避けられません。
気を付けなければならない点もありますが、数々のメリットがあるレスポンシブWebデザイン。
ご自身のサイトを訪れるユーザーのことをよく考えて、導入をご検討くださいね。
