モバイルファーストとは
モバイルファーストとは、スマートフォンやタブレットのようなモバイル端末で閲覧された場合の使いやすさを考慮してウェブデザインを作ることです。モバイル版のページデザインを「全環境に共通するベースデザイン」として最初に作っておき、それよりも大きな画面の環境に対しては、ベースデザインからの差分だけを追加(上書き)して適用します。モバイルファーストの書き方を採用してPC・モバイル両対応のウェブページを作れば、CSSソースから無駄を排して全体の記述量を減らしやすい上、更新の手間も少なくて済むため便利です。
シンプルなモバイル向けデザインを先に作っておき、それに大画面用CSSを加えることでPC向けデザインにする製作順序
今回は、モバイルファーストな設計でのCSSソースの書き方をご紹介いたします。ウェブページのデザインを考えてCSSを書く際の「考え方」の問題ですから、特に難しい話ではありません。CSSのメディアクエリという書き方を使って、どのような構成でCSSソースを書けば労力を削減しやすくて更新しやすいCSSになるか、という点を解説します。
【本記事の目次】
- 構造：シンプルな共通デザインを先に書き、差分を付け足していく書き方
- 利点：ウェブサイトをモバイルファーストで作成するメリット
- 関連：モバイルファーストインデックスとは
- メディアクエリ(Media Queries)を使うモバイルファーストCSSの書き方 (p.2)
- モバイル環境に余計なCSSを読ませない：大画面向けCSSをmedia属性で分離する方法 (p.3)
- 閲覧者の画面サイズに応じて、表示/非表示を切り替える方法 (p.3)
シンプルな共通デザインを先に書き、差分を付け足していく書き方
モバイルファーストなCSSソースを書く具体的な方法を解説する前に、CSSをモバイルファーストで書く際の大まかなイメージをご紹介しておきます。例えば、(1)スマートフォン用デザイン、(2)タブレット用デザイン、(3)PC用デザインの3種類を用意する場合を考えます。その場合は、CSSソースの中に下図のような3区画を用意します。
モバイルファーストCSS：スマートフォン用デザインをベースにして、そこに大画面用の差分デザインを足していく形で記述するCSSソース
赤色の部分が「全環境で共通するベースのスタイル」であり、これがそのままスマートフォン用CSSになります。黄色部分が「タブレット(中画面)用の差分」で、緑色部分が「PC(大画面)用の差分」です。これらがどのように適用されるのかを、以下で説明します。
■ベースCSS(赤)＝スマートフォン用デザイン
まずは、全環境に共通するベースのデザインとして、スマートフォン用のCSSを記述します。図では赤色で示しています。ウェブページがスマートフォンで閲覧された場合には、この赤色部分のCSSだけが読まれるようにします。
スマートフォンで閲覧された場合には、ベースのCSSだけを読み込んで、スマートフォン用デザインを表示する
■ベースCSS(赤)＋中画面用の差分CSS(黄)＝タブレット向けデザイン
次に、タブレット用のCSSを記述します。ここでは、スマートフォン用CSSと共通するスタイルは書きません。タブレット用として追加する必要のある差分CSSだけを書きます。図では黄色で示しています。ウェブページがタブレットで閲覧された場合は、赤色＋黄色のCSSが読まれるようにします。
タブレットで閲覧された場合には、ベースのCSSに中画面用の差分CSSを加えて読み込んで、タブレット向けデザインを表示する
■ベースCSS(赤)＋中画面用の差分CSS(黄)＋大画面用の差分CSS(緑)＝PC向けデザイン
最後に、PC用のCSSを記述します。ここでは、スマートフォン用CSSやタブレット用CSSで既に書いたスタイルは書きません。PC用として追加する必要のある差分CSSだけを記述します。図では緑色で示しています。ウェブページがPCで閲覧された場合は、赤色＋黄色＋緑色のCSSが読まれるようにします。
PCで閲覧された場合には、ベースのCSSに中画面用の差分CSSと大画面用の差分CSSを読み込んで、PC向けのデザインを表示する
ウェブサイトをモバイルファーストで作成するメリット
上記のように、レイアウトがシンプルなモバイル版デザインを先に設計してCSSを書いておき、広い画面用のデザインは後から差分だけを付け足していく書き方がモバイルファーストです。この方法だと共通するデザインの記述は1度で済むため、全体の記述量は少なくて済み、更新作業などのメンテナンスも楽になるでしょう。■環境別にCSSを分離すると、同じデザインを何度も書くことになる
もし閲覧環境ごとに別々のCSSを用意していると、複数の環境で共通しているデザインがある場合でも、同じCSSソースを何度も書く必要があります。すると、全体としてはCSSの記述量が多くなってしまい、重複している部分の管理や更新作業にも手間がかかります。
■PCファーストだと、複雑さを打ち消すためのCSSが多くなりがち
PC用デザインを先に作っておいて、そこに狭い画面用のスタイルを必要に応じて上書きしていく「PCファースト」のような書き方もあります。特に、PC版サイトだけが先に存在していて、後からモバイル環境に対応するためのデザインを加えたようなウェブサイトでよく使われています。この方法では、複雑なレイアウトを打ち消してシンプルにするためのCSSを追記していく方針になるため、モバイルファーストな書き方と比べるとCSSソースの分量は多くなりがちです。
したがって、シンプルな共通デザインから差分を加えていくモバイルファーストな書き方を採用する方が、全体の労力を削減しやすくておすすめです。
モバイルファーストインデックスとは
モバイルファーストに関連してよく目にする用語には、モバイルファーストインデックス(Mobile First Index＝MFI)もあるでしょう。モバイルファーストインデックスとは、Googleのインデックス(検索データベースへの登録)方針を指す用語です。■検索結果を表示するために、ウェブページの評価値を計算
GoogleやBingなどの検索エンジンでは、ウェブ上に存在するページをインデックスする際に様々な指標を用いてそのページの評価値を計算します。検索結果に表示する順序を決定するために必要だからです。従来は、「PCで閲覧した場合に見える内容」を元にして評価値が計算されていました。
■モバイル端末で見える内容を元に評価値が計算される方針に変更
しかし、モバイル端末が徐々に普及し、2015年の時点では日本も含めた10カ国でPCよりもモバイル端末からの検索数の方が多くなっていました(※1)。そのような状況から、Googleでは「モバイル端末で閲覧した場合に見える内容」を元にして評価値を計算する新しい方針に変更を始めました(※2)。それがモバイルファーストインデックスです。ウェブサイトごとに2018年3月から順次切り替わり始めました(※3)。
※1:Building for the next moment(Inside AdWordsブログ／2015年)
※2:モバイル ファースト インデックスに向けて(ウェブマスター向け公式ブログ／2016年)
※3:モバイル ファースト インデックスを開始します(ウェブマスター向け公式ブログ／2018年)
■モバイルファーストなCSSと、モバイルファーストインデックスの関連
検索エンジンによるウェブページの評価値には、ページの表示速度も考慮されます。CSSをモバイルファーストで書いて無駄を削減すれば、それだけCSSは短くて済むため読み込みも早く済むでしょう。また、モバイル用以外のCSSを別ファイルに分離していれば、モバイル端末では短いシンプルなCSSを読むだけで済むので、より高速に表示が完了すると期待できます。これらの点からも、モバイルファーストなCSSの書き方にはメリットがあると言えるでしょう。
それでは次のページから、メディアクエリという記述方法を使って、モバイルファーストなCSSを記述する方法をご紹介いたします。
