ヒーロー · ヒーローセクション
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
プレビュー
概要
ブルータリズムは元来、コンクリートを剥き出しにした建築様式の名です。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 を廃し、長文段落だけで構成。フォントサイズの落差で階層化。
よくある質問
可読性が下がるのではないか?
SEOや AdSense と相性は?
「美しくない」と思われませんか?
関連するデザイン
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。