共通テスト情報I 配置と視線誘導—まとまりと読む順序から画面の改善案を選ぶ｜武蔵野個別指導塾

入力欄と説明の距離、整列、余白と強弱を条件ごとに比較し、読む順序から配置と視線誘導を読み解きます。

よくあるのは、申込画面を作った高校生が、入力欄から離れたところに説明を置き、どの欄に対応する説明かを読み手が取り違える場面です。説明文の内容が正しくても、配置によっては別の欄の条件に見えます。画面の見た目を好きかどうかで決める前に、読み手が何を見て、次にどこへ進む必要があるかを追いましょう。

画面のどこを根拠に選ぶか

配置の問題では、まず利用者の目的と作業の順序が与えられます。そのうえで、複数の画面案を比べ、条件を満たす改善案や、その理由を選びます。見た目の印象を尋ねる問題ではなく、与えられた目的に対して配置がどう働くかを問う問題です。

出方の1つは、項目名、説明、入力欄を正しい組にして置く型です。近くにあるものは一まとまりとして捉えられやすいので、対応する説明と欄の距離に注目します。もう1つは、読む順序に沿って見出し、内容、操作を並べる型です。3つ目は、余白や文字の強弱を調整した候補から、重要な情報が埋もれない案を選ぶ型です。

どの型でも、条件を満たすかと、見た目が好みかを分けます。たとえば「明るい雰囲気が好き」は個人の好みです。「入力前に制約を読める位置にある」は、画面と指定された手順を照合できます。ただし、近い配置や大きい文字が常に正解とは限りません。隣の組と区別できるか、他の必要な情報も読めるかまで確認します。

まとまりと順序を読む道具

図1のように、対応する説明と欄を近くに置くことを近接といいます。同じ組の内部を近づけ、別の組の間にはそれより広い余白を取ると、どこからどこまでが一組かを読み取りやすくなります。単に全要素を画面の中央へ集めることではありません。別の項目まで詰めると境界が曖昧になります。

図1では「氏名」とその入力欄が上段、「学年」とその入力欄が下段の組です。2つの組の間隔は、各ラベルと欄の間隔より広く、入力欄の左端はそろっています。整列は、位置をそろえて関係や順序を追いやすくする工夫です。左端をそろえても説明と欄の対応が逆なら、正しい関係は伝わりません。

余白は、空いているから無駄なのではなく、組の境界を示すためにも使います。十分な余白がない場合は、関連する要素をまとめる一方、関係の薄い要素を離す方法を考えます。画面が狭いときに余白を増やしすぎると、必要な部分が画面外に移ることもあります。問題が一画面内での操作を条件にしているなら、その条件も同時に見ます。

強弱は、見出しや重要な注意を周囲と区別することです。文字の大きさや太さの違いが手掛かりになります。ただし、全部を強くすると相対的な違いが小さくなり、優先順位を示せません。色の好みや飾りの多さを、読み取る順序の証拠にしないことも大切です。視線誘導は配置や強弱で目を向けやすくする工夫であり、必ずその順に見ると断定するものではありません。

基本例題：説明をどの欄に添えるか

文化活動の参加申込画面には、連絡名と参加人数の2項目があります。利用者はそれぞれの説明を読んでから、その直後に対応する欄へ入力します。連絡名の説明は「呼び名を記入」、参加人数の説明は「本人を含む人数」です。別の項目を混同させず、上から連絡名、参加人数の順で入力できる案を1つ選び、記号で答えてください。

• ア：上から連絡名の説明、連絡名の欄、広い余白、参加人数の説明、参加人数の欄。2つの欄の左端はそろっています。
• イ：上から連絡名の説明、参加人数の説明、連絡名の欄、参加人数の欄。全要素の間隔は同じです。
• ウ：上から参加人数の説明と欄、広い余白、連絡名の説明と欄。欄の左端はそろっています。
• エ：上から連絡名の説明と参加人数の欄、広い余白、参加人数の説明と連絡名の欄。

図2のように、条件を順番と組の2つに分けて候補を見ます。図の丸と横線は、それぞれ条件を満たすことと満たさないことを表します。整列は有用ですが、順序と対応を満たすという設問の条件を、それだけで代用できません。

