Webサイトをレスポンシブデザインにしよう！

こんにちは！
今日は顔がほてってぼーっとしているGlobal Web Designの福田です(笑)

みなさんはパソコンとスマホ、どちらでWebサイトを見ることが多いでしょうか？
気軽に使えるスマホの方がWebサイトを見る機会が多いと思います。

さまざまな端末でWebサイトを見れるこのご時世に、「レスポンシブデザイン」は必須になってきました。
そこで、今回は

「レスポンシブデザインって何？」
「レスポンシブデザインをしたいけどやり方がわからない…」

という方に向けて、レスポンシブデザインの意味や、書きかたについて解説していきます！

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

「レスポンシブデザイン」とはパソコン、タブレット、スマートフォンなどの検索ユーザーのWebブラウザに対して、 レイアウトを最適化するデザインのことを指します。

今まで検索ユーザの多くはパソコンからWebサイトを閲覧していましたが、 現在はスマートフォンやタブレットなど画面サイズの異なるデバイスに変化したため、それぞれの画面サイズに対応するためにレスポンシブデザインを使います。

昔はパソコン版のHTML・CSSと、スマートフォン版のHTML・CSSをわけて書いていましたが、「レスポンシブデザイン」のおかげでHTML・CSS 1つずつでユーザのデバイスごとに表示を変えるようになりました。
また「レスポンシブデザイン」は どのデバイスに対しても同じURL・HTML・CSSを使用するため

「パソコンで表示されるがスマートフォンで表示されない」

といったユーザビリティーの低下を回避できます。

レスポンシブデザインのメリット・デメリット

ここからは、「レスポンシブデザイン」のメリット・デメリットをご紹介します。

レスポンシブデザインのメリット

• URLが1つでいい
• HTML・CSSの管理が楽になる
• SEO対策に優位になる

では、1つずつ「レスポンシブデザイン」のメリットを見ていきましょう！

URLが1つでいい

先ほどご紹介したとおり、パソコンのHTML・CSSと、スマートフォンのHTML・CSSをわけて書く必要がないため、URL内でフォルダをわける必要がなくなりました。

例えば、「global-web-design.com」のドメインに対して、パソコンとスマートフォンをわける場合、パソコンは「global-web-design.com/pc/」、スマートフォンは「global-web-design.com/sp/」とディレクトリをわけて書く必要がありました。
パソコン版、スマートフォン版ともに、HTML・CSSが必要になるため作業量も増えてしまいます。

しかし、「レスポンシブデザイン」では「global-web-design.com」のドメインでパソコン版とスマートフォン版の表示を変えれるので、ディレクトリを増やす必要がなくなりました。

HTML・CSSの管理が楽になる

２つ目は、HTML・CSSを1つで書けるので、Webサイトの管理がかなり楽になるということです。
ファイルの数を減らせるので、

「パソコンの方さわってるっと思ったらスマートフォンだった」

などの操作ミスも減らせます！

また修正をする時もHTML・CSSが1つなので、どのファイルを修正すればいいかすぐに確認できます。

SEO対策に優位になる

パソコンやスマートフォンを個別に作った場合、URLが異なるためSEOの評価が分散する可能性があります。
「レスポンシブデザイン」ではページURLが1つに統一されるので、ユーザの利便性が向上します。

レスポンシブデザインのデメリット

ファイルの読み込みが遅くなる

パソコン・タブレット・スマートフォンのHTML・CSSを1つのファイルに書いていくため、環境によって読み込み速度が落ちる可能性があります。

HTMLの画像などは、パソコンと スマートフォンで画像をリサイズしてサイズを小さくするといいでしょう。
CSSは圧縮・軽量化を行い読み込みの速度を下げないようにするなどの工夫が必要になります。
MinifyでCSSを圧縮・軽量化できるので、こちらを使うのもいいでしょう。

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

ここからは「レスポンシブデザイン」の作り方をご紹介します。
「レスポンシブデザイン」の作り方の手順として

1. HTMLのheadタグないに「meta viewport」タグを書く
2. 「メディアクエリ」をCSSに書く

の順に設定していきます。

meta viewタグを書く

