画面のデザインを考えるときは「構成」と「配色」を一緒に考える

• キーカラーをどういう割合でどれだけ使う？でかなり印象が変わる

• キーカラーがかっつり出る画面と、そうでない画面が出てくる

• ざっくりWFに色を載せていったほうが、後続想定外といったデザインにはならない

グレースケールに少しだけキーカラーを載せてみる

• そうすると、少し明るく見える、無機質感が薄れる

  • 色作成するときは、レイヤーで色乗せて作るのは良いが、開発を鑑みて、混ぜた色が結果、何色なのかはわかるようにしておく

グレースケール以外のHowとして、透過も使ってみる

• ただし、Disableとして透過を利用するときは要注意

  • テキスト自体がみえなくていいのか？

  • 背景が見えるような状態が正しいのか？

• グレースケールを利用したいのは、要素として弱めたい、とかcurrentではないことを示したいから

  • これが達成できない、ときに透過を検討してみる

一緒に考えたい：レジビリティ（視認性）

• サンセリフかセリフかは、視認性観点では相違ない

• 背景を明るくして、文字を濃くすれば、視認性は上がる

  • 背景白、文字黒　と　背景黒、文字白　では前者のほうが視認性はよさそう…後者はコントラストが大きすぎて、ぼやけて（光って）見える気がする

    • だから、「真っ黒」はあえて避ける？

思い出したい：フォントの基礎知識

ファイブライン（Fiveline）

[1] アセンダライン（Ascender line）　アセンダ最上部に引いた線。
[2] キャップライン（Capital line）　大文字の最上部に引いた線。　
[3] ミーンライン（Mean line）　エックスハイトの上部に引いた線。
[4] ベースライン（Base line）　大文字の下部に引いた線。
[5] ディセンダライン（Descender line)　ディセンダの最下部に引いた線。

アセンダ（Ascender）　エックスハイトより大きい小文字の一部分。
ディセンダ（Descender）　ベースラインより下にある文字の一部分。
エックスハイト（X-Height)　小文字の上部から下部まで。
キャップハイト(Capotal Height)　大文字の上部からベースラインまで。
ボディサイズ（Body size）　アセンダからディセンダまでの高さ。　
セット（Set）　字幅のこと。文字によって異なる。

合わせて読みたい