Webサイトはマルチデバイス対応させるレスポンシブコーディングの仕組み

いまのWebサイトはスマホ画面に対応(マルチデバイス対策)しており、コーディング初学者でもスマホ対策スキルは必須です。必須の理由とその仕組みを説明しています。

なぜマルチデバイス対応が必要なのか

昨今のスマートフォンやタブレットの多種多様な登場に伴い、インターネットを利用する際の利用機器の割合ではスマートフォンの利用が最も多いです。

出展:総務省 令和2年版情報通信白書

一概にスマートフォンといっても「iPhone」や「Android」があります。または、タブレットであれば「iPad」「Surface」「Amazon Fire」など様々あり、各デバイスの画面サイズが違ってきます。

パソコンでの閲覧しか考えていないとスマートフォン、タブレットで閲覧した時に文字が小さい、ボタン小さくて押しづらいなどユーザーにとって利用しにくいものになります。
また、Googleの検索エンジンではモバイル対応しているサイトをランキング要素に反映しています。検索上位させるためにはモバイル対応は必要不可欠といっても良いでしょう。

以上のことから複数のデバイス(マルチデバイス)で閲覧しても問題ない対応をする必要があります。

マルチデバイス対応の4つの手法

複数のデバイスに閲覧させる対応手法は下記の4つになります。

  • デバイスごとのサイト構築
  • レスポンシブコーディング
  • 自動変換サービス
  • CMSサービス

ひとつずつ各手法を紹介します。

デバイスごとのサイト構築

デバイスごとにサイトの構築していく手法
デバイスごとの特性にあったデザインがされているので使いやすいという反面、デバイスごとに専用ページが必要になるので、情報の更新をする時に手間がかかる。デバイスごとにページが必要になります。

レスポンシブコーディング

HTMLとCSSでマルチデバイス対応させる手法をレスポンシブコーディングといいます。
これはデバイスの画面幅の長さによってレイアウトを切り替えることをしています。主にCSSで実現させるのでデバイスごとに複数のページを用意する必要がありません。
画面幅に合わせて表示させたい情報をCSSで出しわけをしているので、更新も一つのページで管理ができます
更新するページが一つなのでSEO対策にも効果が高いです。

現在はこの手法がメインで行われており、Webデザイナーが必ず身につけておきたいスキルです。
レスポンシブコーディングについては、後で深堀りをしていきます。

自動変換サービス

現状のサイトを自動的に変換するサービスを使う方法です。
これはサイトを更新すると各デバイスの更新部分を判断して各デバイス用に自動生成するといったようなサービスがあります。マルチデバイス対応のコンテンツ作成・運用に特別な知識は不要で行えるのがメリットです。

月額費用のサービスであれば、サイトを運用しているかぎり費用がかかってきます

CMSサービス

マルチデバイスに対応したCMSサービスを使う方法です。
すでにマルチデバイスに対応しているCMSを使用するので、マルチデバイスに適用構築する必要がありません。
CMSの中にコンテンツを入れていくだけでマルチデバイス対応しているので、専門知識は不要です。
ただ、自社で更新や管理を行う場合はCMSの学習コストがかかってくることが難点です。

レスポンシブコーディングの仕組み

「マルチデバイス対応の4つの手法」の項目で前述したレスポンシブコーディングについてもう少し深堀りをしてみます。

レスポンシブコーディングの仕組みは下記の3つがポイントとして挙げられます。

  • ブレイクポイント
  • viewport設定
  • メディアクエリ

ひとつずつ見ていきましょう。

ブレイクポイント

ブレイクポイントとはレスポンシブデザインで設計する時にスマホやタブレットに最適なデザインに切り換わるウィンドウ幅(ピクセル)のことを言います。
各社スマホ、タブレットのサイズが多岐に渡るため複数のブレイクポイントを作る場合もあります。(下記参照)

媒体によるブレイクポイント

ブレイクポイントの値の決め値は、複数の定義があるので決めることが難しいと思いますが、とりあえずは上記のポイントで覚えておけば問題ありません。

viewport設定

レスポンシブコーディングを行う際は、必ずHTMLのheadタグ内にviewportの設定が必要になります。
viewportとは、「表示領域」のことであり、viewportを設定するとスマホやタブレットのモバイル端末での表示領域に応じて閲覧表示させることが可能になります。

もしviewportを設定しなかった場合は、モバイルで見た時にWebサイト全体が縮小されて表示されてしまいます

viewport設定

これだと、文字が小さかったり、リンクボタンが小さく表示されておりとてもWebサイトとして使いにくいものになってしまします

実際に書くviewportは<head>タグの中に記述します。
下記の<meta>タグはGoogleで推奨されていますので、形式的にこれを覚えておけばよいでしょう。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

メディアクエリ

レスポンシブ対応させるためにviewport設定する以外にメディアクエリの設定が必要です。
メディアクエリとはCSSに記述するもので、指定する画像幅の値によって表示方法が切り替わる機能です。

下記の記述は、画像幅によって背景色を変更させる記述です。

CSSコード

@media screen and(max-width: 480px) { /*画像幅が0~479pxの場合にCSSを適用される(スマホサイズ)*/
#main {
     background: #ffffff; /*背景色を白にする*/
    }

@media screen and(min-width: 1280px) { /*画像幅が1280px以上の場合にCSSが適用される(PCサイズ)*/
#main {
     background: #000000; /*背景色を黒にする*/
    } 
}

現場では、PCサイズで表示されているヘッダーのナビゲーションをスマホサイズでは非表示させたり、文字サイズをデバイスごとに指定することなどを設定しています。

この記事のまとめ

この記事でのマルチデバイス対応させるレスポンシブコーディングの仕組みのポイントをまとめました。

Webサイトはマルチデバイス対応させるレスポンシブコーディングの仕組み

なぜマルチデバイス対応が必要なのか
ユーザーにとっての使いやすさとGoogle検索エンジンのランキング要素に反映されているのでマルチデバイスの対応は必要不可欠。
マルチデバイス対応の4つの手法
  • デバイスごとのサイト構築
  • レスポンシブコーディング
  • 自動変換サービス
  • CMSサービス
レスポンシブコーディングの仕組み
  • ブレイクポイント
  • viewport設定
  • メディアクエリ

ユウジの体感コラム

スマホのシェア率の高さにより、今ではパソコンの閲覧よりモバイルからの閲覧が圧倒的に多いんですよね。
現場でもサイトのリニューアル、または新規構築の際、必ずモバイル対応することが当たり前になっていますのでコーディングを学習する時はレスポンシブコーディングも覚えておかないと戦力になりません。

レスポンシブコーディングを習得するためにはまずはレスポンシブになる仕組みを覚えておくと実際レスポンシブコーディングを学習する時に、理解度が高いと思いますね。今回の記事では初学者に向けて必要最低限な情報を絞って書かせてもらいました。

全然、物足りないよと感じたならばあなたは既にレベルアップしています。
早速、手を動かしてレスポンシブコーディングをして知識からスキルに変更していきましょう!