ヒーロー · ヒーローセクション
ヴェイパーウェイヴの夕焼けグリッド
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/vaporwave-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
ヴェイパーウェイヴ美学を引用したアートサイトのヒーローを作ってください。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 配色: マゼンタ #ff2d97 → パープル #8a2be2 → 深紺 #0a0533 のグラデ夕焼け。アクセントにシアン #00f0ff、ピンク #ffb3d6、太陽の黄 #ffd86b。 - 下半分にレトログリッド（地平線に向かって遠近法で消失する線）。CSS グラデと transform: perspective() で実装、画像不要。 - 中央に大理石像のシルエット風要素（CSS で楕円・円弧の重ねで頭部風プレースホルダー、半透明）。 - 大型の H1。横書きと縦書き（writing-mode: vertical-rl）を混在させる。日本語見出しはセリフ系（Noto Serif JP）+ 横長の英タイトル併記。 - 上部に "A E S T H E T I C" 風の wide-spaced タイトル（letter-spacing 0.5em）。 - 太陽の円盤を中央上方に配置（CSS グラデの円、内側ストライプで日没感）。 - 全体に薄い CRT スキャンラインオーバーレイ。 - JS不要、フルレスポンシブ。
バリエーション
ライトテーマ版（pastel）
色相を反転、夕焼けをパステルに（ピーチ・ミント・ラベンダー）。Frutiger Aero 寄りに変化。
VHS グリッチ版
スキャンラインを強め、ヘッダー文字を hue-shift する短いアニメ。 色収差（chromatic aberration）を CSS filter で薄く再現。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。CSSとSVGで描く架空のアーカイブです。リンクは作品やミックステープの説明へ移動し、音源・再生機能は含みません。
コードを表示
<!doctype html>
<!-- Vibehaus / CC0 — 改変・商用利用可能。架空のサービスのデザイン例。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー — Vibehaus プレビュー</title>
<style>
:root {
--magenta: #ff2d97;
--purple: #8a2be2;
--deep: #0a0533;
--cyan: #00f0ff;
--pink: #ffb3d6;
--sun: #ffd86b;
--ink: #f5f3ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Mincho ProN",
"Yu Mincho", serif;
background: var(--deep);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
min-height: 100dvh;
}
/* Sky gradient — sunset */
.sky {
position: absolute;
inset: 0 0 50% 0;
background:
radial-gradient(60% 90% at 50% 100%, var(--magenta) 0%, transparent 60%),
linear-gradient(180deg, var(--deep) 0%, var(--purple) 50%, var(--magenta) 90%, var(--sun) 100%);
z-index: 0;
}
/* Sun disc */
.sun {
position: absolute;
top: 18%;
left: 50%;
transform: translateX(-50%);
width: clamp(180px, 28vw, 320px);
aspect-ratio: 1;
border-radius: 50%;
background:
repeating-linear-gradient(
180deg,
transparent 0,
transparent 28px,
rgba(10, 5, 51, 0.85) 28px,
rgba(10, 5, 51, 0.85) 30px
),
radial-gradient(circle at 50% 30%, var(--sun) 0%, var(--magenta) 70%, var(--purple) 100%);
box-shadow: 0 0 80px rgba(255, 45, 151, 0.55);
z-index: 1;
}
.sun::before {
/* horizon mask — bottom of the sun softened */
content: "";
position: absolute;
bottom: -6%;
left: 0; right: 0;
height: 30%;
background: linear-gradient(180deg, transparent, var(--magenta) 80%);
}
/* Retrogrid floor */
.grid {
position: absolute;
inset: 50% 0 0 0;
perspective: 600px;
background: linear-gradient(180deg, var(--magenta) 0%, var(--purple) 60%, var(--deep) 100%);
overflow: hidden;
z-index: 0;
}
.grid::before, .grid::after {
content: "";
position: absolute;
inset: 0 -50%;
background-image:
linear-gradient(to right, rgba(0, 240, 255, 0.85) 0, rgba(0, 240, 255, 0.85) 1px, transparent 1px, transparent 90px),
linear-gradient(to bottom, rgba(0, 240, 255, 0.85) 0, rgba(0, 240, 255, 0.85) 1px, transparent 1px, transparent 90px);
transform: rotateX(58deg) translateY(-15%);
transform-origin: top center;
animation: roll 4s linear infinite;
}
.grid::after {
background-image:
linear-gradient(to right, rgba(255, 45, 151, 0.5) 0, rgba(255, 45, 151, 0.5) 1px, transparent 1px, transparent 90px),
linear-gradient(to bottom, rgba(255, 45, 151, 0.5) 0, rgba(255, 45, 151, 0.5) 1px, transparent 1px, transparent 90px);
transform: rotateX(58deg) translateY(-15%) translateX(45px);
}
@keyframes roll { to { background-position: 0 90px; } }
/* Horizon glow line */
.grid > .line {
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: var(--cyan);
box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan);
z-index: 2;
}
/* CRT scanlines overlay */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 3px,
rgba(10, 5, 51, 0.18) 3px,
rgba(10, 5, 51, 0.18) 4px
);
mix-blend-mode: multiply;
opacity: 0.5;
}
/* Decorative bust silhouette — pure CSS */
.bust {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 6px 28px rgba(255, 45, 151, 0.4));
opacity: 0.8;
}
.bust svg { display: block; width: clamp(150px, 22vw, 240px); height: auto; }
/* Header */
header.site {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
}
.logo {
font-family: "Times New Roman", "Noto Serif JP", serif;
font-style: normal;
font-size: 1.4rem;
letter-spacing: 0;
font-weight: 700;
text-shadow: 0 0 12px var(--cyan);
color: var(--cyan);
}
header.site nav {
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--ink);
}
header.site nav a { color: inherit; text-decoration: none; padding: 0 0.6rem; }
header.site nav a:hover { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
@media (max-width: 720px) { header.site nav { display: none; } }
/* Hero content */
main.hero {
position: relative;
z-index: 5;
text-align: center;
padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 10vw, 8rem);
max-width: 1100px;
margin: 0 auto;
}
.super {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: clamp(0.85rem, 1.1vw, 1rem);
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--cyan);
text-shadow: 0 0 16px var(--cyan);
margin-bottom: 1.5rem;
padding-left: 0.5em;
}
.hero h1 {
margin: 0 0 1.5rem;
font-family: "Times New Roman", "Noto Serif JP", "Hiragino Mincho ProN", serif;
font-size: clamp(2.8rem, 7vw, 5.6rem);
line-height: 1.35;
font-weight: 700;
font-style: normal;
color: var(--ink);
text-shadow:
0 0 24px var(--magenta),
0 0 48px rgba(138, 43, 226, 0.6);
}
.hero h1 :lang(ja) {
font-style: normal;
line-height: 1.3;
letter-spacing: 0;
}
.hero h1 .pink { color: var(--pink); text-shadow: 0 0 20px var(--pink); }
.hero p.lede {
font-family: "Times New Roman", "Noto Serif JP", serif;
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.85;
color: var(--ink);
max-width: 50ch;
margin: 0 auto 2.25rem;
opacity: 0.9;
}
.ctas {
display: inline-flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.7rem;
border-radius: 0;
border: 2px solid var(--cyan);
background: transparent;
color: var(--cyan);
text-decoration: none;
font-family: "JetBrains Mono", monospace;
font-size: 0.84rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0 0 8px var(--cyan);
box-shadow:
0 0 12px rgba(0, 240, 255, 0.4),
inset 0 0 12px rgba(0, 240, 255, 0.15);
transition: transform 0.2s;
cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn.pink {
border-color: var(--pink);
color: var(--pink);
text-shadow: 0 0 8px var(--pink);
box-shadow: 0 0 12px rgba(255, 179, 214, 0.4), inset 0 0 12px rgba(255, 179, 214, 0.15);
}
/* Vertical Japanese label on the side */
.vertical-label {
position: absolute;
top: 25%;
right: clamp(0.5rem, 2vw, 1.5rem);
z-index: 6;
writing-mode: vertical-rl;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
font-size: clamp(0.85rem, 1.2vw, 1.05rem);
letter-spacing: 0.4em;
color: var(--ink);
text-shadow: 0 0 10px var(--magenta);
opacity: 0.85;
}
.vertical-label.left {
right: auto;
left: clamp(0.5rem, 2vw, 1.5rem);
color: var(--cyan);
text-shadow: 0 0 10px var(--cyan);
}
@media (max-width: 720px) { .vertical-label { display: none; } }
@media (prefers-reduced-motion: reduce) {
.grid::before, .grid::after { animation: none; }
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #f5f3ff; outline-offset: 4px; }
header nav a, header .logo, header .login { min-height: 44px; display: inline-flex; align-items: center; }
header nav { flex-wrap: wrap; }
.sample-details { position: relative; z-index: 10; color: #f5f3ff; background: #0a0533; padding: 32px clamp(20px,4vw,48px); font-family: system-ui,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height: 1.8; letter-spacing: 0; }
.sample-details > p { margin: 0 0 24px; font-size: 13px; }
.sample-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-width: 1160px; margin: auto; }
.sample-sections section { border-top: 1px solid currentColor; padding-top: 16px; scroll-margin-top: 24px; min-width: 0; }
.sample-sections h2 { font-size: 18px; line-height: 1.5; margin: 0 0 12px; font-weight: 700; letter-spacing: 0; }
.sample-sections p { font-size: 14px; line-height: 1.8; margin: 0; letter-spacing: 0; }
@media(max-width:720px) { .sample-sections { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
@media(max-width:540px) { .hero h1 { font-size:clamp(2rem,9vw,2.8rem); } }
</style>
</head>
<body>
<div class="sky" aria-hidden="true"></div>
<div class="sun" aria-hidden="true"></div>
<div class="grid" aria-hidden="true"><div class="line"></div></div>
<div class="bust" aria-hidden="true">
<svg viewBox="0 0 220 260" fill="none" stroke="rgba(245,243,255,0.7)" stroke-width="1.4">
<ellipse cx="110" cy="80" rx="48" ry="58" fill="rgba(255,179,214,0.18)" />
<path d="M 62 138 Q 110 160 158 138" />
<path d="M 50 235 L 68 162 Q 110 178 152 162 L 170 235" fill="rgba(245,243,255,0.05)" />
<path d="M 95 70 Q 110 60 125 70" />
<path d="M 86 90 L 80 100 M 134 90 L 140 100" />
<ellipse cx="98" cy="86" rx="3.5" ry="2" fill="rgba(245,243,255,0.6)" />
<ellipse cx="122" cy="86" rx="3.5" ry="2" fill="rgba(245,243,255,0.6)" />
<path d="M 100 110 Q 110 116 120 110" />
</svg>
</div>
<span class="vertical-label" aria-hidden="true">夕陽の向こう側へ</span>
<span class="vertical-label left" aria-hidden="true">A E S T H E T I C</span>
<header class="site">
<div class="logo">あ<span style="color:var(--pink);text-shadow:0 0 12px var(--pink);font-style:italic;">esthetic</span></div>
<nav>WORKS · ARCHIVE · ABOUT</nav>
</header>
<main class="hero">
<span class="super">A · E · S · T · H · E · T · I · C</span>
<h1>夕陽の向こう、<br/><span class="pink">記憶のアーカイブ。</span></h1>
<p class="lede">忘れ去られた未来、思い出された過去。1985 年の砂浜と 2026 年の Web を縫い直す実験的アーカイブプロジェクト。</p>
<div class="ctas">
<a class="btn" href="#archive">ENTER ARCHIVE</a>
<a class="btn pink" href="#mixtape">PLAY MIXTAPE</a>
</div>
</main>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="archive" aria-labelledby="archive-heading"><h2 id="archive-heading">アーカイブの構成例</h2><p>夕焼け、レトログリッド、胸像の輪郭を組み合わせた架空の作品紹介です。背景と図形はCSSとSVGだけで描いています。</p></section><section id="mixtape" aria-labelledby="mixtape-heading"><h2 id="mixtape-heading">ミックステープについて</h2><p>音楽を紹介する場所の見本です。音源や再生機能は含めていません。実際の音源を公開するときは、利用できる素材と再生処理を用意してください。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
ヴェイパーウェイヴは2010年代初頭、音楽ジャンルとして生まれ、やがてビジュアル様式へと拡張したインターネット発の美学です。80年代の企業広告、初期CGの地平線グリッド、ギリシャ・ローマの石膏像、日本語のカタカナ——本来は無関係なこれらの断片を、夢のような夕焼けグラデーションの中に並置する。「実現しなかった未来へのノスタルジー」が、その情緒の核にあります。
「偽の記憶」が生む強い情緒
ヴェイパーウェイヴが不思議なのは、誰も実際には体験していない時代を懐かしませる点です。80年代の終わりに思い描かれた未来は、ついに来ませんでした。その来なかった未来を映像化することで、見る人の中にあったかもしれない記憶が立ち上がります。マゼンタとパープルの夕焼け、地平線まで伸びるグリッド——この組み合わせが一度見たら忘れられないのは、それが郷愁という強い感情に直接触れているからです。
大理石像とローマン書体の役割
石膏像や明朝・セリフ体の日本語タイポは、ヴェイパーウェイヴに「高尚さの引用」を持ち込みます。商業的なネオングリッドと、美術館的なクラシック要素のミスマッチ——その違和感こそがこの様式の前衛性です。整いすぎると単なるレトロ、崩しすぎると意味不明になる。意図的なちぐはぐさのバランスが腕の見せどころです。
崩れる形整えて統一感を出す
様式としてまとまるほど、単なるレトロに落ち着きます。ヴェイパーウェイヴの前衛性は統一感からではなく、噛み合わない要素の並置から出ます。
効く形ちぐはぐさを意図的に残す
商業的なネオングリッドと、美術館的な石膏像。その違和感こそがこの様式の核です。ただし崩しすぎると意味不明になるため、加減が腕の見せどころです。
仕上げの判断軸
刺さるのは音楽・アート・ファッション・Z世代向けの実験的プロダクト。コーポレートやB2Bには通じません。グリッドのパースは一定に保ち、地平線の位置を画面の上下中央やや下に置くと安定します。
スキャンラインや発光は控えめに。ヴェイパーウェイヴの上質さは過剰さではなく、気だるい余白から生まれます。
ヒーローの構成要素
使いどころ
- アートプロジェクト・実験的個展
- 音楽（シンセウェーブ・lo-fi）アーティスト
- レトロフューチャーをコンセプトにしたゲーム
- サブカル系メディアのキャンペーン
このデザインの分類
背景と狙いどころ
よくある質問
ヴェイパーウェイヴは古い？
2010年代前半のミーム発祥ですが、現在はジャンルとして定着し再評価されています。古さを意匠として使う遊びです。
日本語の縦書き、検索エンジンに影響しませんか？
writing-mode は CSS なので HTML 構造には影響しません。Google も縦書きをそのまま読みます。装飾的な見出し1箇所だけに絞れば SEO 影響なしです。
「やりすぎ」感はどう抑える？
装飾要素は1画面に3個まで。本文部分はクリーンに保つことで、ヒーロー以降のコンテンツが沈まずに済みます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
透明ボディの90年代ヒーロー
青い透明樹脂の音楽プレーヤーを主役に、暗い背景と黄緑のボタンを組み合わせた製品紹介。90年代の小さなウィンドウ枠と生成画像の質感を使い、商品を見る操作と仕様を読む操作を分ける。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。