版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 100 右 140 下 100 左 140 ## 文字（版面 1920px に対する px） title 46px / 700 / 字間 0.01em subtitle 22px / 500 axisTitle 22px / 700 entityTitle 24px / 700 field 20px / 500 key 20px / 700 relation 20px / 500 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 各枠はエンティティを表し、PKが主キー、FKが他エンティティへの参照を示す - 単一バーは必ず1件、crow's foot（三つ又）は複数件を表す - 注文明細を関連エンティティとして置き、注文と商品それぞれへの外部キーを持たせる - 論理モデルの例。NULL可否・一意制約・履歴の保持はシステム要件に応じて別途定義する 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/entity-relationship-order-schema/pattern.html
/ai/designs/entity-relationship-order-schema.json
format: slide-16x9
density: medium
layout:
kind: network
canvas:
w: 1920
h: 1080
margin:
top: 100
right: 140
bottom: 100
left: 140
type:
title:
size: 46
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 500
axisTitle:
size: 22
weight: 700
entityTitle:
size: 24
weight: 700
field:
size: 20
weight: 500
key:
size: 20
weight: 700
relation:
size: 20
weight: 500
takeaway:
size: 28
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- 各枠はエンティティを表し、PKが主キー、FKが他エンティティへの参照を示す
- 単一バーは必ず1件、crow's foot（三つ又）は複数件を表す
- 注文明細を関連エンティティとして置き、注文と商品それぞれへの外部キーを持たせる
- 論理モデルの例。NULL可否・一意制約・履歴の保持はシステム要件に応じて別途定義する{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "network",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"entityTitle": {
"size": 24,
"weight": 700
},
"field": {
"size": 20,
"weight": 500
},
"key": {
"size": 20,
"weight": 700
},
"relation": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"各枠はエンティティを表し、PKが主キー、FKが他エンティティへの参照を示す",
"単一バーは必ず1件、crow's foot（三つ又）は複数件を表す",
"注文明細を関連エンティティとして置き、注文と商品それぞれへの外部キーを持たせる",
"論理モデルの例。NULL可否・一意制約・履歴の保持はシステム要件に応じて別途定義する"
]
} /designs/entity-relationship-order-schema/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>注文データの関係 — 注文明細が商品と注文を結ぶ</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
: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","Hiragino Sans",sans-serif}
.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<svg class="figure" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="顧客、注文、商品、注文明細のER図。顧客と注文は1対多、注文と注文明細も1対多、商品と注文明細も1対多。注文明細が各注文の商品と数量を記録する。">
<style>
.figure{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}
.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.entity-title{font-size:24px;font-weight:700}.field{font-size:20px;font-weight:500}.key{font-size:20px;font-weight:700}.rel{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.card{fill:var(--surface);stroke:var(--rule);stroke-width:2}.head{fill:var(--surface)}.edge{stroke:var(--muted);stroke-width:3;fill:none}.pk{fill:var(--accent)}.fk{fill:var(--muted)}.marker{stroke:var(--ink);stroke-width:3;fill:none}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">注文データの関係 — 注文明細が商品と注文を結ぶ</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">4エンティティ / 主キーと外部キーで関係を定義するER図</text>
<line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">1件の注文に複数の商品行を記録し、商品情報を再利用する</text>
<!-- Cardinality connectors are behind the entity cards. A bar means exactly one; a crow's foot means many. -->
<g class="edge">
<path d="M590 525 H780"/><path d="M960 600 V670"/><path d="M1350 525 H1240 V790 H1140"/>
</g>
<!-- Customer (one) to Order (many). -->
<g class="marker"><path d="M604 513 V537"/><path d="M780 525 L760 525 M780 525 L760 511 M780 525 L760 539"/></g>
<!-- Order (one) to OrderLine (many). -->
<g class="marker"><path d="M948 613 H972"/><path d="M960 670 L960 650 M960 670 L946 650 M960 670 L974 650"/></g>
<!-- Product (one) to OrderLine (many). -->
<g class="marker"><path d="M1338 513 V537"/><path d="M1140 790 L1160 790 M1140 790 L1160 776 M1140 790 L1160 804"/></g>
<g class="muted rel" text-anchor="middle"><text data-type="relation" x="685" y="505">1 対 多</text><text x="1015" y="660">1 対 多</text><text x="1295" y="738">1 対 多</text></g>
<!-- Customer entity -->
<g><rect class="card" x="240" y="420" width="350" height="210" rx="8"/><path class="head" d="M248 420 H582 Q590 420 590 428 V476 H240 V428 Q240 420 248 420 Z"/><text class="ink entity-title" data-type="entityTitle" x="270" y="459">顧客</text>
<text class="pk key" data-type="key" x="270" y="518">PK</text><text class="ink field" data-type="field" x="330" y="518">customer_id</text><line class="rule" x1="260" y1="535" x2="570" y2="535"/>
<text class="muted field" x="330" y="566">name</text><line class="rule" x1="260" y1="582" x2="570" y2="582"/><text class="muted field" x="330" y="612">email</text></g>
<!-- Order entity -->
<g><rect class="card" x="780" y="340" width="360" height="260" rx="8"/><path class="head" d="M788 340 H1132 Q1140 340 1140 348 V396 H780 V348 Q780 340 788 340 Z"/><text class="ink entity-title" data-type="entityTitle" x="810" y="379">注文</text>
<text class="pk key" data-type="key" x="810" y="438">PK</text><text class="ink field" data-type="field" x="870" y="438">order_id</text><line class="rule" x1="800" y1="455" x2="1120" y2="455"/>
<text class="fk key" data-type="key" x="810" y="490">FK</text><text class="ink field" data-type="field" x="870" y="490">customer_id</text><line class="rule" x1="800" y1="507" x2="1120" y2="507"/>
<text class="muted field" x="870" y="550">ordered_at</text></g>
<!-- Product entity -->
<g><rect class="card" x="1350" y="420" width="350" height="210" rx="8"/><path class="head" d="M1358 420 H1692 Q1700 420 1700 428 V476 H1350 V428 Q1350 420 1358 420 Z"/><text class="ink entity-title" data-type="entityTitle" x="1380" y="459">商品</text>
<text class="pk key" data-type="key" x="1380" y="518">PK</text><text class="ink field" data-type="field" x="1440" y="518">product_id</text><line class="rule" x1="1370" y1="535" x2="1680" y2="535"/>
<text class="muted field" x="1440" y="566">sku</text><line class="rule" x1="1370" y1="582" x2="1680" y2="582"/><text class="muted field" x="1440" y="612">unit_price</text></g>
<!-- OrderLine is the associative entity. -->
<g><rect class="card" x="780" y="670" width="360" height="260" rx="8"/><path class="head" d="M788 670 H1132 Q1140 670 1140 678 V726 H780 V678 Q780 670 788 670 Z"/><text class="ink entity-title" data-type="entityTitle" x="810" y="709">注文明細</text>
<text class="pk key" data-type="key" x="810" y="770">PK</text><text class="ink field" data-type="field" x="870" y="770">order_line_id</text><line class="rule" x1="800" y1="787" x2="1120" y2="787"/>
<text class="fk key" data-type="key" x="810" y="818">FK</text><text class="ink field" data-type="field" x="870" y="818">order_id</text><line class="rule" x1="800" y1="835" x2="1120" y2="835"/>
<text class="fk key" data-type="key" x="810" y="866">FK</text><text class="ink field" data-type="field" x="870" y="866">product_id</text><line class="rule" x1="800" y1="883" x2="1120" y2="883"/><text class="muted field" x="870" y="914">quantity</text></g>
<text class="ink takeaway" data-type="takeaway" x="960" y="958" text-anchor="middle">注文明細が注文と商品をN:1で結び、数量を保持</text>
<line class="rule" x1="140" y1="982" x2="1780" y2="982" stroke-width="1"/><text class="muted note" data-type="note" x="140" y="1018">バー=必ず1件、三つ又=複数件。関係はサンプルの論理モデルで、実運用の制約は別途定義する。</text>
</svg></div></div>
/designs/entity-relationship-order-schema/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 103 (95126f3d50065d01)
*
* 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, U+34, U+3a, U+3d, U+45-46, U+4b, U+4e, U+50, U+52, U+5f, U+61, U+63-65, U+69, U+6b-75, U+79, U+2014, U+3001-3002, U+304b-304c, U+3057-305a, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3099-309a, U+30a3, U+30a8, U+30ad-30ae, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e2, U+30eb, U+30f3, U+30fc, U+4e09, U+4e3b, U+4ef6, U+4fc2, U+4fdd, U+518d, U+5225, U+5229, U+5236, U+53c8, U+54c1, U+5546, U+56f3, U+5831, U+5916, U+591a, U+5b9a, U+5b9f, U+5ba2, U+5bfe, U+5fc5, U+60c5, U+6301, U+6570, U+6587, U+660e, U+6ce8, U+7406, U+7528, U+7d04, U+7d30, U+7d50, U+7fa9, U+884c, U+8907, U+8a18, U+8ad6, U+9014, U+904b, U+90e8, U+91cf, U+9332, U+95a2, U+9867;
}
@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, U+34, U+3a, U+3d, U+45-46, U+4b, U+4e, U+50, U+52, U+5f, U+61, U+63-65, U+69, U+6b-75, U+79, U+2014, U+3001-3002, U+304b-304c, U+3057-305a, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3099-309a, U+30a3, U+30a8, U+30ad-30ae, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e2, U+30eb, U+30f3, U+30fc, U+4e09, U+4e3b, U+4ef6, U+4fc2, U+4fdd, U+518d, U+5225, U+5229, U+5236, U+53c8, U+54c1, U+5546, U+56f3, U+5831, U+5916, U+591a, U+5b9a, U+5b9f, U+5ba2, U+5bfe, U+5fc5, U+60c5, U+6301, U+6570, U+6587, U+660e, U+6ce8, U+7406, U+7528, U+7d04, U+7d30, U+7d50, U+7fa9, U+884c, U+8907, U+8a18, U+8ad6, U+9014, U+904b, U+90e8, U+91cf, U+9332, U+95a2, U+9867;
}
@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, U+34, U+3a, U+3d, U+45-46, U+4b, U+4e, U+50, U+52, U+5f, U+61, U+63-65, U+69, U+6b-75, U+79, U+2014, U+3001-3002, U+304b-304c, U+3057-305a, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3099-309a, U+30a3, U+30a8, U+30ad-30ae, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e2, U+30eb, U+30f3, U+30fc, U+4e09, U+4e3b, U+4ef6, U+4fc2, U+4fdd, U+518d, U+5225, U+5229, U+5236, U+53c8, U+54c1, U+5546, U+56f3, U+5831, U+5916, U+591a, U+5b9a, U+5b9f, U+5ba2, U+5bfe, U+5fc5, U+60c5, U+6301, U+6570, U+6587, U+660e, U+6ce8, U+7406, U+7528, U+7d04, U+7d30, U+7d50, U+7fa9, U+884c, U+8907, U+8a18, U+8ad6, U+9014, U+904b, U+90e8, U+91cf, U+9332, U+95a2, U+9867;
}
注文・顧客・商品はどのキーで結ばれ、1件と複数件の関係はどこにあるか。
4つのエンティティ枠に主キー（PK）・外部キー（FK）・属性を置く。顧客から注文、注文から注文明細、商品から 注文明細へ1対多の関係が伸びる。バーは「1」、crow’s foot（三つ又）は「多」を示し、注文明細が注文ID・商品IDと 数量を結びつける。
組織図や関係者ネットワークは人・役割間の階層や影響を表すが、このER図はデータエンティティ、キー、参照制約を 示す。論理構造の例であり、実データベースではNULL可否、一意制約、削除規則、履歴保持を設計する必要がある。