対応づけ──並びそのものが、使い方を伝える｜デザインの原則 #3

今回のテーマは、対応づけ（mapping）です。操作する部分と、それが動かす対象の並びがそろっていれば、説明を読まなくても、どれを操作すれば何が動くのかが分かります。身のまわりの道具から入り、Webの画面をキーボードで移動する順序まで見ていきます。

ふだん気にも留めない壁のスイッチやコンロのつまみにも、UI/UXの考え方は働いています。使いやすいものほど、その工夫は目立ちません。

会議室の壁に、照明のスイッチが横一列に4つ並んでいる。どれが天井のどの照明なのか分からず、「どれだっけ」と端から順に押しては消してを繰り返したことはないでしょうか。スイッチの横に「窓側」「前方」と小さく書き添えてあっても、文字を読み、天井を見上げ、もう一度スイッチへ目を戻す——という往復が残ります。照明は部屋の前後左右に広がっているのに、スイッチは一直線に並んでいて、2つの並びの形が違うからです。

家庭のコンロでも、同じ往復が起きがちです。奥と手前にバーナーがあるのに、つまみが手前に横一列で並んでいると、「これは奥の火口だったか」と一度考えてから回すことになる。この往復は、操作する側と動く側の並びが別々の形をしているために生まれます。私たちサンアンドムーンがUI設計の出発点を「並びが意味を伝えること」に置くのは、使う人が文字を読みに行く前に、配置がすでに多くを伝えているからです。

この記事の要点

• 対応づけとは、操作する部分と、それが動かす対象の並びをそろえ、説明を読まなくても関係が分かるようにすること
• 並びが食い違っていると、ラベルを足しても「読んで照らし合わせる」手間は残るため、先に並びそのものを見直す
• キーボードで移動する順序も対応づけとして読め、W3Cは見た目との完全な一致より、意味と操作が保たれる順序と、見た目が示す関係を保つことを求めている

対応づけとは──操作と対象の並びをそろえること

対応づけとは、操作する部分と、それが動かす対象との関係を、並びや向きで読み取れるようにすることです。スイッチの並びが照明の並びと同じ形をしていれば、「左端のスイッチは左端の照明」と見ただけで分かります。この記事では、画面の上で操作と結果の関係を並びで伝える場面に範囲を絞ります。

認知科学者のドナルド・A・ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』で、発見可能性を支える5つの手がかりの1つに対応づけを挙げています。残る4つはアフォーダンス、シグニファイア、制約、フィードバックで、5つの全体像は発見可能性と理解──使い方が見ただけで伝わる設計｜デザインの原則 #1で整理しました。最初の2つ、アフォーダンスとシグニファイアの違いは、前回のアフォーダンスとシグニファイア──「押せそう」を伝えているのは、どちらか｜デザインの原則 #2で取り上げています。この記事では、対応づけを「どれがどれを動かすのか」に答える手がかりとして扱います。

並びで関係が読めると、使う人は文字を確かめる前に手を動かせます。ラベルを読み、対象を見て、もう一度操作部へ目を戻す。冒頭の会議室で起きていた往復が、そもそも要らなくなるのです。

ラベルより先に、並びをそろえる

並びが食い違っているとき、最初に思いつくのはラベルを足すことです。スイッチに「窓側」と書く、つまみの横に小さな図を添える。ラベルは確かに助けになりますが、読んで、対象と照らし合わせて、操作部へ戻るという手順そのものは減りません。急いでいるとき、手元が暗いとき、細かな文字が読みにくいときほど、この手順は抜け落ちやすくなると考えられます。

並びをそろえれば、読んで照らし合わせる手順を踏まずに、「見れば分かる」状態になります。たとえばスイッチを、部屋の見取り図と同じ向きに並べておけば、「窓側の照明は窓側のスイッチ」と、位置がそのまま答えになるのです。ラベルはその上で、並びだけでは区別しきれないところを補う役に回ります。並びは関係を伝え、ラベルは名前を伝える。

画面の上の対応づけ──近さと位置と向きが関係を伝える

画面の上につまみはありません。それでも対応づけは、近さ、位置、向きの3つで働いています。どれも文字を1つも足さずに、「どれがどれか」を伝えられる手がかりです。

1つ目は、入力欄とラベルの近さです。「お名前」というラベルが上の欄と下の欄のちょうど中間に置かれていると、「どちらの欄の名前だろう」と一瞬迷います。近くにあるものは関係があるものとして読まれる——“まとまり”は無意識に生まれる──UXに活かすゲシュタルト原理の3つの視点で扱った近接性がここで働くので、ラベルを対応する欄へ寄せ、次の欄との間を空けるだけで関係は伝わります。

2つ目は、タブと、切り替わる表示領域の位置です。タブのすぐ下で内容が入れ替われば、「押した場所」と「変わった場所」がひと続きに見えます。選ばれているタブを下の領域と地続きの形にするデザインが多いのも、この関係を目で追いやすくする工夫といえます。押したタブから離れた場所で表示が変わる画面では、「どこが変わったのか」を探すひと手間が加わるのです。

3つ目は向きです。スライダーを右へ動かすと値が大きくなり、左へ戻すと小さくなる。価格の絞り込みや音量の調整でこの向きがそろっているのは、横書きの文字を左から右へ読むことや、数直線では右へ行くほど値が大きくなることに慣れているからでしょう。向きが慣れと一致していれば、使う人は目盛りの数字を読む前に、どちらへ動かせばいいかを判断できます。

見た目の並びが示す関係を、操作の順序でも保つ

