{ "id": "design:how-to-numbered-screens", "schemaVersion": 2, "title": { "ja": "手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ", "en": "How-To — Number, Screen Sketch and One Line, Four Across" }, "summary": { "ja": "番号を線でつなぎ、その下に画面の縮図と手順の 1 行を置いた段を横に 4 つ並べる。縮図は灰色の線と面だけで描く", "en": "Numbered steps joined by a line, each with a screen sketch and one line beneath, four across; the sketches use only grey lines and blocks" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "process" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "timeline", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 4, "gap": 40 } }, "type": { "kicker": { "size": 24, "weight": 700, "numeric": "tabular" }, "title": { "size": 54, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "stepNo": { "size": 32, "weight": 700, "numeric": "tabular" }, "step": { "size": 32, "weight": 700, "numeric": "tabular" }, "stepNote": { "size": 22, "weight": 400, "leading": 1.6, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#F5EFE4", "surface": "#FFFBF4", "ink": "#2B2620", "muted": "#776E62", "accent": "#B4502B", "rule": "#E3D9C8", "series": [] }, "rules": [ { "ja": "縮図は画面写真にせず、手順で触る所だけ形を残す", "en": "Sketch screens instead of screenshots, keeping only what the step touches" }, { "ja": "手順は動詞で終わる 1 行。補足は灰色で 1 行", "en": "Each step is one line ending in a verb, with one grey line of detail" }, { "ja": "番号どうしを線でつなぎ、最後の手順の後は線を出さない", "en": "Join the numbers with a line that stops after the last step" }, { "ja": "手順は 4 つまで。それ以上は 2 枚に分ける", "en": "Four steps per slide; split beyond that" } ], "cover": "https://design-vault.pages.dev/_astro/cover.lPSEmCOd.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "process-flow-five-step", "callout-numbered-screen", "phase-divider-step-rail" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "timeline", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 88, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 4, "gap": 40 } }, "type": { "kicker": { "size": 24, "weight": 700, "numeric": "tabular" }, "title": { "size": 54, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "stepNo": { "size": 32, "weight": 700, "numeric": "tabular" }, "step": { "size": 32, "weight": 700, "numeric": "tabular" }, "stepNote": { "size": 22, "weight": 400, "leading": 1.6, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#F5EFE4", "surface": "#FFFBF4", "ink": "#2B2620", "muted": "#776E62", "accent": "#B4502B", "rule": "#E3D9C8" }, "rules": [ "Sketch screens instead of screenshots, keeping only what the step touches", "Each step is one line ending in a verb, with one grey line of detail", "Join the numbers with a line that stops after the last step", "Four steps per slide; split beyond that" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n- 4 カラム（等分）、間隔 40\n\n## 文字（版面 1920px に対する px）\nkicker 24px / 700 / 等幅数字\ntitle 54px / 700 / 行送り 1.35 / 等幅数字\nstepNo 32px / 700 / 等幅数字\nstep 32px / 700 / 等幅数字\nstepNote 22px / 400 / 行送り 1.6 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8\n\n## 外すと崩れる点\n- 縮図は画面写真にせず、手順で触る所だけ形を残す\n- 手順は動詞で終わる 1 行。補足は灰色で 1 行\n- 番号どうしを線でつなぎ、最後の手順の後は線を出さない\n- 手順は 4 つまで。それ以上は 2 枚に分ける\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/how-to-numbered-screens/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 140 bottom 56 left 140\n- 4 equal columns, gap 40\n\n## Type (px against a 1920px canvas)\nkicker 24px / 700 / tabular numerals\ntitle 54px / 700 / leading 1.35 / tabular numerals\nstepNo 32px / 700 / tabular numerals\nstep 32px / 700 / tabular numerals\nstepNote 22px / 400 / leading 1.6 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #F5EFE4 / Surface #FFFBF4 / Ink #2B2620 / Muted #776E62 / Accent #B4502B / Rule #E3D9C8\n\n## Constraints — dropping these breaks it\n- Sketch screens instead of screenshots, keeping only what the step touches\n- Each step is one line ending in a verb, with one grey line of detail\n- Join the numbers with a line that stops after the last step\n- Four steps per slide; split beyond that\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/how-to-numbered-screens/pattern.html." }, "code": { "html": "\n\n手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ\n\n\n\n\n
\n
\n
\n

手順　聞いた後にやること

\n

聞いた内容は、4 つの手順で悩みのまとまりにする

\n
\n
\n
\n
1
\n
\n

録音を文字にする

\n

その日のうちに。1 時間で 30 分ぶん

\n
\n
\n
2
\n
\n

発言を付箋に書き出す

\n

1 枚に 1 つ、相手の言葉のまま

\n
\n
\n
3
\n
\n

似た発言をまとめる

\n

枠を決めず、近いものを寄せる

\n
\n
\n
4
\n
\n

まとまりに名前を付ける

\n

「〜で困っている」の形で書く

\n
\n
\n
\n

はじめての顧客インタビュー　社内研修

\n

06

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/how-to-numbered-screens/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/how-to-numbered-screens/font.css", "https://design-vault.pages.dev/designs/how-to-numbered-screens/font-0.woff2", "https://design-vault.pages.dev/designs/how-to-numbered-screens/font-1.woff2", "https://design-vault.pages.dev/designs/how-to-numbered-screens/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/how-to-numbered-screens", "en": "https://design-vault.pages.dev/en/designs/how-to-numbered-screens", "json": "https://design-vault.pages.dev/ai/assets/how-to-numbered-screens.json", "designJson": "https://design-vault.pages.dev/ai/designs/how-to-numbered-screens.json" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「研修・講義」の\n1 枚で、架空の社内研修「はじめての顧客インタビュー」として描いてある。研修の中身・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the six training slides, drawn as a\nfictional in-house workshop on customer interviews; its content, people and figures are invented.\n\n### Techniques\n\n- 4 列の格子、縮図は 5:3 の角丸の枠\n- 縮図の中は墨を面に 14%・30% 混ぜた 2 段の灰色\n- 最後の手順の縮図だけ強調色を使い、出来上がりを示す\n\n### Apply to\n\n- 研修の手順の説明\n- 社内の操作手順書（縮図を実際の画面の略図に替える）", "slug": "how-to-numbered-screens", "kind": "artboard", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "view-artboard", "read-spec", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse" }