Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Half-Bleed Figure — The Left Half Is the Picture, the Right Half the Text

Full Bleed
Design
Half-Bleed Figure — The Left Half Is the Picture, the Right Half the Text
column 1
column 2
0 0

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

half-bleed-figure-text-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 0 right 0 bottom 0 left 0
- 2 equal columns, gap 0

## Type (px against a 1920px canvas)
caption  20px / 400 / leading 1.6
kicker  20px / 500 / tracking 0.16em
title  50px / 700 / leading 1.4
lede  24px / 400 / leading 1.85
fLabel  20px / 500
fValue  26px / 700 / tabular numerals
folio  16px / 400 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- 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

Replace the content with [your content]. Keep the measurements and colours as given.
For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/half-bleed-figure-text/pattern.html.

Spec

1.4 KB

/ai/designs/half-bleed-figure-text.json 

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

Files

pattern.html

4.4 KB

/designs/half-bleed-figure-text/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>半面図版 — 左半分を図版で埋め、右半分に本文を組む</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
    /* 図版の差し替え枠。写真の代わりに、地・中間・強調の 3 段の面で奥行きだけを置く */
    --plate-far: color-mix(in srgb, var(--accent) 18%, var(--surface));
    --plate-mid: color-mix(in srgb, var(--accent) 42%, var(--surface));
    --plate-near: color-mix(in srgb, var(--accent) 78%, var(--ink));
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
  }
  /* 裁ち落とし。図版は版面の端まで出し、余白は本文の側だけに取る */
  .content { width: 100%; height: 100%; display: grid; grid-template-columns: 960px 960px; }

  .plate { position: relative; background: var(--plate-far); overflow: hidden; }
  .plate svg { position: absolute; inset: 0; }
  /* キャプションは図版の上に重ねず、図版の下端に帯で置く。写真が何でも読める */
  .caption { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--ground);
             padding: 22px 48px; font-size: 20px; font-weight: 400; line-height: 1.6; }

  .text { padding: 120px 140px 96px 96px; display: grid; grid-template-rows: auto 1fr auto; }
  .kicker { font-size: 20px; font-weight: 500; letter-spacing: .16em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; margin-top: 20px; }
  .lede { font-size: 24px; font-weight: 400; line-height: 1.85; color: var(--muted); margin-top: 32px; }

  .facts { align-self: end; display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .fact { display: grid; grid-template-columns: 200px 1fr; column-gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .fLabel { font-size: 20px; font-weight: 500; color: var(--muted); }
  .fValue { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

  .folio { display: flex; justify-content: space-between; margin-top: 40px;
           font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="plate" data-col="1">
      <svg width="960" height="1080" viewBox="0 0 960 1080" aria-hidden="true">
        <rect x="120" y="180" width="560" height="640" fill="var(--plate-mid)"/>
        <rect x="300" y="360" width="520" height="560" fill="var(--plate-near)"/>
        <circle cx="300" cy="360" r="96" fill="var(--ground)"/>
      </svg>
      <p class="caption" data-type="caption">新しい受付の机。4 窓口の担当者が同じ島に座り、受けた人がそのまま答える</p>
    </div>

    <div class="text" data-col="2">
      <div>
        <p class="kicker" data-type="kicker">2. 一本化で何が変わるか</p>
        <h1 class="title" data-type="title">入口は 1 つ、答える人は 4 つの専門から</h1>
        <p class="lede" data-type="lede">受付を 1 か所に集めても、専門の担当者は減らしません。受けた人が答えられなければ、隣の席の専門家に、その場で引き継ぎます。</p>
      </div>
      <div class="facts">
        <div class="fact">
          <p class="fLabel" data-type="fLabel">電話番号</p>
          <p class="fValue" data-type="fValue">0120-000-000 の 1 本</p>
        </div>
        <div class="fact">
          <p class="fLabel">受付時間</p>
          <p class="fValue">平日 9:00〜18:00</p>
        </div>
        <div class="fact">
          <p class="fLabel">切り替え日</p>
          <p class="fValue">2026 年 11 月 4 日（水）</p>
        </div>
      </div>
      <div class="folio" data-type="folio"><span>問い合わせ窓口の一本化 ／ 社内説明会</span><span>05 / 10</span></div>
    </div>
  </div>
</div>

font.css

3.1 KB

/designs/half-bleed-figure-text/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   113 (d2623833a17b10cd)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+20, U+2d-32, U+34-36, U+38-3a, U+2014, U+3001-3002, U+301c, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3060, U+3064-3067, U+306a-306b, U+306e-3070, U+307e, U+3080-3082, U+3089-308c, U+308f, U+3092-3093, U+3099, U+4e00, U+4eba, U+4ed8, U+4f1a, U+4f55, U+5165, U+5185, U+5206-5207, U+5316, U+534a, U+53d7, U+53e3, U+53f3, U+53f7, U+5408, U+540c, U+554f, U+56f3, U+57cb, U+5834, U+5909, U+5bb6, U+5c02, U+5cf6, U+5de6, U+5e2d, U+5e73-5e74, U+5ea7, U+5f15, U+5f53, U+6240, U+62c5, U+6587, U+65b0, U+65e5, U+660e, U+6642, U+66ff, U+6708, U+672c, U+673a, U+6c34, U+6e1b, U+7248, U+756a, U+793e, U+7a93, U+7b54, U+7d44, U+7d99, U+8005, U+8a71, U+8aac, U+9580, U+9593, U+96a3, U+96c6, U+96fb, U+9762, U+ff08-ff09, U+ff0f;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+2d-32, U+34-36, U+38-3a, U+2014, U+3001-3002, U+301c, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3060, U+3064-3067, U+306a-306b, U+306e-3070, U+307e, U+3080-3082, U+3089-308c, U+308f, U+3092-3093, U+3099, U+4e00, U+4eba, U+4ed8, U+4f1a, U+4f55, U+5165, U+5185, U+5206-5207, U+5316, U+534a, U+53d7, U+53e3, U+53f3, U+53f7, U+5408, U+540c, U+554f, U+56f3, U+57cb, U+5834, U+5909, U+5bb6, U+5c02, U+5cf6, U+5de6, U+5e2d, U+5e73-5e74, U+5ea7, U+5f15, U+5f53, U+6240, U+62c5, U+6587, U+65b0, U+65e5, U+660e, U+6642, U+66ff, U+6708, U+672c, U+673a, U+6c34, U+6e1b, U+7248, U+756a, U+793e, U+7a93, U+7b54, U+7d44, U+7d99, U+8005, U+8a71, U+8aac, U+9580, U+9593, U+96a3, U+96c6, U+96fb, U+9762, U+ff08-ff09, U+ff0f;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+2d-32, U+34-36, U+38-3a, U+2014, U+3001-3002, U+301c, U+3044, U+3048, U+304b-304e, U+3051-3052, U+3057-3060, U+3064-3067, U+306a-306b, U+306e-3070, U+307e, U+3080-3082, U+3089-308c, U+308f, U+3092-3093, U+3099, U+4e00, U+4eba, U+4ed8, U+4f1a, U+4f55, U+5165, U+5185, U+5206-5207, U+5316, U+534a, U+53d7, U+53e3, U+53f3, U+53f7, U+5408, U+540c, U+554f, U+56f3, U+57cb, U+5834, U+5909, U+5bb6, U+5c02, U+5cf6, U+5de6, U+5e2d, U+5e73-5e74, U+5ea7, U+5f15, U+5f53, U+6240, U+62c5, U+6587, U+65b0, U+65e5, U+660e, U+6642, U+66ff, U+6708, U+672c, U+673a, U+6c34, U+6e1b, U+7248, U+756a, U+793e, U+7a93, U+7b54, U+7d44, U+7d99, U+8005, U+8a71, U+8aac, U+9580, U+9593, U+96a3, U+96c6, U+96fb, U+9762, U+ff08-ff09, U+ff0f;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、 配色は system-project 一式の淡地・濃地と同じ 2 組に揃えてある。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the ten basic slides, drawn in the same two palettes as the system-project deck so the two can be mixed.

Techniques

Apply to