移行中の知識
モバイルファースト・レスポンシブデザイン
Mobile-first Responsive Design
定義
モバイルファースト・レスポンシブデザイン（Mobile-first Responsive Design）とは、狭いviewportで成立する基本のcontentの順序とlayoutを先に定め、利用可能な幅が増えるにつれてcolumn、navigation、余白、並置などを段階的または連続的に加えていくresponsive designの考え方です。「mobile利用者の方が重要」という事業上の優先順位や、「desktopはmobile版を横へ広げればよい」という意味ではありません。狭幅でも広幅でも、それぞれの利用可能な空間に合わせて完成度を上げます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
local business website
smartphoneで主要情報の順序を先に成立させる
見るポイント
店名、価値提案、主要CTA、営業時間や場所など、狭幅でも必要な情報が自然なsource orderで読める状態を先に作る。その後、十分な幅がある時にnavigationの常時表示や写真との横並びを加える。
portfolio / service website
PCでは広い空間を使って関係を再構成する
見るポイント
mobileの一列構成を単にmax-widthで中央へ置くだけで終えず、本文行長を抑えながら作品と説明を並置したり、関連情報を同時に比較できるcolumnを作ったりしてwide viewport向けの利点を使う。
注意
誤解しやすい点
- mobile-firstを「mobileでは情報や機能を削ってよい」という意味にする。
- mobile layoutが完成した時点でresponsive対応も完成したと考え、desktop固有の余白・行長・比較可能性を設計しない。
- 見た目の並びだけをCSSで大きく入れ替え、source orderやkeyboard focus orderとの不一致を確認しない。
関連
関連する概念
出典