付録 A 用語集
本文で出てきた言葉を、もう一度確かめたいときのための用語集です。すべてを暗記する必要はありません。
短い説明だけでは足りない言葉には、詳しく扱った章へのリンクを付けています。専門用語は、画面へ貼る正解の名前ではありません。目の前の画面で、どの要素にどのような関係があるかを先に確かめてください。
まとまりと見え方
近接の原則
近いもの同士が、一つのまとまりに見えやすいことです。Web では、項目名と入力欄、画像と説明、カード内とカード外の間隔を考える手がかりになります。近ければ必ず関係する、余白は広いほどよい、という意味ではありません。詳しくは第2章で扱います。
類同の原則
色、形、大きさなどが似たものを、同じ仲間だと感じやすいことです。同じ働きのボタンを同じ見た目にするときに役立ちます。ただし、見た目が同じだけで、HTML 上の働きまで同じになるわけではありません。第4章を参照してください。
閉合
輪郭が途中で切れていても、残りを補って一つの形として見ることです。すべてを線で囲まなくてもまとまりが伝わる場合がありますが、省略すれば必ず美しくなるわけではありません。第5章で図を使って説明します。
共通領域
同じ囲いの中にあるものが、一つのまとまりに見えやすいことです。カードや入力項目のグループが例です。囲みを増やしすぎると、どの境界が重要なのか分かりにくくなります。
図と地
前にある対象と、その背景を分けて見る関係です。ページの上へ重なる確認画面では、確認画面が「図」、その後ろのページが「地」になります。背景を暗くするだけで、操作の前後関係まで正しくなるわけではありません。
良い連続
線や並びが滑らかにつながると、一つの流れとして見えやすいことです。要素の端をそろえた列や、グラフの線を読むときに関係します。整列と似ていますが、同じ意味ではありません。
プレグナンツ
複雑な形を、できるだけ安定したまとまりとして見ようとする働きをまとめた歴史的な言葉です。「単純な画面ほど必ず優れている」というデザインルールではありません。
運動知覚
時間とともに位置や形が変わるものを、動きとして見ることです。通知の移動、画像の切り替え、読み込み中の表示などに関係します。動きは注意を引きますが、内容の理解を必ず助けるとは限りません。第6章を参照してください。
整列
複数の要素が、同じ左端、右端、中心、文字の基準線などを共有することです。そろえる基準は一つではありません。第3章では、基準ごとに別の図で説明します。
見た目に合わせる位置調整
数値上の中心へ置いた形がずれて見えるときに、形を保ったまま位置だけを少し動かすことです。英語では optical alignment と呼ばれます。感覚だけで自由に動かすのではなく、数値上の位置と調整後を比べ、何を直したか分かるようにします。
注意、記憶、選択
注意
多くの情報の中から、一部へ意識や処理を向ける働きです。大きいものや動くものが注意を引くことはありますが、目を向けたことと、内容を理解したことは同じではありません。
選択的注意
目的に合う情報へ注意を向ける一方、ほかの情報を取りこぼすことです。利用者が何を探しているかによって、同じ画面でも見つけるものは変わります。第10章で扱います。
視覚的顕著性
周囲との色、大きさ、明るさ、動きなどの差によって目立つ性質です。目立つものが、利用者にとって重要なものとは限りません。
視覚的階層
文字の大きさ、太さ、色、位置、余白などを使い、情報の強さや読む順番に差を作ることです。大きさだけの順位表ではありません。
ワーキングメモリ
情報を短い間覚えながら、考えたり比べたりする働きです。前の画面の番号を覚えたまま入力する場面などで使います。誰でも同じ個数までしか覚えられない、という単純な決まりではありません。第11章を参照してください。
チャンク化
複数の情報を、知識や規則によって一つのまとまりとして扱うことです。見た目を囲っただけで、記憶の中でも自動的に一つになるわけではありません。
認知負荷
考える、覚える、学ぶときにかかる負担を表す言葉です。「情報が多くてごちゃごちゃしている」という感想の言い換えではありません。探す場所が多いのか、覚え続ける必要があるのか、選択肢を比べにくいのかまで分けると、直す場所が見えます。
再生
答えが見えていない状態で、記憶から思い出すことです。コマンドを最初から入力する場面が例です。
再認
表示された候補を見て、知っているものかどうかを判断することです。最近使った項目や入力候補から選ぶ場面が例です。第12章では、再生と再認を別々の画面で比べます。
ヒック・ハイマンの法則
選択肢の情報量と、選んで反応するまでの時間との関係を扱う研究上のモデルです。「メニューは七個以下にする」といった個数のルールではありません。Web では、分類、検索、絞り込みを考える入口として使えます。第13章を参照してください。
フィッツの法則
ポインターを、ある距離だけ動かして一定の広さの対象へ合わせる時間を扱うモデルです。「すべてのボタンは必ず何ピクセル以上」という直接の寸法ルールではありません。マウス、指、姿勢、画面の揺れなども合わせて考えます。第14章を参照してください。
予想と操作後の返事
メンタルモデル
物事がどう動くかについて、経験から作られた理解や予想です。買い物かご、保存、戻る操作などで、利用者は過去の経験を持ち込みます。すべての人が同じ理解を持つわけではありません。第15章で扱います。
フィードバック
操作を受け取ったこと、処理中であること、成功や失敗などを画面から返すことです。色の変化、文章、音、振動などを使えます。単なるアニメーションの別名ではありません。
システム状態の可視性
いま何が起きているのかを、適切な時点で利用者へ伝える考え方です。「送信中」「保存しました」「通信できませんでした」などが例です。画面へ文字を一つ置けば終わりではなく、次に待つのか、直すのか、やり直すのかも伝えます。
ヤコブの法則
人は、ほかの Web サイトで覚えた使い方を新しいサイトにも持ち込む、という実務上の考え方です。慣れた方法を借りると学びやすくなりますが、独自の表現をすべて禁止する法則ではありません。
フォン・レストルフ効果
似た項目が続く中で、一つだけ異なる項目が記憶に残りやすくなることがある、という現象です。目立たせれば必ず押される、という法則ではありません。
知識の呪い
自分が知っていることを、知らない人の立場から想像しにくくなる傾向です。制作者だけが知っている略語や手順を、説明なしで画面へ置く問題を考える手がかりになります。
確証バイアス
自分が正しいと思っている説明に合う情報を集めやすい傾向です。好きな案の長所だけを見るのではなく、別の原因や反対の結果も考える必要があります。
馴化
同じ刺激が何度も続くと、反応が小さくなることです。通知やアニメーションを繰り返せば、いつでも同じように注意を引けるとは限りません。
一貫性
同じ意味や働きへ、同じ見た目、言葉、動きを使うことです。次に起こることを予想しやすくします。危険な操作など、違いを伝えるための例外まで消すことではありません。
Web 制作と調べ方
デザイントークン
色、余白、文字の大きさなどへ名前を付け、複数の画面で共有する仕組みです。CSS のカスタムプロパティなどで実装できます。値を共有しただけで、使い方まで正しくそろうわけではありません。
レスポンシブ Web デザイン
画面や部品の幅、文字の大きさ、入力方法などの条件に応じて、内容を読みやすく組み直す設計です。PC 版をそのまま小さく縮めることではありません。第22章を参照してください。
再配置
画面幅や拡大率が変わったとき、内容が折り返されたり縦へ積み直されたりすることです。英語では reflow と呼ばれます。
コンテナクエリ
画面全体ではなく、部品が置かれた領域の広さなどを条件にして、その部品の CSS を変える仕組みです。同じカードを広い本文と狭いサイドバーの両方で使うときに役立ちます。
ユーザビリティ
特定の人が、特定の状況で、目的をどの程度達成できるかを表す考え方です。製品に一つだけ付けられる「使いやすさの点数」ではありません。
ユーザビリティテスト
人が試作品やサービスで目的を達成する過程を見て、問題を知る方法です。感想だけを集めることとは異なります。実施には説明と同意、記録の扱い、途中でやめられる条件が必要です。第24章で著者の例を説明します。
考えていることを声に出す方法
画面を使っている間に、考えていることを言葉にしてもらう方法です。英語では think aloud と呼ばれます。発話は考えの手がかりになりますが、心の中をそのまま読み取れるわけではなく、話すこと自体が操作へ影響する場合もあります。
観察
どの画面で、いつ、何が起きたかを、ほかの人が確かめられる形で表すことです。「ボタンが分かりにくい」ではなく、「商品名の入力欄より価格の文字が近くにある」のように書きます。
別の説明候補
同じ出来事に対して考えられる、もう一つの原因です。ボタンを押しても画面が変わらないとき、ボタンが動いていない場合だけでなく、通信中を表示していない場合も考えられます。
判断の記録
何を見て、何を変え、何が分かり、なぜ公開や保留を選んだのかを残す記録です。結論を正しく見せるためではなく、あとから判断の理由と、まだ分からないことを確かめるために使います。