このページの中身

マキシマリズム

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

実物サンプル#

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

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

見分けかた#

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

向く場面#

文化、音楽、催し。読者が期待する態度と、このデザインスタイルの声の強さが合うときに選びます。

弱いところ#

長文を静かに読む場面。目立つ部品だけを借りると、デザインスタイルの規則が画面全体へ通りません。

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

重なりで文字や操作部を隠さず、動きを加える場合は停止手段を用意する。

出発点CSS#

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

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

最小3.00rem最大6.00rem

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

:root {
  --bg: #ff5d33;
  --ink: #171217;
  --mut: #3d2430;
  --accent: #1a3fff;
  --on: #ffffff;
  --panel: #ffe93d;
  --line: #171217;
  --radius: 0;
  --shadow: 12px 12px 0 #1a3fff;
  --font: system-ui, sans-serif;
  --head: Impact, 'Arial Black', system-ui, sans-serif;
}
body {
  background: repeating-linear-gradient(45deg, #ff5d33 0 24px, #ff744f 24px 48px);
}
.site {
  background: transparent;
}
.hdr {
  background: #27d5bb;
  border: 4px solid #171217;
  box-shadow: var(--shadow);
  margin: 16px;
}
.hero h1 {
  font-size: clamp(3rem, 10vw, 6rem);
  transform: rotate(-3deg);
  line-height: .95;
  text-transform: uppercase;
}
.hero .art {
  transform: rotate(5deg);
  background: #27d5bb;
  border: 8px solid #171217;
}
.hero .art .shape-a { background: #ffe93d; } .hero .art .shape-b { background: #1a3fff; }
.card, .quote, .form, .steps .step, .tbl {
  border: 4px solid #171217;
  box-shadow: var(--shadow);
  background: var(--panel);
}
.card:nth-child(2) { background: #27d5bb; transform: rotate(-2deg); } .card:nth-child(3) { background: #ff9ad5; transform: rotate(1.5deg); }
.card .art {
  background: repeating-linear-gradient(90deg, #171217 0 8px, #ffe93d 8px 24px);
  border: 4px solid #171217;
}
.sec h2 {
  font-family: var(--head);
  font-size: 40px;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #171217;
  color: #ffe93d;
}
.btn {
  border: 4px solid #171217;
  box-shadow: 6px 6px 0 #171217;
  font-weight: 900;
  text-transform: uppercase;
}
.btn--sub {
  background: #ffe93d;
  color: #171217;
}
.field input, .field select, .field textarea {
  border: 4px solid #171217;
  border-radius: 0;
  background: #fff;
}
.tbl th {
  background: #171217;
  color: #ffe93d;
}
.foot {
  background: #171217;
  color: #ffe93d;
  margin: 16px;
}

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

エディトリアルデザインとの違いを同じ内容で見る
バウハウスとの違いを同じ内容で見る
デザインスタイルの選び方から読者と態度で絞る

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