価格表 · 料金プラン
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。
プレビュー
概要
料金ページは、いまやどこも同じ顔をしています。サンセリフ体、巨大な数字、3枚の角丸カード——この定型に、訪問者は「機能的な表」として接し、記憶に残しません。新聞紙面の様式を持ち込むのは、その既視感から意図的に距離を取る選択です。
「読む速度」を落とす
セリフ体のイタリック見出し、二重線の枠、罫線、スタンプ色の朱——こうした紙面の記号は、訪問者の視線の速度を「表を流し見る速度」から「紙面を読む速度」へと落とします。速度が落ちると、プランの差異が記号ではなく言葉として頭に入る。結果として「自分はどれを選ぶか」の判断が、かえって早く・納得感を持って下されます。遅くすることが、決断を助けるのです。
レガシーであることの強さ
新聞という様式は「歴史がある」「枯れている」という含意を持ちます。これは、安定性や信頼性を売りにするサービス——士業、金融、長期契約型のサブスク——にとって、テック的な先進性とは別種の説得力になります。「新しい」ではなく「変わらず在り続ける」を訴えたいときの選択肢です。
仕上げの判断軸
罫線は太さを3段階に使い分けます——太い二重線で全体の枠、1pxの水平罫でセクション区切り、1pxの縦罫でカラム区切り。太さの違いだけで構造が伝わり、色に頼らずに済みます。注目プランは45度の薄い赤ストライプ（ハッチ背景）で示し、「Most Popular」の文字に頼りません。含む／含まないは§と—の行頭記号で表現し、チェックマークを避けると紙面の一貫性が保てます。最下部に「請求書はメール返信で」のような人間的な注釈を添えると、テック感がさらに後退します。
使いどころ
- SaaSの料金ページで、競合と異なる「読みごたえのある」トーンを出したいとき
- 老舗感・信頼感のあるブランドで、いかにもテック系な料金表を避けたいとき
- サブスクサービス・メディア・出版系プロダクトの加入ページ
このデザインの分類
- カテゴリ
- 価格表
- スタイル
- レトロ / 新聞 / エディトリアル / モノクロ
背景と狙いどころ
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 のまま維持。
よくある質問
セリフ書体は何がおすすめ？
モバイルで縦積みするとメリハリが消えませんか？
月額/年額切替は必要？
関連するデザイン
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。