{ "id": "problem-solution-3step", "schemaVersion": 2, "title": { "ja": "課題 → 打ち手 → 効果 の 3 段", "en": "Problem → Action → Effect, in Three Columns" }, "summary": { "ja": "等幅の 3 段で流れを示す。矢印を描かず、間隔と太さで順序を作る", "en": "Three equal columns carrying a sequence — spacing and weight instead of arrows" }, "capturedAt": "2026-09-01", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "problem-solution", "summary" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 104, "right": 120, "bottom": 104, "left": 120 }, "columns": { "count": 3, "gap": 48 }, "emphasis": { "column": 3, "via": [ "weight" ] } }, "type": { "step": { "size": 13, "weight": 500, "tracking": ".14em", "transform": "upper" }, "head": { "size": 28, "weight": 700, "leading": 1.4 }, "body": { "size": 16, "weight": 400, "leading": 1.75 } }, "colors": { "ground": "#F7F8F9", "surface": "#FFFFFF", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#D8DDE2", "series": [] }, "rules": [ { "ja": "3 段は等幅にする。効果の段だけ広げると押し売りに見える", "en": "Keep the three columns equal — widening the effect column reads as a hard sell" }, { "ja": "矢印は描かない。順序は番号と間隔で足りる", "en": "Draw no arrows; the numbering and the gaps already carry the sequence" }, { "ja": "各段の本文は 3 行まで。4 行目からは読まれず、次の段に負ける", "en": "Three lines of body per column — the fourth is not read" } ], "cover": "https://design-vault.pages.dev/_astro/cover.BK79nwLH.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 104, "right": 120, "bottom": 104, "left": 120 }, "columns": { "count": 3, "gap": 48 }, "emphasis": { "column": 3, "via": [ "weight" ] } }, "type": { "step": { "size": 13, "weight": 500, "tracking": ".14em", "transform": "upper" }, "head": { "size": 28, "weight": 700, "leading": 1.4 }, "body": { "size": 16, "weight": 400, "leading": 1.75 } }, "colors": { "ground": "#F7F8F9", "surface": "#FFFFFF", "ink": "#14171A", "muted": "#79808A", "accent": "#0F6B5E", "rule": "#D8DDE2" }, "rules": [ "Keep the three columns equal — widening the effect column reads as a hard sell", "Draw no arrows; the numbering and the gaps already carry the sequence", "Three lines of body per column — the fourth is not read" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 120 下 104 左 120\n- 3 カラム（等分）、間隔 48\n\n## 強調\n3 列目のみ。手段は 太さ だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\nstep 13px / 500 / 字間 .14em / 大文字\nhead 28px / 700 / 行送り 1.4\nbody 16px / 400 / 行送り 1.75\n\n## 配色\n地 #F7F8F9 / 面 #FFFFFF / 文字 #14171A / 補助 #79808A / 強調 #0F6B5E / 罫 #D8DDE2\n\n## 外すと崩れる点\n- 3 段は等幅にする。効果の段だけ広げると押し売りに見える\n- 矢印は描かない。順序は番号と間隔で足りる\n- 各段の本文は 3 行まで。4 行目からは読まれず、次の段に負ける\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/problem-solution-3step/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- 3 equal columns, gap 48\n\n## Emphasis\ncolumn 3 only, by weight and nothing else\n\n## Type (px against a 1920px canvas)\nstep 13px / 500 / tracking .14em / uppercase\nhead 28px / 700 / leading 1.4\nbody 16px / 400 / leading 1.75\n\n## Colour\nGround #F7F8F9 / Surface #FFFFFF / Ink #14171A / Muted #79808A / Accent #0F6B5E / Rule #D8DDE2\n\n## Constraints — dropping these breaks it\n- Keep the three columns equal — widening the effect column reads as a hard sell\n- Draw no arrows; the numbering and the gaps already carry the sequence\n- Three lines of body per column — the fourth is not read\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/problem-solution-3step/pattern.html." }, "code": { "html": "\n\n課題 → 打ち手 → 効果 の 3 段\n\n\n\n
\n
\n
\n
\n

STEP 01

\n

窓口が詰まる

\n

一次受けを人が捌いており、繁忙期には着手が半日遅れる。担当者の残業も同時に増え、対応の質が下がる。

窓口の担当を増やす案は、繁忙期以外の余剰が大きく採れなかった。

\n
\n
\n

STEP 02

\n

一次受けを切り出す

\n

窓口の運用は変えず、受付と振り分けだけを自動化する。判断が要る例外は今までどおり人に回す。

既存の手順書をそのまま使えるので、現場の学び直しが要らない。

\n
\n
\n

STEP 03

\n

着手が当日に戻る

\n

待ち時間が 62% 減り、繁忙期でも当日中に着手できる。残業は前年並みに戻る。

例外の件数は想定の範囲に収まり、人に回す判断は月 20 件ほど。

\n
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/problem-solution-3step/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/problem-solution-3step/font.css", "https://design-vault.pages.dev/designs/problem-solution-3step/font-0.woff2", "https://design-vault.pages.dev/designs/problem-solution-3step/font-1.woff2", "https://design-vault.pages.dev/designs/problem-solution-3step/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/problem-solution-3step", "en": "https://design-vault.pages.dev/en/designs/problem-solution-3step" }, "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- 流れを見せる構成で矢印を足すと、段そのものの順序が信用されていないように見える\n- 強調は最終段の weight だけ。地色や罫まで変えると 3 段が別々の資料に見える\n- 段の見出しは体言止めで揃える。1 段だけ文にすると視線が止まる\n\n### Apply to\n\n- 提案書の「現状 → 施策 → 期待効果」\n- 障害報告の「事象 → 対応 → 再発防止」" }