みなさんが、Webサイトを見るデバイスは何ですか？PCですか？スマホですか？それともタブレット？？
Webサイトをさまざまなデバイス（パソコンやスマホなど）から見るようになった為、どのデバイスからでも見やすいものを作らなくてはいけません。この時に必要なのが『レスポンシブWebデザイン』です。
今回は、そんなレスポンシブWebデザインについてご紹介します。
レスポンシブWebデザインって何？
レスポンシブWebデザインとは、どんな大きさの画面でも、見やすく、使いやすいWebサイトにするために必要なものです。ひとつのHTML（Webサイトに載せる情報）で配信し、CSS（情報の大きさや位置など表示の指定）は、デバイスごとに用意して表示を変えさせます。
内容は全て同じですが、見せ方が違うということです。
レスポンシブWebデザインのメリデメ
レスポンシブWebデザインには、どんなメリットとデメリットがあるのかを見ていきます。
【メリット】
①管理が楽
HTMLがひとつなので、Webサイトに載せる情報を修正・更新する時に、作業が１回で済みます。
デバイスごとにHTMLがあると、修正や更新の作業をHTMLの数だけしなくてはいけません。
②シェアされやすい
URLがひとつなので、Webサイトを見るユーザーにシェアされやすくなります。スマホ用のモバイルサイトと、パソコン用のPCサイトがあった場合、見せたいユーザーのデバイスに合わせて、異なるURLを送らなければいけません。
③検索エンジンの上位に表示されやすい
スマホに対応したWebサイトが、検索結果の上位に表示されやすくなる「モバイルフレンドリー」や、スマホ用のページが順位の決め手になる「モバイルファーストインデックス」に対応できます。
・「モバイルフレンドリー」とは
モバイル端末を使用するユーザーにとって、サイトが使いやすい・見やすいなど、ユーザー体験を損ねない状態であること
・「モバイルファーストインデックス」とは
これまでの評価軸が転換し「モバイルサイトの評価がメインで評価されるようになる」アルゴリズムのことで、導入前に、モバイルサイトを十分に整備する必要があります
【デメリット】
①スマホでの表示に時間がかかる
HTMLがひとつなので、パソコンと同じデータをスマホにも読み込ませます。そのため、スマホで表示しないデータまでもが読み込まれ、表示が完了するまでに時間がかかってしまいます。どれくらいの時間がかかるのかは、Googleの「PageSpeed Insights」で測定できます。
②デザインに制限がある
HTMLがひとつなので、スマホとパソコンでコンテンツの順番を変えるなど、大幅に見せ方を変えたりすることはできません。
③工数がかかる
デバイスごとにデザインを制作し、それに合わせたコーディングをするため、複雑になります。そのために、制作工数がかかってしまいます。
制作時の注意点
さまざまなデバイスに対応させるには、気をつけなければならないことがいくつかあります。
①対応デバイスをよく考える
「パソコンとスマホに対応していればいい」となった時に、言われたままに作るとタブレットで見た際に、デザインが崩れてしまうことがあります。ユーザーはさまざまなデバイスからWebサイトを見るので、配慮が必要です。
②スマホから設計する
横幅のあるコンテンツや文章量の多いコンテンツが、スマホの画面幅になると非常に見にくい上に、使いにくくなります。画面幅に余裕のあるパソコンより、制約の多いスマホから設計すると楽です。
③画像ファイルは、小さく少なく
スマホは読み込みに時間がかかるため、画像を作る際には、次のことに気をつけると良いでしょう。
・画像ファイルは小さいものを選ぶ
・CSSやWebフォントを使う
・CSSスプライト（複数の画像を１枚の画像に載せ、CSSで表示する箇所を指定する方法）を使う
・画面幅に合わせて、読み込む画像を小さいものに切り替える
・高解像ディスプレイに対応する
iPhoneは、Retinaディスプレイという今までより高解像度で表示されるものです。Retinaディスプレイで見た時に、美しく見えるよう縦横２倍サイズの画像を用意すると良いでしょう。しかし、今は３倍の画像が必要なスマホも出てきているので注意が必要です。
まとめ
レスポンシブWebデザインには、メリットがたくさんあります。しかし、同時に気をつけなければならないこともあります。ユーザーのことをよく考えて、最高のコンテンツを届けられるようにしたいですね！
plus archでは、サイトリニューアルをご検討されている方にも、適切なWebサイトに作り直すことが可能です。Webサイトでお困りの方は、ぜひplus archにご相談ください！
