価格表 · 料金プラン
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/retro-pricing/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
SaaSのサブスクプラン提示向けに、新聞紙面を思わせるレトロなエディトリアル調の料金表を作ってください。
キャンバス:
- 紙のようなベージュ背景 (#f4ece0)、本文色は近黒 (#1a1612)、ミュートは (#5a4f42)。
- 背景には 3px ごとのうっすらした横罫線を敷いて印刷物の質感を出す。
- セリフ書体 (Playfair Display / DM Serif Display / Tiempos / Georgia 系) で見出し、サンセリフ (Inter) でラベルと本文細部。
- アクセントカラーは印刷物らしいスタンプ色の深い赤 (#b81f1f)。
紙面(中央寄せ、max-width 1100px、3pxの二重線で囲う):
- マストヘッド:
- 上に3段の小さな日付ルール行(左: "Vol. XII · No. 4"、中: "Pricing · Subscriptions"、右: "Est. 2026")。sans-serif、uppercase、letter-spacing 0.2em、ミュート色。
- タイトル "The Subscription Gazette" をセリフ+斜体、font-size clamp(2.4rem, 6.5vw, 4.5rem)、weight 900。
- サブタイトル "Plans & Pricing — Effective Immediately"、uppercase、letter-spacing 0.3em。
- 下に 1px の罫線。
- リード文: 中央寄せ、italic、最大 60ch。上下に短い水平線を添えて引用のように見せる。
- 料金表: 3カラムグリッド、左右と上下を 1px の罫線で区切る。各プランは縦方向に並べる:
- 小さなプラン名 (Starter / Pro / Business) — sans, uppercase, letter-spacing 0.24em。
- セリフ体のサブタイトル (e.g. "For first drafts.") — 斜体、weight 900。
- 大きな価格 (3.25rem + 通貨記号 + /mo の単位ラベル)。
- 説明文 (sans, ミュート色)。
- 機能リスト:
- 含まれる項目は行頭記号 `§`(赤・セリフ体)。
- 含まれない項目は `—` の行頭記号で灰色の取り消し線。
- 下部に2色のCTAボタン(primary プランは背景黒+文字白、他は枠線のみ)。CTA は uppercase、sans、letter-spacing 0.16em。hover で translate(2px, -2px) + -3px/3px のアクセント色オフセットシャドウ。
- 中央プラン (Pro) は featured 扱い:
- 背景に 45° のうっすら赤ハッチ。
- 上部に "Most Popular" の赤リボン (絶対位置、上辺に半分食い込ませる)。
- 最下部に byline 行: 1px の罫線で区切った後、uppercase・ミュートの小さな注釈(USD表記、月次課金、請求書対応など)を左右に配置。
レスポンシブ: 820px 以下では 1 カラムに積む。
純粋なHTML/CSS、JS不要。
バリエーション
ダーク版
背景を深緑 (#1a2420) と暖色セピア系のインクに反転。 アクセントをマスタード (#d4a017) に変更。 罫線は細く1pxのまま。
4プラン版
グリッドを4カラムに拡張し、Enterprise プランを追加。 Enterprise は価格表示を "Custom" に差し替え、CTA を "Contact Sales"。 featured は Pro のまま維持。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。価格・サービス条件は架空の例です。プランの選択・契約・決済は実装していません。
コードを表示
<!doctype html>
<html lang="ja">
<!-- Vibehaus / CC0。独立した架空の料金表デモ。申込み・決済・外部通信なし。 -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>新聞風の3段階料金表 — Vibehaus プレビュー</title>
<style>
:root {
--paper: #f4ece0;
--ink: #1a1612;
--ink-muted: #5a4f42;
--rule: #1a1612;
--accent: #b81f1f;
--serif: "Playfair Display", "DM Serif Display", "Tiempos", Georgia, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
--sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--serif);
color: var(--ink);
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(26, 22, 18, 0.025) 3px,
rgba(26, 22, 18, 0.025) 4px
),
var(--paper);
min-height: 100dvh;
padding: clamp(1.5rem, 4vw, 3rem);
}
.paper {
max-width: 1100px;
margin-inline: auto;
border: 3px double var(--rule);
padding: clamp(1.5rem, 3vw, 2.5rem);
background: var(--paper);
position: relative;
}
.masthead {
text-align: center;
border-bottom: 1px solid var(--rule);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.masthead .date-rule {
display: flex;
justify-content: space-between;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 1rem;
}
.masthead h1 {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.4rem, 6.5vw, 4.5rem);
line-height: 1;
letter-spacing: -0.015em;
margin: 0 0 0.25rem;
font-style: italic;
}
.masthead .subtitle {
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-muted);
}
.lede {
max-width: 60ch;
margin: 0 auto 2.5rem;
text-align: center;
font-size: 1.08rem;
line-height: 1.6;
color: var(--ink);
font-style: normal;
}
.lede::before,
.lede::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: var(--rule);
margin: 0.6rem auto;
}
/* Pricing grid */
.plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.plan {
padding: 1.75rem 1.5rem;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 0.75rem;
position: relative;
}
.plan:last-child { border-right: 0; }
.plan.featured {
background:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 6px,
rgba(184, 31, 31, 0.03) 6px,
rgba(184, 31, 31, 0.03) 7px
),
rgba(184, 31, 31, 0.03);
}
.plan .ribbon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.3rem 0.9rem;
background: var(--accent);
color: var(--paper);
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
}
.plan-name {
font-family: var(--sans);
font-size: 0.75rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-muted);
}
.plan-title {
font-family: var(--serif);
font-weight: 900;
font-size: 1.75rem;
font-style: normal;
margin: 0;
line-height: 1.4;
}
.plan-price {
display: baseline;
align-items: baseline;
font-family: var(--serif);
margin: 0.25rem 0 0.5rem;
}
.plan-price .amount {
font-size: 3.25rem;
font-weight: 900;
letter-spacing: -0.02em;
}
.plan-price .currency { font-size: 1.5rem; vertical-align: top; line-height: 1; }
.plan-price .unit {
font-family: var(--sans);
font-size: 0.78rem;
color: var(--ink-muted);
margin-left: 0.3rem;
}
.plan-desc {
font-family: var(--sans);
font-size: 0.88rem;
color: var(--ink-muted);
line-height: 1.5;
min-height: 3em;
}
ul.features {
font-family: var(--sans);
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
font-size: 0.9rem;
}
ul.features li {
display: flex;
gap: 0.6rem;
align-items: baseline;
}
ul.features li::before {
content: "§";
color: var(--accent);
font-family: var(--serif);
font-weight: 700;
font-style: italic;
}
ul.features li.off {
color: var(--ink-muted);
text-decoration: line-through;
}
ul.features li.off::before {
content: "—";
color: var(--ink-muted);
text-decoration: none;
}
.plan .cta {
margin-top: auto;
padding-top: 1rem;
}
.plan .cta a {
display: block;
text-align: center;
padding: 0.75rem 1rem;
background: var(--paper);
border: 2px solid var(--ink);
color: var(--ink);
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.1s;
}
.plan.featured .cta a {
background: var(--ink);
color: var(--paper);
}
.plan .cta a:hover { transform: translate(2px, -2px); box-shadow: -3px 3px 0 var(--accent); }
/* Byline below */
.byline {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ink-muted);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (max-width: 820px) {
.plans { grid-template-columns: 1fr; }
.plan { border-right: 0; border-bottom: 1px solid var(--rule); }
.plan:last-child { border-bottom: 0; }
}
.demo-note { position: relative; z-index: 6; max-width: 1100px; margin: 1rem auto; padding: 0.8rem 1rem; font-size: 13px; line-height: 1.8; letter-spacing: 0; border: 1px solid currentColor; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.plan:hover, .receipt:hover, .plan-cta:hover, .cta a:hover { transform: none; }
}
</style>
</head>
<body>
<p class="demo-note" id="demo-note" tabindex="-1">架空の料金表デモです。価格・条件・実績は例示で、申込み・契約・決済は行いません。Vibehausの素材は完全無料・CC0です。</p>
<div class="paper">
<div class="masthead">
<div class="date-rule">
<span>第 12 巻 · 第 4 号</span>
<span>料金表 · サブスクリプション</span>
<span>創刊 2026</span>
</div>
<h1>The Subscription Gazette</h1>
<div class="subtitle">プラン＆料金 — 本日より有効</div>
</div>
<p class="lede">
3プラン、偽りのない価格。月額課金、いつでも解約。座席税なし、繰越条件の罠なし、「お問い合わせください」もなし。下に見える額が、そのまま請求される額です。
</p>
<div class="plans">
<div class="plan">
<span class="plan-name">Starter</span>
<h2 class="plan-title">はじめての一筆に。</h2>
<div class="plan-price">
<span class="currency">¥</span><span class="amount">1,200</span><span class="unit">/月</span>
</div>
<p class="plan-desc">週末プロジェクトで試すには十分。いつでもアップグレード可能。</p>
<ul class="features">
<li>ワークスペース 1 つ</li>
<li>共同編集者 最大 3 名</li>
<li>ドキュメント保存 1 GB</li>
<li class="off">バージョン履歴</li>
<li class="off">SSO / 権限管理</li>
</ul>
<div class="cta"><a href="#">Starter ではじめる</a></div>
</div>
<div class="plan featured">
<span class="ribbon">人気</span>
<span class="plan-name">Pro</span>
<h2 class="plan-title">小さなチームに。</h2>
<div class="plan-price">
<span class="currency">¥</span><span class="amount">3,800</span><span class="unit">/月</span>
</div>
<p class="plan-desc">多くのチームが落ち着く場所。Starter の全機能に、毎日使う実務機能を追加。</p>
<ul class="features">
<li>ワークスペース 無制限</li>
<li>共同編集者 最大 25 名</li>
<li>保存容量 100 GB</li>
<li>バージョン履歴 · 30 日</li>
<li class="off">SSO / 権限管理</li>
</ul>
<div class="cta"><a href="#">Pro にアップグレード</a></div>
</div>
<div class="plan">
<span class="plan-name">Business</span>
<h2 class="plan-title">本気の現場に。</h2>
<div class="plan-price">
<span class="currency">¥</span><span class="amount">11,800</span><span class="unit">/月</span>
</div>
<p class="plan-desc">機能要望よりコンプライアンス要件のほうが長いチームに。</p>
<ul class="features">
<li>すべて無制限</li>
<li>SSO、SAML、監査ログ</li>
<li>ロール / 権限管理</li>
<li>優先サポート · 4 時間 SLA</li>
<li>専任ソリューション担当</li>
</ul>
<div class="cta"><a href="#">Business 相談</a></div>
</div>
</div>
<div class="byline">
<span>表記は税抜 · 月額課金 · 年間縛りなし</span>
<span>請求書が必要な方は、メール返信でお知らせください。</span>
</div>
</div>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
料金ページは、いまやどこも同じ顔をしています。サンセリフ体、巨大な数字、3枚の角丸カード——この定型に、訪問者は「機能的な表」として接し、記憶に残しません。新聞紙面の様式を持ち込むのは、その既視感から意図的に距離を取る選択です。
「読む速度」を落とす
セリフ体のイタリック見出し、二重線の枠、罫線、スタンプ色の朱——こうした紙面の記号は、訪問者の視線の速度を「表を流し見る速度」から「紙面を読む速度」へと落とします。速度が落ちると、プランの差異が記号ではなく言葉として頭に入ります。結果として判断はかえって早く、納得感を持って下される。遅くすることが、決断を助けます。
レガシーであることの強さ
新聞という様式は「歴史がある」「枯れている」という含意を持ちます。これは、安定性や信頼性を売りにするサービス——士業、金融、長期契約型のサブスク——にとって、テック的な先進性とは別種の説得力になります。新しいではなく、変わらず在り続けるを訴えたいときの選択肢です。
仕上げの判断軸
罫線は太さを3段階に使い分けます——太い二重線で全体の枠、1pxの水平罫でセクション区切り、1pxの縦罫でカラム区切り。太さの違いだけで構造が伝わり、色に頼らずに済みます。
3段階罫線の太さ。違いだけで構造が伝わり、色に頼らずに済む
45度注目プランの薄い赤ストライプ。文字に頼らず示す
§ と —含む/含まないの行頭記号。チェックマークを避ける
注目プランは45度の薄い赤ストライプ（ハッチ背景）で示し、「Most Popular」の文字に頼りません。含む／含まないは§と—の行頭記号で表現し、チェックマークを避けると紙面の一貫性が保てます。最下部に「請求書はメール返信で」のような人間的な注釈を添えると、テック感がさらに後退します。
価格表の構成要素
使いどころ
- SaaSの料金ページで、競合と異なる「読みごたえのある」トーンを出したいとき
- 老舗感・信頼感のあるブランドで、いかにもテック系な料金表を避けたいとき
- サブスクサービス・メディア・出版系プロダクトの加入ページ
このデザインの分類
背景と狙いどころ
よくある質問
セリフ書体は何がおすすめ？
Playfair Display (OFL・無料) が一番手に入りやすく、斜体のコントラストも強く出ます。より上品なら DM Serif Display、印刷物寄りなら Tiempos (有料)。Google Fonts からの読み込みで済みます。
モバイルで縦積みするとメリハリが消えませんか？
消えやすいので、featured プランの上下に余白を増やす・ハッチ背景を残すといった措置で視線誘導を保ちます。リボンはモバイルでも残してOK。
月額/年額切替は必要？
ユースケース次第ですが、最初から切替UIを入れると新聞風の「読み物感」が薄れます。まずは単純な月額固定、二段階目の改善として切替を検討する構成を推奨します。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。