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

Monochrome Editorial Spread

Two Column
Monochrome Editorial Spread
column 1
column 2
96 84

1588 × 1123 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

2026-04-17-monochrome-editorial-magazine-everything.md

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

Prompt

887 B 
Produce one A4 landscape page to the following specification.

- Canvas 1588 × 1123
- Margin top 84 right 96 bottom 96 left 96
- 2 equal columns, gap 72

## Emphasis
column 1 only, by weight and nothing else

## Type (px against a 1588px canvas)
headline  56px / 700 / leading 1.55
stand  15px / 400 / leading 1.7
body  15px / 400 / leading 1.7
caption  12px / 300 / leading 1.6

## Colour
Ground #FAFAFA / Ink #0A0A0A / Muted #8C8C8C

## Constraints — dropping these breaks it
- Three tonal values, no more — extra grays read as compromise
- Hierarchy comes from weight alone (700 / 400 / 300)
- Body leading 1.6–1.75; editorial can stretch to 1.8

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/2026-04-17-monochrome-editorial-magazine/pattern.html.

Spec

1.0 KB

/ai/designs/2026-04-17-monochrome-editorial-magazine.json 

format: a4-landscape
density: low
layout:
  kind: 2-column
  canvas:
    w: 1588
    h: 1123
  margin:
    top: 84
    right: 96
    bottom: 96
    left: 96
  columns:
    count: 2
    gap: 72
  emphasis:
    column: 1
    via:
      - weight
type:
  headline:
    size: 56
    weight: 700
    leading: 1.55
  stand:
    size: 15
    weight: 400
    leading: 1.7
  body:
    size: 15
    weight: 400
    leading: 1.7
  caption:
    size: 12
    weight: 300
    leading: 1.6
colors:
  ground: "#FAFAFA"
  ink: "#0A0A0A"
  muted: "#8C8C8C"
rules:
  - Three tonal values, no more — extra grays read as compromise
  - Hierarchy comes from weight alone (700 / 400 / 300)
  - Body leading 1.6–1.75; editorial can stretch to 1.8

Files

pattern.html

4.2 KB

