このページの中身

ヴェイパーウェイヴ

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

実物サンプル#

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

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

見分けかた#

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

向く場面#

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

弱いところ#

信頼を最優先する画面。目立つ部品だけを借りると、デザインスタイルの規則が画面全体へ通りません。

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

高彩度の組み合わせは文字コントラストを個別に測り、点滅や高速移動を避ける。

出発点CSS#

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

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

最小2.60rem最大5.40rem

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

:root {
  --bg: #21164e;
  --ink: #ffffff;
  --mut: #d7c6ff;
  --accent: #ff65c3;
  --on: #21164e;
  --panel: #352267;
  --line: #63e8ff;
  --radius: 0;
  --shadow: 8px 8px 0 #63e8ff;
  --font: system-ui, sans-serif;
  --head: 'Times New Roman', Times, serif;
}
body {
  background: linear-gradient(#1c1248, #4b1e72);
}
.site {
  background: transparent;
}
.hdr {
  border: 2px solid var(--line);
  background: rgba(53,34,103,.8);
}
.hero h1 {
  font-family: var(--head);
  font-style: italic;
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  background: linear-gradient(#ff65c3, #63e8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .art {
  background: linear-gradient(165deg, #ff65c3, #63e8ff);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 0;
}
.hero .art .shape-a {
  background: #fff;
  opacity: .6;
}
.hero::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  block-size: 60px;
  inline-size: 80%;
  margin-inline: auto;
  background: repeating-linear-gradient(90deg, #63e8ff 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, #63e8ff 0 1px, transparent 1px 12px);
  opacity: .5;
  transform: perspective(200px) rotateX(50deg);
}
.card, .quote, .form, .steps .step, .tbl {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.card .art {
  background: linear-gradient(165deg, #ff65c3, #63e8ff);
}
.btn {
  background: var(--accent);
  color: #21164e;
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--line);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.btn--sub {
  background: transparent;
  color: #63e8ff;
}
.sec h2 {
  color: #63e8ff;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  background: #1c1248;
  color: #fff;
  border: 2px solid var(--line);
}
.tbl th {
  color: var(--accent);
  border-block-end: 2px solid var(--line);
}
.foot {
  border-block-start: 2px solid var(--line);
}

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

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

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