09. レスポンシブデザイン：
「モバイルファースト」の衝撃

1. モバイルファースト：なぜ「まずスマホ」なのか

私たちがWebサイトを開発するとき、通常は大きなディスプレイを備えたPCを使用します。そのため、つい「PCでどう見えるか」を優先して設計してしまいがちですが、これには大きな罠があります。

利用端末の割合はサイトによって異なるため、自分のサイトのアクセスデータを確認します。さらに、Googleは MFI（モバイルファーストインデックス） を導入しており、検索エンジンの評価基準も「スマホ版のサイト」が中心です。PC版を豪華に作り、後からスマホ用に削ぎ落とす「減算」の設計よりも、制約の多いスマホ版を最小構成として作り、後からPC用に拡張する「加算」の設計の方が、狭い画面で必要な機能を先に整理しやすくなります。どちらを基準にする場合も、スマホで本文や機能を欠落させないことが重要です。

2. Tailwind CSS による「加算」のスタイリング

Tailwind CSS の設計思想は、まさにモバイルファーストそのものです。プレフィックス（接頭辞）なしで書くクラスは「すべての画面サイズ」に適用され、画面幅が広くなった時だけ md: や lg: で上書きしていきます。

これにより、複雑なメディアクエリ（Media Queries）を CSS ファイルに延々と書く必要がなくなりました。

コードで見る「モバイルファースト」の美学

【比較１】広い画面を基準にCSSを書く例

/* PC向けに横並びにするが、スマホでは縦にするために打ち消しが必要 */
.container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 打ち消しが発生 */
  }
}

【After】モバイルファースト（Tailwind CSS）

<!-- 
  基本は flex-col (縦並び)。
  標準設定の md（48rem、通常768px相当）以上で flex-row にする。
-->
<div class="flex flex-col md:flex-row">
  ...
</div>

3. 画面サイズだけではない「モバイル」の制約

横幅を合わせた後も、指で操作できるか、文字を読めるか、大きな入力を処理できるかを分けて確認します。スマートフォンには次のような制約があります。

• タップターゲット： マウスカーソルのような精密な操作はできません。ボタンは十分な大きさ（44px以上推奨）と余白を確保する必要があります。
• フォントサイズ： 小さすぎる文字は、ピンチイン・アウトを強いることになり、UXを著しく損ないます。本文は16px程度を出発点に、書体や行間、表示端末で読みやすさを確認します。ブラウザの拡大操作も妨げないようにします。
• リソースの重さ： 回線と処理能力は端末・通信環境によって変わります。画像サイズやJSの読み込み量を確認し、対象の環境で動作を確かめます。

4. 画面の制約と表示の拡張を分ける

小さい画面で必要な情報と操作を先に決め、余白が増えたときに配置を広げる設計です。画面幅はリソース量や端末の種類そのものではないため、レスポンシブ表示と性能は別に確認します。

同じ本文と操作を残しながら、列数や余白を調整します。広い画面だけに重要な説明を置いたり、狭い画面で保存操作を省略したりしないようにします。

画面幅を変えて確認する項目

• ブレークポイント直前と直後：列数が変わる瞬間にボタンや説明が欠けないか。
• 長いファイル名とエラー文：横にはみ出さず、操作ボタンが画面外へ押し出されないか。
• 拡大表示：文字を200%にしても、説明や保存操作へ辿れるか。
• 実機の縦・横向き：キーボード表示やブラウザのバーがある状態で、画面下部の操作が隠れないか。

md: は「タブレットだけ」を意味するものではなく、設定した最小幅以上へ適用する条件です。端末名で決めるより、内容が窮屈になる幅を基準にレイアウトを調整します。表示幅の確認と、大きな画像を扱うときのメモリ確認は分けて行います。

見た目の切り替えと、メニューの操作状態を揃える

履歴書写真メーカーのbodyはflex flex-col md:flex-rowです。共通メニューも768 pxを境に表示と操作を切り替え、閉じたスマホメニューにはinertを設定します。見た目だけ隠して、キーボードのフォーカスが裏へ入る状態を避けるためです。

const desktop = window.matchMedia('(min-width: 768px)');
sideMenu.inert = !desktop.matches && !open;

これは本番の条件と状態更新の抜粋です。CSSの境界とJavaScriptの境界を合わせ、幅をまたいだ後も操作が一致するか確認します。アップロードボタンには最小高44 pxを設定していますが、これだけで全操作の使いやすさを保証するものではありません。制作解説から実ツールへ進み、狭い画面・拡大表示・長い説明で確かめます。

5. まとめ：猫の手ツールでの実践

「猫の手ツール」の証明写真作成画面は、小さい画面を縦並びにし、広い画面では作業領域を広げる構成です。

証明写真は「今すぐ必要」な場面で使われることが多く、ユーザーは外出先からスマホで操作することが想定されます。そのため、写真選択や保存などの主な操作を押しやすい位置に置き、PCで見ると広いワークスペースを活かしたプレビューが表示されるように調整しました。

配置が変わった後も、画像選択、編集、保存のすべてへ辿れるかを確認します。画面幅の検証と、スマホ実機のブラウザ・入力機器の検証は区別して記録します。

参考資料

• Google：モバイルファーストインデックスのベストプラクティス（別タブで開く）