前回の続き——反応の次は「どの端末で使うか」
前回のH-08では、操作には必ず反応を返すというフィードバックの原則を学びました。今回のH-09では、その画面を「どの端末で使うか」に目を向けます。業務アプリだからパソコンだけ、とは限りません。経費の承認や日報の確認は、移動中のスマートフォンで行われることが多いのが現実です。画面幅が変われば、良い画面の条件も変わります。
このスライドのポイント
- H-08: すべての操作に反応を返す（フィードバック）を学んだ
- 今回: その画面を「どの端末で使うか」に目を向ける
- 業務アプリ＝パソコンだけ、とは限らない
- 経費の承認・日報の確認は、移動中のスマートフォンで行われることが多い
定義——レスポンシブデザインとブレークポイント
レスポンシブデザインとは、1つの画面を、画面幅などの条件に応じてレイアウトを変えて提供する設計です。パソコン用とスマホ用を別々に作るのではなく、同じ画面が幅に合わせて組み替わります。その切り替えが起きる幅のしきい値を、ブレークポイントと呼びます。変えるのは配置だけではありません。G-08やG-09で見た並べ方に加えて、ボタンなど操作対象の大きさ、そして限られた画面で何を優先して見せるかまでを設計します。
このスライドのポイント
- レスポンシブデザイン＝1つの画面を、画面幅などの条件に応じてレイアウトを変えて提供する設計
- ブレークポイント＝レイアウトを切り替える幅のしきい値
- 変えるのは配置（G-08/G-09の並べ方）だけではない
- 操作対象の大きさ（指で押せるか）、優先して見せる情報も変える
なぜ必要か——「PCでは完璧、スマホで崩壊」を防ぐ
これを知らないと、「パソコンでは完璧なのに、スマートフォンで開くと崩れて使えない」アプリを公開してしまいます。文字が小さすぎて読めない、ボタンが指で押せない、横に長い表がはみ出す、といった事故です。しかもAIへ「スマホ対応して」とだけ頼むと、ただ全体を縮小しただけの、やはり読めない画面が返ってくることがあります。何をどう変えてほしいかを、人間が具体的に指示する必要があります。
このスライドのポイント
- 知らないと: パソコンでは完璧なのに、スマートフォンで崩れて使えないアプリを公開してしまう
- 具体的な事故: 文字が小さすぎて読めない／ボタンが指で押せない／横長の表がはみ出す
- AIへ「スマホ対応して」だけでは、全体を縮小しただけの読めない画面が返ることがある
- 何をどう変えるかは、人間が具体的に指示する必要がある
構造——「縮める」のではなく「組み替える」
同じ経費一覧を例に、2つの表示を比べます。パソコンでは、日付・区分・金額・状態などを横に並べた表形式が読みやすい形です。一方スマートフォンでは、横幅が足りません。ここで大切なのは「縮める」のではなく「組み替える」ことです。1件ごとを縦に積み、主要な3項目だけを見せる形へ作り替えます。同じ情報でも、幅に応じて並べ方そのものを変える。これがレスポンシブの考え方です。
このスライドのポイント
- 同じ経費一覧を、パソコン表示とスマートフォン表示で比べる
- パソコン: 日付・区分・金額・状態を横に並べた表形式
- スマートフォン: 1件ごとを縦に積み、主要3項目だけを見せる
- 原則: 「縮める」ではなく「組み替える」
具体例——指で押せる大きさと、優先列
具体的な判断基準を挙げます。スマートフォンで承認ボタンを押すには、指で確実に押せる大きさ、目安として約44px四方が必要です。横に長い表を横スクロールさせるのは避け、優先度の高い列だけを残します。並べ方の切り替えには、G-09で見たGridの列数を、ブレークポイントで変えるのが定石です。パソコンでは3列、狭い画面では1列、というように条件で切り替えます。
このスライドのポイント
- スマートフォンで承認ボタンを押すには、指で確実に押せる大きさが必要（目安 約44px四方）
- 横長の表は横スクロールを避け、優先度の高い列だけを残す
- 並べ方の切り替えは、G-09で見たGridの列数をブレークポイントで変えるのが定石
- パソコンでは3列、狭い画面では1列、と条件で切り替える
技術サンプル——幅で列数を変えるCSS
今回のサンプルは、そのブレークポイントを表すCSSです。種別はcode、目的は「画面幅でレイアウトを切り替える書き方を1つ知る」ことです。読み方は3点あります。1つ目、上のドットlistは通常3列で並べる指定です。2つ目、アットマークmediaの行が幅600px以下という条件で、これがブレークポイントにあたります。3つ目、その条件のときだけ列を1列に変えています。実装はカテゴリIで詳しく扱いますが、いまは「幅で切り替える発想」だけ掴めれば十分です。
このスライドのポイント
- 種別: code
- 目的: 画面幅でレイアウトを切り替える書き方を1つ知る
- サンプル本体:
混同しやすい——「縮小表示」と「レスポンシブ対応」
混同しやすいのが、「縮小表示される」ことと「レスポンシブ対応している」ことの違いです。スマートフォンで開いたときに、パソコンの画面がそのまま小さく表示されるのは、成り行きの縮小にすぎません。文字が読めず、ボタンも押しにくいままです。レスポンシブ対応は、幅に応じて並べ方や優先情報を設計して変えたものです。見た目が収まっているかではなく、その幅で快適に操作できるかで区別します。
このスライドのポイント
- 縮小表示される（成り行き）: PC画面がそのまま小さく表示されるだけ。文字は読めず、ボタンも押しにくい
- レスポンシブ対応（設計）: 幅に応じて並べ方・優先情報を設計して変えたもの
- 区別の基準: 見た目が収まっているかではなく、その幅で快適に操作できるか
バイブコーディングでの確認点
AIへ画面を頼むときは、「スマートフォンの幅では何を優先して表示するか」を要件として先に渡します。これはH-04で学んだ、項目の優先順位づけを画面全体に広げたものです。生成された画面には、「この画面をスマホ幅で見たとき、操作できない箇所や読めない箇所はありませんか」と確認しましょう。実際に幅を狭めて確かめるのが確実です。
このスライドのポイント
- AIへ画面を頼むときは「スマホ幅では何を優先表示するか」を要件として先に渡す
- これはH-04の項目の優先順位づけを、画面全体へ広げたもの
- 生成後は、スマホ幅で操作できない・読めない箇所がないかを確認する
- 実際に画面幅を狭めて確かめるのが確実
まとめと次回への橋渡し
最後に一問一答です。レイアウトを切り替える幅のしきい値を、何と呼ぶでしょうか。（間）答えは、ブレークポイントです。では30秒でまとめます。レスポンシブデザインは、1つの画面を幅に応じて組み替える設計で、切り替えの境目がブレークポイントでした。大切なのは、縮めるのではなく組み替えること、そして優先情報と操作の大きさまで設計することです。次回はカテゴリH最終回、決めた規則を資産にするデザインシステムへ進みます。関連資料は「SaaS画面パターン100」「UI改善プロンプト50」です。
このスライドのポイント
- 一問一答: レイアウトを切り替える幅のしきい値を何と呼ぶ？ → ブレークポイント
- 30秒まとめ: レスポンシブ＝幅に応じて組み替える設計。縮めるのではなく組み替える。優先情報と操作の大きさまで設計する
- 次回: カテゴリH最終回、規則を資産にするデザインシステムへ
- 関連資料: 「SaaS画面パターン100」「UI改善プロンプト50」
