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

Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out

Annotated
Design
Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out
160 112

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

product-device-frames-everything.md

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

Prompt

1.0 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 112 right 160 bottom 96 left 160

## Type (px against a 1920px canvas)
kicker  22px / 700 / tracking 0.2em
title  56px / 900 / leading 1.3
num  24px / 900 / tabular numerals
cTitle  28px / 900 / leading 1.4
cBody  22px / 400 / leading 1.7

## Colour
Ground #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2

## Constraints — dropping these breaks it
- Three callouts at most — point at every feature and none of them matters
- Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail
- Leader lines bend at right angles and never cross over a screen
- Each note is one line of effect — what happens to the user, not the feature's name

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/product-device-frames/pattern.html.

Spec

1.2 KB

/ai/designs/product-device-frames.json 

format: slide-16x9
density: medium
layout:
  kind: annotated
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 112
    right: 160
    bottom: 96
    left: 160
type:
  kicker:
    size: 22
    weight: 700
    tracking: 0.2em
  title:
    size: 56
    weight: 900
    leading: 1.3
  num:
    size: 24
    weight: 900
    numeric: tabular
  cTitle:
    size: 28
    weight: 900
    leading: 1.4
  cBody:
    size: 22
    weight: 400
    leading: 1.7
colors:
  ground: "#F6F5F1"
  surface: "#FFFFFF"
  ink: "#15171C"
  muted: "#686C75"
  accent: "#9A6512"
  rule: "#DDDAD2"
rules:
  - Three callouts at most — point at every feature and none of them matters
  - Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail
  - Leader lines bend at right angles and never cross over a screen
  - Each note is one line of effect — what happens to the user, not the feature's name

Files

pattern.html

5.0 KB

