Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

役割と階調 — 1 枚の見本帳

グリッド
役割と階調 — 1 枚の見本帳
1 列目
2 列目
3 列目
4 列目
5 列目
6 列目
56 56

794 × 1123 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

specimen-sheet-derived-ramp-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.7 KB 
以下の仕様でA4 の資料を 1 枚作ってください。

- 版面 794 × 1123
- 余白 上 56 右 56 下 56 左 56
- 6 カラム（等分）、間隔 12

## 文字（版面 794px に対する px）
title  34px / 700 / 字間 0.01em
lede  14px / 400 / 行送り 1.8
band-name  11px / 500 / 字間 0.16em / 大文字
role  13px / 500
var  11px / 400
measure  11px / 400 / 等幅数字
sample-a  40px / 700 / 字間 0.01em
sample-b  24px / 500
sample-c  15px / 400 / 行送り 1.8
foot  12px / 400 / 行送り 1.7

## 配色
地 #FDFCFD / 面 #F3F1F4 / 文字 #1A1620 / 補助 #6C6572 / 強調 #8A2E62 / 罫 #E0DBE3

## 外すと崩れる点
- 階調は accent から固定の比率で引き、段ごとに色を決めない。段を個別に決めた瞬間、配色を差し替えても階調だけが元の色相のまま残る
- 見本に値を書かない。添えるのは役割の名前と比だけ。値は配色ごとに変わり、名前と比は変わらない
- 見本の上に文字を置かない。見本と文字の組み合わせは役割の対ではないので、読めなくなっても検査は緑のまま通る
- 役割も階調も同じ 6 本の列に揃える。違う本数で割ると、6 つの役割と 6 段の階調が別の体系に見える
- 大文字変換に小文字のラテンを通さない。同梱する書体は変換前の本文から切るので、画面にだけ現れる大文字は同梱されず、読み手の環境の書体に落ちる

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/pattern.html

仕様

2.1 KB

/ai/designs/specimen-sheet-derived-ramp.json 

format: a4-portrait
density: medium
layout:
  kind: grid
  canvas:
    w: 794
    h: 1123
  margin:
    top: 56
    right: 56
    bottom: 56
    left: 56
  columns:
    count: 6
    gap: 12
type:
  title:
    size: 34
    weight: 700
    tracking: 0.01em
  lede:
    size: 14
    weight: 400
    leading: 1.8
  band-name:
    size: 11
    weight: 500
    tracking: 0.16em
    transform: upper
  role:
    size: 13
    weight: 500
  var:
    size: 11
    weight: 400
  measure:
    size: 11
    weight: 400
    numeric: tabular
  sample-a:
    size: 40
    weight: 700
    tracking: 0.01em
  sample-b:
    size: 24
    weight: 500
  sample-c:
    size: 15
    weight: 400
    leading: 1.8
  foot:
    size: 12
    weight: 400
    leading: 1.7
colors:
  ground: "#FDFCFD"
  surface: "#F3F1F4"
  ink: "#1A1620"
  muted: "#6C6572"
  accent: "#8A2E62"
  rule: "#E0DBE3"
rules:
  - 階調は accent から固定の比率で引き、段ごとに色を決めない。段を個別に決めた瞬間、配色を差し替えても階調だけが元の色相のまま残る
  - 見本に値を書かない。添えるのは役割の名前と比だけ。値は配色ごとに変わり、名前と比は変わらない
  - 見本の上に文字を置かない。見本と文字の組み合わせは役割の対ではないので、読めなくなっても検査は緑のまま通る
  - 役割も階調も同じ 6 本の列に揃える。違う本数で割ると、6 つの役割と 6 段の階調が別の体系に見える
  - 大文字変換に小文字のラテンを通さない。同梱する書体は変換前の本文から切るので、画面にだけ現れる大文字は同梱されず、読み手の環境の書体に落ちる

ファイル

pattern.html

7.7 KB