キーボードで画面を移動する順序も、対応づけの問題として読めます。マウスを使わない人は、Tabキーを押すたびに、リンクやボタン、入力欄へ枠（フォーカス）を1つずつ移していきます。このとき枠が見た目の並びと大きく食い違う順で飛ぶと、画面の上の「どれの次がどれか」という関係が崩れるのです。

美術館で、展示の番号札をたどって歩く場面を思い浮かべてください。1番の次の2番が部屋の反対側の隅にあり、3番がまた入口の横へ戻ってくる。作品は同じでも、番号のたびに「次はどこだろう」と探し直すことになる。

W3Cの解説「Understanding Success Criterion 2.4.3: Focus Order」によれば、WCAG 2.2 の達成基準 2.4.3（レベルA）が求めているのは、移動の順序が意味や操作に影響するとき、フォーカスが「意味と操作性を保つ順序」で移ることです。基準の狙いは、使う人が内容について一貫したメンタルモデルを組み立てられるようにして、混乱を減らすことだと説明されています。

注目したいのは、この解説が見た目との完全な一致までは求めていない点です。フォーカスの順序は必ずしも見た目のレイアウトに従う必要はない、としたうえで、その条件に、順序が論理的であることと、見た目が示す内容の階層や関係が保たれていることを挙げています。例に出てくるのは2段組みの画面で、2つの段が互いに独立し、意味にも操作にも影響しないなら、右の段から先にフォーカスが移っても「不適合ではない」とされています。そのうえで、フォーカスの順序が見た目のレイアウトから読み取れる読み順を補強するようにすることを、「望ましい実践」として勧めているのです。

画面拡大ソフトを高い倍率で使っている人への言及もあります。画面のごく一部しか見えていないため、フォーカスの順序が論理的でないと、入力欄を別の文脈のものと取り違えるおそれがある、というのです。見えている範囲が狭いほど、並びが伝える関係に頼る場面は増えると考えられます。

自分のサイトで確かめるなら、マウスから手を離し、ページの先頭からTabキーを押していくのがいちばん早い方法です。「枠がどこへ移ったか」が見えるか、見た目の並びから大きく離れた場所へ飛ばないかを、上から順に追うだけです。W3Cによれば、スクリプトや tabindex 属性を使っていなければ、移動の順序はHTMLの中に要素が現れる順です。CSSで見た目の位置だけを入れ替えた箇所は、HTMLの順と画面の並びが離れやすいので、そこから見ると効率よく確かめられます。

ダイアログも見どころの1つです。解説の例では、モーダルダイアログを閉じると、フォーカスは開いたときのボタンか、その次の要素へ戻ります。開いた場所へ、閉じたあとの操作も戻ってくる——これも対応づけの1つの形です。

注意点

「自然な並び」は、誰にとっても同じとは限りません。W3Cの解説が2段組みの例を「左から右へ読む西洋の書字体系では」と前置きしているように、どの順序を自然と感じるかは、文字を読む向きや慣れた機器で変わります。表についても、「1行ずつ進む順」と「1列ずつ進む順」のどちらも内容の論理的な関係を反映しうる、という書き方です。正しい並びが1つに決まるわけではなく、評価は利用状況によって変わります。

画面の幅が変われば、並びも変わります。スマートフォンの縦長の画面では、パソコンで横に並んでいた要素が縦1列に積み直されます。横並びでは「左の操作が右の表示を変える」という関係が見えていても、縦に積むと操作部分と表示部分が1画面に収まらなくなることもある。画面の幅ごとに、この関係が見て取れるかを確かめておきたいところです。

もうひとつ見落とせないのが、並びをそろえたあとのラベルの役目です。並びが伝えるのは関係で、ラベルが伝えるのは中身の名前です。どちらか一方で済ませようとせず、並びで関係を示してからラベルで名前を添えるほうが、迷う場面を減らせます。

よくある疑問

ラベルを付ければ、並びは気にしなくてよいですか

ラベルは助けになりますが、文字を読んで対象を確かめる手間までは消えません。並びで関係を示したうえで、ラベルには名前を添える役を任せると、2つの強みがどちらも生きます。急いでいる場面や、画面の一部しか見えていない場面ほど、並びが先に働きます。

スマートフォンの縦長の画面では、どう考えればよいですか

見るのは、縦に積み直したあとの並びで、操作と結果が隣り合っているかどうかです。たとえばパソコンで左に絞り込み、右に一覧という画面を縦に積むと、絞り込みの操作と、変わった一覧が1画面に収まらないことがあります。操作のすぐ近くに「12件に絞り込みました」と結果を返せば、離れてしまった操作と結果をつなぎ直せます。

見た目の並びとキーボードの移動順は、必ず同じにすべきですか

W3Cの解説は、フォーカスの順序が必ずしも見た目のレイアウトに従う必要はないとしています。求められているのは、順序が論理的で、見た目が示す階層や関係が保たれていることです。そのうえで、見た目から読み取れる読み順を補強する順序を、望ましい実践として勧めています。迷ったら「見た目の読み順に合わせる」を基本にし、外すときは意味と操作が崩れないかを確かめる、という順で考えると判断しやすくなります。

画面の並びと人の知覚の関係をさらにたどりたい方は、“まとまり”は無意識に生まれる──UXに活かすゲシュタルト原理の3つの視点と、誤操作が生まれる構造を扱った見えていても、伝わらない──誤操作を生む錯覚の構造もあわせてご覧ください。私たちはUI／UXコンサルティングで、お客さまと実際の画面を操作しながら、ボタンと表示の位置関係や、キーボードで移動する順序を一緒に確かめています。

執筆・監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。