答えはアです。連絡名の説明を読んだ直後に連絡名を入力し、組の間の余白を越えて参加人数の説明と欄に進めます。欄の左端もそろっており、入力する場所を縦に追えます。順序と対応の両方が問題の指定に合います。

イは説明が2つ続くため、各説明の直後に対応する欄がありません。欄を上から連絡名、参加人数と見れば順序自体は合いますが、説明と欄の組が離れます。ウは説明と欄の対応は合う一方、参加人数から始まるため指定の順序に反します。エは2つの説明の直後にある欄がそれぞれ別の項目です。欄の並びは参加人数、連絡名なので、順序も反します。

全候補を点検すると、整列や余白があるという長所があっても、必須条件に反する案は残りません。逆に、説明と欄を近くしたことだけで、読み手が常に間違えないとまでは言えません。実際の使用時には、読み手が迷う場所を観察して再検討できますが、この問題の答えは与えられた配置と条件で決めます。

条件が変わったら何を残すか

次は、図書の受取画面を考えます。利用者は最初に受取場所を選び、次に受取日を選びます。受取日の選択肢の直前には「場所によって選べる日が異なる」という注意が必要です。画面は一度に全体が見える広さとします。次の3案から、順序、注意の位置、項目の区別をすべて満たす案を1つ選び、記号で答えてください。

• ア：受取場所の選択欄、受取日の選択欄、注意の順に並べ、組の間には余白を置く。
• イ：受取場所の選択欄、注意、受取日の選択欄の順に並べ、注意と受取日の欄を近づける。場所の組と日の組には余白を置く。
• ウ：注意、受取日の選択欄、受取場所の選択欄の順に並べ、全体を同じ間隔にする。

答えはイです。場所を先に選び、次の日の欄の直前で注意を読めます。注意は受取日に関するものなので、その欄に近い位置に置きます。さらに、場所と日のまとまりの間には余白があり、境界を捉えられます。アは順序と区別を満たしますが、注意が受取日を選んだ後に現れます。ウは注意が日の直前にあっても、日を場所より先に選ぶ並びです。全要素を等間隔にした点も組の境界を示す条件には足りません。

ここで、注意を画面の最上部に置けば目立つという意見を考えます。目立つことと、受取日の直前にあることは別です。冒頭に置いた注意を後で思い出せるかは、この資料だけでは決まりません。条件が「操作前のどこか」へ変われば別の候補も検討できますが、元の条件では位置を勝手に緩めないでください。

また、一画面に入るという前提を外すと、画面外に押し出されるかどうかが新たな検討点になります。表示の寸法が与えられていなければ、どの案が収まるかは判断できません。順序や対応について読み取れることと、資料にない寸法を区別して答えます。

間違いから配置を直す

基本例題でイを選び、「説明が全部先にあるので、入力前に読める」と答えたとします。確かに2つの説明は入力欄より前にあります。しかし、指定は単に入力前に読むことではなく、各説明の直後に対応する欄があることです。図3のように、説明が続く配置から、説明とその欄を一組ずつ並べる配置へ直します。

図3の左では、連絡名の説明と連絡名の欄の間に参加人数の説明が入っています。右では連絡名の組と参加人数の組が分かれ、組の間に余白があります。矢印は直す方向を表し、利用者が必ず移動する経路を表すものではありません。

別の誤りは、ウの欄が整列していることだけを見て選ぶことです。整列は入力位置を追う助けになりますが、参加人数から始まる順序は変わりません。直すには、まず順序を連絡名、参加人数に並べ替え、各説明と欄の対応を維持します。最後に整列を確認すると、見た目の長所と設問の条件を混同せずに済みます。

エのように、説明と欄が近くても組み合わせ自体が逆なら、余白を広げても誤りは直りません。何と何を近づけるべきかを先に決め、その後で組の境界や位置を整えます。配置の語を覚えるだけでなく、組の中身を声に出して対応させると、取り違えに気づけます。

練習：条件に戻して候補を調べる

次の問題はそれぞれ独立しています。各問の指定に従い、記号で答えてください。解答は問題の後にまとめています。

問1

