- 必ず従う必要はないが、これらのルールはいつでもそのまま適用して問題ない
純粋な黒/白の代わりに、黒と白に近い色を使う
- 純粋なブラックは画面上で不自然に見え、純白は明るすぎる
- #000000 と #FFFFFF の代わりに #222222 と #F2F2F2 を使う
- 以後ブラック/ホワイトと言うときは、この色を指す
ニュートラルカラーに色味を加える
- ニュートラルカラーは通常、ブラック/ホワイト/グレー
- 色を使うなら、ニュートラルカラーに少しだけ色を足すこと（grey の代わりに light red、black の代わりに dark blue）
- そうするとカラーパレットがより一貫して感じられる
- HSB を使うなら、彩度はおよそ 5% 以下だけ加えればよい
重要な要素には高コントラスト（high contrast）を使う
- ユーザーが注目すべきすべての要素：ボタン、コンテンツなど
- 区切り線、ドロップシャドウなどには、できるだけ低いコントラストを使う
デザインのすべての要素は慎重であるべき
- 余白、整列、サイズ、間隔、色、影を含むすべて
- 誰かにデザインの特定部分について聞かれたとき、なぜそうしたのか説明できるべき
Optical（視覚的）整列が数学的整列より良いことは多い
- 特定の形は、目で見て整って見えるように表現したほうが良い場合がある
- 目で整列させるには練習が必要だが、繰り返しやればすぐにつかめる
大きい文字は字間と行間を狭くし、小さい文字では広げる
- すべてのテキストに適用される
- 文字が大きいほど、各文字間と行間の余白は少しでよい。逆も同様
コンテナの境界線は、コンテナおよび背景とコントラストを持たせる
- 境界線はコンテナ内部と背景色の中間ではなく、背景より暗い色にする
すべてのものは何かと整列しているべき
- 整列は、物同士が関係していることを示す
- 何かが他と整列していないと、デザインに属していないように感じられる
- 理想的には、各要素は何らかの論理によって他の要素と整列しているべき
パレットの色には固有の明度値があるべき
- 色の明度値が互いに異なれば、色相だけでなく明度でも固有のルック＆フィールを与えられる
- そうすると各色同士があまり競合しないため、より良いカラーパレットになる
ニュートラルカラーに色味を加えるなら、Warm か Cool のどちらか一方だけを使う。両方使わない
- ニュートラルカラーにウォーム/クールカラーを混在させると、カラーパレットに一貫性が感じられなくなる
サイズは数学的に関連しているべき
- 要素間の間隔や大きさなどは、ある種のスケールによって決めるべき。そうするとデザインが一貫して見える助けになる
- 例ではすべての要素を 8 の倍数で使用。間隔は 8/16/24/32、行間は 48/40/24、テキストサイズは 40/32/16
要素は視覚的ウェイトの順に配置するべき
- 1 つの行や列に複数の要素があり、その一部が他より視覚的に重いなら（ボタン 2 個とリンク 3 個のように）
視覚的に最も重い要素を先に置き、軽い要素を順に最後へ置くべき
- 注意点として、視覚的に最も重い要素は最も外側にあるべき
横方向のグリッドを使うなら、12 カラムを使う
- カラム単位で分けるなら 12 にすると 1、2、3、4 カラムを使えるため、多くの柔軟性を得られる
コントラストが高い地点同士の間には間隔を設ける
- 私たちの目はコントラストを基準に要素の端を見つけるため、コントラストのある地点同士の間には間隔があると期待する
より近い要素ほど明るくする
- 画面上の要素がユーザーに近いほど（より前面にあるほど）明るくすべき
- これはライト/ダークモードにも当てはまる。現実世界がそう機能しているから
ドロップシャドウの Blur 値は距離値の 2 倍に設定する
- Y 軸方向に 4 ピクセル伸びる影を設定するなら、Blur 値は 8 ピクセルにする
- 要素が見る人に「近づく」ほど、影の不透明度（opacity）も下げるのがよい
複雑なものの上には単純なものを置くか、単純なものの上には複雑なものを置く
- 複雑な背景（派手なグラデーション）は、前面（テキスト）が単純なときに最も見やすい
- 前面が複雑なら、シンプルな背景が最適
- 単純なものの上に単純なものも可能ではあるが、平板に見える
- 複雑なものの上に複雑なものを置くのは視覚的な混乱を招くので避けるべき
コンテナの色は明度の制限内に収める
- 背景とコンテナの間の明度差は、ダークインターフェースでは 12%、ライトインターフェースでは 7% 以内であるべき（HSB カラーシステム上の明度値）
- うまくデザインされたウェブサイト約 100 件を対象に、コンテナの明度を背景と比較して確認した調査から分かったこと
外側のパディングは内側のパディングと同じか、それより大きくする
- コンテナの内側のパディングはコンテナ内部の要素間の空間。外側のパディングは要素とコンテナの端との間の空間
- 外側のパディングは内側のパディングと同じか、それ以上であるべき
本文テキストは 16px 以上を維持する
- 16px はほとんどのブラウザでデフォルトのテキストサイズ
- これ以下のサイズのテキストは読みにくいため、本文では使わないのが安全
1 行あたりおよそ 70 文字の行長を使う
- 行長が 60 か 80 かはそれほど重要ではないが、どちらにしても離れすぎると可読性の問題が起こりうる
ボタンの左右パディングは上下パディングの 2 倍にする
- 標準的なボタンのパターンは、高さより横幅が広い
- 人々にボタンとして認識してもらうには、このパターンに従うのがよい
書体は最大 2 つまで使う
- 2 つ目の書体は、デザインの背後にあるコンセプトを強化する機会になる
- また、デザインに多様性を加える助けにもなる
- 2 つを超えて使う必要はほとんどなく、デザインが視覚的に混乱して感じられることがある
入れ子になった角丸を正しく処理する
- ときどき 2 つ以上の角丸が入れ子になることがある
- 正しく見せるには、内側の角丸半径を、外側の角丸半径から両者の距離を引いた値に設定する
- 例）外側の角丸半径が 30px で、内側の角丸との距離が 20px なら、内側の角丸半径は 10px
2 本の区切り線を並べて置かない
- 背景のトランジション、コンテナの端、仕切り線は視覚的に区別しにくい
- 2 本以上の区切り線が接して並ばないようにする
6件のコメント
@xguru
私は GeekNews の可読性のために、以下のようにスタイリングして見ています。 ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
ありがとうございます。
これはとても良いですね……。デザインにはいつも悩んでいたので、こうしたガイドがあれば生産性を大きく高められそうです。
翻訳ありがとうございます！とても助かりました
とても良いですね！
@xguru
誤訳があるのでお伝えします
「より近い要素はより軽くあるべき」->「より近い要素はより明るくあるべき」
あ、そうですね。ありがとうございます〜！