{
  "id": "2026-04-17-monochrome-editorial-magazine",
  "schemaVersion": 2,
  "title": {
    "ja": "モノクロームのエディトリアル誌面",
    "en": "Monochrome Editorial Spread"
  },
  "summary": {
    "ja": "黒・白・1 段階の灰だけで組んだ見開き。書体のウェイト差で階層を作る",
    "en": "A two-page spread built from black, white, and a single gray — hierarchy carried entirely by type weight"
  },
  "capturedAt": "2026-09-01",
  "categories": [
    "editorial"
  ],
  "tags": [
    "minimal",
    "monochrome",
    "typography"
  ],
  "useCases": [
    "article"
  ],
  "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",
    "series": []
  },
  "rules": [
    {
      "ja": "色は 3 値まで。灰を足すと「妥協した配色」に見える",
      "en": "Three tonal values, no more — extra grays read as compromise"
    },
    {
      "ja": "階層は書体のウェイトだけで作る（700 / 400 / 300）",
      "en": "Hierarchy comes from weight alone (700 / 400 / 300)"
    },
    {
      "ja": "本文の行送りは 1.6〜1.75。誌面なら 1.8 まで伸ばしてよい",
      "en": "Body leading 1.6–1.75; editorial can stretch to 1.8"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.D9ZhWvuk.png",
  "assets": [],
  "shortlist": true,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "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"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でA4 横の資料を 1 枚作ってください。\n\n- 版面 1588 × 1123\n- 余白 上 84 右 96 下 96 左 96\n- 2 カラム（等分）、間隔 72\n\n## 強調\n1 列目のみ。手段は 太さ だけ。ほかは変えない\n\n## 文字（版面 1588px に対する px）\nheadline  56px / 700 / 行送り 1.55\nstand  15px / 400 / 行送り 1.7\nbody  15px / 400 / 行送り 1.7\ncaption  12px / 300 / 行送り 1.6\n\n## 配色\n地 #FAFAFA / 文字 #0A0A0A / 補助 #8C8C8C\n\n## 外すと崩れる点\n- 色は 3 値まで。灰を足すと「妥協した配色」に見える\n- 階層は書体のウェイトだけで作る（700 / 400 / 300）\n- 本文の行送りは 1.6〜1.75。誌面なら 1.8 まで伸ばしてよい\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/pattern.html",
      "en": "Produce one A4 landscape page to the following specification.\n\n- Canvas 1588 × 1123\n- Margin top 84 right 96 bottom 96 left 96\n- 2 equal columns, gap 72\n\n## Emphasis\ncolumn 1 only, by weight and nothing else\n\n## Type (px against a 1588px canvas)\nheadline  56px / 700 / leading 1.55\nstand  15px / 400 / leading 1.7\nbody  15px / 400 / leading 1.7\ncaption  12px / 300 / leading 1.6\n\n## Colour\nGround #FAFAFA / Ink #0A0A0A / Muted #8C8C8C\n\n## Constraints — dropping these breaks it\n- Three tonal values, no more — extra grays read as compromise\n- Hierarchy comes from weight alone (700 / 400 / 300)\n- Body leading 1.6–1.75; editorial can stretch to 1.8\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/2026-04-17-monochrome-editorial-magazine/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>モノクロームのエディトリアル誌面</title>\n<meta name=\"dv-font\" content=\"Zen Old Mincho:400;700\">\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:300;400\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* 色は 3 値まで。灰を足すと「妥協した配色」に見える。 */\n  :root { --ground: #FAFAFA; --ink: #0A0A0A; --muted: #8C8C8C; }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1588px; height: 1123px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n  .artboard { width: 1588px; height: 1123px; background: var(--ground); color: var(--ink); padding: 84px 96px 96px; }\n  .content { height: 100%; }\n  /* 見開き。2 段は左右のページで、綴じは間隔で示す。 */\n  .cols { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }\n  /* 天に見出し・地にノンブル。間を 1fr で空けて版面の上下を使い切る。 */\n  .page { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  /* 階層は書体のウェイトだけで作る（700 / 400 / 300）。 */\n  .headline { font-family: \"Zen Old Mincho\", serif; font-size: 56px; font-weight: 700; line-height: 1.55; }\n  .head { display: block; }\n  .stand { margin-top: 40px; font-size: 15px; font-weight: 400; line-height: 1.7; max-width: 84%; }\n  .caption { align-self: end; padding-top: 28px; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--muted); }\n  .rule { margin-top: 36px; width: 96px; height: 1px; background: var(--ink); }\n\n  /* 右ページは本文。段を 2 本に割ると誌面の速度が出る。 */\n  .body { columns: 2; column-gap: 44px; font-size: 15px; font-weight: 400; line-height: 1.7; }\n  .body p + p { margin-top: 1.7em; }\n  .folio { align-self: end; display: flex; justify-content: space-between; font-size: 12px; font-weight: 300; color: var(--muted); }\n</style>\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"cols\">\n      <section class=\"page\" data-col=\"1\" data-emphasis=\"weight\">\n        <div class=\"head\">\n          <h1 class=\"headline\" data-type=\"headline\">色を封じると、<br>組版が主語になる</h1>\n          <div class=\"rule\"></div>\n          <p class=\"stand\" data-type=\"stand\">黒・白・灰の三値だけで見開きを組む。読み順を作るのは色ではなく、書体のウェイトと余白である。三値で足りるなら、四値目は足さない。</p>\n        </div>\n        <p class=\"caption\" data-type=\"caption\">特集 — 誌面設計の基礎 / 第 3 回</p>\n      </section>\n      <section class=\"page\" data-col=\"2\">\n        <div class=\"body\" data-type=\"body\">\n          <p>色を三値に絞ると、まず失われるのは強調の手段である。太字も大きさも使えるが、色で目を引く手が消える。その制約が、かえって読み順の設計を強いる。</p>\n          <p>見出しに明朝、本文にゴシックを当てると、字面の密度差だけで階層が立つ。同じ大きさのまま、読み手は見出しを見出しとして受け取る。</p>\n          <p>行送りは一・七。誌面であれば一・八まで伸ばしてよい。伸ばすほど頁は静かになるが、伸ばしすぎると段が崩れて読み落としが増える。</p>\n          <p>灰は一値だけ。二値目を足した瞬間、三値の配色は「妥協した配色」に見えはじめる。足すのではなく、余白で差をつける。</p>\n          <p>強調が要る箇所では、まず大きさを疑う。大きさで足りるなら太さは温存しておく。太さは最後の一手として残す。</p>\n          <p>写真を入れない誌面では、余白そのものが図版として働く。天地の空きは飾りではなく、次の頁へ進む速度を決めている。</p>\n          <p>結局のところ、色を封じた誌面で読み手が受け取るのは、書き手が何を先に読ませたかったかという判断だけである。</p>\n        </div>\n        <div class=\"folio\"><span>Monochrome Editorial</span><span>28</span></div>\n      </section>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/font.css",
        "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/font-0.woff2",
        "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/font-1.woff2",
        "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/font-2.woff2",
        "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine/font-3.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine",
    "en": "https://design-vault.pages.dev/en/designs/2026-04-17-monochrome-editorial-magazine"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 見出しに明朝、本文にゴシックを当てると、同じ大きさのままでも階層が立つ\n- 三値配色では強調の手段が減る。まず大きさを疑い、太さは最後の一手として残す\n- 写真を置かない誌面では余白が図版として働く。天地の空きが読む速度を決める\n\n### Apply to\n\n- 長文記事 / ブログの記事テンプレート\n- ブランドのマニフェストページ（余白と書体だけで世界観を語る場面）"
}