ヒーロー · ヒーローセクション

装飾を拒むブルータリズムのヒーロー

プレビュー

vibe.itlibra.com/preview/brutalist-hero/

概要

ブルータリズムは元来、コンクリートを剥き出しにした建築様式の名です。Webにおけるブルータリズムも同じ精神を持ちます——角丸、影、グラデーション、整ったグリッドといった「Webデザインのお作法」を意図的に放棄し、剥き出しの構造と生のタイポグラフィを晒す。洗練の対極にあえて立つことで、メッセージそのものを際立たせる選択です。

「お作法」を捨てると何が起きるか

現代のWebサイトは、驚くほど似ています。同じグラデーション、同じ丸み、同じ余白の取り方——快適である一方、どれも記憶に残らない。ブルータリストヒーローは、その快適さをわざと壊します。極太の罫線、無機質なシステムフォント、不揃いな配置。見る人の多くは戸惑いますが、刺さる人には「この作り手は普通じゃない、何かを持っている」と強烈に刺さる。万人に好かれることを捨てて、特定の誰かに深く届くことを選ぶ様式です。

装飾で誤魔化せない、ということ

ブルータリズムの最も厳しい点は、装飾という逃げ道がないことです。グラデーションや写真で印象を作れない以上、勝負はコピーの強さに直結します。見出しの言葉が弱ければ、そのまま弱いページになる。これは諸刃の剣ですが、裏を返せば「言葉に自信があるブランド」にとっては最高の舞台です。

仕上げの判断軸

無装飾を貫いても、本文だけは必ず読めること——可読性の最低ラインは死守します。反トレンドが本質なので、流行り廃りに左右されない長期的な強さがある一方、AdSenseの広告領域は「あえてデザインに組み込む」覚悟が要ります。ブランドの人格が尖っていて、それを隠したくない——そういう作り手にだけ薦められる、選ぶ人を選ぶ様式です。

使いどころ

  • 実験的アート・キュレーションサイト
  • アンダーグラウンド音楽・サブカルチャー
  • デザインカンファレンスのトップ
  • 「美しさより主張」のブランドマニフェスト

このデザインの分類

カテゴリ
ヒーロー
スタイル
ブルータリスト / ボールド / モノクロ / エディトリアル

背景と狙いどころ

AIへの指示文

アンダーグラウンド系メディアのトップに、ブルータリストなヒーローを作ってください。

要件:
- 配色は 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 は HTML <button> 要素そのものに装飾を最小限だけ加えたもの。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 を廃し、長文段落だけで構成。フォントサイズの落差で階層化。

よくある質問

可読性が下がるのではないか?
過剰な装飾を削っているので、本文の可読性はむしろ高い。ヒーローH1の極大化が読みづらく感じる場合は line-height を 0.95-1.05 に詰めるかわりに、サブテキストを十分なサイズで置きます。
SEOや AdSense と相性は?
検索エンジンはテキストコンテンツとマークアップ品質で評価するので、ブルータリストデザインでも問題なし。AdSense は配色衝突が起きにくい広告領域を本文中央以降に確保すれば十分機能します。
「美しくない」と思われませんか?
それが狙いです。ブルータリズムは「整え方の上手さ」ではなく「主張の強度」で評価されるジャンルです。万人受けは目指さず、刺さる人に刺すための表現。