{ "id": "design:half-bleed-figure-text", "schemaVersion": 2, "title": { "ja": "半面図版 — 左半分を図版で埋め、右半分に本文を組む", "en": "Half-Bleed Figure — The Left Half Is the Picture, the Right Half the Text" }, "summary": { "ja": "版面の左半分を裁ち落としの図版で埋め、右半分に見出し・本文・要点 3 行を組む。図版は抽象図形の差し替え枠", "en": "The left half bleeds a figure to the edges; the right half holds the title, body and three facts. The figure is an abstract stand-in" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "bold", "typography" ], "useCases": [ "problem-solution" ], "format": "slide-16x9", "density": "low", "layout": { "kind": "full-bleed", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "columns": { "count": 2, "gap": 0 } }, "type": { "caption": { "size": 20, "weight": 400, "leading": 1.6 }, "kicker": { "size": 20, "weight": 500, "tracking": "0.16em" }, "title": { "size": 50, "weight": 700, "leading": 1.4 }, "lede": { "size": 24, "weight": 400, "leading": 1.85 }, "fLabel": { "size": 20, "weight": 500 }, "fValue": { "size": 26, "weight": 700, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9", "series": [] }, "rules": [ { "ja": "図版は版面の端まで裁ち落とす。余白は本文の側だけに取る", "en": "Bleed the figure to the edges; margins belong to the text side only" }, { "ja": "キャプションは図版に重ねず、下端の帯に置く。どんな写真が来ても読める", "en": "Put the caption on a band at the foot, never over the picture — it reads whatever photo arrives" }, { "ja": "写真が無いうちは、地・中間・強調の 3 段の面で奥行きだけを置く。人や物の絵を描かない", "en": "Until a photo exists, three tones of flat shapes stand in for depth — never draw a person or an object" }, { "ja": "要点は下端に揃えて 3 行まで。本文の続きに置くと、図版と張り合う", "en": "Three facts, set at the foot; run on after the body they compete with the picture" } ], "cover": "https://design-vault.pages.dev/_astro/cover.BiRmku5y.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "quote-testimonial-bleed", "section-divider-number-bleed", "case-study-2col-single-figure" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "low", "layout": { "kind": "full-bleed", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "columns": { "count": 2, "gap": 0 } }, "type": { "caption": { "size": 20, "weight": 400, "leading": 1.6 }, "kicker": { "size": 20, "weight": 500, "tracking": "0.16em" }, "title": { "size": 50, "weight": 700, "leading": 1.4 }, "lede": { "size": 24, "weight": 400, "leading": 1.85 }, "fLabel": { "size": 20, "weight": 500 }, "fValue": { "size": 26, "weight": 700, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F4F6F9", "ink": "#131820", "muted": "#667183", "accent": "#1F5FA8", "rule": "#DBE1E9" }, "rules": [ "Bleed the figure to the edges; margins belong to the text side only", "Put the caption on a band at the foot, never over the picture — it reads whatever photo arrives", "Until a photo exists, three tones of flat shapes stand in for depth — never draw a person or an object", "Three facts, set at the foot; run on after the body they compete with the picture" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 0 右 0 下 0 左 0\n- 2 カラム（等分）、間隔 0\n\n## 文字（版面 1920px に対する px）\ncaption 20px / 400 / 行送り 1.6\nkicker 20px / 500 / 字間 0.16em\ntitle 50px / 700 / 行送り 1.4\nlede 24px / 400 / 行送り 1.85\nfLabel 20px / 500\nfValue 26px / 700 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 図版は版面の端まで裁ち落とす。余白は本文の側だけに取る\n- キャプションは図版に重ねず、下端の帯に置く。どんな写真が来ても読める\n- 写真が無いうちは、地・中間・強調の 3 段の面で奥行きだけを置く。人や物の絵を描かない\n- 要点は下端に揃えて 3 行まで。本文の続きに置くと、図版と張り合う\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/half-bleed-figure-text/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 0 right 0 bottom 0 left 0\n- 2 equal columns, gap 0\n\n## Type (px against a 1920px canvas)\ncaption 20px / 400 / leading 1.6\nkicker 20px / 500 / tracking 0.16em\ntitle 50px / 700 / leading 1.4\nlede 24px / 400 / leading 1.85\nfLabel 20px / 500\nfValue 26px / 700 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Bleed the figure to the edges; margins belong to the text side only\n- Put the caption on a band at the foot, never over the picture — it reads whatever photo arrives\n- Until a photo exists, three tones of flat shapes stand in for depth — never draw a person or an object\n- Three facts, set at the foot; run on after the body they compete with the picture\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/half-bleed-figure-text/pattern.html." }, "code": { "html": "\n\n半面図版 — 左半分を図版で埋め、右半分に本文を組む\n\n\n\n\n
\n
\n
\n \n \n \n \n \n

新しい受付の机。4 窓口の担当者が同じ島に座り、受けた人がそのまま答える

\n
\n\n
\n
\n

2. 一本化で何が変わるか

\n

入口は 1 つ、答える人は 4 つの専門から

\n

受付を 1 か所に集めても、専門の担当者は減らしません。受けた人が答えられなければ、隣の席の専門家に、その場で引き継ぎます。

\n
\n
\n
\n

電話番号

\n

0120-000-000 の 1 本

\n
\n
\n

受付時間

\n

平日 9:00〜18:00

\n
\n
\n

切り替え日

\n

2026 年 11 月 4 日（水）

\n
\n
\n
問い合わせ窓口の一本化 ／ 社内説明会05 / 10
\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/half-bleed-figure-text/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/half-bleed-figure-text/font.css", "https://design-vault.pages.dev/designs/half-bleed-figure-text/font-0.woff2", "https://design-vault.pages.dev/designs/half-bleed-figure-text/font-1.woff2", "https://design-vault.pages.dev/designs/half-bleed-figure-text/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/half-bleed-figure-text", "en": "https://design-vault.pages.dev/en/designs/half-bleed-figure-text", "json": "https://design-vault.pages.dev/ai/assets/half-bleed-figure-text.json", "designJson": "https://design-vault.pages.dev/ai/designs/half-bleed-figure-text.json" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、\n配色は system-project 一式の淡地・濃地と同じ 2 組に揃えてある。\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 basic slides, drawn in the\nsame two palettes as the system-project deck so the two can be mixed.\n\n### Techniques\n\n- 960px ずつの 2 列。図版の側にだけ余白を取らない\n- 図版の差し替え枠は強調色を地・中間・濃の 3 段に混ぜた面\n- 要点は 200px の見出し列と値の列に分け、値を太字で揃える\n\n### Apply to\n\n- 新しい場所・製品・サービスを見せる 1 枚\n- 章の頭で、話の舞台を絵で先に渡す", "slug": "half-bleed-figure-text", "kind": "artboard", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "view-artboard", "read-spec", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse" }