価格表 · 料金プラン

スイス様式・グリッド厳守の料金プラン

プレビュー

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

概要

スイス・スタイル(国際タイポグラフィ様式)は、1950年代に確立された「装飾を引き算し続ける」デザイン思想です。料金プランにこの様式を適用すると、色も影もグラデーションも消え、グリッドと罫線とタイポグラフィの階層だけが残ります。一見そっけないこの引き算が、価格表という機能において強力に働きます。

装飾ノイズを消すと比較が速くなる

料金プランで訪問者がしたいことは、ただ一つ——プランを比較して選ぶことです。ところが多くの料金表は、目立たせようとした色やバッジや影が、かえって視線の妨げになっている。スイス様式はそれらをすべて取り払い、機能名と価格に視線を直行させます。装飾という雑音が消えた分、比較という本来の作業が速くなる。これはミニマリズムの美学である以前に、極めて実利的な選択です。

「主張しない」ことが信頼になる

派手な装飾は、ときに「中身に自信がないから見た目で盛っている」という疑念を生みます。スイス様式の料金表は、装飾でアピールすることを放棄する。その慎ましさが逆説的に「この数字は、それ自体で十分に説得力がある」という自信として伝わります。誇張しない姿勢が、価格への信頼に変換されるのです。

仕上げの判断軸

色は最大3色——背景・文字・アクセント1色まで。グラデーションや影で奥行きを偽装しないこと。要素はすべて左揃えで統一し、センタリングや右揃えは使いません。余白と要素サイズはグリッドの倍数のみで構成し、強調は色ではなく罫線の太さ(0.5 / 1 / 1.5px)の差で表現します。流行を排した様式なので、5年後に見ても古びない——この長寿命が、スイス様式を選ぶ実利的な理由です。

使いどころ

  • 開発者向けツール / インフラ系SaaS
  • エンタープライズ向けの "実直さ" を出したい場合
  • ブログ・エディタ・ターミナル系のシンプルなプロダクト
  • 派手な営業色を嫌うユーザー層

このデザインの分類

カテゴリ
価格表
スタイル
スイス様式 / ミニマル / クール / モノクロ

背景と狙いどころ

AIへの指示文

開発者向けSaaS用の、スイス国際タイポグラフィ様式の料金プランを作ってください。

要件:
- 12 カラムグリッドを厳格に守り、要素はすべてグリッドラインに揃える。
- 配色: オフホワイト #f7f7f5 + 墨黒 #0a0a0a + 1色アクセント(深い藍 #1d2c5c)のみ。
- フォント: Inter または Helvetica Neue。すべて左揃え、ラグ組み。
- プランは 3 カラム。1px の hairline 罫線で仕切り、影・角丸・グラデは一切なし。
- 各プランの上部に「PLAN 01 / 02 / 03」のモノスペース番号、その下に大ぶりな数字価格、通貨は小さく。
- 機能リストは "✓" + 機能名の左揃え一覧。色は使わない(中央プランの強調も罫線太さで表現)。
- 「年額/月額」切り替えは罫線で囲んだ 2 個のラジオ風ボタンを左上に。
- 全体の上部に大きな見出しと、小さなサブテキスト。
- ボタンは 1px outline + 黒文字、hover で背景反転。
- フルレスポンシブ。768px 以下では 1 カラムスタック。

バリエーション

機能比較表版

各プランカードを廃して、横長の機能比較表(10-15 機能 × 3 プラン)に変更。
機能名は左、各プランは × / ✓ / 数値で埋める。表罫線は 0.5px、ヘッダ行のみ 1.5px。

ダーク版

配色を反転: 背景 #0a0a0a、テキスト #f7f7f5、アクセントは同じ藍。
罫線は 1px の rgba(255,255,255,0.18)。

よくある質問

中央プランをハイライトしないと売れにくくないですか?
スイス様式の場合、罫線の太さや左にずれる "上向き矢印 ▲" などタイポ手法だけで強調できます。色を使う一般プラン表より、信頼性で勝負したいB2Bでは強調しすぎない方が好まれます。
スイス様式で日本語は読みやすい?
Helvetica系の英文に合わせるなら、Noto Sans JP の Regular か Light が好相性。letter-spacing は 0、line-height は 1.7 前後を死守してください。
1色アクセントは何が良い?
深い藍・深緑・煉瓦色など彩度を抑えた色がスイス様式の伝統と合います。鮮やかな赤や蛍光は浮きます。