ルーク・ウォロブレフスキーが2009年にこの手法に名前を付けたが、その論理は既に切実なものだった。スマートフォンがウェブにアクセスする主要な手段となり、デスクトップレイアウトを先に設計すると、デザイナーは後から小さな画面に複雑な要素を詰め込む必要に迫られた。モバイルファーストは、この順序を逆転させる。最小の画面から始め、何が最も重要かを判断し、それからタブレットやデスクトップのレイアウトへと展開していくのだ。

この制約は、むしろ生産的です。狭い表示領域は、優先順位付けを促します。ナビゲーションはメニューに集約され、コンテンツは単一の列にまとめられます。すべての機能は、そのスペースに見合うだけの価値がある必要があります。デザイナーは、親指で操作しやすいタップ位置を設計し、片手操作を考慮し、低速な接続にも対応できるよう計画を立てます。デザインがより大きな画面に対応するようになった場合でも、余ったスペースは新たな要素で埋め尽くされるのではなく、ゆとりのある空間や補助的なパネルのために活用されます。

中核となる実践

• ワイヤーフレームはスマートフォンの幅から開始してください。
• コンテンツの階層構造を徹底的に優先順位付けせよ。
• デザインのタッチターゲットは最低44ピクセルです。
• タブレットやデスクトップへの対応は最後に行う。

レスポンシブデザインとモバイルファーストはしばしばセットで用いられます。モバイルファーストは優先順位を設定し、レスポンシブデザインは様々な画面サイズへの適応を担います。