モバイルファーストとは何ですか?

「モバイルファースト」とは

「モバイルファースト」 (mobile-first) とは、Web開発でモバイル端末向けWebサイトをPC向けWebサイトより優先して開発する手法や考え方の事です。広くは通信速度の制約を考慮したり、端末の位置情報などモバイル端末独自の機能を利用したWebサービスやWebサイトの開発をするという概念を含みます。

このページでは、「すぐ使えるCMS」や「すぐ使えるメールフォーム」を使うに当たっての「モバイルファースト」の利用、つまり、CSS(スタイルシート、Cascading Style Sheet）を利用したレスポンシブWeb画面設計において、従来のPC版を優先した開発と「モバイルファースト」開発が異なる点をご説明します。

レスポンシブWebデザインの登場

スマートフォンやタブレットなどのモバイル端末の浸透に伴い、「レスポンシブWebデザイン」という手法が登場しました。これは、一つのHTMLコードのページ（Webサイト）を「メディアクエリー」というCSSの機能を使ってサイズの異なる端末でそれぞれ快適に表示する方法です。「メディアクエリー」とは具体的には、大雑把な表示デバイスの種類（※1）とその表示領域のサイズによってCSSの適用範囲を制限する機能です。この「メディアクエリー」を駆使して作ったWebサイトは、端末によって異なった風にWebサイトが反応（レスポンス）するので、「レスポンシブWeb」と呼ばれました。

※1 ディスプレイか、プリント用か、など

CSSにおける「モバイルファースト」とPC優先開発の違い

この「メディアクエリー」の機能を使って最初に行われたレスポンシブWebサイト開発は、まずPC版のデザインを作り、その後「端末が○○ピクセルより小さかったら」という条件でモバイル版のデザインを定義して行くものでした。

PC優先のメディアクエリー構造

具体的には、以下のようなメディアクエリーを使います。まずはPC版を想定した基本的な設定を行い、その後、「○○ピクセル以下だったら...」という設定をするのです。例えば「@media (max-width: 979px)」と書いてある部分は、「端末幅が最大 979px になるまでこの（※2）CSSを適用し、それ以上になったら無効にする」という意味になります。

※2 続く中カッコ { } で括られた部分

コピー

/* ここに全体設定・大型デスクトップ用の設定 */
 
/* タブレット横置き・デスクトップ */
@media (max-width: 979px) { ... }
 
/* タブレット縦置き・スマートフォン横置き */
@media (max-width: 767px) { ... }
 
/* スマートフォン縦置き以下 */
@media (max-width: 480px) { ... }

PC優先のCSS設定の例

例えば、「タブレット横置き以上では左にメニュー用カラムを作るが、それ以下の幅の端末では上下に並べる」という設定をするのであれば、概念としては以下のように設定します。（実際にはもっといろいろな配慮が必要です。）

コピー

/* ここに全体設定・大型デスクトップ用の設定 */
.left-column {width: 15%; float: left;}
.main-column {width: 85%; float: left;}
 
/* タブレット横置き・デスクトップ */
@media (max-width: 979px) { ... }
 
/* タブレット縦置き・スマートフォン横置き */
@media (max-width: 767px) { 
    .left-column {width: 100%;}
    .main-column {width: 100%;}
}
 
/* スマートフォン縦置き以下 */
@media (max-width: 480px) { ... }

CSSは上から順番に上書きされて一番下に来たものが有効ですので、端末が 767px 以下の場合は「タブレット縦置き・スマートフォン横置き」の中の設定が適用されて、メニュー用カラムは幅100%になります。

「モバイルファースト」のCSSメディアクエリー構造

一方、「モバイルファースト」のCSS開発ではメディアクエリー定義の順番が逆になります。「モバイルファースト」ではまず小さな端末用のCSSを先に書き、その後「幅が○○ピクセル以上だったら」というメディアクエリーを使ってより大きな端末での表示の設定をしていくのです。「min-width」の指定は「このCSS設定を適用する時には最低この幅がある事」という意味です。

コピー

/* ここに全体設定・スマートフォン縦置き以下の設定 */
 
/* タブレット縦置き・スマートフォン横置き */
@media (min-width: 481px) { ... }
 
/* タブレット横置き・デスクトップ */
@media (min-width: 768px) { ... }
 
/* 大型デスクトップ */
@media (min-width: 980px) { ... }

「モバイルファースト」のCSS設定の例

上記のPC優先のCSS定義と同じ設定を「モバイルファースト」で行うと、下記の様になります。

コピー

/* ここに全体設定・スマートフォン縦置き以下の設定 */
.left-column {width: 100%;}
.main-column {width: 100%;}
 
/* タブレット縦置き・スマートフォン横置き */
@media (min-width: 481px) { ... }
 
/* タブレット横置き・デスクトップ */
@media (min-width: 768px) {
    .left-column {width: 15%; float: left;}
    .main-column {width: 85%; float: left;}
}
 
/* 大型デスクトップ */
@media (min-width: 980px) { ... }

メディアクエリーのバリエーション

メディアクエリーの設定方法や具体的な数値は上記例の限りではありません。メディアクエリーで指定する幅の境界は新しいディスプレイの登場に伴って変化します。また、実際のWeb制作では「min-width」と「max-width」を組み合わせてCSSの適用範囲を細かく設定したり、ピクセル数ではなく em （文字サイズを基準にした幅の指定方法）での幅指定も行われます。

モバイルファーストとは何ですか?