このページの中身

コラージュ

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

実物サンプル#

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

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

見分けかた#

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

向く場面#

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

弱いところ#

規格性が必要な業務面。目立つ部品だけを借りると、デザインスタイルの規則が画面全体へ通りません。

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

見た目の重なりとDOM順をずらさず、画像内の文字へ情報を閉じ込めない。

出発点CSS#

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

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

最小2.40rem最大4.60rem

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

:root {
  --bg: #e8dfd0;
  --ink: #201b17;
  --mut: #5a4f44;
  --accent: #a63228;
  --on: #ffffff;
  --panel: #f8f1e5;
  --line: #201b17;
  --radius: 0;
  --shadow: 4px 6px 12px rgba(45,30,18,.18);
  --font: Georgia, serif;
  --head: Georgia, serif;
}
body {
  background: #e8dfd0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='20' cy='30' r='1' fill='%23c8b9a4'/%3E%3Ccircle cx='80' cy='90' r='1.5' fill='%23c8b9a4'/%3E%3C/svg%3E");
}
.site {
  background: transparent;
}
.hdr {
  background: var(--panel);
  transform: rotate(-.6deg);
  box-shadow: var(--shadow);
  margin: 16px;
}
.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
}
.hero h1 em {
  font-style: normal;
  background: #d9b43b;
  padding: 0 8px;
  display: inline-block;
  transform: rotate(-2deg);
}
.hero .art {
  transform: rotate(4deg);
  background: #7694a0;
  border: 12px solid #f8f1e5;
  box-shadow: var(--shadow);
}
.hero .art .shape-a {
  background: #d9b43b;
  clip-path: polygon(0 20%, 100% 0, 85% 100%, 8% 88%);
  border-radius: 0;
}
.card, .quote, .form, .steps .step, .tbl {
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 0;
}
.card:nth-child(1) { transform: rotate(-1.2deg); } .card:nth-child(2) { transform: rotate(.8deg); background: #f3e2c5; } .card:nth-child(3) { transform: rotate(-.5deg); }
.card .art {
  background: #7694a0;
  border: 8px solid #f8f1e5;
  clip-path: polygon(2% 4%, 98% 0, 100% 96%, 0 100%);
}
.quote {
  transform: rotate(.6deg);
  border-inline-start: 6px solid #d9b43b;
}
.btn {
  border-radius: 0;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 #201b17;
}
.btn--sub {
  background: #d9b43b;
  color: #201b17;
}
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: 2px 2px 0 #201b17;
}
.tbl th {
  background: #d9b43b;
}
.sec h2 {
  display: inline-block;
  background: #201b17;
  color: #f8f1e5;
  padding: 2px 10px;
  transform: rotate(-1deg);
}
.foot {
  background: #201b17;
  color: #e8dfd0;
  transform: rotate(.4deg);
  margin: 16px;
}

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

アイソメトリックとの違いを同じ内容で見る
モノクロームとの違いを同じ内容で見る
デザインスタイルの選び方から読者と態度で絞る

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