ヒーロー · ヒーローセクション
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/brutalist-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
アンダーグラウンド系メディアのトップに、ブルータリストなヒーローを作ってください。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 配色は 2 色だけ。背景 #0a0a0a に蛍光黄 #f1ff00 を1点。境界やアクセントに使い、単色に頼らない。 - 全角・全幅の見出し（H1）。clamp(3rem, 12vw, 11rem) 級。Helvetica / Inter / Arial Black どれでも可。letter-spacing -0.06em、weight 900。 - 見出しは 2-3 行構成、行末で **改行を強制**して左揃えで山切り。 - サブテキスト 1 行、極太の見出しの直下にモノスペースで小さめ（0.85rem）。 - CTA はページ内の購読説明へ移動するリンク。装飾は最小限。border-radius は 0、影なし、太い 2-3px ボーダー。 - 背景に大きなフッターコメント `<pre>` を配置（このサイトは website / © 0000 / NO_COOKIES など）。 - ナビは upper-case + ハイフン区切り（ABOUT—WORK—LOG—CONTACT）。 - フォント・行高は Web デフォルト寄り、letter-spacing は 0 か微調整のみ。 - 端から端までフルブリード。中央寄せは禁止（編集主体は左揃え）。 - 小さなマーキー・ティッカーで日付や時刻を流す。 - JS不要。
バリエーション
反転バージョン（白地）
背景を #f7f7f5 に、テキストを #0a0a0a に反転。蛍光黄は同じ。 罫線が紙に乗ったプリント物のような印象に近づく。
テキストオンリーバージョン
全画面を1つの巨大な意見文（manifesto）にする。 H1 を廃し、長文段落だけで構成。フォントサイズの落差で階層化。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空の編集プロジェクトです。購読リンクは説明へ移動し、メール配信や連絡の送信は行いません。
コードを表示
<!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 {
--bg: #0a0a0a;
--fg: #f7f7f0;
--muted: #aaa;
--hot: #f1ff00;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Helvetica Neue", "Helvetica", "Arial Black", "Inter",
"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
background: var(--bg);
color: var(--fg);
line-height: 1.55;
font-weight: 400;
font-feature-settings: "kern", "ss01";
min-height: 100dvh;
}
/* Header — totally unstyled, just bare HTML with thick rules */
header.top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 3px solid var(--fg);
}
header.top .name {
font-weight: 900;
font-size: 1.05rem;
letter-spacing: -0.04em;
}
header.top nav {
font-family: "JetBrains Mono", "Courier New", monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
}
header.top nav a {
color: var(--fg);
text-decoration: none;
}
header.top nav a:hover {
background: var(--hot);
color: var(--bg);
}
/* Marquee — small ticker of timestamp + meta */
.ticker {
background: var(--hot);
color: var(--bg);
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.4rem 0;
overflow: hidden;
white-space: nowrap;
letter-spacing: 0.04em;
border-bottom: 3px solid var(--fg);
}
.ticker-track {
display: inline-block;
padding-left: 100%;
animation: tick 28s linear infinite;
will-change: transform;
}
.ticker-track span { padding: 0 1.5rem; }
@keyframes tick { to { transform: translateX(-100%); } }
/* HERO — full-bleed, raw, oversized */
.hero {
padding: clamp(1.5rem, 3vw, 3rem) 1.5rem clamp(2rem, 5vw, 4rem);
max-width: 100vw;
}
.hero .label {
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--hot);
margin-bottom: 1rem;
}
.hero h1 {
font-size: clamp(3rem, 12vw, 11rem);
line-height: 0.95;
letter-spacing: -0.06em;
font-weight: 900;
margin: 0;
font-stretch: 100%;
}
.hero h1 :lang(ja) { letter-spacing: 0; line-height: 1.1; }
.hero h1 .yel { background: var(--hot); color: var(--bg); padding: 0 0.05em; }
.hero h1 .strike { text-decoration: line-through; text-decoration-thickness: 0.06em; }
.hero h1 .ital { font-style: italic; font-weight: 900; }
.hero .sub {
margin-top: 1.5rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.92rem;
line-height: 1.7;
max-width: 60ch;
color: var(--muted);
}
.hero .ctas {
margin-top: 2rem;
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
}
.hero button,
.hero a.btn {
appearance: none;
background: transparent;
color: var(--fg);
border: 3px solid var(--fg);
border-radius: 0;
padding: 0.85rem 1.4rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.86rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
text-decoration: none;
line-height: 1.2;
}
.hero button:hover,
.hero a.btn:hover {
background: var(--hot);
color: var(--bg);
border-color: var(--hot);
}
.hero .hot {
background: var(--hot);
color: var(--bg);
border-color: var(--hot);
}
.hero .hot:hover {
background: var(--bg);
color: var(--hot);
}
/* Underline meta strip */
.strip {
border-top: 3px solid var(--fg);
border-bottom: 3px solid var(--fg);
padding: 0.85rem 1.5rem;
display: flex;
gap: 2rem;
flex-wrap: wrap;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.06em;
}
.strip span { white-space: nowrap; }
.strip span b { color: var(--hot); }
/* Raw pre footer comment */
pre.comment {
margin: 0;
padding: 1.5rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
line-height: 1.6;
color: var(--muted);
border-top: 3px solid var(--fg);
white-space: pre-wrap;
}
pre.comment .y { color: var(--hot); }
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #f7f7f0; 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: #f7f7f0; background: #0a0a0a; 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; } }
header.top { flex-wrap:wrap; gap:12px; } header.top nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px; letter-spacing:0; }
</style>
</head>
<body>
<header class="top">
<div class="name">DEPT.OF—NOISE</div>
<nav aria-label="ページ内"><a href="#about">ABOUT</a>—<a href="#work">WORK</a>—<a href="#log">LOG</a>—<a href="#contact">CONTACT</a></nav>
</header>
<div class="ticker" aria-hidden="true">
<div class="ticker-track">
<span>◆ TRANSMISSION 042 ◆ 2026-04-26 17:24 JST ◆ NEW DROP IN 03:11:09 ◆ NO COOKIES ◆ NO TRACKING ◆ NO BULLSHIT ◆ TRANSMISSION 042 ◆ 2026-04-26 17:24 JST ◆ NEW DROP IN 03:11:09 ◆ NO COOKIES ◆ NO TRACKING ◆ NO BULLSHIT ◆</span>
</div>
</div>
<section class="hero">
<p class="label">ISSUE 042 — MANIFESTO</p>
<h1>
We make<br/>
<span class="ital">noise</span> on<br/>
<span class="yel">purpose</span>—<br/>
not <span class="strike">products</span>.
</h1>
<p class="sub">DEPT.OF—NOISE は、装飾と従順さを拒む実験的キュレーションです。月に一度、長すぎるエッセイと、整っていないアートを送ります。購読は自由、解除も自由。</p>
<div class="ctas">
<a class="btn hot" href="#subscribe">SUBSCRIBE — 0 YEN</a>
<a class="btn" href="#about">READ THE MANIFESTO →</a>
</div>
</section>
<div class="strip" aria-label="Stats">
<span>EST. <b>2018</b></span>
<span>ISSUES — <b>042</b></span>
<span>READERS — <b>14,200</b></span>
<span>ADS — <b>NONE</b></span>
<span>UPDATED — <b>2026-04-26</b></span>
</div>
<pre class="comment" aria-hidden="true">/*
* <span class="y">this site is a website.</span>
* built in 2026. © 0000—∞. no rights reserved.
* served from a small box in tokyo.
* if it loads slow, blame the rain.
*/</pre>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="about" aria-labelledby="about-heading"><h2 id="about-heading">マニフェストの例</h2><p>整った装飾より、言葉と作品の輪郭を前へ出す。DEPT.OF—NOISEは架空の編集プロジェクトです。</p></section><section id="work" aria-labelledby="work-heading"><h2 id="work-heading">作品の紹介について</h2><p>作品を紹介する領域の見本です。実際の作品と制作情報を確認して掲載してください。</p></section><section id="log" aria-labelledby="log-heading"><h2 id="log-heading">編集記録について</h2><p>号数や読者数は架空の値です。更新記録として使う場合は、実際の公開日と記録へ置き換えます。</p></section><section id="contact" aria-labelledby="contact-heading"><h2 id="contact-heading">連絡先について</h2><p>連絡先や送信処理は未設定です。公開時には利用できる窓口を接続してください。</p></section><section id="subscribe" aria-labelledby="subscribe-heading"><h2 id="subscribe-heading">購読について</h2><p>購読申込み・メール配信は実装していません。このページからメールや入力内容を送ることはありません。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
ブルータリズムは元来、コンクリートを剥き出しにした建築様式の名です。Webにおけるブルータリズムも同じ精神を持ちます——角丸、影、グラデーション、整ったグリッドといった「Webデザインのお作法」を意図的に放棄し、剥き出しの構造と生のタイポグラフィを晒す。洗練の対極にあえて立つことで、メッセージそのものを際立たせる選択です。
「お作法」を捨てると何が起きるか
現代のWebサイトは、驚くほど似ています。同じグラデーション、同じ丸み、同じ余白の取り方——快適である一方、どれも記憶に残らない。ブルータリストヒーローは、その快適さをわざと壊します。極太の罫線、無機質なシステムフォント、不揃いな配置。見る人の多くは戸惑いますが、刺さる人には「この作り手は普通じゃない、何かを持っている」と強烈に刺さる。万人に好かれることを捨てて、特定の誰かに深く届くことを選ぶ様式です。
装飾で誤魔化せない、ということ
ブルータリズムの最も厳しい点は、装飾という逃げ道がないことです。グラデーションや写真で印象を作れない以上、勝負はコピーの強さに直結します。見出しの言葉が弱ければ、そのまま弱いページになる。これは諸刃の剣ですが、裏を返せば「言葉に自信があるブランド」にとっては最高の舞台です。
崩れる形装飾で印象を作る
グラデーションや写真があると、コピーが弱くてもページは成立してしまいます。言葉の弱さが表に出ないかわりに、何を言っていたかも残りません。
効く形言葉だけで勝負する
逃げ道が無いぶん、見出しの強さがそのままページの強さになります。諸刃の剣ですが、言葉に自信があるブランドにとっては最高の舞台です。
仕上げの判断軸
無装飾を貫いても、本文だけは必ず読めること。可読性の最低ラインだけは、様式より優先します。
反トレンドが本質なので、流行り廃りに左右されない長期的な強さがある一方、AdSenseの広告領域は「あえてデザインに組み込む」覚悟が要ります。ブランドの人格が尖っていて、それを隠したくない——そういう作り手にだけ薦められる、選ぶ人を選ぶ様式です。
ヒーローの構成要素
使いどころ
- 実験的アート・キュレーションサイト
- アンダーグラウンド音楽・サブカルチャー
- デザインカンファレンスのトップ
- 「美しさより主張」のブランドマニフェスト
このデザインの分類
背景と狙いどころ
よくある質問
可読性が下がるのではないか？
過剰な装飾を削っているので、本文の可読性はむしろ高い。ヒーローH1の極大化が読みづらく感じる場合は line-height を 0.95-1.05 に詰めるかわりに、サブテキストを十分なサイズで置きます。
SEOや AdSense と相性は？
検索エンジンはテキストコンテンツとマークアップ品質で評価するので、ブルータリストデザインでも問題なし。AdSense は配色衝突が起きにくい広告領域を本文中央以降に確保すれば十分機能します。
「美しくない」と思われませんか？
それが狙いです。ブルータリズムは「整え方の上手さ」ではなく「主張の強度」で評価されるジャンルです。万人受けは目指さず、刺さる人に刺すための表現。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。