モバイルファースト

モバイルファーストとは、スマートフォンなどの小さい画面での設計・開発を先に考え、より大きい画面へ対応を広げるアプローチです。限られた表示領域で情報と操作を整理し、画面が広がったときのレイアウトへ展開します。[1]

Mobile Firstとも呼びます。モバイル端末だけを対象にするのではなく、小さい画面で成立する構成を土台にして、ほかの画面サイズにも対応する考え方です。[1]

最初に考えるのは、小さい画面でも目的の情報を読み、必要な操作を進められる構成です。たとえば、次のような点を整理します。

• 情報の優先順位：ページで伝える内容を絞り込み、何を先に見せるかを決める。
• 操作のしやすさ：メニューやボタンをどこに置き、次の画面へどう進めるかを考える。
• 画面幅への対応：文章や画像の並びを、小さい画面から大きい画面へどう変えるかを考える。

たとえば、会社案内のページなら、会社名・事業内容・問い合わせ先をどの順番で見せるかを先に整理します。パソコン向けの画面をそのまま縮小するのではなく、小さい画面での読み進め方から構成を考えます。

モバイルファーストが「どの画面から設計するか」という考え方なのに対し、レスポンシブWebデザインは、画面幅などに応じてレイアウトを変える設計手法です。小さい画面から設計を始め、その構成をレスポンシブに対応させるなど、両者は組み合わせて使います。[1][2]

CSSでは、小さい画面の基本レイアウトを用意し、画面が広くなるにつれてレイアウトを加える方法が、この考え方に対応します。[2]設計の出発点と、画面ごとの表示を実現する方法を分けて捉えると、二つの関係を理解できます。

モバイルファーストインデックスは、Googleがスマートフォン向けにクロールしたモバイル版のコンテンツを、インデックス登録やランキングに使う方針です。画面を設計する順序を定めたものではありません。[3]

設計アプローチが作り手の「どの画面から考えるか」を表すのに対し、こちらはGoogleが「どのコンテンツを検索の処理に使うか」を表します。スマートフォンから設計すれば検索順位が上がる、という意味ではありません。