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

レスポンシブデザインは「画面サイズに応じてレイアウトを変える」技術。モバイルファーストは「まずモバイル向けに設計して、大画面に拡張する」という設計アプローチ。CSSで言うと、ベースのスタイルがモバイル用で、@media (min-width: 768px) {}でタブレット・PC向けを追加するのがモバイルファーストだよ

①モバイルユーザーが過半数、②小さい画面から始めると本当に必要なコンテンツと機能が明確になる、③PCから始めると情報過多になりモバイルに詰め込むのが大変、④Googleがモバイルファーストインデックス（スマホ版ページを評価基準）を採用。制約の厳しいモバイルから始める方が良いデザインになるんだよ

①タップターゲットは最低44×44px（Apple HIG推奨）、②リンクやボタン間に十分な間隔を空ける、③ホバー前提のUIを避ける（ツールチップ等）、④フォーム入力はinputのtype属性で適切なキーボードを表示（type="email"でメール用キーボード）、⑤スワイプやピンチなどのモバイルジェスチャーを活用する

①CSSはmin-widthメディアクエリで書く（小→大に拡張）、②画像はsrcsetとsizes属性で画面サイズに応じた配信、③ナビゲーションはハンバーガーメニュー→PC版はフルナビ、④不要なPC向けリソースをモバイルに読み込ませない。TailwindCSSのブレークポイント（sm、md、lg）はモバイルファーストの記法だよ