価格表 · 料金プラン
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/receipt-pricing/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
SaaSの3プラン料金表を、コンビニや飲食店のPOSレシート3枚として作ってください。 要件: - 配色: ステージ #1a1714（暗背景）、レシート紙 #f5f0e3、墨 #161210、淡墨 #4d433b、朱赤 #c8201a。 - レシートは3枚並べ、それぞれ -1.4° / +0.6° / +1.6° の微妙な傾きで重ねる。中央のみ少し前に出す（z-index + translateY）。 - 上下端をギザギザ（破断）に: ::before / ::after に linear-gradient で三角形を 12px 単位で繰り返し。 - 紙質: repeating-linear-gradient で薄い横縞（rgba(0,0,0,0.015) 1px / 4px 間隔）でサーマルレジ感。 - 各レシート構造（モノスペースフォント JetBrains Mono / Courier New 統一）: - 中央寄せの大型店名風プラン名（letter-spacing 0.18em、太字） - サブライン（— Plan A · Solo —） - 日付・伝票番号 横並び - 点線セパレータ（border-dashed 1px） - 商品行: x1/x5/x∞ の数量 + 商品名（小文字説明 small） + 価格（tabular-nums で右揃え） - SUBTOTAL / TAX / DISCOUNT / TOTAL の合計行（grand total は赤太字、フォントサイズ大） - 「SELECT THIS PLAN」黒ボタン（hover で赤に）。中央プランは赤ボタン - フットノート（※ 無料トライアル等） - バーコード（CSS repeating-linear-gradient）+ JANコード番号 - 中央プランに「人気 / POPULAR」朱印円スタンプ（rotate 8deg、明朝体、半透明背景） - 下部に「★ THANK YOU FOR YOUR PURCHASE ★ NO HIDDEN FEES ★」のティッカー風ライン。 - hover で傾きをリセット + translateY(-6px) + box-shadow 強化。 - JS不要、フルレスポンシブ（モバイルは縦積み・傾き解除）。
バリエーション
ファストフード版（80年代マック風）
色をオレンジ #ff8763 + 黄 #ffd84d + 茶 #4d2c1f に。 商品名を絵文字風アイコンに、合計に「お得」スタンプを足す。
寿司屋勘定書版
和紙風グレー #d8cfba + 朱赤、フォントを Hiragino Mincho ProN 主体に。 商品名を「茶碗蒸し ... ¥480」のように円ドット繋ぎに。
このプレビューのコード
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,nofollow">
<title>receipt-pricing preview</title>
<style>
:root {
--stage: #1a1714;
--paper: #f5f0e3;
--ink: #161210;
--ink-soft: #4d433b;
--accent: #c8201a;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--stage);
color: var(--paper);
font-family: "JetBrains Mono", "Courier New", "Yu Gothic", "Noto Sans JP", monospace;
line-height: 1.55;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(255,200,150,0.025), transparent 60%);
}
.wrap {
max-width: 1200px;
margin: 0 auto;
padding: clamp(28px, 4vw, 56px);
}
/* Top heading */
.topline {
text-align: center;
margin-bottom: 56px;
color: var(--paper);
}
.topline .eyebrow {
font-size: 11px;
letter-spacing: 0.5em;
color: var(--accent);
text-transform: uppercase;
margin: 0 0 16px;
}
.topline h1 {
font-family: "Helvetica Neue", "Yu Gothic", "Noto Sans JP", sans-serif;
font-weight: 800;
font-size: clamp(34px, 5vw, 60px);
margin: 0 0 14px;
letter-spacing: 0.02em;
line-height: 1.35;
}
.topline h1 b { color: var(--accent); }
.topline p {
max-width: 540px;
margin: 0 auto;
color: rgba(245,240,227,0.7);
font-size: 13px;
letter-spacing: 0.04em;
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
line-height: 1.85;
}
/* Receipt grid */
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
align-items: start;
}
@media (max-width: 920px) {
.row { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}
.receipt {
--tilt: 0deg;
background: var(--paper);
color: var(--ink);
padding: 32px 28px 24px;
transform: rotate(var(--tilt));
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 18px 38px -12px rgba(0,0,0,0.55),
0 4px 8px rgba(0,0,0,0.35);
position: relative;
line-height: 1.5;
font-size: 13px;
border-radius: 1px;
background-image:
repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.015) 0 1px, transparent 1px 4px
);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.receipt:hover {
transform: rotate(0deg) translateY(-6px);
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 24px 50px -8px rgba(0,0,0,0.6),
0 6px 12px rgba(0,0,0,0.4);
}
.receipt:nth-child(1) { --tilt: -1.4deg; }
.receipt:nth-child(2) { --tilt: 0.6deg; transform: rotate(0.6deg) translateY(-12px); z-index: 2; }
.receipt:nth-child(3) { --tilt: 1.6deg; }
/* Torn edges */
.receipt::before, .receipt::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 12px;
background-image:
linear-gradient(135deg, var(--paper) 50%, transparent 50%),
linear-gradient(225deg, var(--paper) 50%, transparent 50%);
background-size: 12px 12px;
background-position: 0 0;
background-repeat: repeat-x;
}
.receipt::before { top: -12px; transform: scaleY(-1); }
.receipt::after { bottom: -12px; }
/* Header */
.receipt h2 {
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
text-align: center;
margin: 0 0 4px;
font-size: 18px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 800;
color: var(--ink);
}
.receipt .subline {
text-align: center;
font-size: 10.5px;
letter-spacing: 0.25em;
color: var(--ink-soft);
margin: 0 0 16px;
text-transform: uppercase;
}
.receipt .meta {
display: flex;
justify-content: space-between;
font-size: 10.5px;
color: var(--ink-soft);
margin-bottom: 14px;
letter-spacing: 0.05em;
}
/* Divider */
.dash {
border: 0;
border-top: 1px dashed var(--ink);
margin: 12px 0;
opacity: 0.65;
}
/* Items */
.items {
margin: 0 0 14px;
}
.item {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
margin-bottom: 6px;
font-size: 12.5px;
}
.item .desc { color: var(--ink); }
.item .desc small {
display: block;
color: var(--ink-soft);
font-size: 10.5px;
letter-spacing: 0.05em;
margin-top: 1px;
}
.item .price {
color: var(--ink);
font-variant-numeric: tabular-nums;
align-self: start;
}
.item .qty {
display: inline-block;
color: var(--ink-soft);
margin-right: 8px;
}
/* Totals */
.total {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
font-size: 13px;
margin: 4px 0;
}
.total.grand {
border-top: 1px solid var(--ink);
padding-top: 8px;
margin-top: 8px;
font-size: 16px;
font-weight: 700;
}
.total.grand .price { color: var(--accent); font-size: 22px; }
/* CTA button */
.btn {
display: block;
width: 100%;
margin-top: 18px;
padding: 12px 14px;
background: var(--ink);
color: var(--paper);
border: 0;
text-align: center;
text-decoration: none;
font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s ease;
}
.btn:hover { background: var(--accent); }
.btn.featured { background: var(--accent); }
.btn.featured:hover { background: var(--ink); }
/* Stamp */
.stamp {
position: absolute;
top: 84px;
right: 12px;
width: 78px; height: 78px;
border: 2px solid var(--accent);
color: var(--accent);
border-radius: 50%;
display: grid;
place-items: center;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-weight: 900;
font-size: 12px;
letter-spacing: 0.05em;
transform: rotate(8deg);
background: rgba(245,240,227,0.5);
line-height: 1.2;
text-align: center;
}
.stamp small { display: block; font-size: 8.5px; letter-spacing: 0.2em; margin-top: 2px; }
/* Footer */
.receipt .footnote {
text-align: center;
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0;
margin: 14px 0 8px;
line-height: 1.6;
}
.receipt .barcode {
height: 36px;
background: repeating-linear-gradient(
to right,
var(--ink) 0 1px, transparent 1px 3px,
var(--ink) 3px 4px, transparent 4px 6px,
var(--ink) 6px 8px, transparent 8px 11px,
var(--ink) 11px 12px, transparent 12px 14px
);
margin: 8px auto 4px;
width: 80%;
}
.receipt .bcnum {
text-align: center;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--ink);
}
/* Bottom note bar */
.footnote-bar {
margin: 64px auto 0;
text-align: center;
color: rgba(245,240,227,0.55);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.footnote-bar b { color: var(--accent); }
.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="wrap">
<header class="topline">
<p class="eyebrow">— Pricing Plans —</p>
<h1>あなたの選択を、<br><b>レシートに刻む。</b></h1>
<p>POSレジから出てきたサーマルプリント、その瞬発的な信頼感をそのまま価格表に。透明・正直・即決の3拍子。</p>
</header>
<section class="row">
<article class="receipt">
<h2>STARTER</h2>
<p class="subline">— Plan A · Solo —</p>
<div class="meta">
<span>2026/04/27 14:08</span>
<span>NO.A001</span>
</div>
<hr class="dash">
<div class="items">
<div class="item">
<div class="desc"><span class="qty">x1</span>個人プロジェクト</div>
<div class="price">¥980</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>5GB ストレージ<small>含む全機能</small></div>
<div class="price">¥0</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>コミュニティサポート</div>
<div class="price">¥0</div>
</div>
</div>
<hr class="dash">
<div class="total">
<div>SUBTOTAL</div>
<div class="price">¥980</div>
</div>
<div class="total">
<div>TAX (10%)</div>
<div class="price">¥98</div>
</div>
<div class="total grand">
<div>TOTAL / 月</div>
<div class="price">¥1,078</div>
</div>
<a class="btn" href="#">SELECT THIS PLAN</a>
<p class="footnote">※ いつでも解約可<br>※ 7日間無料トライアル</p>
<div class="barcode" aria-hidden="true"></div>
<div class="bcnum">4 902 370 5224</div>
</article>
<article class="receipt">
<span class="stamp">人気<small>POPULAR</small></span>
<h2>STUDIO</h2>
<p class="subline">— Plan B · Team —</p>
<div class="meta">
<span>2026/04/27 14:08</span>
<span>NO.B028</span>
</div>
<hr class="dash">
<div class="items">
<div class="item">
<div class="desc"><span class="qty">x5</span>チームメンバー</div>
<div class="price">¥2,400</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>50GB ストレージ<small>共有ワークスペース</small></div>
<div class="price">¥800</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>優先サポート<small>平日 24h 以内</small></div>
<div class="price">¥600</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>カスタムドメイン</div>
<div class="price">¥0</div>
</div>
</div>
<hr class="dash">
<div class="total">
<div>SUBTOTAL</div>
<div class="price">¥3,800</div>
</div>
<div class="total">
<div>DISCOUNT</div>
<div class="price">−¥800</div>
</div>
<div class="total">
<div>TAX (10%)</div>
<div class="price">¥300</div>
</div>
<div class="total grand">
<div>TOTAL / 月</div>
<div class="price">¥3,300</div>
</div>
<a class="btn featured" href="#">SELECT THIS PLAN</a>
<p class="footnote">※ チーム拡張は1名 ¥480/月<br>※ 14日間無料トライアル</p>
<div class="barcode" aria-hidden="true"></div>
<div class="bcnum">4 902 370 5331</div>
</article>
<article class="receipt">
<h2>ENTERPRISE</h2>
<p class="subline">— Plan C · Org —</p>
<div class="meta">
<span>2026/04/27 14:08</span>
<span>NO.C103</span>
</div>
<hr class="dash">
<div class="items">
<div class="item">
<div class="desc"><span class="qty">x∞</span>無制限メンバー</div>
<div class="price">¥7,800</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>無制限ストレージ<small>SLA 99.99%保証</small></div>
<div class="price">¥2,000</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>専任カスタマーサクセス</div>
<div class="price">¥3,200</div>
</div>
<div class="item">
<div class="desc"><span class="qty">x1</span>SSO・監査ログ・SOC2</div>
<div class="price">¥1,000</div>
</div>
</div>
<hr class="dash">
<div class="total">
<div>SUBTOTAL</div>
<div class="price">¥14,000</div>
</div>
<div class="total">
<div>VOLUME DISC</div>
<div class="price">−¥1,200</div>
</div>
<div class="total">
<div>TAX (10%)</div>
<div class="price">¥1,280</div>
</div>
<div class="total grand">
<div>TOTAL / 月</div>
<div class="price">¥14,080</div>
</div>
<a class="btn" href="#">CONTACT SALES</a>
<p class="footnote">※ 年間契約で 20% OFF<br>※ オンプレ対応も可能</p>
<div class="barcode" aria-hidden="true"></div>
<div class="bcnum">4 902 370 5448</div>
</article>
</section>
<p class="footnote-bar">★ THANK YOU FOR YOUR PURCHASE ★ <b>NO HIDDEN FEES</b> ★ NO HIDDEN FEES ★</p>
</div>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
サブスクリプションの料金表は、しばしば「結局いくら払うのか」を曖昧にします。基本料金、オプション、税——内訳が見えないまま「月々¥X,XXX〜」とだけ書かれていると、人は無意識に身構える。POSレシートは、その正反対の文書です。買ったものが一行ずつ並び、小計と税と合計がすべて開示される。この「隠しごとのなさ」を料金プランに移植するのが、この設計です。
内訳を見せることが信頼になる
レシートの形式が効くのは、それが「内訳の全開示」を前提とした文書だからです。プランに含まれる機能を一行ずつ商品として並べ、それぞれに価格（あるいは¥0）を振る。すると訪問者は、自分が何に対してお金を払うのかを正確に把握できます。値引きを「DISCOUNT −¥800」と明記すれば、お得感も具体的な数字として伝わる。
崩れる形月々¥X,XXX〜 とだけ書く
基本料金・オプション・税の内訳が見えないまま提示されると、人は無意識に身構えます。安く見せる書き方が、そのまま不信の理由になります。
効く形一行ずつ商品として並べる
含まれる機能に価格（あるいは ¥0）を振ると、何に対して払うのかを正確に把握できます。値引きも DISCOUNT −¥800 と具体的な数字で伝わります。
透明性は説明文で書くよりも、レシートという形式そのもので証明したほうが説得力があります。
「お会計」の即決感
レジでレシートを受け取る瞬間、取引はすでに完了しています。レシート風の料金表は、その「もう決まった」感覚を先取りさせる。均一に整列したSaaSのプラン表が「比較検討してください」と語りかけるのに対し、レシートは「これがあなたの会計です」と差し出す。この語調の違いが、決断の心理的コストを下げます。
仕上げの判断軸
価格の桁は等幅数字（tabular-nums）で右揃えにし、レジ伝票の精密さを保つこと。破れたエッジやバーコードは情緒を作りますが、AdSenseの広告境界と紛れやすいので、レシートのカード内で完結させ周囲に余白を取ります。
人気スタンプは中央プラン1枚だけに。複数に付けると、推奨という意味そのものが消えます。
価格表の構成要素
使いどころ
- 価格透明性を売りにするDTC・サブスク
- 中小店舗・飲食・小売向けのPOS / 会計SaaS
- インボイス・経理・請求書サービス
- クラフト系・手作り感を出したいプロダクト
- 「隠れコストなし」を強調する透明性LP
このデザインの分類
背景と狙いどころ
よくある質問
紙の破れエッジの実装は？
::before / ::after に linear-gradient(135deg, paper 50%, transparent 50%) を 12px 単位で repeat-x。上端は scaleY(-1) で反転すれば対称になる。
tabular-nums は何のため？
数字を等幅（OS の monospace 数字へ切替）にすることで価格列を正確に揃える。font-variant-numeric は tabular-nums を価格セルに必ず付ける。
傾けて重ねるとアクセシビリティ大丈夫？
prefers-reduced-motion メディアクエリで transform を rotate(0) に上書きするのが望ましい。スクリーンリーダー上は順序通りに読まれる。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。