{ "id": "comparison-table-single-fill", "schemaVersion": 2, "title": { "ja": "機能比較表 — 1 列だけ塗る", "en": "Feature Matrix — One Column Filled" }, "summary": { "ja": "縦罫を持たない比較表。塗るのは 1 列だけで、視線を横に流す", "en": "A comparison table with no vertical rules, filling exactly one column" }, "capturedAt": "2026-09-01", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "comparison", "pricing" ], "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 104, "right": 120, "bottom": 104, "left": 120 }, "columns": { "count": 4, "gap": 0 }, "emphasis": { "column": 3, "via": [ "fill" ] } }, "type": { "header": { "size": 18, "weight": 500, "tracking": ".06em", "transform": "upper" }, "rowLabel": { "size": 15, "weight": 500, "leading": 1.6 }, "cell": { "size": 15, "weight": 400, "leading": 1.6 } }, "colors": { "ground": "#FFFFFF", "surface": "#F3F5F7", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#DDE1E6", "series": [] }, "rules": [ { "ja": "罫は横だけ。縦罫を入れると視線が列で止まり、行が読めなくなる", "en": "Horizontal rules only — vertical ones stop the eye at the column and kill the row" }, { "ja": "塗るのは 1 列。2 列塗った時点で比較にならない", "en": "Fill one column; filling two makes the matrix uncomparable" }, { "ja": "可否は記号を並べず、塗りの有無で示す。記号は行が増えるほど読めない", "en": "Show yes/no by fill, not by glyphs — glyphs stop scanning as rows pile up" } ], "cover": "https://design-vault.pages.dev/_astro/cover.DkzsWOO_.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "pricing-3col-center-emphasis" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 104, "right": 120, "bottom": 104, "left": 120 }, "columns": { "count": 4, "gap": 0 }, "emphasis": { "column": 3, "via": [ "fill" ] } }, "type": { "header": { "size": 18, "weight": 500, "tracking": ".06em", "transform": "upper" }, "rowLabel": { "size": 15, "weight": 500, "leading": 1.6 }, "cell": { "size": 15, "weight": 400, "leading": 1.6 } }, "colors": { "ground": "#FFFFFF", "surface": "#F3F5F7", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#DDE1E6" }, "rules": [ "Horizontal rules only — vertical ones stop the eye at the column and kill the row", "Fill one column; filling two makes the matrix uncomparable", "Show yes/no by fill, not by glyphs — glyphs stop scanning as rows pile up" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 120 下 104 左 120\n- 4 カラム（等分）、間隔 0\n\n## 強調\n3 列目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\nheader 18px / 500 / 字間 .06em / 大文字\nrowLabel 15px / 500 / 行送り 1.6\ncell 15px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F3F5F7 / 文字 #14171A / 補助 #79808A / 強調 #0F6B5E / 罫 #DDE1E6\n\n## 外すと崩れる点\n- 罫は横だけ。縦罫を入れると視線が列で止まり、行が読めなくなる\n- 塗るのは 1 列。2 列塗った時点で比較にならない\n- 可否は記号を並べず、塗りの有無で示す。記号は行が増えるほど読めない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/comparison-table-single-fill/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 104 right 120 bottom 104 left 120\n- 4 equal columns, gap 0\n\n## Emphasis\ncolumn 3 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\nheader 18px / 500 / tracking .06em / uppercase\nrowLabel 15px / 500 / leading 1.6\ncell 15px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F3F5F7 / Ink #14171A / Muted #79808A / Accent #0F6B5E / Rule #DDE1E6\n\n## Constraints — dropping these breaks it\n- Horizontal rules only — vertical ones stop the eye at the column and kill the row\n- Fill one column; filling two makes the matrix uncomparable\n- Show yes/no by fill, not by glyphs — glyphs stop scanning as rows pile up\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/comparison-table-single-fill/pattern.html." }, "code": { "html": "\n\n機能比較表 — 1 列だけ塗る\n\n\n\n
\n
\n
\n
\n

機能

\n

案件の登録

\n

見積の作成

\n

承認の記録

\n

外部との連携

\n

監査ログ

\n

専任の窓口

\n
\n
\n

ENTRY

\n

\n

\n

\n
\n
\n

STANDARD

\n

\n

\n

\n

\n

\n
\n
\n

ENTERPRISE

\n

\n

\n

\n
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/comparison-table-single-fill/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/comparison-table-single-fill/font.css", "https://design-vault.pages.dev/designs/comparison-table-single-fill/font-0.woff2", "https://design-vault.pages.dev/designs/comparison-table-single-fill/font-1.woff2", "https://design-vault.pages.dev/designs/comparison-table-single-fill/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/comparison-table-single-fill", "en": "https://design-vault.pages.dev/en/designs/comparison-table-single-fill" }, "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- 行数が 10 を超える比較表は、縦罫を消すほうが読める\n- 項目名の列だけ weight を上げると、横罫が無くても行が追える\n- 密度が高い版面では accent を 1 列の塗りに使い切る（文字色に回さない）\n\n### Apply to\n\n- 競合比較・機能比較のスライド\n- RFP 回答書の対応可否一覧" }