まず最初に、HTMLのheadタグないに「meta viewport」タグを書いていきます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

「meta viewport」タグは、画面表示をデバイスの幅に応じて自動で調整してくれるコードになります。
「meta viewport」タグの中の記述の意味は以下の通りです。

• width=device-width
  訪問ユーザーの使っているデバイスの横幅を取得
• initial-scale
  表示倍率を指定する

メディアクエリをCSSに書く

つぎに「メディアクエリ」をCSSに書いていきます。
「メディアクエリ」は「ブレイクポイント」を指定して画面のサイズを切り替えることができます。

@media screen and (max-width: 768px){
  /* この中にCSSを書いていく */
}

このコードの場合、「ブレイクポイント」は「768px」になり、「max-width: 768px」で「最大幅が768px」以下の時に、「{}」の中のCSSが適用されます。
少し紛らわしい記述ですので、スマホ版から作る場合と、パソコン版から作る場合を紹介していきます。

スマホから作るときの「メディアクエリ」

先ほど「メディアクエリ」を「メディアクエリ」は「ブレイクポイント」を指定するとご紹介しました。
「ブレイクポイント」は自分で設定できますが、今回は

1. スマートフォンは768px以下
2. タブレットは768px〜1024pxの間
3. パソコンは1024px以上

という設定で書いていきます。

スマートフォンからWebサイトを構築することを「モバイルファースト」といいます。
「モバイルファースト」で書く場合は「メディアクエリ」に「min-width」を使っていきます。
この場合の「min-width」は画面幅の最小を意味します。

/* スマートフォンのCSS */
p{
  font-size: 16px;
}

/* タブレットのCSS */
@media screen and (min-width: 768px) {
  p{
    font-size: 18px;
  }
}

/* パソコンのCSS */
@media screen and (min-width: 1024px) {
  p{
    font-size: 20px;
  }
}

「min-width」を使って書いた場合このようなCSSになります。

スマートフォンからCSSを書きはじめた場合

• 「メディアクエリ」がない場所がスマートフォンのCSS
• 「@media screen and (min-width: 768px)」はタブレットになり画面幅が768px以上のときにpタグのフォンサイズが18px
• @media screen and (min-width: 1024px)はパソコンになり画面幅が1024px以上の時にpタグのフォンサイズが20px

のようになります。

パソコンから作るときの「メディアクエリ」

先ほどと同じようにパソコンの「メディアクエリ」を設定します。
スマートフォンと同じブレークポイントにします。

1. パソコンは1024px以上
2. タブレットは1024px〜768pxの間
3. スマートフォンは768px以下

パソコンからCSSを書きはじめた場合、「メディアクエリ」に「max-width」を使っていきます。
この場合の「max-width」は画面幅の最大を意味します。

/* パソコンのCSS */
p{
  font-size: 16px;
}

/* タブレットのCSS */
@media screen and (max-width: 1024px) {
  p{
    font-size: 18px;
  }
}

/* スマートフォンのCSS */
@media screen and (max-width: 768px) {
  p{
    font-size: 18px;
  }
}

「max-width」を使って書いた場合このようなCSSになります。
パソコンからCSSを書きはじめた場合

• 「メディアクエリ」がない場所がパソコンのCSS
• 「@media screen and (max-width: 1024px)」はタブレットになり画面幅が1024以下のときにpタグのフォンサイズが18px
• @media screen and (max-width: 768px)はスマートフォンになり画面幅が768px以下の時にpタグのフォンサイズが20px

のようになります。

1つ注意点として「max-width」と「max-width」は一緒に使わないようにしましょう。
両方とも使うと「ブレイクポイント」が混乱してしまうため、どちらか1つに決めてCSSを書いていきましょう。

まとめ

いかがでしたでしょうか？
今回はレスポンシブデザインの意味や書きかたについてご紹介しました。

パソコン版から作るか、スマートフォンから作るかは自由なので、自分に合った方法でやるといいと思います。
私の場合はパソコンから作ることが多いので「max-width」をよく使います。

今は「レスポンシブデザイン」は当たり前になってきました、この記事を見て「レスポンシブデザイン」の参考にしていただけると幸いです！

この記事を書いた人

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。