備品の貸出画面では「品名」の説明と欄、「返却日」の説明と欄を、それぞれ近づけます。品名の組を先にし、2組の間には組の内部より広い余白を設けます。条件を満たす案を1つ選んでください。

• ア：品名の説明と欄、広い余白、返却日の説明と欄。
• イ：返却日の説明と欄、広い余白、品名の説明と欄。
• ウ：品名と返却日の説明、同じ間隔で品名と返却日の欄。

問2

展示の案内画面では、見出し、場所、開始時刻の順に読ませたいとします。見出しは他の2項目より大きく、場所と時刻は同じ大きさにします。条件を満たす案を1つ選んでください。

• ア：見出し、場所、時刻の順で、3項目を同じ大きさにする。
• イ：見出し、場所、時刻の順で、見出しを他の2項目より大きくし、場所と時刻は同じ大きさにする。
• ウ：見出し、時刻、場所の順で、見出しを他の2項目より大きくする。

問3

注文画面には、数量欄の直前に「上限あり」という注意が必要です。数量欄と注意の関係を明確にする配置を1つ選んでください。どの案も数量欄は1つで、注意の内容は同じです。

• ア：注意を数量欄の直後に置き、間を広くする。
• イ：注意を画面の反対側に置き、別の説明をその間に置く。
• ウ：注意を数量欄の直前に置き、両者を近づける。

問4

画面の評価条件を考えます。利用者が案内の見出しから申込ボタンまでの順序を追いやすい案を選ぶとき、条件として直接照合できるものを1つ選んでください。

• ア：作成者が最も好きな装飾である。
• イ：見出し、説明、ボタンが指定された順に並んでいる。
• ウ：飾りが多いので誰も迷わない。

練習の答えと根拠

問1はアです。品名の説明と欄が先の組、返却日の説明と欄が後の組で、その間が広くなっています。イは各組の対応と余白が合っても順序が逆です。ウは説明と欄の間に別項目が入り、組の間の余白も指定どおりではありません。答えを画面に戻すと、品名から返却日へ組を越えて進めます。

問2はイです。見出しから場所、時刻へ進む順番と、見出しだけを相対的に大きくする条件を両方満たします。アは順番が合っても大きさに差がありません。ウは強弱が合っても場所と時刻が逆です。大きな見出しがあるという一条件だけでウを選ばず、項目の並びも追います。

問3はウです。注意が数量欄の直前にあり、対応する2要素が近くにあります。アは注意が入力後に置かれ、しかも欄から離れています。イは欄より前かどうかにかかわらず、間に別の説明があり対応が曖昧です。ウの注意を数量欄に結び付けて読み直すと、指定の位置に戻せます。

問4はイです。画面上の並びを指定された順序と照合できます。アは作成者の好みであり、利用者の順序に合う根拠にはなりません。ウは装飾の量から全員の行動を断定しており、与えられた条件だけでは確かめられません。実際にどの程度迷うかは、画面の利用を調べて確かめる別の問いです。

条件の優先順位を試す

画面案に良い点と悪い点が同時にあるときは、長所の数で機械的に決めないでください。必須条件を1つでも外せば、その条件を満たす案としては選べません。たとえば説明が読みやすい大きさでも、対応する欄が入れ替わっていれば、正しい欄へ入力するという目的を支えられません。逆に、必要な条件を満たす複数の案が残る場合は、設問が追加の基準を与えているか調べます。与えていない好みを持ち込んで、唯一の正解を作らないようにします。

覚えておきたいこと

• 対応する説明と欄を近づけ、別の組との間に余白を取ります。
• 整列と強弱は順序を追う手掛かりですが、組の正しさも確認します。
• 好みや装飾ではなく、利用者の目的と指定条件に候補を戻します。

つまずいた位置を探す

答えが合わないときは、選択肢の印象から見直すより、まず作業順を短い矢印で書き出します。次に、各説明と欄を線で結び、別の組をまたいでいないかを確かめます。個別指導で確認するときも、どの組を対応させたか、どの条件で候補を外したかを表に戻して説明できるかを見ます。

正しい組と順序が見えれば、余白や強弱が何を助けるかも具体的に判断できます。