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

申請画面の指摘 — 4 か所を直せば差し戻しが減る

注釈つき図
申請画面の指摘 — 4 か所を直せば差し戻しが減る
140 96

1920 × 1080 作品として見る

持ち帰る

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

全部入り

callout-numbered-screen-everything.md

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

依頼文

1.6 KB 
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 96 右 140 下 96 左 140

## 文字（版面 1920px に対する px）
title  44px / 700 / 字間 0.01em / 行送り 1.3
window  20px / 500 / 行送り 1.5
pinNum  24px / 700 / 行送り 1
noteIndex  24px / 700 / 行送り 1.3
noteName  24px / 700 / 行送り 1.3
noteDetail  20px / 400 / 行送り 1.6
note  16px / 400 / 行送り 1.6

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 画面を画像で貼らない。公開されるのは版と font.css と woff2 だけなので、隣に置いた画像は手元でだけ出て、公開版では静かに欠ける
- 画面は線画にする。実物の文字を写すと、読み手は指摘ではなく文面を読み始める
- 番号の順序は直す順序にする。画面上の位置で番号を振ると、順序に意味があるように見えて、優先順として読まれてしまう
- 引き出し線は番号より先に描く。あとから置いた丸が線の端を隠し、線がどこを指しているかが明確になる
- 指摘は 5 つまで。6 つ目からは線が交差し、どの番号がどこを指しているかを目で追えなくなる

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

仕様

1.8 KB

/ai/designs/callout-numbered-screen.json 

format: slide-16x9
density: medium
layout:
  kind: annotated
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 140
    bottom: 96
    left: 140
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  window:
    size: 20
    weight: 500
    leading: 1.5
  pinNum:
    size: 24
    weight: 700
    leading: 1
  noteIndex:
    size: 24
    weight: 700
    leading: 1.3
  noteName:
    size: 24
    weight: 700
    leading: 1.3
  noteDetail:
    size: 20
    weight: 400
    leading: 1.6
  note:
    size: 16
    weight: 400
    leading: 1.6
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - 画面を画像で貼らない。公開されるのは版と font.css と woff2 だけなので、隣に置いた画像は手元でだけ出て、公開版では静かに欠ける
  - 画面は線画にする。実物の文字を写すと、読み手は指摘ではなく文面を読み始める
  - 番号の順序は直す順序にする。画面上の位置で番号を振ると、順序に意味があるように見えて、優先順として読まれてしまう
  - 引き出し線は番号より先に描く。あとから置いた丸が線の端を隠し、線がどこを指しているかが明確になる
  - 指摘は 5 つまで。6 つ目からは線が交差し、どの番号がどこを指しているかを目で追えなくなる

ファイル

pattern.html

