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