価格表 · 料金プラン
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/swiss-pricing/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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)。
このプレビューのコード
HTML・CSS・JavaScriptの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>スイス様式・グリッド厳守の料金プラン — Vibehaus プレビュー</title>
<style>
:root {
--bg: #f7f7f5;
--ink: #0a0a0a;
--muted: #4a4a4a;
--quiet: #8a8a8a;
--accent: #1d2c5c;
--rule: #0a0a0a;
--rule-soft: rgba(10, 10, 10, 0.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Helvetica Neue", "Helvetica", "Noto Sans JP",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern", "ss01";
font-weight: 400;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
}
header.bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--rule);
font-size: 0.85rem;
}
header.bar .logo {
font-weight: 800;
letter-spacing: -0.02em;
}
header.bar nav {
display: flex;
gap: 1.75rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
header.bar nav a {
text-decoration: none;
color: var(--muted);
}
header.bar nav a:hover { color: var(--ink); }
section.intro {
padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
align-items: end;
}
.intro .eyebrow {
grid-column: 1 / span 12;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.intro h1 {
grid-column: 1 / span 8;
margin: 0;
font-size: clamp(2.2rem, 5.5vw, 4.4rem);
line-height: 1.35;
letter-spacing: 0;
font-weight: 700;
}
.intro h1 :lang(ja) { letter-spacing: 0; line-height: 1.3; }
.intro p.sub {
grid-column: 9 / span 4;
margin: 0;
font-size: 0.95rem;
line-height: 1.85;
color: var(--muted);
}
@media (max-width: 720px) {
.intro h1, .intro p.sub { grid-column: 1 / span 12; }
}
.toolbar {
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 0.85rem;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.toolbar .label {
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.switch {
display: inline-flex;
border: 1px solid var(--rule);
}
.switch button {
min-height: 44px;
appearance: none;
background: transparent;
border: 0;
padding: 0.45rem 1rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
}
.switch button.active {
background: var(--ink);
color: var(--bg);
}
.plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 0;
border-bottom: 1px solid var(--rule);
}
@media (max-width: 880px) {
.plans { grid-template-columns: 1fr; }
}
.plan {
padding: 2rem 1.75rem 2.25rem;
border-right: 1px solid var(--rule);
position: relative;
}
.plan:last-child { border-right: 0; }
@media (max-width: 880px) {
.plan { border-right: 0; border-bottom: 1px solid var(--rule); }
.plan:last-child { border-bottom: 0; }
}
.plan.featured::before {
/* Emphasis without color: a thicker top rule. Pure Swiss. */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--ink);
}
.plan-num {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 1.25rem;
}
.plan.featured .plan-num { color: var(--accent); }
.plan-name {
margin: 0 0 0.4rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.plan-tag {
margin: 0 0 1.5rem;
font-size: 0.85rem;
line-height: 1.65;
color: var(--muted);
max-width: 30ch;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 0.4rem;
padding-block: 1.25rem;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
margin-bottom: 1.5rem;
}
.plan-price .num {
font-family: "Inter", sans-serif;
font-size: clamp(2.6rem, 4vw, 3.4rem);
line-height: 1;
font-weight: 800;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
.plan-price .currency {
font-size: 0.95rem;
color: var(--muted);
}
.plan-price .cycle {
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-left: auto;
}
.plan-features {
list-style: none;
margin: 0 0 2rem;
padding: 0;
font-size: 0.92rem;
}
.plan-features li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--rule-soft);
display: flex;
gap: 0.6rem;
align-items: flex-start;
}
.plan-features li:last-child { border-bottom: 0; }
.plan-features li::before {
content: "✓";
color: var(--ink);
font-weight: 600;
flex: none;
}
.plan-features li.muted { color: var(--quiet); }
.plan-features li.muted::before { content: "—"; color: var(--quiet); }
.plan-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.2rem;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
text-decoration: none;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
transition: background 0.2s, color 0.2s;
}
.plan-cta:hover {
background: var(--ink);
color: var(--bg);
}
.plan.featured .plan-cta {
background: var(--ink);
color: var(--bg);
}
.plan.featured .plan-cta:hover { background: var(--accent); border-color: var(--accent); }
footer.bar {
margin-top: 3rem;
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.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="bar">
<div class="logo">Helix</div>
<nav>
<a href="#">Product</a>
<a href="#">Docs</a>
<a href="#">Pricing</a>
<a href="#">Sign in</a>
</nav>
</header>
<section class="intro">
<p class="eyebrow">Pricing — Q2 2026</p>
<h1>透明な料金。<br/>長く付き合える設計。</h1>
<p class="sub">3つのプランを比較する料金表の見本です。年払いでは月額換算を20%下げ、年間の支払額も表示します。</p>
</section>
<div class="toolbar">
<span class="label">通貨 — JPY · 税込</span>
<div class="switch" role="group" aria-label="支払い周期">
<button type="button" class="active" aria-pressed="true" data-billing="monthly" disabled>月払い</button>
<button type="button" aria-pressed="false" data-billing="annual" disabled>年払い −20%</button>
</div>
</div>
<div class="plans">
<article class="plan">
<p class="plan-num">Plan 01 — Solo</p>
<h3 class="plan-name">Starter</h3>
<p class="plan-tag">個人開発・スモールチームでまず触るためのプラン。</p>
<div class="plan-price">
<span class="currency">¥</span>
<span class="num" data-monthly="0">0</span>
<span class="cycle">／月</span>
</div>
<ul class="plan-features">
<li>1 プロジェクト</li>
<li>2 名まで</li>
<li>10 GB ストレージ</li>
<li class="muted">SSO / SAML</li>
<li class="muted">Audit log</li>
</ul>
<a href="#" class="plan-cta">はじめる →</a>
</article>
<article class="plan featured">
<p class="plan-num">Plan 02 — Recommended</p>
<h3 class="plan-name">Team</h3>
<p class="plan-tag">チームの本番環境向け。コラボレーションと自動化が解放される。</p>
<div class="plan-price">
<span class="currency">¥</span>
<span class="num" data-monthly="2400">2,400</span>
<span class="cycle">／人・月</span>
</div>
<ul class="plan-features">
<li>無制限プロジェクト</li>
<li>50 名まで</li>
<li>500 GB ストレージ</li>
<li>SSO / SAML</li>
<li>優先サポート（24h）</li>
</ul>
<a href="#" class="plan-cta">14 日無料で試す →</a>
</article>
<article class="plan">
<p class="plan-num">Plan 03 — Scale</p>
<h3 class="plan-name">Enterprise</h3>
<p class="plan-tag">大規模組織向け。専任サクセスと SLA、カスタムリージョン。</p>
<div class="plan-price">
<span class="num">Custom</span>
<span class="cycle">/ Contact</span>
</div>
<ul class="plan-features">
<li>無制限すべて</li>
<li>SCIM プロビジョニング</li>
<li>専任サクセスマネージャ</li>
<li>99.99% SLA</li>
<li>オンプレ可</li>
</ul>
<a href="#" class="plan-cta">問い合わせる →</a>
</article>
</div>
<p id="billing-note" role="status">月払い：Teamは1人あたり月額2,400円（税込）。</p>
<footer class="bar">
<span>© 2026 Helix</span>
<span>Build 2026.04 · Ja-JP</span>
</footer>
</div>
<script>
const buttons = [...document.querySelectorAll('[data-billing]')];
buttons.forEach(button => {
button.disabled = false;
button.addEventListener('click', () => {
const annual = button.dataset.billing === 'annual';
buttons.forEach(item => {
const active = item === button;
item.classList.toggle('active', active);
item.setAttribute('aria-pressed', String(active));
});
document.querySelectorAll('[data-monthly]').forEach(amount => {
const value = Number(amount.dataset.monthly) * (annual ? 0.8 : 1);
amount.textContent = value.toLocaleString('ja-JP');
amount.nextElementSibling.textContent = annual
? (value ? '／人・月（月額換算）' : '／月（月額換算）')
: (value ? '／人・月' : '／月');
});
document.getElementById('billing-note').textContent = annual
? '年払い：Teamは1人あたり月額換算1,920円、年間23,040円（税込）を一括で支払う設定例です。Enterpriseは個別見積もりです。'
: '月払い：Teamは1人あたり月額2,400円（税込）。';
});
});
</script>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
スイス・スタイル（国際タイポグラフィ様式）は、1950年代に確立された「装飾を引き算し続ける」デザイン思想です。料金プランにこの様式を適用すると、色も影もグラデーションも消え、グリッドと罫線とタイポグラフィの階層だけが残ります。一見そっけないこの引き算が、価格表という機能において強力に働きます。
装飾ノイズを消すと比較が速くなる
料金プランで訪問者がしたいことは、ただ一つ——プランを比較して選ぶことです。ところが多くの料金表は、目立たせようとした色やバッジや影が、かえって視線の妨げになっている。スイス様式はそれらをすべて取り払い、機能名と価格に視線を直行させます。装飾という雑音が消えた分、比較という本来の作業が速くなります。これはミニマリズムの美学である以前に、極めて実利的な選択です。
「主張しない」ことが信頼になる
派手な装飾は、ときに「中身に自信がないから見た目で盛っている」という疑念を生みます。スイス様式の料金表は、装飾でアピールすることを放棄する。その慎ましさが逆説的に「この数字は、それ自体で十分に説得力がある」という自信として伝わります。誇張しない姿勢が、価格への信頼に変換されます。
仕上げの判断軸
色は最大3色——背景・文字・アクセント1色まで。グラデーションや影で奥行きを偽装しないこと。要素はすべて左揃えで統一し、センタリングや右揃えは使いません。余白と要素サイズはグリッドの倍数のみで構成し、強調は色ではなく罫線の太さ（0.5 / 1 / 1.5px）の差で表現します。
3色背景・文字・アクセント1色まで。影で奥行きを偽装しない
0.5 / 1 / 1.5px罫線の太さ。強調は色ではなくこの差で表現する
左揃えすべての要素。センタリングと右揃えは使わない
流行を排した様式なので、5年後に見ても古びない——この長寿命が、スイス様式を選ぶ実利的な理由です。
価格表の構成要素
使いどころ
- 開発者向けツール / インフラ系SaaS
- エンタープライズ向けの「実直さ」を出したい場合
- ブログ・エディタ・ターミナル系のシンプルなプロダクト
- 派手な営業色を嫌うユーザー層
このデザインの分類
背景と狙いどころ
よくある質問
中央プランをハイライトしないと売れにくくないですか？
スイス様式の場合、罫線の太さや左にずれる「上向き矢印 ▲」などタイポ手法だけで強調できます。色を使う一般プラン表より、信頼性で勝負したいB2Bでは強調しすぎない方が好まれます。
スイス様式で日本語は読みやすい？
Helvetica系の英文に合わせるなら、Noto Sans JP の Regular か Light が好相性。letter-spacing は 0、line-height は 1.7 前後を死守してください。
1色アクセントは何が良い？
深い藍・深緑・煉瓦色など彩度を抑えた色がスイス様式の伝統と合います。鮮やかな赤や蛍光は浮きます。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。