{
"id": "design:product-device-frames",
"schemaVersion": 2,
"title": {
"ja": "製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す",
"en": "Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out"
},
"summary": {
"ja": "PC とスマホの枠に画面の略図を置き、番号つきの引き出し線で効く所を 3 か所だけ指す。画面は灰色の線の略図",
"en": "Simplified screens sit in laptop and phone frames; numbered leader lines point at just three spots. The screens are grey line sketches"
},
"capturedAt": "2026-10-19",
"categories": [
"presentation"
],
"tags": [
"minimal",
"bold"
],
"useCases": [
"offering"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "annotated",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 112,
"right": 160,
"bottom": 96,
"left": 160
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.2em"
},
"title": {
"size": 56,
"weight": 900,
"leading": 1.3
},
"num": {
"size": 24,
"weight": 900,
"numeric": "tabular"
},
"cTitle": {
"size": 28,
"weight": 900,
"leading": 1.4
},
"cBody": {
"size": 22,
"weight": 400,
"leading": 1.7
}
},
"colors": {
"ground": "#F6F5F1",
"surface": "#FFFFFF",
"ink": "#15171C",
"muted": "#686C75",
"accent": "#9A6512",
"rule": "#DDDAD2",
"series": []
},
"rules": [
{
"ja": "引き出しは 3 か所まで。全部の機能を指すと、どれが要か分からない",
"en": "Three callouts at most — point at every feature and none of them matters"
},
{
"ja": "画面は灰色の略図にし、指す所だけ強調色にする。実際の画面写真を貼ると、細部に目が行く",
"en": "Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail"
},
{
"ja": "引き出し線は直角に折り、画面の上で交差させない",
"en": "Leader lines bend at right angles and never cross over a screen"
},
{
"ja": "説明は 1 項目 1 行の効き目。機能名ではなく、使う人に起きることを書く",
"en": "Each note is one line of effect — what happens to the user, not the feature's name"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.DaoB00Jo.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"callout-numbered-screen",
"zoom-inset-whole-detail",
"app-shell-single-tone"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "annotated",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 112,
"right": 160,
"bottom": 96,
"left": 160
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.2em"
},
"title": {
"size": 56,
"weight": 900,
"leading": 1.3
},
"num": {
"size": 24,
"weight": 900,
"numeric": "tabular"
},
"cTitle": {
"size": 28,
"weight": 900,
"leading": 1.4
},
"cBody": {
"size": 22,
"weight": 400,
"leading": 1.7
}
},
"colors": {
"ground": "#F6F5F1",
"surface": "#FFFFFF",
"ink": "#15171C",
"muted": "#686C75",
"accent": "#9A6512",
"rule": "#DDDAD2"
},
"rules": [
"Three callouts at most — point at every feature and none of them matters",
"Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail",
"Leader lines bend at right angles and never cross over a screen",
"Each note is one line of effect — what happens to the user, not the feature's name"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 112 右 160 下 96 左 160\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.2em\ntitle 56px / 900 / 行送り 1.3\nnum 24px / 900 / 等幅数字\ncTitle 28px / 900 / 行送り 1.4\ncBody 22px / 400 / 行送り 1.7\n\n## 配色\n地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2\n\n## 外すと崩れる点\n- 引き出しは 3 か所まで。全部の機能を指すと、どれが要か分からない\n- 画面は灰色の略図にし、指す所だけ強調色にする。実際の画面写真を貼ると、細部に目が行く\n- 引き出し線は直角に折り、画面の上で交差させない\n- 説明は 1 項目 1 行の効き目。機能名ではなく、使う人に起きることを書く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/product-device-frames/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 112 right 160 bottom 96 left 160\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.2em\ntitle 56px / 900 / leading 1.3\nnum 24px / 900 / tabular numerals\ncTitle 28px / 900 / leading 1.4\ncBody 22px / 400 / leading 1.7\n\n## Colour\nGround #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2\n\n## Constraints — dropping these breaks it\n- Three callouts at most — point at every feature and none of them matters\n- Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail\n- Leader lines bend at right angles and never cross over a screen\n- Each note is one line of effect — what happens to the user, not the feature's name\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/product-device-frames/pattern.html."
},
"code": {
"html": "\n\n製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す\n\n\n\n\n
\n
\n
\n
製品
\n
突き合わせは自動、人が見るのは食い違いだけ
\n
\n\n
\n \n
\n 1\n
食い違いだけを上に出す
\n
ずれた行だけに色が付く
\n
\n
\n 2\n
承認はスマホで
\n
社長の確認待ちで止まらない
\n
\n
\n 3\n
ボタン 1 つで締める
\n
仕訳を送って月を閉じる
\n
\n
\n
\n
\n",
"url": "https://design-vault.pages.dev/designs/product-device-frames/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/product-device-frames/font.css",
"https://design-vault.pages.dev/designs/product-device-frames/font-0.woff2",
"https://design-vault.pages.dev/designs/product-device-frames/font-1.woff2",
"https://design-vault.pages.dev/designs/product-device-frames/font-2.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/product-device-frames",
"en": "https://design-vault.pages.dev/en/designs/product-device-frames",
"json": "https://design-vault.pages.dev/ai/assets/product-device-frames.json",
"designJson": "https://design-vault.pages.dev/ai/designs/product-device-frames.json"
},
"notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の\n1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。\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 ten pitch slides, drawn as the\nSeries A deck of a fictional company; every company, person and figure on it is invented.\n\n### Techniques\n\n- 機器の枠は墨の太い角丸、画面は白地に灰色の帯\n- 番号は強調色の丸に地の色で抜く\n- 引き出し線は 2px の強調色、端に小さな点\n\n### Apply to\n\n- ピッチの製品の 1 枚\n- 製品説明会・営業資料の機能紹介",
"slug": "product-device-frames",
"kind": "artboard",
"catalogVersion": 1,
"designSchemaVersion": 2,
"capabilities": [
"view-artboard",
"read-spec",
"copy-prompt",
"get-code"
],
"reusePolicy": "construction-reuse"
}