ヒーロー · ヒーローセクション
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/bauhaus-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
アート・デザイン教育機関のヒーローを、バウハウス様式で作ってください。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 配色: オフ白 #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と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 {
--paper: #f5f1e6;
--ink: #1a1a1a;
--red: #e63946;
--blue: #1d3557;
--yellow: #ffd166;
--muted: #4a4540;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial Black",
"Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern", "ss01";
}
/* Top bar — minimal Swiss/Bauhaus */
header.bar {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem clamp(1rem, 4vw, 2.5rem);
border-bottom: 3px solid var(--ink);
}
.brand {
font-family: "Helvetica Neue", "Inter", sans-serif;
font-weight: 900;
font-size: 1.05rem;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.brand::before {
content: "";
width: 18px; height: 18px;
background: var(--red);
border-radius: 999px;
}
.nav {
font-family: "Helvetica Neue", "Inter", sans-serif;
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nav a {
color: var(--ink);
text-decoration: none;
padding: 0 0.6rem;
border-right: 2px solid var(--ink);
}
.nav a:last-child { border-right: 0; }
.nav a:hover { background: var(--yellow); }
@media (max-width: 720px) { .nav { display: none; } }
/* Hero scene — geometry + giant typography */
.scene {
position: relative;
min-height: clamp(620px, 90vh, 800px);
overflow: hidden;
}
/* Geometric shapes scattered */
.shape { position: absolute; pointer-events: none; }
.circle-red {
top: 8%; left: -8%;
width: clamp(220px, 28vw, 380px);
aspect-ratio: 1;
background: var(--red);
border-radius: 50%;
}
.triangle-blue {
bottom: 10%; right: -6%;
width: 0; height: 0;
border-left: clamp(140px, 16vw, 220px) solid transparent;
border-right: clamp(140px, 16vw, 220px) solid transparent;
border-bottom: clamp(220px, 28vw, 360px) solid var(--blue);
}
.square-yellow {
top: 60%; left: 12%;
width: clamp(120px, 14vw, 200px);
aspect-ratio: 1;
background: var(--yellow);
}
.circle-blue-small {
top: 20%; right: 14%;
width: 110px; height: 110px;
background: var(--blue);
border-radius: 50%;
}
.square-red-small {
bottom: 18%; left: 38%;
width: 80px; height: 80px;
background: var(--red);
}
.ring-yellow {
top: 38%; right: 8%;
width: 160px; height: 160px;
border: 18px solid var(--yellow);
border-radius: 50%;
}
.diagonal-line-1 {
top: 0; left: 0;
width: 200%; height: 6px;
background: var(--ink);
transform: rotate(-22deg);
transform-origin: 0 0;
}
.diagonal-line-2 {
bottom: 0; right: 0;
width: 80%; height: 4px;
background: var(--ink);
transform: rotate(8deg);
transform-origin: 100% 100%;
}
/* Content layer */
.content {
position: relative;
z-index: 5;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
max-width: 1280px;
margin: 0 auto;
}
.meta-strip {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--ink);
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.meta-strip .accent { color: var(--red); }
h1 {
margin: 0 0 1.5rem;
font-family: "Helvetica Neue", "Inter", "Arial Black", sans-serif;
font-weight: 900;
font-size: clamp(3.5rem, 11vw, 9rem);
line-height: 0.92;
letter-spacing: -0.05em;
}
h1 :lang(ja) { letter-spacing: 0; line-height: 1.05; }
h1 .blue { color: var(--blue); }
h1 .red { color: var(--red); }
h1 .strike {
text-decoration: line-through;
text-decoration-thickness: 0.07em;
text-decoration-color: var(--ink);
}
h1 .small {
display: block;
font-size: 0.18em;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 1rem;
}
.lede {
max-width: 50ch;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.75;
color: var(--ink);
margin: 0 0 2.5rem;
font-weight: 500;
background: var(--paper);
padding-right: 1rem;
}
.ctas {
display: inline-flex;
gap: 0;
flex-wrap: wrap;
}
.btn {
font-family: "Helvetica Neue", "Inter", sans-serif;
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 1rem 1.85rem;
text-decoration: none;
border: 4px solid var(--ink);
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.1s;
}
.btn-1 {
background: var(--ink);
color: var(--paper);
border-right: 0;
}
.btn-1:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn-2 {
background: var(--paper);
color: var(--ink);
}
.btn-2:hover { background: var(--yellow); color: var(--ink); }
.btn:active { transform: translateY(2px); }
@media (max-width: 540px) {
.btn-1, .btn-2 { width: 100%; border-right: 4px solid var(--ink); }
.btn-1 { border-bottom: 0; }
}
/* Footer strip — Bauhaus-style colour bar */
footer.bar {
position: relative;
z-index: 10;
display: flex;
height: 14px;
}
footer.bar > * { flex: 1; }
footer.bar .b1 { background: var(--red); }
footer.bar .b2 { background: var(--yellow); }
footer.bar .b3 { background: var(--blue); }
footer.bar .b4 { background: var(--ink); }
.credit {
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
border-top: 1px solid var(--ink);
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #1a1a1a; 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: #1a1a1a; background: #f5f1e6; 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; } }
@media(max-width:360px) { h1 { font-size:clamp(2.8rem,14vw,3.5rem); } }
@media(max-width:720px) { .circle-blue-small { top:auto; bottom:10%; right:8%; } }
</style>
</head>
<body>
<header class="bar">
<div class="brand">FORM ＆ FUNCTION SCHOOL</div>
<nav class="nav">
<a href="#curriculum">Curriculum</a>
<a href="#faculty">Faculty</a>
<a href="#apply">Apply</a>
<a href="#press">Press</a>
</nav>
</header>
<section class="scene">
<span class="shape circle-red" aria-hidden="true"></span>
<span class="shape triangle-blue" aria-hidden="true"></span>
<span class="shape square-yellow" aria-hidden="true"></span>
<span class="shape circle-blue-small" aria-hidden="true"></span>
<span class="shape square-red-small" aria-hidden="true"></span>
<span class="shape ring-yellow" aria-hidden="true"></span>
<span class="shape diagonal-line-1" aria-hidden="true"></span>
<span class="shape diagonal-line-2" aria-hidden="true"></span>
<div class="content">
<div class="meta-strip">
<span><span class="accent">Issue №42</span> · 2026 / Spring</span>
<span>Form follows function · Tokyo / Berlin</span>
</div>
<h1>
<span class="blue">FORM</span><br/>
<span class="strike">follows</span> <span class="red">FUNCTION</span>
<span class="small">— bauhaus principle № 1, 1919 —</span>
</h1>
<p class="lede">1919年に提唱された機能美の思想を、現代のWebに翻訳する 6 ヶ月間の集中講座。原色と幾何で世界を組み立てる。</p>
<div class="ctas">
<a class="btn btn-1" href="#apply">Apply Now →</a>
<a class="btn btn-2" href="#curriculum">View Curriculum</a>
</div>
</div>
</section>
<footer class="bar" aria-hidden="true">
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</footer>
<div class="credit">
<span>© 2026 FORM ＆ FUNCTION · Bauhaus Centennial Edition</span>
<span>Tokyo · Berlin · Online</span>
</div>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="curriculum" aria-labelledby="curriculum-heading"><h2 id="curriculum-heading">講座の構成例</h2><p>原色の配色、幾何形の配置、文字の大小を順に試す、架空のデザイン講座です。</p></section><section id="faculty" aria-labelledby="faculty-heading"><h2 id="faculty-heading">講師について</h2><p>講師の紹介を置く場所の見本です。実在の講師や開催実績は設定していません。</p></section><section id="apply" aria-labelledby="apply-heading"><h2 id="apply-heading">申込みについて</h2><p>申込み・決済は実装していません。実際の講座では日時・会場・条件と申込み先を設定してください。</p></section><section id="press" aria-labelledby="press-heading"><h2 id="press-heading">掲載について</h2><p>この画面は架空の講座のデザイン例です。資料や取材窓口を設ける場合は、実際の連絡先を案内してください。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
バウハウスは1919年、ヴァルター・グロピウスがドイツ・ヴァイマルに創設した美術学校であり、20世紀デザインの源流です。原色（赤・青・黄）と純粋な幾何形、グロテスクサンセリフ——その造形言語は100年を経た今もデザイン教育の基礎であり続けています。このヒーローは、その古典をWebの第一画面に再構築する試みです。
古典を引用するということ
SaaSのヒーローは、グラデーション・丸み・やわらかい影という共通言語に収束しがちです。バウハウス様式は、その流行のまったく外側にある座標から勝負します。赤い円、青い三角、黄色い四角が極太の見出しと重なり、対角線が視線を分節する——この構成は、新しさではなく教養で訪問者を捉えます。美術館、デザインスクール、学術カンファレンスといった、知性を信頼の源とするブランドに、これ以上の一致はありません。
中間色を持たない強さ
バウハウス配色の核心は、中間色を使わないという禁欲です。原色と黒白だけ——選択肢を絞ることが、かえって構成に緊張感と明快さを与えます。要素同士をあえて部分的に重ね、画面外へ円や四角を切れさせるのは、「版面は画面の外にも続いている」という構成主義的な感覚を生むため。静止しているのに拡張していく、その矛盾が前衛性の正体です。
崩れる形中間色でなじませる
グラデーションや淡いトーンを足すと画面は穏やかになりますが、SaaSの共通言語に吸収されて他社と見分けが付かなくなります。様式を選んだ意味が消えます。
効く形原色と黒白だけで組む
選択肢を絞ることが、かえって構成に緊張感と明快さを与えます。要素を部分的に重ね、円や四角を画面外へ切れさせると、版面が画面の外へ続く感覚が出ます。
仕上げの判断軸
太い色面はAdSenseの広告と視覚的に競合しやすいので、広告はヒーローから離した控えめな背景に置きます。日本語見出しは丸ゴシックのBlackウェイト（Mochiy Pop One、源ノ角ゴシック Black など）が幾何構成になじみ、明朝は逆に浮きます。
流行に乗らない様式なので、5年後も古びません。それがこの選択のいちばん長い利点です。
ヒーローの構成要素
使いどころ
- アート・デザインスクール
- 美術館・ギャラリーの特別展
- デザイン書籍・雑誌の出版
- 学術カンファレンス・教育プロジェクト
- 構造的・知的なブランド表現
このデザインの分類
背景と狙いどころ
よくある質問
バウハウスは古臭くないですか？
100年前のデザイン運動ですが、今もデザイン教育の基礎として現役。むしろ多くのトレンドより長持ちする普遍性があります。
幾何形が広告と相性悪い？
太い色面は AdSense と視覚競合しがち。広告領域はヒーローから離れた控えめな背景の上に配置するのが無難です。
日本語との相性は？
太い丸ゴ系（Mochiy Pop One や 源ノ角ゴシック Black）が幾何構成に馴染みます。明朝は逆に浮きます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。
網点と版ズレの昭和ポスター風ヒーロー
昭和の喫茶店のポスターやマッチ箱をWebの第一画面に持ち込んだヒーロー。生成り色の紙に印刷の網点を敷き、2色刷りの見当ズレを文字の影で再現し、縦書きの店名と同心円の帯、半券付きのボタンで組む。老舗の店舗や地域の催しに向く。
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。