制作課題
レスポンシブな画面を設計する
同じ内容と主要操作を、広い画面と狭い画面の両方で読みやすく操作しやすい構成へ整理する制作課題。
目標
画面幅が変わっても情報の優先順位、読みやすさ、操作の発見しやすさ、操作結果の理解を保てる設計を作り、その判断理由を説明する。
関連する学習項目
制約
- 同じ主要内容と主要操作を広い画面・狭い画面の2条件で扱う。
- 狭い画面を広い画面の単純縮小にしない。
- 色だけを操作可能性や状態の唯一の手がかりにしない。
- 主要な操作を一つ選び、操作前の手がかりと操作後のフィードバックを両方設計する。
途中確認
- 最初に内容の優先順位を文章で整理する。
- 広い画面と狭い画面で内容の順序が不自然に変わっていないか確認する。
- 文字量を増減させず、配置変更だけで読みやすさを保てるか確認する。
- 主要操作について、操作できると気付けるか、操作後の状態を理解できるかを別々に確認する。
振り返り
- 画面幅が変わった時、何を維持し、何を配置変更したか。その理由を説明できるか。
- 最初に読む情報と次に読む情報の関係は、両方の画面で分かるか。
- 操作可能性を伝える手がかりと、操作結果を伝えるフィードバックを区別できているか。
- 文字を大きくした場合にも内容や操作が欠けずに流れ直せそうか。