移行中の知識
比率
Proportion
定義
比率（proportion）とは、構成内の部分どうし、または部分と全体の大きさ・長さ・面積などの相対的な関係です。スケールが要素の大きさの差を見るのに対し、比率は「幅と高さ」「本文とside column」「markとwordmark」など、複数のdimensionやpartの関係を見る概念です。同じ比率を保ったまま全体を拡大・縮小することもできます。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
documentation layout
本文とside column
見るポイント
main contentと目次・補助情報の幅を、単に固定pxで決めず、画面全体の中でどの程度の割合を占めるかを見る。viewportが変わる時は比率を保つべきか、別構成へ切り替えるべきか判断する。
cardやhero image
画像のaspect ratio
見るポイント
同じ画像でも横長・正方形・縦長でcontentの見え方と周囲の情報量が変わる。見栄えだけでなくcropされる被写体、card高さ、textとの占有比率まで確認する。
理解
理解のポイント
- proportionはpart間の関係を保ちながら全体scaleを変えられるため、layoutやformの構成比を考える基準になる。
注意
誤解しやすい点
- 比率とスケールを同じ概念として扱い、全体サイズが変わっただけなのかpart同士の関係が変わったのかを区別しない。
- golden ratioなど一つのratioを普遍的な美的正解として当てはめる。
- desktopで成立したcolumn比率を、content量やviewportを見ずに全breakpointへ固定する。
関連
関連する概念
出典