【IT講座】Webでよく聞くレスポンシブデザインって？基礎知識とメリット・デメリット

スマートフォンの普及が進み、今やWebサイトのスマートフォン対応はWebサイト制作において必須要件になっています。
そんなスマートフォン対応の方法として多くのサイトで用いられているのが「レスポンシブWebデザイン」です。

今回はレスポンシブWebデザインについて紹介していきます。もくじ

レスポンシブWebデザインとは、1つのHTMLをCSSで制御することで、ユーザーが使用するデバイスの画面サイズに合わせてページのレイアウトやデザインを最適化して表示させることをいいます。

スマートフォンやタブレットからのアクセス数が増加している近年、レスポンシブWebデザインはモバイル対応にとても有効なものであると言えます。

レスポンシブWebデザインにおいて知っておくべきメリット・デメリットの基礎知識をご紹介します。

メリットとして

・管理が容易である
1つのHTMLでPCにもスマートフォンにも対応していることから、文言修正や画像の差し替えなど、簡単なものであれば更新が一度で済みます。

ただし、大幅なレイアウト変更や改修となると工数がかかってしまう場合があります。

・Googleのランキングアルゴリズムにも対応が可能
検索エンジン「Google」の順位は、ランキングアルゴリズムと呼ばれるGoogleが独自に定めた200以上にのぼる評価要因を元にコンテンツを評価して決定します。

その1つとされている「モバイルフレンドリーアルゴリズム」に対応できることはもちろん、今後導入するとされる「モバイルファーストインデックス」についても、レスポンシブWebデザインは非常に相性が良いと言えます。

・URLが統一されるのでシェアされやすい
PC用サイトとスマートフォン用サイトでURLが2つ存在する際、デバイスによっては閲覧に適してないページを表示させてしまう場合もあります。

レスポンシブWebデザイン対応であれば、単一のURLでユーザーのデバイスに適したページを表示してくれます。

デメリットとして

・工数がかかる
複雑なレイアウトであったり、対応デバイスが増えるほどCSSの記述が複雑になるため、コーディングに要する時間がかかります。

レスポンシブWebデザインの記述の仕方を紹介します。

・ビューポートタグを記述する
ページのHTMLの要素内にビューポートを記述します。
これを記述することで、各端末の画面サイズに合わせて表示領域を自動で調整してくれます。

・CSSの切り替え地点を決める
PC用とスマートフォン用の表示を作成する場合、画面幅が何pxになったときに切り替えたいかを決めます。
デバイスによって画面幅は様々になります。画面幅の値と数に決まりはないので、検証しながら決めていくといいでしょう。

ただし切り替えポイントの数が多いとその分CSSの記述が増えていくので注意が必要です。

・メディアクエリでCSSを記述する
上記で指定した切り替え地点に従って、スマートフォン用のレイアウト指示を記述していきます。

レスポンシブWebデザインは仕組みを理解すればそれほど難しいものではありません。ただしレイアウトを考える際には注意が必要になります。
デザインもなるべくシンプルな方が作りやすいでしょう。

まずはレスポンシブWebデザインの基礎知識の理解に努めてみてください。