移行中の知識
線の太さ
Stroke Weight
定義
線の太さ（stroke weight）とは、輪郭線・icon stroke・dividerなどの線がどの程度太く描かれるかという視覚属性です。太さは境界の強さ、視覚的重さ、小サイズでの識別性へ影響しますが、太いほど明確・重要という単純な規則ではありません。線の長さ、色、contrast、corner処理、表示サイズと合わせて判断します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
navigation icon set
outline iconの太さ
見るポイント
icon sizeを固定してstrokeだけを比較し、細部が潰れず、隣のtextやfilled iconと視覚的重さが釣り合うかを見る。iconごとに見かけの太さがばらつかないかも確認する。
form UI
input borderとdivider
見るポイント
同じ1pxを機械的に使うのではなく、component識別に必要な境界と装飾dividerの役割を分けて見る。stroke widthだけでなくcontrastが必要なvisual informationを担っているか確認する。
注意
誤解しやすい点
- 線を太くすれば、色やcontrastに関係なく境界が必ず明確になると考える。
- icon setのすべてへ同じnumeric strokeを当てれば、見かけの太さも必ず揃うと考える。
- 太いstrokeを強調の唯一の手段にし、画面全体で視覚的重さを競合させる。
関連
関連する概念
出典