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

バウハウス様式・幾何構成の原色ヒーロー

プレビュー

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

概要

バウハウスは1919年、ヴァルター・グロピウスがドイツ・ヴァイマルに創設した美術学校であり、20世紀デザインの源流です。原色(赤・青・黄)と純粋な幾何形、グロテスクサンセリフ——その造形言語は100年を経た今もデザイン教育の基礎であり続けています。このヒーローは、その古典をWebの第一画面に再構築する試みです。

古典を引用するということ

SaaSのヒーローは、グラデーション・丸み・やわらかい影という共通言語に収束しがちです。バウハウス様式は、その流行のまったく外側にある座標から勝負します。赤い円、青い三角、黄色い四角が極太の見出しと重なり、対角線が視線を分節する——この構成は「新しさ」ではなく「教養」で訪問者を捉えます。美術館、デザインスクール、学術カンファレンスといった、知性を信頼の源とするブランドに、これ以上の一致はありません。

中間色を持たない強さ

バウハウス配色の核心は「中間色を使わない」という禁欲です。原色と黒白だけ——選択肢を絞ることが、かえって構成に緊張感と明快さを与えます。要素同士をあえて部分的に重ね、画面外へ円や四角を切れさせるのは、「版面は画面の外にも続いている」という構成主義的な感覚を生むため。静止しているのに拡張していく、その矛盾が前衛性の正体です。

仕上げの判断軸

太い色面はAdSenseの広告と視覚的に競合しやすいので、広告はヒーローから離した控えめな背景に置きます。日本語見出しは丸ゴシックのBlackウェイト(Mochiy Pop One、源ノ角ゴシック Black など)が幾何構成になじみ、明朝は逆に浮きます。流行に乗らない様式なので、5年後も古びない——それがこの選択の長期的な利点です。

使いどころ

  • アート・デザインスクール
  • 美術館・ギャラリーの特別展
  • デザイン書籍・雑誌の出版
  • 学術カンファレンス・教育プロジェクト
  • 構造的・知的なブランド表現

このデザインの分類

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

背景と狙いどころ

AIへの指示文

アート・デザイン教育機関のヒーローを、バウハウス様式で作ってください。

要件:
- 配色: オフ白 #f5f1e6 + 原色4つ — 赤 #e63946 / 青 #1d3557 / 黄 #ffd166 / 黒 #1a1a1a。中間色は使わない。
- 中央に大型の H1(極太グロテスクサンセリフ、Helvetica Black / Druk / Akzidenz Grotesk Black)。clamp 4-8rem。
- H1 の周囲に幾何形を配置: 大型の赤い円、青い三角、黄色い四角。要素同士が部分的に重なる構成。
- 対角線(黒の太い線)を画面に1〜2本引き、視線を分節する。
- サブテキストは硬質な書体で、メタ情報的に。
- CTA ボタン: 黒地原色文字 + 太いボーダー、矩形(角丸なし)。
- 「Issue №42」のようなメタ情報をモノスペースで配置(タイポグラフィ実験誌風)。
- 画面外に部分的に切れる円や四角を置いて「拡張する版面」を表現。
- JS不要、フルレスポンシブ。

バリエーション

ロシア構成主義版

配色を赤・黒・白に絞り、対角線をより多用してダイナミックに。
斜めにずれた書体(transform: skewX)で前衛的に。

黄色基調版

背景を #ffd166 にして、赤・青・黒の幾何形を配置。
春・夏のキャンペーン感が強まる。

よくある質問

バウハウスは古臭くないですか?
100年前のデザイン運動ですが、今もデザイン教育の基礎として現役。むしろ多くのトレンドより長持ちする普遍性があります。
幾何形が広告と相性悪い?
太い色面は AdSense と視覚競合しがち。広告領域はヒーローから離れた控えめな背景の上に配置するのが無難です。
日本語との相性は?
太い丸ゴ系(Mochiy Pop One や 源ノ角ゴシック Black)が幾何構成に馴染みます。明朝は逆に浮きます。