価格表 · 料金プラン

POSレシート風の料金プラン

コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。

PUBLISHED — 2026年4月27日 UPDATED — 2026年4月27日 CATEGORY — 価格表 LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/receipt-pricing/

概要

サブスクリプションの料金表は、しばしば「結局いくら払うのか」を曖昧にします。基本料金、オプション、税——内訳が見えないまま「月々¥X,XXX〜」とだけ書かれていると、人は無意識に身構える。POSレシートは、その正反対の文書です。買ったものが一行ずつ並び、小計と税と合計がすべて開示される。この「隠しごとのなさ」を料金プランに移植するのが、この設計です。

内訳を見せることが信頼になる

レシートの形式が効くのは、それが「内訳の全開示」を前提とした文書だからです。プランに含まれる機能を一行ずつ商品として並べ、それぞれに価格（あるいは¥0）を振る。すると訪問者は、自分が何に対してお金を払うのかを正確に把握できます。値引きを「DISCOUNT −¥800」と明記すれば、お得感も具体的な数字として伝わる。透明性は、説明文で「明朗会計です」と書くより、レシートという形式そのもので証明したほうが何倍も説得力があります。

「お会計」の即決感

レジでレシートを受け取る瞬間、取引はすでに完了しています。レシート風の料金表は、その「もう決まった」感覚を先取りさせる。均一に整列したSaaSのプラン表が「比較検討してください」と語りかけるのに対し、レシートは「これがあなたの会計です」と差し出す。この語調の違いが、決断の心理的コストを下げます。

仕上げの判断軸

価格の桁は等幅数字（tabular-nums）で右揃えにし、レジ伝票の精密さを保つこと。破れたエッジやバーコードは情緒を作りますが、AdSenseの広告境界と紛れやすいので、レシートのカード内で完結させ周囲に余白を取ります。「人気」スタンプは中央プラン1枚にだけ。複数に付けると推奨の意味が消えます。

使いどころ

価格透明性を売りにするDTC・サブスク
中小店舗・飲食・小売向けのPOS / 会計SaaS
インボイス・経理・請求書サービス
クラフト系・手作り感を出したいプロダクト
「隠れコストなし」を強調する透明性LP

カテゴリ: 価格表
スタイル: モノクロ / レトロ / ミニマル / ハンドクラフト

背景と狙いどころ

Context

Category · 料金プラン

価格表

料金プラン・比較表のデザイン。

カテゴリ一覧を見る →

Style · モノクローム

モノクロ

単色または白黒で統一されたトーン。

スタイル一覧を見る →

Style · レトロ

レトロ

古さを意匠化した温度。

スタイル一覧を見る →

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」のように円ドット繋ぎに。

よくある質問

紙の破れエッジの実装は？

::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に変換する尖った設計。

価格表ピクセルレトロ