観察する
条件を揃えて違いを見比べ、何が変わるかを自分で観察する。
-
構成
スケールと相対的な強さ
同じcanvas、同じ3要素、同じtone、同じ左右要素の位置と大きさを保ち、中央要素のscaleだけを変える。大きさの差が相対的なvisual weightやemphasisへどう関わって見えるかを観察する。
スケール視覚的重さ強調視覚的階層 -
構成
スペーシングと位置配分
同じ開始位置・終了位置と同じ数の等時間サンプルを使い、中間位置の間隔だけを変える。位置の間隔が一定の場合、後半ほど広がる場合、後半ほど狭まる場合を静止図で比べ、スペーシングが速度変化の見え方へどう関わるかを観察する。
アニメーションのスペーシングアニメーションのタイミング -
構成
トーン差によるコントラストの強さ
同じcanvas、同じ形、同じ位置と大きさを保ち、背景と前景のtone差だけを変える。差が小さい状態から大きい状態へ並べ、要素の区別のされ方と相対的な強弱がどう変わるかを観察する。ここではWCAGのcontrast ratioを測定せず、構成上のtone差を比較する。
コントラスト視覚的階層 -
構成
共通領域とグループの見え方
同じ6要素の位置・大きさ・toneを固定し、背後に置く共通領域surfaceだけを変える。囲いがない状態、全要素を一つの領域へ入れる状態、左右を二つの領域へ分ける状態を比べ、common regionがgrouping cueとしてどう働くかを観察する。
共通領域近接余白 -
構成
狭い画面での再配置
同じ情報ブロックを狭い画面へ置く時、広い画面の2列関係をそのまま縮める場合と、優先順に1列へ流し直す場合を比較する。
レスポンシブレイアウト視覚的階層読みやすさ -
構成
近接とグループの見え方
同じ6要素を同じ高さ・大きさ・toneで並べ、要素間の距離パターンだけを変える。均等な間隔と、group内を近く・group間を遠くした配置を比べ、距離がまとまりの手がかりとしてどう働くかを観察する。
近接余白 -
タイポグラフィ
行間と文章のまとまり
同じ文章・書体・文字サイズ・行長・字間を固定し、line heightだけを変える。行同士の分離、段落の縦方向の広がり、文章全体のまとまりがどう変わって見えるかを観察する。読む速さや理解度を測定するStudyではない。
行間読みやすさ行長 -
タイポグラフィ
行長と改行・段落の形
本文・書体・文字サイズ・行間を固定したまま、CSS上の本文幅をch単位で変え、改行頻度、1行の表示距離、段落全体の形がどう変わるかを比較する。ここでのch値は日本語の文字数そのものではなく、表示幅を変えるための条件として使う。
行長読みやすさ -
構成
視覚的重さ・強調・視覚的階層
同じcanvas、同じ要素、同じ位置と大きさを保ち、toneによる相対的な強弱の分布だけを変える。visual weight、特定要素のemphasis、複数段階のvisual hierarchyを同一概念として扱わず比較する。
視覚的重さ強調視覚的階層コントラスト -
タイポグラフィ
字間と文字列のまとまり
同じ文章・書体・文字サイズ・行長・行間を固定し、letter spacingだけを変える。文字同士の距離、単語や文字列のまとまり、段落全体のtextureがどう変わって見えるかを観察する。判読性やreadabilityを測定するStudyではない。
字間読みやすさ -
構成
情報密度と視覚的混雑
各blockを同じ情報単位とみなし、同じcanvas、同じ要素数、同じ要素サイズ、同じtone構成を保ったまま配置とgrouping cueだけを変える。表示上の情報量を変えず、情報密度と視覚的混雑を別の観察軸として比較する。
情報密度視覚的混雑整列近接 -
構成
整列と構造の見え方
同じ6要素の大きさ・高さ位置・toneを固定し、共通の基準線へ揃えるか、横位置をずらすかだけを変える。alignmentが要素間のつながりや構造を見る手がかりとしてどう働くかを観察する。
整列 -
構成
対称・非対称と視覚的均衡
同じcanvas、同じ3要素、同じ要素サイズ、同じtone構成を保ったまま位置だけを変え、対称性と視覚的な重みの分布を分けて比較する。候補名だけで「均衡している」と結論づけず、各配置がどう見えるかを観察する。
対称非対称視覚的均衡 -
タイポグラフィ
判読性と似た字形のサイズ
同じ文字列・書体・weight・字間・行間・本文幅を固定し、font sizeだけを変える。0/O、1/I/l、B/8、S/5のような似た字形が、表示サイズによってどの程度区別して見えるかを観察する。readabilityや理解度を測定するStudyではない。
判読性読みやすさ字間