モバイルファースト とは？

レスポンシブデザインは画面サイズに応じて表示を調整する設計だよ。モバイルファーストは、まず小さい画面で必要な内容と操作を考えて大画面へ拡張するアプローチ。CSSでは基本のスタイルを置き、たとえば@media (min-width: 768px) {}で大画面用の調整を加えるんだ。768pxは一例で、内容に合う幅を選ぶよ。

小さい画面では全部を詰め込めないので、大事な情報と操作を先に選びやすいんだ。利用者の端末や通信環境も考える。ただしモバイル利用率はサイトによって違い、この順序だけで必ず良いデザインや高速表示になるわけではないよ。Googleがモバイル版の内容を使ってインデックスや順位を決める仕組みとも、設計順序は別なんだ。

押せる範囲を十分に広くして、隣のボタンとの間隔も確保しよう。WCAG 2.2のAA基準には24×24 CSS pxという最小サイズと例外があり、AAAの強化基準は44×44 CSS pxだよ。すべてのボタンに一律44px必須という意味ではない。ホバーだけで操作や説明を出さず、タップやキーボードでも使えるように考えるんだ。

CSSで小画面の基本スタイルから拡張し、各画面で内容と操作が使えるか確認しよう。Tailwind CSSも、接頭辞なしのクラスが全幅の基本になり、mdなどを付けると指定幅以上に適用されるよ。smはスマホだけに適用する意味ではない。メニューを必ずハンバーガーにする必要もなく、画像や読み込むリソースは表示速度を確認して調整するんだ。