/designs/2026-04-17-monochrome-editorial-magazine/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 Old Mincho:400;700">
<meta name="dv-font" content="Zen Kaku Gothic New:300;400">
<link rel="stylesheet" href="./font.css">
<style>
  /* 色は 3 値まで。灰を足すと「妥協した配色」に見える。 */
  :root { --ground: #FAFAFA; --ink: #0A0A0A; --muted: #8C8C8C; }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1588px; height: 1123px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
  .artboard { width: 1588px; height: 1123px; background: var(--ground); color: var(--ink); padding: 84px 96px 96px; }
  .content { height: 100%; }
  /* 見開き。2 段は左右のページで、綴じは間隔で示す。 */
  .cols { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  /* 天に見出し・地にノンブル。間を 1fr で空けて版面の上下を使い切る。 */
  .page { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

  /* 階層は書体のウェイトだけで作る（700 / 400 / 300）。 */
  .headline { font-family: "Zen Old Mincho", serif; font-size: 56px; font-weight: 700; line-height: 1.55; }
  .head { display: block; }
  .stand { margin-top: 40px; font-size: 15px; font-weight: 400; line-height: 1.7; max-width: 84%; }
  .caption { align-self: end; padding-top: 28px; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--muted); }
  .rule { margin-top: 36px; width: 96px; height: 1px; background: var(--ink); }

  /* 右ページは本文。段を 2 本に割ると誌面の速度が出る。 */
  .body { columns: 2; column-gap: 44px; font-size: 15px; font-weight: 400; line-height: 1.7; }
  .body p + p { margin-top: 1.7em; }
  .folio { align-self: end; display: flex; justify-content: space-between; font-size: 12px; font-weight: 300; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="cols">
      <section class="page" data-col="1" data-emphasis="weight">
        <div class="head">
          <h1 class="headline" data-type="headline">色を封じると、<br>組版が主語になる</h1>
          <div class="rule"></div>
          <p class="stand" data-type="stand">黒・白・灰の三値だけで見開きを組む。読み順を作るのは色ではなく、書体のウェイトと余白である。三値で足りるなら、四値目は足さない。</p>
        </div>
        <p class="caption" data-type="caption">特集 — 誌面設計の基礎 / 第 3 回</p>
      </section>
      <section class="page" data-col="2">
        <div class="body" data-type="body">
          <p>色を三値に絞ると、まず失われるのは強調の手段である。太字も大きさも使えるが、色で目を引く手が消える。その制約が、かえって読み順の設計を強いる。</p>
          <p>見出しに明朝、本文にゴシックを当てると、字面の密度差だけで階層が立つ。同じ大きさのまま、読み手は見出しを見出しとして受け取る。</p>
          <p>行送りは一・七。誌面であれば一・八まで伸ばしてよい。伸ばすほど頁は静かになるが、伸ばしすぎると段が崩れて読み落としが増える。</p>
          <p>灰は一値だけ。二値目を足した瞬間、三値の配色は「妥協した配色」に見えはじめる。足すのではなく、余白で差をつける。</p>
          <p>強調が要る箇所では、まず大きさを疑う。大きさで足りるなら太さは温存しておく。太さは最後の一手として残す。</p>
          <p>写真を入れない誌面では、余白そのものが図版として働く。天地の空きは飾りではなく、次の頁へ進む速度を決めている。</p>
          <p>結局のところ、色を封じた誌面で読み手が受け取るのは、書き手が何を先に読ませたかったかという判断だけである。</p>
        </div>
        <div class="folio"><span>Monochrome Editorial</span><span>28</span></div>
      </section>
    </div>
  </div>
</div>

font.css

6.1 KB

/designs/2026-04-17-monochrome-editorial-magazine/font.css — Not in Everything

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

@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2f, U+32-33, U+38, U+45, U+4d, U+61, U+63-65, U+68-69, U+6c-6f, U+72, U+74, U+2014, U+3001-3002, U+300c-300d, U+3042, U+3044, U+3046, U+3048, U+304a-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307b-307c, U+307e-3082, U+3088-308d, U+308f, U+3092, U+3094, U+3099, U+30a2-30a4, U+30a6-30a8, U+30af-30b0, U+30b3-30b4, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30ce, U+30e0, U+30e2, U+30ea-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e00, U+4e03, U+4e09, U+4e3b, U+4e8c, U+4f38, U+4f53, U+4f55, U+4f59, U+4f5c, U+4f7f, U+5024, U+50cd, U+5148, U+5165, U+516b, U+5199, U+51fa, U+5224, U+5236, U+5354, U+53d6-53d7, U+540c, U+56db, U+56de, U+56f3, U+5730, U+57fa, U+5897, U+5927, U+5929-592a, U+5931, U+59a5, U+5b57-5b58, U+5bc6, U+5c01, U+5c40, U+5c64, U+5d29, U+5dee, U+5ea6, U+5f15, U+5f37, U+5f53, U+5f8c, U+6240, U+624b, U+6587, U+65ad, U+660e, U+66f8, U+6700, U+671d, U+672c, U+6b21, U+6b8b, U+6bb5, U+6c7a, U+6d88, U+6e29, U+7070, U+7248, U+7279, U+7591, U+767d, U+76ee, U+771f, U+77ac, U+790e, U+7a7a, U+7acb, U+7b2c, U+7b87, U+7d04, U+7d44, U+7d50, U+7d5e, U+8272, U+843d, U+884c, U+8981, U+898b, U+8a08, U+8a2d, U+8a8c, U+8a9e, U+8aad, U+8abf, U+8db3, U+9001, U+901f, U+9032, U+914d, U+958b, U+9593, U+968e, U+96c6, U+9759, U+9762, U+9801, U+9806, U+98fe, U+9ed2;
}
@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+2f, U+32-33, U+38, U+45, U+4d, U+61, U+63-65, U+68-69, U+6c-6f, U+72, U+74, U+2014, U+3001-3002, U+300c-300d, U+3042, U+3044, U+3046, U+3048, U+304a-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307b-307c, U+307e-3082, U+3088-308d, U+308f, U+3092, U+3094, U+3099, U+30a2-30a4, U+30a6-30a8, U+30af-30b0, U+30b3-30b4, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30ce, U+30e0, U+30e2, U+30ea-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e00, U+4e03, U+4e09, U+4e3b, U+4e8c, U+4f38, U+4f53, U+4f55, U+4f59, U+4f5c, U+4f7f, U+5024, U+50cd, U+5148, U+5165, U+516b, U+5199, U+51fa, U+5224, U+5236, U+5354, U+53d6-53d7, U+540c, U+56db, U+56de, U+56f3, U+5730, U+57fa, U+5897, U+5927, U+5929-592a, U+5931, U+59a5, U+5b57-5b58, U+5bc6, U+5c01, U+5c40, U+5c64, U+5d29, U+5dee, U+5ea6, U+5f15, U+5f37, U+5f53, U+5f8c, U+6240, U+624b, U+6587, U+65ad, U+660e, U+66f8, U+6700, U+671d, U+672c, U+6b21, U+6b8b, U+6bb5, U+6c7a, U+6d88, U+6e29, U+7070, U+7248, U+7279, U+7591, U+767d, U+76ee, U+771f, U+77ac, U+790e, U+7a7a, U+7acb, U+7b2c, U+7b87, U+7d04, U+7d44, U+7d50, U+7d5e, U+8272, U+843d, U+884c, U+8981, U+898b, U+8a08, U+8a2d, U+8a8c, U+8a9e, U+8aad, U+8abf, U+8db3, U+9001, U+901f, U+9032, U+914d, U+958b, U+9593, U+968e, U+96c6, U+9759, U+9762, U+9801, U+9806, U+98fe, U+9ed2;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+2f, U+32-33, U+38, U+45, U+4d, U+61, U+63-65, U+68-69, U+6c-6f, U+72, U+74, U+2014, U+3001-3002, U+300c-300d, U+3042, U+3044, U+3046, U+3048, U+304a-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307b-307c, U+307e-3082, U+3088-308d, U+308f, U+3092, U+3094, U+3099, U+30a2-30a4, U+30a6-30a8, U+30af-30b0, U+30b3-30b4, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30ce, U+30e0, U+30e2, U+30ea-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e00, U+4e03, U+4e09, U+4e3b, U+4e8c, U+4f38, U+4f53, U+4f55, U+4f59, U+4f5c, U+4f7f, U+5024, U+50cd, U+5148, U+5165, U+516b, U+5199, U+51fa, U+5224, U+5236, U+5354, U+53d6-53d7, U+540c, U+56db, U+56de, U+56f3, U+5730, U+57fa, U+5897, U+5927, U+5929-592a, U+5931, U+59a5, U+5b57-5b58, U+5bc6, U+5c01, U+5c40, U+5c64, U+5d29, U+5dee, U+5ea6, U+5f15, U+5f37, U+5f53, U+5f8c, U+6240, U+624b, U+6587, U+65ad, U+660e, U+66f8, U+6700, U+671d, U+672c, U+6b21, U+6b8b, U+6bb5, U+6c7a, U+6d88, U+6e29, U+7070, U+7248, U+7279, U+7591, U+767d, U+76ee, U+771f, U+77ac, U+790e, U+7a7a, U+7acb, U+7b2c, U+7b87, U+7d04, U+7d44, U+7d50, U+7d5e, U+8272, U+843d, U+884c, U+8981, U+898b, U+8a08, U+8a2d, U+8a8c, U+8a9e, U+8aad, U+8abf, U+8db3, U+9001, U+901f, U+9032, U+914d, U+958b, U+9593, U+968e, U+96c6, U+9759, U+9762, U+9801, U+9806, U+98fe, U+9ed2;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-3.woff2) format('woff2');
  unicode-range: U+2f, U+32-33, U+38, U+45, U+4d, U+61, U+63-65, U+68-69, U+6c-6f, U+72, U+74, U+2014, U+3001-3002, U+300c-300d, U+3042, U+3044, U+3046, U+3048, U+304a-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307b-307c, U+307e-3082, U+3088-308d, U+308f, U+3092, U+3094, U+3099, U+30a2-30a4, U+30a6-30a8, U+30af-30b0, U+30b3-30b4, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30ce, U+30e0, U+30e2, U+30ea-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e00, U+4e03, U+4e09, U+4e3b, U+4e8c, U+4f38, U+4f53, U+4f55, U+4f59, U+4f5c, U+4f7f, U+5024, U+50cd, U+5148, U+5165, U+516b, U+5199, U+51fa, U+5224, U+5236, U+5354, U+53d6-53d7, U+540c, U+56db, U+56de, U+56f3, U+5730, U+57fa, U+5897, U+5927, U+5929-592a, U+5931, U+59a5, U+5b57-5b58, U+5bc6, U+5c01, U+5c40, U+5c64, U+5d29, U+5dee, U+5ea6, U+5f15, U+5f37, U+5f53, U+5f8c, U+6240, U+624b, U+6587, U+65ad, U+660e, U+66f8, U+6700, U+671d, U+672c, U+6b21, U+6b8b, U+6bb5, U+6c7a, U+6d88, U+6e29, U+7070, U+7248, U+7279, U+7591, U+767d, U+76ee, U+771f, U+77ac, U+790e, U+7a7a, U+7acb, U+7b2c, U+7b87, U+7d04, U+7d44, U+7d50, U+7d5e, U+8272, U+843d, U+884c, U+8981, U+898b, U+8a08, U+8a2d, U+8a8c, U+8a9e, U+8aad, U+8abf, U+8db3, U+9001, U+901f, U+9032, U+914d, U+958b, U+9593, U+968e, U+96c6, U+9759, U+9762, U+9801, U+9806, U+98fe, U+9ed2;
}

Notes

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは pattern.html だけで、寸法を手で書き直すことはない。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to