【デザイン備忘録】4大原則（近接・整列・強弱・反復）・カラー・スマホ（Material Design）

心構え

臆病になってはいけない

• 空白がたくさんできることを恐れてはいけない

• 左右対称でないことを恐れてはいけない

• フォントを極端に大きくしたり、極端に小さくしたりするのを恐れてはいけない

時と場合によっては、それらは効果的である。

4大原則：近接・整列・強弱・反復

近接（余白）

• 目的：互いに関連する情報を近づける

• 関係情報の余白を狭め、関連しない情報の余白を広くする

• 目をかすかに細めてページを眺め、視線が止まった回数を数えれば、視覚的要素の数がわかる。1ページあたり3-5個を超えている場合、近接によってグループ化し、1個の視覚的ユニットにできるものがないか検討する

近接に付随して、余白に関して

• 余白は正方形で統一する

• 余白の大きさは要素の短辺以上を基本とする→余白係数1.25倍

• Webサイトやアプリは8の倍数で設計する

• 見出しと本文の間は、本文間の行間よりも広い余白を取る

https://speakerdeck.com/yuyaink/spacing

上記を踏まえて、例えば、下記のように4の倍数を基準に余白変数を定義しておく

// spacing
// 後半に向かって差を大きくしているのは、余白のメリハリ（コントラスト）を維持するため。
$spacing-0: 0;
$spacing-quarter: 1px;
$spacing-half: 2px;
$spacing-1: 4px;
$spacing-1-half: 6px;
$spacing-2: 8px;
$spacing-3: 12px;
$spacing-4: 16px;
$spacing-5: 20px;
$spacing-6: 24px;
$spacing-8: 32px;
$spacing-12: 48px;
$spacing-16: 64px;

整列

・目的：要素に一体性を持たせる
・同じページで2種類以上の文字ぞろえを用いないこと（中央揃えと右揃えを使うなど）

強弱（コントラスト）

・目的：情報の優先度を明確にする
・はっきり異ならせる。思い切りが大事。太そうな線と、もっと太そうな線というような曖昧なコントラストをつけようとしてはいけない

反復

・目的：特徴的なものを、意識的に繰り返し使う
・うるさく強迫的に感じるほどには反復させない。コントラストの価値を意識

続きは、こちらで記載しています。

【デザイン備忘録】4大原則（近接・整列・強弱・反復）・カラー・スマホ（Material Design）