ヒーロー · ヒーローセクション
美術館展覧会ポスター風のヒーロー
国立美術館の特別展ポスターを再構築したヒーローセクション。明朝大型タイトル・赤の差し色・許可印・バーコードまで作り込み、「文化的権威」と「会期限定の希少性」を同時に演出する尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/museum-exhibition-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
架空の美術館の特別展ポスターを参考にしたヒーローセクションを作ってください。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 配色: 紙地 #efe9dc + 墨色 #14110d + 朱赤 #c8201a + 古金 #b78b3a。 - 全画面に薄いノイズドット（radial-gradient）を mix-blend-mode: multiply で重ねる。 - 上部メタストリップ: 美術館名（左）/ ギャラリー番号（中央・赤丸付き）/ 展示番号（モノスペース、右）。3px太線で囲う。 - 4隅にL字型の装飾コーナー（border のみ、56px）。 - メインは2カラム: - 左: SPECIAL EXHIBITION バッジ（赤、letter-spacing 強）/ 巨大な明朝タイトル3行（行間0.92、最大112px）/ ローマ字サブ（letter-spacing 0.5em）/ CTAボタン2個（黒×紙、矢印付） - 右: 縦長フレーム（aspect 3:4、白背景に方眼）にSVGの抽象建築コンポジション（円・四角・対角線・赤マーカー）+ 朱印スタンプ（rotate -12deg、円形、丸ゴシック）+ 仕様DL（会期/休館日/料金/会場、grid 80px 1fr）。 - 下部フッターバー: 主催 / 監修 / 共催 / バーコード（CSS repeating-linear-gradient で描画）+ JANコード番号風。 - フォント: タイトルは Hiragino Mincho ProN / Yu Mincho、メタは Helvetica Neue、番号は JetBrains Mono。 - JS不要、フルレスポンシブ（モバイルは1カラム）。
バリエーション
西洋美術館版
タイトルを欧文（Bodoni / Didone系のセリフ）にして、印章を Latin "APPROVED" に変更。 会期表記を欧文形式（APRIL 26 — JULY 20, 2026）に。
モダンアート展版
フレーム内SVGを Mondrian 風（赤・青・黄の矩形）に差し替え。 差し色を黒のみに絞ってシャープに。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。展覧会・美術館・会期・価格は架空の設定です。図はインラインSVG。チケットの購入・決済は行いません。
コードを表示
<!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,nofollow">
<title>museum-exhibition-hero preview</title>
<style>
:root {
--paper: #efe9dc;
--ink: #14110d;
--red: #c8201a;
--gold: #b78b3a;
--rule: #14110d;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
body::before {
content: "";
position: fixed; inset: 0; pointer-events: none;
background-image:
radial-gradient(rgba(20,17,13,0.06) 1px, transparent 1px);
background-size: 3px 3px;
mix-blend-mode: multiply;
opacity: 0.55;
z-index: 1;
}
.stage {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: clamp(28px, 4vw, 56px);
z-index: 2;
}
.corner {
position: absolute;
width: 56px; height: 56px;
border: 2px solid var(--ink);
}
.corner.tl { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 24px; right: 24px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 24px; left: 24px; border-right: 0; border-top: 0; }
.corner.br { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }
/* Top meta strip */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 3px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 12px 0;
font-family: "Helvetica Neue", "Yu Gothic", "Noto Sans JP", sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.topbar .institution {
font-weight: 700;
letter-spacing: 0.3em;
}
.topbar .gallery {
color: var(--red);
font-weight: 700;
}
.topbar .num {
font-family: "JetBrains Mono", "Courier New", monospace;
letter-spacing: 0.15em;
}
/* Main grid */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 56px;
align-items: end;
}
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; gap: 32px; }
}
.left .eyebrow {
font-family: "Helvetica Neue", sans-serif;
font-size: 12px;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 24px;
}
.left .eyebrow span.dot {
display: inline-block;
width: 7px; height: 7px;
background: var(--red);
border-radius: 50%;
vertical-align: middle;
margin: 0 12px 0 0;
transform: translateY(-2px);
}
h1.title {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
font-weight: 900;
font-size: clamp(50px, 8vw, 112px);
line-height: 0.92;
letter-spacing: 0.02em;
margin: 0;
color: var(--ink);
}
h1.title .row1 { display: block; }
h1.title .row2 {
display: block;
color: var(--red);
font-style: normal;
}
h1.title .row3 {
display: block;
font-size: 0.55em;
font-weight: 400;
letter-spacing: 0.1em;
margin-top: 12px;
color: var(--ink);
}
/* Romaji + tagline */
.roman {
margin-top: 32px;
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
letter-spacing: 0.5em;
text-transform: uppercase;
border-top: 1px solid var(--ink);
padding-top: 16px;
}
/* Right column */
.right { position: relative; }
.frame {
position: relative;
border: 2px solid var(--ink);
background: #fff;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.frame::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid var(--ink);
pointer-events: none;
z-index: 3;
}
.frame svg {
width: 100%; height: 100%;
display: block;
}
.frame .stamp {
position: absolute;
bottom: 28px; right: 28px;
width: 92px; height: 92px;
border: 2px solid var(--red);
color: var(--red);
border-radius: 50%;
display: grid;
place-items: center;
font-family: "Hiragino Mincho ProN", serif;
font-weight: 900;
font-size: 22px;
letter-spacing: 0.05em;
transform: rotate(-12deg);
background: rgba(255,255,255,0.85);
z-index: 4;
}
.frame .stamp small {
display: block;
font-size: 9px;
letter-spacing: 0.2em;
margin-top: 2px;
text-align: center;
}
.specbox {
margin-top: 24px;
border: 1px solid var(--ink);
padding: 18px 20px;
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
font-size: 12.5px;
line-height: 1.85;
background: rgba(255,255,255,0.6);
}
.specbox dl {
margin: 0;
display: grid;
grid-template-columns: 80px 1fr;
row-gap: 8px;
}
.specbox dt {
color: var(--red);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 11px;
align-self: center;
}
.specbox dd {
margin: 0;
}
.specbox dd b { font-weight: 700; }
/* CTA row */
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 36px;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 26px;
background: var(--ink);
color: var(--paper);
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2em;
text-decoration: none;
text-transform: uppercase;
transition: background 0.18s ease;
}
.btn:hover { background: var(--red); }
.btn .arr {
width: 22px; height: 1px;
background: var(--paper);
position: relative;
}
.btn .arr::after {
content: "";
position: absolute;
right: 0; top: 50%;
width: 8px; height: 8px;
border-top: 1px solid var(--paper);
border-right: 1px solid var(--paper);
transform: translateY(-50%) rotate(45deg);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost .arr { background: var(--ink); }
.btn-ghost .arr::after { border-color: var(--ink); }
/* Bottom info bar */
.bottombar {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 80px;
padding-top: 18px;
border-top: 1px solid var(--ink);
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
gap: 24px;
flex-wrap: wrap;
}
.bottombar .col { max-width: 260px; }
.bottombar h4 {
margin: 0 0 6px;
color: var(--red);
font-size: 10.5px;
letter-spacing: 0.4em;
font-weight: 700;
}
.bottombar p {
margin: 0;
line-height: 1.6;
text-transform: none;
letter-spacing: 0.05em;
font-size: 12px;
}
.bottombar .barcode {
height: 48px;
background: repeating-linear-gradient(
to right,
var(--ink) 0 1px, transparent 1px 3px,
var(--ink) 3px 5px, transparent 5px 6px,
var(--ink) 6px 8px, transparent 8px 11px,
var(--ink) 11px 12px, transparent 12px 14px
);
width: 200px;
}
.bottombar .barcode-num {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
margin-top: 4px;
letter-spacing: 0.3em;
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #14110d; 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: #14110d; background: #f2ecdf; 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; } }
</style>
</head>
<body>
<div class="stage">
<span class="corner tl"></span>
<span class="corner tr"></span>
<span class="corner bl"></span>
<span class="corner br"></span>
<header class="topbar">
<span class="institution">余白現代美術館 / DEMO</span>
<span class="gallery">● GALLERY 02・03</span>
<span class="num">EXH. NO. 0247 / 2026</span>
</header>
<section class="hero">
<div class="left">
<p class="eyebrow"><span class="dot"></span>SPECIAL EXHIBITION 2026</p>
<h1 class="title">
<span class="row1">余白の</span>
<span class="row2">建築。</span>
<span class="row3">— 戦後日本における空間設計の系譜 —</span>
</h1>
<p class="roman">YOHAKU NO KENCHIKU — ARCHITECTURE OF NEGATIVE SPACE</p>
<div class="cta-row">
<a class="btn" href="#tickets">チケットを購入<span class="arr"></span></a>
<a class="btn btn-ghost" href="#exhibition">展覧会の詳細<span class="arr"></span></a>
</div>
</div>
<div class="right">
<div class="frame">
<svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#efe9dc"/>
<stop offset="1" stop-color="#d8cfba"/>
</linearGradient>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M20 0H0V20" fill="none" stroke="#14110d" stroke-width="0.4" opacity="0.18"/>
</pattern>
</defs>
<rect width="300" height="400" fill="url(#g1)"/>
<rect width="300" height="400" fill="url(#grid)"/>
<!-- abstract architectural composition -->
<rect x="60" y="80" width="180" height="240" fill="none" stroke="#14110d" stroke-width="2"/>
<line x1="60" y1="200" x2="240" y2="200" stroke="#14110d" stroke-width="1.2"/>
<line x1="150" y1="80" x2="150" y2="320" stroke="#14110d" stroke-width="1.2"/>
<circle cx="150" cy="200" r="58" fill="none" stroke="#c8201a" stroke-width="2"/>
<circle cx="150" cy="200" r="2.5" fill="#c8201a"/>
<line x1="60" y1="80" x2="240" y2="320" stroke="#14110d" stroke-width="0.6" opacity="0.5"/>
<line x1="240" y1="80" x2="60" y2="320" stroke="#14110d" stroke-width="0.6" opacity="0.5"/>
<text x="62" y="350" font-family="JetBrains Mono, monospace" font-size="8" fill="#14110d" letter-spacing="2">FIG. 03 — PLAN VIEW, 1:200</text>
</svg>
<span class="stamp">許可<small>DEMO-26</small></span>
</div>
<div class="specbox">
<dl>
<dt>会期</dt>
<dd><b>2026.04.26 — 2026.07.20</b></dd>
<dt>休館日</dt>
<dd>月曜（祝日の場合は翌平日）</dd>
<dt>料金</dt>
<dd>一般 <b>¥1,800</b> / 学生 <b>¥1,200</b> / 高校生以下 無料</dd>
<dt>会場</dt>
<dd>ギャラリー2F・3F</dd>
</dl>
</div>
</div>
</section>
<footer class="bottombar">
<div class="col">
<h4>主催</h4>
<p>余白現代美術館・余白建築研究会・朝景新聞社</p>
</div>
<div class="col">
<h4>監修</h4>
<p>佐藤 葉子（建築史）・西村 雅彦（評論家）</p>
</div>
<div class="col">
<h4>共催</h4>
<p>余白文化企画</p>
</div>
<div>
<div class="barcode" aria-hidden="true"></div>
<div class="barcode-num">4 902370 522471</div>
</div>
</footer>
</div>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="tickets" aria-labelledby="tickets-heading"><h2 id="tickets-heading">チケットについて</h2><p>料金と会期は架空の設定です。チケットの購入・決済は実装していません。</p></section><section id="exhibition" aria-labelledby="exhibition-heading"><h2 id="exhibition-heading">展覧会の構成例</h2><p>図面の線と余白をテーマにした架空の展覧会です。右側の図はSVGで作った抽象的な構成で、実在の展示作品ではありません。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
美術館の特別展ポスターは、独特の「格」を持っています。大きな明朝体のタイトル、節度ある赤の差し色、会期と会場の端正な組版——これらは長い時間をかけて「文化的に価値あるものを告知する様式」として社会に刷り込まれてきました。このヒーローは、その刷り込みをそのまま借用します。
権威は「様式」から借りられる
訪問者は、サイトの中身を吟味する前に、まず見た目から「これはどの種類のものか」を瞬時に判断します。SaaSの量産ヒーロー——グラデーション、丸み、やわらかい影——を見れば「よくあるWebサービス」と分類する。一方、美術館ポスターの様式を見れば、脳は反射的に「文化的に吟味された対象」という棚にそれを置きます。明朝の大型タイトルと禁欲的なレイアウトは、内容を読む前から信頼の下地を作ります。
会期がもたらす希少性
「2026.04.26 — 07.20」という会期表示には、料金表やCTAにはない力があります。それは時間に締め切りを設定する。人はいつでも手に入るものを後回しにし、期間限定のものに今すぐ反応します。展覧会というメタファは、この希少性の感覚をごく自然に——押し売り感なく——画面に持ち込めます。
崩れる形いつでも申し込めます
締め切りが無い誘いは、後回しにされて忘れられます。急かさない配慮のつもりが、行動の理由を消しているだけになります。
効く形2026.04.26 — 07.20
会期表示は時間に締め切りを設定します。展覧会というメタファなら、この希少性を押し売り感なく画面へ持ち込めます。
仕上げの判断軸
明朝体は Noto Serif JP か Hiragino Mincho ProN を起点に、字間を詰めすぎないこと。赤の差し色は1〜2箇所の「効かせどころ」に限定し、多用すると端正さが崩れます。朱印・バーコードといった触覚的な細部は、本物らしさを支える一方で過剰だと演出過多に転ぶため、1画面に1〜2点。
1〜2箇所赤の差し色。多用すると端正さが崩れる
1〜2点朱印・バーコードなどの触覚的な細部。過剰は演出過多
文化施設・ギャラリー・高級ブランドの「展覧会型」プロモーションでこそ、この格が活きます。
ヒーローの構成要素
使いどころ
- 美術館・博物館の特別展ランディングページ
- ギャラリー・アートイベントの告知サイト
- 文化施設・劇場・ホールの公演紹介
- 高級ブランドの「展覧会型」プロモーションLP
- 書籍・出版の刊行記念イベント
このデザインの分類
背景と狙いどころ
よくある質問
明朝体の選び方は？
Web標準なら Noto Serif JP、見栄え重視なら Hiragino Mincho ProN を最初に置く。tracking は0.02em程度で詰めすぎないこと。
朱印は画像で作る？
SVG or 純CSS（border + transform rotate）で十分。画像にすると拡大時に荒れるため、文字部分は font-family で指定する方が良い。
会期の表記が長くてレイアウトが崩れます。どうすればいいですか。
dl の grid-template-columns を auto 1fr に切り替えて項目を可変幅に。モバイルは1カラム積みに。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
白黒と余白で見せる美容室のヒーロー
白黒写真と広い余白、縦組みの一文だけで構成した美容室のファーストビュー。色を使わず、明朝の縦書き・細い罫線・黒1色の予約ボタンで、落ち着いた個人店の空気と予約までの導線を両立させる。
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
装飾を拒むブルータリズムのヒーロー
角丸・影・グラデーションを一切使わず、極太タイポと裸の HTML 要素だけで突きつける反デザインのヒーロー。実験的アート・アンダーグラウンドメディア・若手クリエイターが「中身で勝負」する場面の選択肢。