比較基準
観察
狭い画面での再配置
同じ情報ブロックを狭い画面へ置く時、広い画面の2列関係をそのまま縮める場合と、優先順に1列へ流し直す場合を比較する。
変える条件
狭い画面での情報ブロックの配置方法
固定する条件
- 画面の縦横比
- 情報ブロックの種類と数
- 情報の優先順位
- 各ブロックの濃さ
この観察は条件差を見るための自作比較。ここでの予想や観察を、一般的な心理効果や品質の証明として扱わない。
比較
条件ごとの見え方
2条件
比較案
優先順に1列へ流し直す
観察メモ
比較後に確認するポイント
- 2列を狭いまま維持する
同じ横幅の中で2列を維持するため、本文や補助情報へ使える横幅が小さくなる。
- 優先順に1列へ流し直す
情報の順序を保ちながら1列へ流し直し、各ブロックに横幅を確保する。
仮説
比較前に置いた予想
狭い画面でも2列を維持すると各領域の横幅が小さくなる。情報の優先順を保って1列へ流し直すと、各領域へ使える横幅を確保しやすい。
観察を制作へ持ち帰る
レスポンシブレイアウトでは、広い画面の形を縮小して保つことより、利用できる幅に応じて内容の順序・読みやすさ・操作への到達を保つことを優先する。どの配置が適切かは内容と利用条件で変わるため、常に1列が正解という意味ではない。
指示練習
判断を指示に変える
AIでも人でも、結果だけでなく変更条件と確認条件を分けて伝える。
- 変える
狭い画面での情報ブロックの配置方法
- 残す
画面の縦横比 / 情報ブロックの種類と数 / 情報の優先順位 / 各ブロックの濃さ
- 方向を決める
どちらの方向へ、どの程度変えるかを自分の目的に合わせて言葉にする。
- 確認する
出力を見て何が変わったか、何を採用するか、次に何を直すかを言葉にする。