ヒーロー · ヒーローセクション
網点と版ズレの昭和ポスター風ヒーロー
昭和の喫茶店のポスターやマッチ箱をWebの第一画面に持ち込んだヒーロー。生成り色の紙に印刷の網点を敷き、2色刷りの見当ズレを文字の影で再現し、縦書きの店名と同心円の帯、半券付きのボタンで組む。老舗の店舗や地域の催しに向く。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/showa-poster-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
昭和の喫茶店のポスターのようなヒーローセクションを作ってください。店は創業50年ほどの純喫茶という設定です。 要件: - ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。 - 配色: 紙 #f2e6cc、紙の影 #e9d9b4、朱 #d23a26、紺 #1f2d4f、からし #e3a72f、文字 #2a211b。 - 背景は生成り色の紙。radial-gradient の小さな点を6px間隔で敷いて、印刷の網点を表現する。 - 右下に、朱・からし・紺を紙色の細い帯で区切った同心円を大きく置く（repeating-radial-gradient）。画面の外へはみ出させる。 - 放射状の光線（太陽から線が広がる意匠）は使わない。旭日旗を連想させるため、とコメントで書く。 - 見出しは明朝の太字で3行。紺の文字に、朱の影を右下へ3pxずらして重ね、2色刷りの見当ズレに見せる。1語だけ朱にする。 - 見出しの上に紺の小さな札（「創業五十余年・自家焙煎」）と、朱の欧文の斜体（Since 1972 — Coffee & Pudding）。 - 右端に店名を縦書き（writing-mode: vertical-rl）で大きく。紙色の文字に黒の縁取りと紺の影。短い看板文字なので字間を少し開ける。 - ボタンは切符の形。朱の本体と、破線で区切ったからし色の「半券」。影はぼかさず黒で4pxずらす。 - ボタンの下に営業時間・定休日・最寄り駅を、朱の縦線で区切って並べる。 - 見出しの右上に、二重線の丸い判子（昭和四十七年創業）を少し傾けて置く。 - 幅760px未満では1列にし、縦書きの店名は横書きにして最上部へ移す。 - フォント: 見出しと店名は Hiragino Mincho / Yu Mincho、本文は Hiragino Sans / Yu Gothic。
バリエーション
商店街の催し版
店名の代わりに「秋の感謝市」を縦書きに。見出しを日程と会場の告知にし、 切符のボタンを「出店一覧を見る」に、半券を「入場無料」にする。
夜の純喫茶版
紙を紺 #1c2238 に、網点を白の12%に、文字を生成り #f2e6cc にする。 同心円は朱とからしの2色だけにして、ネオン管のように少しにじませる。
このプレビューのコード
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: #f2e6cc;
--paper-2: #e9d9b4;
--red: #d23a26;
--navy: #1f2d4f;
--ink: #2a211b;
--mustard: #e3a72f;
--gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
--mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--gothic);
line-height: 1.8;
letter-spacing: 0;
color: var(--ink);
background: var(--paper);
}
.poster {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2rem;
min-height: 100vh;
padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem);
/* 紙の地。わずかなむらと、印刷の網点を重ねる */
background:
radial-gradient(circle at 1px 1px, rgba(42, 33, 27, 0.13) 1px, transparent 1.4px) 0 0 / 6px 6px,
radial-gradient(120% 90% at 30% 20%, var(--paper) 40%, var(--paper-2));
}
/* 70年代の看板やマッチ箱に多い、同心円の帯。
放射状の光線は旭日旗を連想させるので使わない */
.sun {
position: absolute;
z-index: -1;
right: -30vmin;
bottom: -42vmin;
width: 92vmin;
aspect-ratio: 1;
border-radius: 50%;
background: repeating-radial-gradient(
circle,
var(--red) 0 9%,
var(--paper) 0 12%,
var(--mustard) 0 21%,
var(--paper) 0 24%,
var(--navy) 0 33%,
var(--paper) 0 36%
);
/* 版ズレ。紺の版が少しだけずれて刷られたように見せる */
box-shadow: -8px 6px 0 rgba(31, 45, 79, 0.25);
opacity: 0.9;
}
.copy { position: relative; max-width: 36rem; }
.kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.4rem;
padding: 0.2rem 0.9rem;
font-size: 14px;
font-weight: 700;
color: var(--paper);
background: var(--navy);
border-radius: 999px;
}
.lead-en { margin: 0 0 0.4rem; font-family: Georgia, "Times New Roman", var(--mincho); font-style: italic; font-size: 18px; color: var(--red); }
.h1 {
margin: 0 0 1.2rem;
font-family: var(--mincho);
font-size: clamp(34px, 6vw, 64px);
font-weight: 800;
line-height: 1.35;
color: var(--navy);
/* 赤の版を右下へずらして重ねる。2色刷りの見当ズレ */
text-shadow: 3px 3px 0 rgba(210, 58, 38, 0.45);
}
.h1 em { font-style: normal; color: var(--red); text-shadow: 3px 3px 0 rgba(31, 45, 79, 0.35); }
.body { margin: 0 0 1.8rem; font-size: 16px; line-height: 1.9; }
.ticket {
display: inline-flex;
align-items: stretch;
text-decoration: none;
color: var(--paper);
filter: drop-shadow(4px 4px 0 var(--ink));
}
.ticket b {
padding: 0.8rem 1.4rem;
font-size: 17px;
background: var(--red);
border-radius: 10px 0 0 10px;
}
/* 切り取り線。半券の側だけ色を変える */
.ticket span {
display: grid;
place-items: center;
padding: 0 1rem;
font-size: 13px;
font-weight: 700;
color: var(--ink);
background: var(--mustard);
border-left: 2px dashed var(--ink);
border-radius: 0 10px 10px 0;
}
.ticket:hover b { background: #b82f1d; }
.ticket:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; font-size: 14px; }
.meta div { padding-left: 0.8rem; border-left: 3px solid var(--red); }
.meta small { display: block; font-size: 12px; color: #6b5a48; }
/* 縦書きの大見出し。短い標語なので字間を少し開ける */
.tate {
writing-mode: vertical-rl;
margin: 0;
font-family: var(--mincho);
font-size: clamp(44px, min(9vw, 11vh), 100px);
font-weight: 900;
line-height: 1.1;
letter-spacing: 0.08em;
color: var(--paper);
-webkit-text-stroke: 2px var(--ink);
text-shadow: 6px 6px 0 var(--navy);
}
/* 丸い判子。回転させて貼ったように置く */
.stamp {
position: absolute;
top: -0.8rem;
right: 0;
display: grid;
place-items: center;
width: 104px;
height: 104px;
font-family: var(--mincho);
font-size: 13px;
font-weight: 800;
line-height: 1.4;
text-align: center;
color: var(--red);
border: 3px double var(--red);
border-radius: 50%;
rotate: -12deg;
opacity: 0.85;
}
@media (max-width: 760px) {
.poster { grid-template-columns: minmax(0, 1fr); }
.tate { writing-mode: horizontal-tb; font-size: 40px; line-height: 1.3; letter-spacing: 0; order: -1; }
.stamp { width: 84px; height: 84px; font-size: 11px; }
}
/* 配布デモの操作先。外部通信・登録・決済は行わない。 */
a:focus-visible { outline: 3px solid #2a211b; 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: #2a211b; background: #f2e6cc; 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>
<main class="poster">
<div class="sun" aria-hidden="true"></div>
<div class="copy">
<div class="stamp" aria-hidden="true">昭和<br />四十七年<br />創業</div>
<p class="kicker">創業五十余年 ・ 自家焙煎</p>
<p class="lead-en">Since 1972 — Coffee & Pudding</p>
<h1 class="h1">午後三時は、<br /><em>固めのプリン</em>と<br />深煎りの一杯を。</h1>
<p class="body">商店街の角で半世紀。ネルでゆっくり淹れる深煎りと、卵の多い固めのプリンは、開店のころから変わらない味です。</p>
<a class="ticket" href="#menu"><b>お品書きを見る</b><span>半券</span></a>
<div class="meta">
<div><small>営業時間</small>8:00〜18:00</div>
<div><small>定休日</small>毎週水曜</div>
<div><small>最寄り</small>駅から徒歩4分</div>
</div>
</div>
<p class="tate" aria-hidden="true">純喫茶ミモザ</p>
</main>
<aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の喫茶店のデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="menu" aria-labelledby="menu-heading"><h2 id="menu-heading">お品書きの例</h2><p>深煎りのコーヒーと固めのプリンを組み合わせる、架空の喫茶店のメニュー案です。価格・営業日時・創業年は実店舗の情報ではありません。</p></section></div></aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
昭和の喫茶店のマッチ箱やポスターには、はっきりした共通点があります。生成りの紙、少ない色数、明朝の太い文字、そして少しずれて刷られた色。限られた印刷の条件から生まれた見た目ですが、いまではそれ自体が変わらずにそこにある店の記号として読まれます。
印刷の不完全さを借りる
このヒーローが写真を使わずに昭和らしさを出せるのは、当時の印刷の癖をそのまま再現しているからです。網点は紙の質感を、見当ズレは手作業の温度を運びます。
崩れる形レトロな書体を置くだけ
書体だけを古くしても、地が真っ白で色がぴたりと揃っていると、新しいサイトに古い書体を載せたようにしか見えません。
効く形紙と刷りの癖まで再現する
生成りの地に網点を敷き、2色目の版を3pxずらします。刷られたものとして見えることで、書体の古さが初めて説得力を持ちます。
使わない意匠を先に決める
昭和の雰囲気を出そうとして、赤い円から光線が放射状に広がる図案を選ぶと、旭日旗を強く連想させます。国や読み手によっては政治的な意味で受け取られ、店の意図とは関係なく反発を招きます。
太陽の意匠が欲しいときは、放射状の光線ではなく同心円の帯にする。70年代の看板やマッチ箱に多い形で、同じ時代の空気を出せます。
仕上げの判断軸
色は4色までに絞ります。朱・紺・からしの3色に紙の色を加えるだけで、当時の2〜3色刷りの制約が画面の統一感になります。縦書きの店名は、看板のような短い文字にだけ使い、本文は横書きのまま読みやすさを守ります。
6px網点の間隔。点の不透明度は1割程度に抑える
3px見当ズレの幅。文字の太さより小さくする
4色紙を含めた色数。当時の刷りの制約を守る
狭い画面では縦書きの店名を横書きにして最上部へ移します。縦書きのまま残すと、見出しと店名が1列に並んで、どちらが主役か分からなくなるからです。
ヒーローの構成要素
使いどころ
- 創業の古い飲食店や老舗の店舗サイト
- 商店街や地域の催しの告知ページ
- レトロな商品パッケージの特設ページ
- 昭和をテーマにした展示やイベント
このデザインの分類
背景と狙いどころ
よくある質問
網点は画像を使わずに出せる？
出せます。radial-gradient で1px程度の点を描き、background-size で数pxの間隔に繰り返すだけです。点の不透明度を1割程度に抑えると、紙の質感として馴染みます。
放射状の光線を使わないのはなぜ？
赤い円から線が放射状に広がる意匠は、旭日旗を強く連想させます。国や読み手によっては政治的な意味で受け取られるので、同心円の帯や斜めの縞のような別の意匠で昭和らしさを出してください。
見出しの版ズレは読みにくくならない？
ずらし幅を文字の太さより小さく（3px前後）、影の不透明度を半分以下にすれば読めます。ずらしすぎると二重に見えて、ただのぶれに見えます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
透明ボディの90年代ヒーロー
青い透明樹脂の音楽プレーヤーを主役に、暗い背景と黄緑のボタンを組み合わせた製品紹介。90年代の小さなウィンドウ枠と生成画像の質感を使い、商品を見る操作と仕様を読む操作を分ける。