/designs/specimen-sheet-derived-ramp/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>役割と階調 — 1 枚の見本帳</title>
<meta name="dv-font" content="Murecho:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #FDFCFD;
    --surface: #F3F1F4;
    --ink: #1A1620;
    --muted: #6C6572;
    --accent: #8A2E62;
    --rule: #E0DBE3;

    /* 階調は accent から固定の比率で派生させ、段ごとに色を決めない。
       リテラルを持たないので配色プリセットの「役割外の色」には数えられず、
       accent を差し替えると 6 段とも新しい accent から引き直される。
       この版が主張していることを、この版自身が実演する仕掛け。 */
    --step-1: color-mix(in srgb, var(--accent) 100%, var(--ground));
    --step-2: color-mix(in srgb, var(--accent) 76%, var(--ground));
    --step-3: color-mix(in srgb, var(--accent) 52%, var(--ground));
    --step-4: color-mix(in srgb, var(--accent) 32%, var(--ground));
    --step-5: color-mix(in srgb, var(--accent) 16%, var(--ground));
    --step-6: color-mix(in srgb, var(--accent) 8%, var(--ground));
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 794px; height: 1123px; }
  body { font-family: "Murecho", "IPAGothic", sans-serif; }

  .artboard {
    width: 794px; height: 1123px;
    background: var(--ground); color: var(--ink);
    padding: 56px;                        /* → layout.margin */
  }
  /* [data-content] は版面そのもの。height:100% で余白と一対一に対応させる。 */
  .sheet { height: 100%; display: flex; flex-direction: column; gap: 34px; }

  .head { padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
  .lede { color: var(--muted); margin-top: 8px; max-width: 520px; }
  /* 大文字変換に小文字のラテンを通さない。同梱する字は変換前の本文から切られるので、
     画面にだけ現れる大文字は同梱されず、環境の書体に落ちる。 */
  .band-name { color: var(--muted); padding-bottom: 12px; }

  /* 6 列の格子。役割も階調もこの 6 本に揃える。 */
  .roles, .ramp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

  /* 見本の上に文字を置かない。地と面のコントラストは役割の対として
     判定されるが、見本の上に乗せた文字は判定の対象外で、配色を替えたときに
     読めなくなっても検査は緑のまま通る。 */
  .chip { height: 92px; border: 1px solid var(--rule); }
  .role { display: block; margin-top: 10px; }
  /* 見本に値を書かない。値は配色ごとに変わり、名前と比は変わらない。 */
  .var  { display: block; margin-top: 2px; color: var(--muted); }

  .c-ground  { background: var(--ground); }
  .c-surface { background: var(--surface); }
  .c-ink     { background: var(--ink); }
  .c-muted   { background: var(--muted); }
  .c-accent  { background: var(--accent); }
  .c-rule    { background: var(--rule); }

  .step { height: 64px; border: 1px solid var(--rule); }
  .s1 { background: var(--step-1); } .s2 { background: var(--step-2); }
  .s3 { background: var(--step-3); } .s4 { background: var(--step-4); }
  .s5 { background: var(--step-5); } .s6 { background: var(--step-6); }

  .scale { display: flex; flex-direction: column; gap: 14px; }
  .row { display: flex; align-items: baseline; gap: 20px; }
  .measure { color: var(--muted); width: 96px; flex: none; font-variant-numeric: tabular-nums; }

  .terms { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .term { color: var(--muted); display: flex; gap: 14px; }
  .term b { font-weight: 500; color: var(--ink); flex: none; width: 96px; }
  .foot { margin-top: auto; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--rule); }

  .title     { font-size: 34px; font-weight: 700; letter-spacing: .01em; }
  .lede      { font-size: 14px; font-weight: 400; line-height: 1.8; }
  .band-name { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
  .role      { font-size: 13px; font-weight: 500; }
  .var,
  .measure   { font-size: 11px; font-weight: 400; }
  .sample-a  { font-size: 40px; font-weight: 700; letter-spacing: .01em; }
  .sample-b  { font-size: 24px; font-weight: 500; }
  .sample-c  { font-size: 15px; font-weight: 400; line-height: 1.8; }
  .term,
  .foot      { font-size: 12px; font-weight: 400; line-height: 1.7; }
</style>

<div class="artboard" data-artboard>
  <div class="sheet" data-content>
    <div class="head">
      <h1 class="title" data-type="title">役割と階調</h1>
      <p class="lede" data-type="lede">色は 6 つの役割で持ち、階調は accent から比率で引く。値ではなく名前と比を書いてあるのは、配色を差し替えても、この紙に書いてあることが変わらないようにするため。</p>
    </div>

    <div>
      <p class="band-name" data-type="band-name">役割</p>
      <div class="roles">
        <div data-col="1"><div class="chip c-ground"></div><span class="role" data-type="role">地</span><span class="var" data-type="var">--ground</span></div>
        <div data-col="2"><div class="chip c-surface"></div><span class="role">面</span><span class="var">--surface</span></div>
        <div data-col="3"><div class="chip c-ink"></div><span class="role">文字</span><span class="var">--ink</span></div>
        <div data-col="4"><div class="chip c-muted"></div><span class="role">補助</span><span class="var">--muted</span></div>
        <div data-col="5"><div class="chip c-accent"></div><span class="role">強調</span><span class="var">--accent</span></div>
        <div data-col="6"><div class="chip c-rule"></div><span class="role">罫</span><span class="var">--rule</span></div>
      </div>
    </div>

    <div>
      <p class="band-name">階調 — 強調からの比率</p>
      <div class="ramp">
        <div><div class="step s1"></div><span class="var">100%</span></div>
        <div><div class="step s2"></div><span class="var">76%</span></div>
        <div><div class="step s3"></div><span class="var">52%</span></div>
        <div><div class="step s4"></div><span class="var">32%</span></div>
        <div><div class="step s5"></div><span class="var">16%</span></div>
        <div><div class="step s6"></div><span class="var">8%</span></div>
      </div>
    </div>

    <div>
      <p class="band-name">文字</p>
      <div class="scale">
        <div class="row"><span class="measure" data-type="measure">40 / 700</span><span class="sample-a" data-type="sample-a">見出しはひとつ</span></div>
        <div class="row"><span class="measure">24 / 500</span><span class="sample-b" data-type="sample-b">小見出しは短く切る</span></div>
        <div class="row"><span class="measure">15 / 400</span><span class="sample-c" data-type="sample-c">本文は行送り 1.8。ひとつの段に 3 行より多く入れない。</span></div>
      </div>
    </div>

    <div class="terms">
      <p class="term"><b>値を書かない</b>見本に添えるのは役割の名前と比だけ。値は配色ごとに変わる。</p>
      <p class="term"><b>上に載せない</b>見本の上に文字を置かない。その組み合わせは検査の対象外。</p>
      <p class="term"><b>段を決めない</b>階調は accent から引く。段ごとに色を決めると引き直せない。</p>
    </div>

    <p class="foot" data-type="foot">この紙自体が 6 つの役割だけで刷られている。配色を差し替えると、見本も階調もその配色に変わる。</p>
  </div>
</div>

font.css

2.9 KB

/designs/specimen-sheet-derived-ramp/font.css — 全部入りには入れていない

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

@font-face {
  font-family: 'Murecho';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}
@font-face {
  font-family: 'Murecho';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}
@font-face {
  font-family: 'Murecho';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}

ノート

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは 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