8.0 KB

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

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>申請画面の指摘 — 4 か所を直せば差し戻しが減る</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
     区分色は持たない —— 番号が指す場所が意味であって、色は何も言っていない。 */
  :root {
    --ground: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }

  * { 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);
    padding: 96px 140px;
  }

  .content {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }
  .title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }
  .window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }

  .body { display: grid; align-content: center; }

  /* 画面は画像ではなく div で描く。公開されるのは版と font.css と woff2 だけなので、
     版の隣に画像を置くと、手元では出て公開版だけが静かに 404 になる。 */
  .stage { position: relative; width: 1640px; height: 620px; }

  .screen { position: absolute; left: 0; top: 0; width: 980px; height: 620px; border: 2px solid var(--rule); border-radius: 14px; background: var(--ground); overflow: hidden; }
  .titlebar { position: absolute; left: 0; top: 0; width: 980px; height: 56px; background: var(--surface); border-bottom: 1px solid var(--rule); }
  .dot { position: absolute; top: 21px; width: 14px; height: 14px; border-radius: 50%; background: var(--rule); }
  .sidebar { position: absolute; left: 0; top: 57px; width: 220px; height: 563px; background: var(--surface); border-right: 1px solid var(--rule); }
  .sidebar-item { position: absolute; left: 28px; width: 150px; height: 14px; border-radius: 7px; background: var(--rule); }
  .label-bar { position: absolute; width: 170px; height: 14px; border-radius: 7px; background: var(--rule); }
  .field { position: absolute; width: 560px; height: 52px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
  .submit { position: absolute; left: 700px; top: 510px; width: 200px; height: 56px; border-radius: 8px; background: var(--accent); }

  /* 引き出し線は SVG で、番号より先に描く。あとから置いた番号の丸が線の端を隠す。 */
  .leaders { position: absolute; left: 0; top: 0; }
  .leader { fill: none; stroke: var(--muted); stroke-width: 1.6; }

  .pin { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--accent); background: var(--ground); display: grid; place-content: center; }
  /* 地の色を強調の上に抜かない。抜くと `emphasis.via: ["fill"]` の宣言が要る。 */
  .pin-num { font-size: 24px; font-weight: 700; line-height: 1; color: var(--accent); }

  .notes { position: absolute; right: 0; top: 10px; width: 560px; }
  .note-row { height: 140px; }
  .note-head { display: flex; align-items: baseline; gap: 14px; }
  .note-index { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--accent); }
  .note-name { font-size: 24px; font-weight: 700; line-height: 1.3; }
  .note-detail { margin-top: 10px; font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--muted); }

  .foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">申請画面の指摘 — 4 か所を直せば差し戻しが減る</h1>
      <p class="window" data-type="window">対象は経費申請の入力画面 / 指摘は 9 月の受入検査 / 番号は修正の優先順</p>
    </div>

    <div class="body">
      <div class="stage">
        <div class="screen">
          <div class="titlebar"></div>
          <span class="dot" style="left: 24px"></span>
          <span class="dot" style="left: 48px"></span>
          <span class="dot" style="left: 72px"></span>

          <div class="sidebar"></div>
          <span class="sidebar-item" style="top: 100px"></span>
          <span class="sidebar-item" style="top: 152px"></span>
          <span class="sidebar-item" style="top: 204px"></span>
          <span class="sidebar-item" style="top: 256px"></span>

          <span class="label-bar" style="left: 260px; top: 110px"></span>
          <span class="field" style="left: 260px; top: 136px"></span>
          <span class="label-bar" style="left: 260px; top: 210px"></span>
          <span class="field" style="left: 260px; top: 236px"></span>
          <span class="label-bar" style="left: 260px; top: 310px"></span>
          <span class="field" style="left: 260px; top: 336px"></span>
          <span class="label-bar" style="left: 260px; top: 410px"></span>
          <span class="field" style="left: 260px; top: 436px"></span>

          <span class="submit"></span>
        </div>

        <!-- 等倍で描く。viewBox と width/height を一致させてあるので、拡大率が
             入らず、線が指す座標は版面の px とそのまま同じになる。 -->
        <svg class="leaders" width="1640" height="620" viewBox="0 0 1640 620">
          <path class="leader" d="M300 162 L1060 80"/>
          <path class="leader" d="M700 262 L1060 220"/>
          <path class="leader" d="M300 462 L1060 360"/>
          <path class="leader" d="M800 538 L1060 500"/>
        </svg>

        <span class="pin" style="left: 300px; top: 162px"><span class="pin-num" data-type="pinNum">1</span></span>
        <span class="pin" style="left: 700px; top: 262px"><span class="pin-num">2</span></span>
        <span class="pin" style="left: 300px; top: 462px"><span class="pin-num">3</span></span>
        <span class="pin" style="left: 800px; top: 538px"><span class="pin-num">4</span></span>

        <div class="notes">
          <div class="note-row">
            <div class="note-head">
              <span class="note-index" data-type="noteIndex">1</span>
              <span class="note-name" data-type="noteName">勘定科目が先頭にある</span>
            </div>
            <div class="note-detail" data-type="noteDetail">使う人は金額から入力する。順序を入れ替える</div>
          </div>
          <div class="note-row">
            <div class="note-head">
              <span class="note-index">2</span>
              <span class="note-name">添付が任意に見える</span>
            </div>
            <div class="note-detail">必須の項目に必須と書く。星印だけでは伝わらない</div>
          </div>
          <div class="note-row">
            <div class="note-head">
              <span class="note-index">3</span>
              <span class="note-name">下書きが消える</span>
            </div>
            <div class="note-detail">離れたときに保存し、戻ってきた人に続きを残す</div>
          </div>
          <div class="note-row">
            <div class="note-head">
              <span class="note-index">4</span>
              <span class="note-name">送信後の行き先が無い</span>
            </div>
            <div class="note-detail">差し戻しが届く場所を、送信した直後に示す</div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot" data-type="note">番号は修正の優先順で、画面上の位置とは関係しない。今回は優先順が上から順に並んだだけで、入れ替われば線は交差する。</div>
  </div>
</div>

font.css

3.3 KB

/designs/callout-numbered-screen/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   114 (66e20c603473de9a)
 *
 * 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+2f, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}
@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+2f, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}
@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+2f, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}

ノート

受入検査の指摘は、文章にすると読まれない。「勘定科目が先頭にある」と書いても、 読み手はその画面を思い出せないからである。番号を画面に打つと、指摘は場所を 持つようになり、直す人は探さずに済む。

画面を線画にしているのは権利の話ではなく、読まれ方の話である。実物の文字を 写した瞬間、聞き手は指摘ではなく文面を読み始め、会議は文言の推敲に移る。