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 tick 20px / 500 legend 20px / 500 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 1本のローソクは1時点の始値・終値・高値・安値を一組として示す - 実体の上下端が始値と終値、ひげの上下端が当日の高値と安値 - 色は終値と始値の上下関係を示す。色の慣例は市場・地域に合わせて凡例で明示する - 架空の10営業日データ。価格履歴のみから将来の値動きを断定しない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/candlestick-chart-daily-price-range/pattern.html
/ai/designs/candlestick-chart-daily-price-range.json
format: slide-16x9
density: medium
layout:
kind: axis
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
tick:
size: 20
weight: 500
legend:
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:
- 1本のローソクは1時点の始値・終値・高値・安値を一組として示す
- 実体の上下端が始値と終値、ひげの上下端が当日の高値と安値
- 色は終値と始値の上下関係を示す。色の慣例は市場・地域に合わせて凡例で明示する
- 架空の10営業日データ。価格履歴のみから将来の値動きを断定しない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"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
},
"tick": {
"size": 20,
"weight": 500
},
"legend": {
"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": [
"1本のローソクは1時点の始値・終値・高値・安値を一組として示す",
"実体の上下端が始値と終値、ひげの上下端が当日の高値と安値",
"色は終値と始値の上下関係を示す。色の慣例は市場・地域に合わせて凡例で明示する",
"架空の10営業日データ。価格履歴のみから将来の値動きを断定しない"
]
} /designs/candlestick-chart-daily-price-range/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>株価の10日推移 — 終値は8.5%上昇</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;
--plot-color-1: #C16A24;
}
*{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="架空の10営業日の株価ローソク足。終値は2000円から2170円へ8.5%上昇。青い実体は始値より終値が高く、橙は終値が低い。上下のひげは日中高値と安値。">
<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}.tick{font-size:20px;font-weight:500}.legend{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.up{fill:var(--accent);stroke:var(--accent)}.down{fill:var(--plot-color-1);stroke:var(--plot-color-1)}.wick{stroke-width:4}.body{stroke-width:2}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">株価の10日推移 — 終値は8.5%上昇</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">架空の営業日データ / 各ローソクは始値・終値・日中高値・日中安値を表示</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">終値の方向と、各日の値動き幅を同時に読む</text>
<text class="muted legend" x="140" y="330">価格（円）</text>
<g class="rule" fill="none" stroke-width="1.5">
<line x1="400" y1="379" x2="1510" y2="379"/><line x1="400" y1="460" x2="1510" y2="460"/><line x1="400" y1="541" x2="1510" y2="541"/><line x1="400" y1="622" x2="1510" y2="622"/><line x1="400" y1="703" x2="1510" y2="703"/><line x1="400" y1="744" x2="1510" y2="744"/>
</g>
<g class="muted tick" text-anchor="end" dominant-baseline="central"><text data-type="tick" x="370" y="379">2,220</text><text x="370" y="460">2,160</text><text x="370" y="541">2,100</text><text x="370" y="622">2,040</text><text x="370" y="703">1,980</text><text x="370" y="744">1,950</text></g>
<!-- Scale: y=730-(price-1960)*1.35. Candle body spans close and open; wick spans low and high. -->
<g class="up"><line class="wick" x1="500" y1="622" x2="500" y2="703"/><rect class="body" x="482" y="663" width="36" height="14" rx="2"/></g>
<g class="down"><line class="wick" x1="610" y1="636" x2="610" y2="717"/><rect class="body" x="592" y="663" width="36" height="27" rx="2"/></g>
<g class="up"><line class="wick" x1="720" y1="616" x2="720" y2="703"/><rect class="body" x="702" y="649" width="36" height="41" rx="2"/></g>
<g class="up"><line class="wick" x1="830" y1="568" x2="830" y2="663"/><rect class="body" x="812" y="595" width="36" height="54" rx="2"/></g>
<g class="down"><line class="wick" x1="940" y1="575" x2="940" y2="636"/><rect class="body" x="922" y="595" width="36" height="14" rx="2"/></g>
<g class="up"><line class="wick" x1="1050" y1="528" x2="1050" y2="622"/><rect class="body" x="1032" y="555" width="36" height="54" rx="2"/></g>
<g class="up"><line class="wick" x1="1160" y1="487" x2="1160" y2="568"/><rect class="body" x="1142" y="528" width="36" height="27" rx="2"/></g>
<g class="down"><line class="wick" x1="1270" y1="514" x2="1270" y2="595"/><rect class="body" x="1252" y="528" width="36" height="41" rx="2"/></g>
<g class="up"><line class="wick" x1="1380" y1="460" x2="1380" y2="582"/><rect class="body" x="1362" y="487" width="36" height="81" rx="2"/></g>
<g class="up"><line class="wick" x1="1490" y1="406" x2="1490" y2="514"/><rect class="body" x="1472" y="446" width="36" height="68" rx="2"/></g>
<g class="muted tick" text-anchor="middle" dominant-baseline="central"><text data-type="tick" x="500" y="774">1日</text><text x="610" y="774">2日</text><text x="720" y="774">3日</text><text x="830" y="774">4日</text><text x="940" y="774">5日</text><text x="1050" y="774">6日</text><text x="1160" y="774">7日</text><text x="1270" y="774">8日</text><text x="1380" y="774">9日</text><text x="1490" y="774">10日</text></g>
<g dominant-baseline="central"><rect class="up" x="600" y="844" width="22" height="22" rx="3"/><text class="ink legend" data-type="legend" x="634" y="855">終値が始値より高い</text><rect class="down" x="1010" y="844" width="22" height="22" rx="3"/><text class="ink legend" x="1044" y="855">終値が始値より低い</text></g>
<text class="ink takeaway" data-type="takeaway" x="960" y="936" text-anchor="middle">終値は2,000円から2,170円へ — 10営業日で +8.5%</text>
<line class="rule" x1="140" y1="974" x2="1780" y2="974" stroke-width="1"/><text class="muted note" data-type="note" x="140" y="1013">ローソクの実体は始値と終値、ひげは当日の高値と安値。架空データであり投資判断には使わない。</text>
</svg></div></div>
/designs/candlestick-chart-daily-price-range/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 85 (dec354bb45d6638c)
*
* 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+25, U+2b-2c, U+2e-39, U+2014, U+3001-3002, U+3042, U+3044, U+304b-304e, U+3051-3052, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+3080, U+3088-308a, U+308f, U+3092, U+3099, U+30af-30b0, U+30bd-30c0, U+30c6-30c7, U+30ed, U+30fb-30fc, U+4e0a, U+4e2d, U+4f4e, U+4f53, U+4f7f, U+4fa1, U+5024, U+5186, U+5224, U+52d5, U+5404, U+540c, U+5411, U+55b6, U+59cb, U+5b89, U+5b9f, U+5e45, U+5f53, U+6295, U+63a8, U+65ad, U+65b9, U+65e5, U+6607, U+6642, U+67b6, U+682a, U+683c, U+696d, U+793a, U+79fb, U+7a7a, U+7d42, U+8868, U+8aad, U+8cc7, U+9ad8, U+ff08-ff09;
}
@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+25, U+2b-2c, U+2e-39, U+2014, U+3001-3002, U+3042, U+3044, U+304b-304e, U+3051-3052, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+3080, U+3088-308a, U+308f, U+3092, U+3099, U+30af-30b0, U+30bd-30c0, U+30c6-30c7, U+30ed, U+30fb-30fc, U+4e0a, U+4e2d, U+4f4e, U+4f53, U+4f7f, U+4fa1, U+5024, U+5186, U+5224, U+52d5, U+5404, U+540c, U+5411, U+55b6, U+59cb, U+5b89, U+5b9f, U+5e45, U+5f53, U+6295, U+63a8, U+65ad, U+65b9, U+65e5, U+6607, U+6642, U+67b6, U+682a, U+683c, U+696d, U+793a, U+79fb, U+7a7a, U+7d42, U+8868, U+8aad, U+8cc7, U+9ad8, U+ff08-ff09;
}
@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+25, U+2b-2c, U+2e-39, U+2014, U+3001-3002, U+3042, U+3044, U+304b-304e, U+3051-3052, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+3080, U+3088-308a, U+308f, U+3092, U+3099, U+30af-30b0, U+30bd-30c0, U+30c6-30c7, U+30ed, U+30fb-30fc, U+4e0a, U+4e2d, U+4f4e, U+4f53, U+4f7f, U+4fa1, U+5024, U+5186, U+5224, U+52d5, U+5404, U+540c, U+5411, U+55b6, U+59cb, U+5b89, U+5b9f, U+5e45, U+5f53, U+6295, U+63a8, U+65ad, U+65b9, U+65e5, U+6607, U+6642, U+67b6, U+682a, U+683c, U+696d, U+793a, U+79fb, U+7a7a, U+7d42, U+8868, U+8aad, U+8cc7, U+9ad8, U+ff08-ff09;
}
10営業日の間、終値はどちらへ動き、各日の値幅はどれほどだったか。
横軸は営業日、縦軸は価格。各ローソクの実体は始値と終値の間、上下のひげは日中高値と安値を結ぶ。 終値が始値より高い日は青、低い日は橙で示す。架空データの終値は2,000円から2,170円へ上昇し、 値幅や反転を含む日ごとの動きを一度に読める。
終値を線で結ぶ時系列グラフは主に終値の推移を示すが、ローソク足は各期間内の始値・高値・安値も符号化する。 したがって一日の上下動、終値の方向、値幅を区別して確認できる。色の上下慣例は市場ごとに異なるため凡例を付ける。