今後のWeb制作に必須スキル!レスポンシブデザインを学ぶ。Googleも推奨するマルチデバイスに対応したデザイン。

2017年7月20日Webデザインレスポンシブデザイン

インターネットを観覧する環境が従来のパソコンに加え、タブレットやモバイルなど様々なデバイスが増えたことにより、ホームページを制作する側は必然的にマルチデバイスを想定したサイトの構築を視野に入れる必要が出てきました。私が管理するサイトの1つを例に過去3年間のデータを挙げますとデバイス別の比率は以下のようになっています。

デバイス別セッション(過去3年間)
パソコン 126,248
モバイル 122,832
タブレット 13,328

モバイルよりもパソコンからのアクセスが多いようですが、恐らく近い内にモバイルからのアクセスが一番多くなると思われます。というのも上記のサイトは1年前までモバイルからのアクセスを想定した施策をきちんと行っておらず、サイトをマルチデバイスに対応させてからというもの急激にモバイルからのアクセスが伸びてきました。そして直近の過去30日のデータを挙げると以下のようになります。

デバイス別セッション(過去30日間)
パソコン 10,502
モバイル 15,504
タブレット 1,597

完全にパソコンからのアクセスよりもモバイルからのアクセスの方が多くなりました。

マルチデバイスに対応したwebサイトの構築方法として挙げられるのが、

  • PHPなどでデバイスごとに動的なページを吐き出す方法
  • デバイスごとに別々のページを用意する方法
  • そして近年推奨されている方法としてレスポンシブデザインでサイトを作る方法

今回はそのレスポンシブデザインについて紹介したいと思います。

レスポンシブデザインの概要

レスポンシブデザインとは、画面サイズに応じてCSSなどでレイアウトを変えるデザインのことを言います。

画面サイズによって可変するデザイン

パソコンで見た時
パソコンで見た時のデザイン

多くのWEBサイトはパソコンで見られる事を第一に想定して作られているため、タブレットやモバイルのような小さく縦に長い画面ではどうしても見づらいものとなってしまいます。

モバイルで見た時
画面が小さくなった時にレイアウトの位置を変えたり非表示にする

画面の大きさが可変するものとして、画面が特定のサイズまで小さくなったら見づらくなるであろうサイドバーをコンテンツの横から真下へ移動させる。2列や3列だったレイアウトを画面が小さい時に1列にする。

レスポンシブデザインはこういった対策を施したデザインのことを言います。

レスポンシブデザインのやり方

レスポンシブデザインの基本はCSSの記述で実現できます。今回は画面サイズでレイアウトを変えるレスポンシブデザインの基本を学びます。

画面が小さい時、文字の色を変える

以下のCSSで<p>タグで囲まれた文字は黒色(#000000)になっています。

p {
    color:#000000;
}

次に以下の記述を追加します。すると画面サイズが969px以下になった時にpタグで囲まれた文字が黒から赤に変わります。

p {
    color:#000000;
}

@media (max-width: 969px) {
p {
    color:#c80000;
}
}

さらに以下の記述で画面サイズが659px以下になると赤から紫に変わります。

p {
    color:#000000;
}

@media (max-width: 969px) {
p {
    color:#c80000;
}
}

@media (max-width: 659px) {
p {
    color:#4B0082;
}
}

画面が小さくなるにつれて文字の色が、黒→赤→紫と変わります。これがCSSを使ったレスポンシブデザインの基本です。後はこれを応用して画面サイズごとに適用するCSSを変えていくだけです。

レスポンシブデザインでよく使うCSS

ここからは私がレスポンシブデザインでよく使うCSSを一部ご紹介します。

width: 横幅のサイズ。画面がある程度小さくなったらpx指定から%指定に切り替えて使用することが多い。(width:100%)
font-size: 文字のサイズ指定。画面が小さい時に文字のサイズが大きいほうが読みやすい事がある。逆も然り。(font-size:12px→font-size:18px;)
clear: 回り込みを解除する際に使用する。横並びだったレイアウトを画面が小さいとき縦並びにする際に使用する。(clear:both;)
display: 要素の表示形式を指定する際に使用。使い方は主に画面が小さいときには非表示にする時に使う。(display:none;)

まとめ

スマホやタブレットの急激な普及によってWEBデザイナーのレスポンシブデザインにおけるスキルはほぼ必須と言ってもいいと思います。

https://saburo-design.com/2754/