/designs/product-device-frames/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;700;900">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #F6F5F1;
    --surface: #FFFFFF;
    --ink: #15171C;
    --muted: #686C75;
    --accent: #9A6512;
    --rule: #DDDAD2;
    /* 画面の差し替え枠。実際の画面の代わりに、行と区画の形だけを灰の濃淡で描く */
    --screen-line: color-mix(in srgb, var(--ink) 14%, var(--surface));
    --screen-block: color-mix(in srgb, var(--ink) 7%, var(--surface));
    --screen-hit: color-mix(in srgb, var(--accent) 22%, var(--surface));
  }
  * { 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: 112px 160px 96px;            /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr; row-gap: 40px; }

  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }
  .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; }

  .stage { position: relative; }
  .stage svg { position: absolute; left: 0; top: 0; }
  .call { position: absolute; width: 340px; }
  .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--surface);
         font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .cTitle { font-size: 28px; font-weight: 900; line-height: 1.4; margin-top: 14px; }
  .cBody { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 8px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">製品</p>
      <h1 class="title" data-type="title">突き合わせは自動、人が見るのは食い違いだけ</h1>
    </div>

    <div class="stage">
      <svg width="1600" height="700" viewBox="0 0 1600 700" aria-hidden="true">
        <!-- PC：枠と画面 -->
        <rect x="0" y="60" width="880" height="540" rx="18" fill="var(--ink)"/>
        <rect x="22" y="82" width="836" height="496" fill="var(--surface)"/>
        <rect x="22" y="82" width="180" height="496" fill="var(--screen-block)"/>
        <rect x="232" y="112" width="380" height="22" fill="var(--screen-line)"/>
        <g fill="var(--screen-line)">
          <rect x="232" y="180" width="596" height="14"/><rect x="232" y="222" width="596" height="14"/>
          <rect x="232" y="264" width="596" height="14"/><rect x="232" y="348" width="596" height="14"/>
          <rect x="232" y="390" width="596" height="14"/><rect x="232" y="432" width="596" height="14"/>
        </g>
        <rect x="220" y="294" width="620" height="44" fill="var(--screen-hit)"/>
        <rect x="232" y="309" width="596" height="14" fill="var(--accent)"/>
        <rect x="668" y="508" width="160" height="48" rx="6" fill="var(--accent)"/>
        <!-- スマホ：枠と画面 -->
        <rect x="930" y="180" width="236" height="460" rx="32" fill="var(--ink)"/>
        <rect x="945" y="204" width="206" height="412" rx="20" fill="var(--surface)"/>
        <rect x="967" y="238" width="162" height="92" rx="8" fill="var(--screen-hit)"/>
        <g fill="var(--screen-line)"><rect x="967" y="356" width="162" height="12"/><rect x="967" y="386" width="124" height="12"/><rect x="967" y="416" width="142" height="12"/></g>
        <!-- 引き出し線：指す点に丸、注記の番号の高さで水平に入る -->
        <g stroke="var(--accent)" stroke-width="3" fill="none">
          <path d="M840 316 L900 316 L900 42 L1236 42"/>
          <path d="M1129 284 L1236 284"/>
          <path d="M748 556 L748 664 L1200 664 L1200 492 L1236 492"/>
        </g>
        <g fill="var(--accent)"><circle cx="840" cy="316" r="7"/><circle cx="1129" cy="284" r="7"/><circle cx="748" cy="556" r="7"/></g>
      </svg>
      <div class="call" style="left: 1260px; top: 20px">
        <span class="num" data-type="num">1</span>
        <p class="cTitle" data-type="cTitle">食い違いだけを上に出す</p>
        <p class="cBody" data-type="cBody">ずれた行だけに色が付く</p>
      </div>
      <div class="call" style="left: 1260px; top: 262px">
        <span class="num">2</span>
        <p class="cTitle">承認はスマホで</p>
        <p class="cBody">社長の確認待ちで止まらない</p>
      </div>
      <div class="call" style="left: 1260px; top: 470px">
        <span class="num">3</span>
        <p class="cTitle">ボタン 1 つで締める</p>
        <p class="cBody">仕訳を送って月を閉じる</p>
      </div>
    </div>
  </div>
</div>

font.css

2.4 KB

/designs/product-device-frames/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;700;900
 * chars   78 (4d77b0963a5abdcb)
 *
 * 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+31-33, U+43, U+50, U+2014, U+3001, U+3044, U+304b-3052, U+3057-305c, U+305f-306b, U+306e-3070, U+307e, U+3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30b9-30ba, U+30bf-30c0, U+30db-30dc, U+30de, U+30f3, U+4e0a, U+4eba, U+4ed5, U+4ed8, U+51fa, U+52b9, U+52d5, U+5408, U+54c1, U+5f85, U+6240, U+627f, U+6307, U+6708, U+67a0, U+6b62, U+753b, U+78ba, U+793e, U+7a81, U+7de0, U+7f6e, U+81ea, U+8272, U+884c, U+88fd, U+898b, U+8a33, U+8a8d, U+9001, U+9055, U+9577, U+9589, U+9762, U+98df;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+31-33, U+43, U+50, U+2014, U+3001, U+3044, U+304b-3052, U+3057-305c, U+305f-306b, U+306e-3070, U+307e, U+3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30b9-30ba, U+30bf-30c0, U+30db-30dc, U+30de, U+30f3, U+4e0a, U+4eba, U+4ed5, U+4ed8, U+51fa, U+52b9, U+52d5, U+5408, U+54c1, U+5f85, U+6240, U+627f, U+6307, U+6708, U+67a0, U+6b62, U+753b, U+78ba, U+793e, U+7a81, U+7de0, U+7f6e, U+81ea, U+8272, U+884c, U+88fd, U+898b, U+8a33, U+8a8d, U+9001, U+9055, U+9577, U+9589, U+9762, U+98df;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+31-33, U+43, U+50, U+2014, U+3001, U+3044, U+304b-3052, U+3057-305c, U+305f-306b, U+306e-3070, U+307e, U+3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30b9-30ba, U+30bf-30c0, U+30db-30dc, U+30de, U+30f3, U+4e0a, U+4eba, U+4ed5, U+4ed8, U+51fa, U+52b9, U+52d5, U+5408, U+54c1, U+5f85, U+6240, U+627f, U+6307, U+6708, U+67a0, U+6b62, U+753b, U+78ba, U+793e, U+7a81, U+7de0, U+7f6e, U+81ea, U+8272, U+884c, U+88fd, U+898b, U+8a33, U+8a8d, U+9001, U+9055, U+9577, U+9589, U+9762, U+98df;
}

Notes

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の 1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。

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 pitch slides, drawn as the Series A deck of a fictional company; every company, person and figure on it is invented.

Techniques

Apply to