このページの中身

モノクローム

デザインスタイル／デザインスタイルとは

実物サンプル#

実物サンプルを新しいページで開く

同じ架空の珈琲店（見出し帯・ヒーロー・店について・豆のカード・工程・料金表・声・予約フォーム）を、すべてのデザインスタイルで同じ内容のまま組んでいます。違うのは色・書体・角・線・影・面の質感・傾き・段組だけです。

見分けかた#

明度差だけで構成が画面全体の規則になっています。見出しだけではなく、面、線、余白、操作部にも同じ判断を通します。

向く場面#

写真主体、作品集。読者が期待する態度と、このデザインスタイルの声の強さが合うときに選びます。

弱いところ#

色で状態を分ける画面。目立つ部品だけを借りると、デザインスタイルの規則が画面全体へ通りません。

アクセシビリティ上の注意#

色を使わない代わりに、状態は形、線、ラベルの二つ以上で区別する。

出発点CSS#

このコードで動いている見本です

--bg--ink--mut--accent--on--panel--line

CSS　書き換えると見本が変わります

:root {
  --bg: #f1f1f1;
  --ink: #111111;
  --mut: #555555;
  --accent: #111111;
  --on: #ffffff;
  --panel: #ffffff;
  --line: #777777;
  --radius: 0;
  --shadow: none;
  --font: system-ui, sans-serif;
  --head: system-ui, sans-serif;
}
.site {
  filter: grayscale(1);
}
.hero .art {
  background: #222;
  border: 0;
}
.hero .art .shape-a { background: #bbb; } .hero .art .shape-b { background: #fff; }
.card, .quote, .form, .steps .step, .tbl {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}
.card .art {
  background: linear-gradient(135deg, #222, #999);
}
.steps .step:nth-child(1) { background: #111; color: #fff; } .steps .step:nth-child(1) b { color: #fff; } .steps .step:nth-child(2) { background: #777; color: #fff; } .steps .step:nth-child(2) b { color: #fff; }
.btn {
  border-radius: 0;
}
.btn--sub {
  background: #fff;
  color: #111;
  border: 1px solid #111;
}
.tbl th {
  background: #111;
  color: #fff;
}
.field input, .field select, .field textarea {
  border: 1px solid #111;
  border-radius: 0;
}
.foot {
  background: #111;
  color: #f1f1f1;
}

近いデザインスタイルと比べる#

コラージュとの違いを同じ内容で見る
手描きとの違いを同じ内容で見る
デザインスタイルの選び方から読者と態度で絞る

この資料は、Webサイトを作るときに引くためのものです。何のために作ったか。作っているのは AK²Lab。