{ "id": "pricing-3col-center-emphasis", "schemaVersion": 2, "title": { "ja": "3 段の料金プラン — 中央を強調", "en": "Three-tier Pricing — Center Emphasized" }, "summary": { "ja": "3 プランのうち中央だけを強調した料金表。強調の手段を 1 つに絞っている", "en": "A pricing table that emphasizes only the middle plan, using a single means" }, "capturedAt": "2026-09-01", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "pricing", "comparison" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 120, "bottom": 96, "left": 120 }, "columns": { "count": 3, "gap": 32 }, "emphasis": { "column": 2, "scale": 1.06, "via": [ "rule", "scale" ] } }, "type": { "plan": { "size": 20, "weight": 500, "tracking": ".08em", "transform": "upper" }, "price": { "size": 64, "weight": 700, "tracking": "-.02em", "numeric": "tabular" }, "unit": { "size": 16, "weight": 400 }, "feature": { "size": 16, "weight": 400, "leading": 1.7 } }, "colors": { "ground": "#F4F5F7", "surface": "#FFFFFF", "ink": "#14171A", "muted": "#8A8F96", "accent": "#0F6B5E", "rule": "#C9CED4", "series": [] }, "rules": [ { "ja": "強調は 1 列だけ。2 列強調した時点で比較にならない", "en": "Emphasize one column only — two makes it uncomparable" }, { "ja": "色・大きさ・影を同時に使わない。手段は 1 つ選ぶ", "en": "Never stack color, size and shadow — pick one means" }, { "ja": "価格の桁を縦に揃える（等幅数字）", "en": "Align the price digits vertically (tabular numerals)" } ], "cover": "https://design-vault.pages.dev/_astro/cover.CX1D8eS2.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "comparison-table-single-fill" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 120, "bottom": 96, "left": 120 }, "columns": { "count": 3, "gap": 32 }, "emphasis": { "column": 2, "scale": 1.06, "via": [ "rule", "scale" ] } }, "type": { "plan": { "size": 20, "weight": 500, "tracking": ".08em", "transform": "upper" }, "price": { "size": 64, "weight": 700, "tracking": "-.02em", "numeric": "tabular" }, "unit": { "size": 16, "weight": 400 }, "feature": { "size": 16, "weight": 400, "leading": 1.7 } }, "colors": { "ground": "#F4F5F7", "surface": "#FFFFFF", "ink": "#14171A", "muted": "#8A8F96", "accent": "#0F6B5E", "rule": "#C9CED4" }, "rules": [ "Emphasize one column only — two makes it uncomparable", "Never stack color, size and shadow — pick one means", "Align the price digits vertically (tabular numerals)" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 120 下 96 左 120\n- 3 カラム（等分）、間隔 32\n\n## 強調\n2 列目のみ。手段は 罫 + 拡大（1.06 倍） だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\nplan 20px / 500 / 字間 .08em / 大文字\nprice 64px / 700 / 字間 -.02em / 等幅数字\nunit 16px / 400\nfeature 16px / 400 / 行送り 1.7\n\n## 配色\n地 #F4F5F7 / 面 #FFFFFF / 文字 #14171A / 補助 #8A8F96 / 強調 #0F6B5E / 罫 #C9CED4\n\n## 外すと崩れる点\n- 強調は 1 列だけ。2 列強調した時点で比較にならない\n- 色・大きさ・影を同時に使わない。手段は 1 つ選ぶ\n- 価格の桁を縦に揃える（等幅数字）\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 120 bottom 96 left 120\n- 3 equal columns, gap 32\n\n## Emphasis\ncolumn 2 only, by rule + scale (1.06×) and nothing else\n\n## Type (px against a 1920px canvas)\nplan 20px / 500 / tracking .08em / uppercase\nprice 64px / 700 / tracking -.02em / tabular numerals\nunit 16px / 400\nfeature 16px / 400 / leading 1.7\n\n## Colour\nGround #F4F5F7 / Surface #FFFFFF / Ink #14171A / Muted #8A8F96 / Accent #0F6B5E / Rule #C9CED4\n\n## Constraints — dropping these breaks it\n- Emphasize one column only — two makes it uncomparable\n- Never stack color, size and shadow — pick one means\n- Align the price digits vertically (tabular numerals)\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/pattern.html." }, "code": { "html": "\n\n3 段の料金プラン — 中央を強調\n\n\n\n
\n
\n
\n
\n

STARTER

\n

0円 / 月

\n
  • 5 件まで登録
  • 利用者 3 名
  • 掲示板での相談
  • 月次の集計
  • 標準の書式
  • —
\n
\n
\n

STANDARD

\n

4,800円 / 月

\n
  • 登録は無制限
  • 利用者 25 名
  • 優先して回答
  • 週次の集計
  • 書式の追加
  • 外部との連携
\n
\n
\n

BUSINESS

\n

12,000円 / 月

\n
  • 専用の環境
  • 利用者は無制限
  • 導入の支援つき
  • 任意の集計
  • 書式の作成代行
  • 監査ログ
\n
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/font.css", "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/font-0.woff2", "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/font-1.woff2", "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/pricing-3col-center-emphasis", "en": "https://design-vault.pages.dev/en/designs/pricing-3col-center-emphasis" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 強調の手段を 1 つに絞ると、比較の軸が濁らない\n- 機能リストの行数を 3 列で揃える。足りない列は空行で埋めず、項目のほうを減らす\n- 価格まわりだけ等幅数字にする\n\n### Apply to\n\n- 提案書の料金ページ\n- 3 案比較（松竹梅）の意思決定スライド" }