このページの中身

スイススタイル

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

実物サンプル#

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

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

見分けかた#

格子と左揃えが画面全体の規則になっています。見出しだけではなく、面、線、余白、操作部にも同じ判断を通します。

向く場面#

資料、報道、公共。読者が期待する態度と、このデザインスタイルの声の強さが合うときに選びます。

弱いところ#

親しみを強く求める場面。目立つ部品だけを借りると、デザインスタイルの規則が画面全体へ通りません。

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

小さな文字と狭い行間へ寄せすぎず、本文は16px以上と十分な行間を保つ。

出発点CSS#

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

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

最小3.00rem最大6.40rem

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

:root {
  --bg: #ffffff;
  --ink: #111111;
  --mut: #4a4a4a;
  --accent: #d9271c;
  --on: #ffffff;
  --panel: #ffffff;
  --line: #111111;
  --radius: 0;
  --shadow: none;
  --font: Helvetica, Arial, sans-serif;
  --head: Helvetica, Arial, sans-serif;
}
.site {
  border-block-start: 12px solid #111;
}
.hdr {
  border-block-end: 1px solid #111;
}
.hero {
  grid-template-columns: 7fr 5fr;
  align-items: end;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -.06em;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: .92;
}
.hero .art {
  background: #d9271c;
  border: 0;
  aspect-ratio: 1;
}
.hero .art .shape-a {
  background: #fff;
}
.sec h2 {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-block-start: 1px solid #111;
  padding-block-start: 8px;
}
.sec {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}
.sec > h2 { grid-column: 1; margin: 0; } .sec > div, .sec > form, .sec > table, .sec > blockquote { grid-column: 2; }
.card, .quote, .form, .steps .step, .tbl {
  border: 0;
  border-block-start: 1px solid #111;
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}
.card .art {
  background: #111;
}
.btn {
  border-radius: 0;
  background: #111;
  color: #fff;
  font-weight: 700;
}
.btn--sub {
  background: #fff;
  color: #111;
  border: 1px solid #111;
}
.tbl th, .tbl td { padding-inline: 0; } .tbl th { border-block-end: 1px solid #111; }
.field input, .field select, .field textarea {
  border: 0;
  border-block-end: 1px solid #111;
  border-radius: 0;
  padding-inline: 0;
}
.foot {
  border-block-start: 1px solid #111;
}

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

ネオブルータリズムとの違いを同じ内容で見る
エディトリアルデザインとの違いを同じ内容で見る
デザインスタイルの選び方から読者と態度で絞る

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