1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す(コピーは 32KB まで)
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 74 右 120 下 86 左 120 ## 文字(版面 1920px に対する px) kicker 20px / 700 / 字間 0.13em title 46px / 700 / 字間 -0.01em deck 21px / 400 seaLabel 20px / 700 aquiferLabel 20px / 700 saltLabel 20px / 700 safeTitle 20px / 700 safeText 20px / 500 riskTitle 20px / 700 riskText 20px / 500 takeaway 27px / 700 note 17px / 400 ## 配色 地 #F5F4EF / 面 #FFFFFF / 文字 #202D34 / 補助 #667982 / 強調 #A84F37 / 罫 #D5DCD9 / #287C89 / #B76848 / #D7E9E6 ## 外すと崩れる点 - 地表からの深さと海までの距離を同じ断面に描き、井戸位置と塩水くさびの近さを直接比べる - 淡水域・塩水域・難透水層を色とラベルの両方で区別する - 模式図を実測断面と誤認させない。縮尺外と明記し、実際の配置は調査結果で判断する 内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/coastal-aquifer-well-siting-section/pattern.html
/ai/designs/coastal-aquifer-well-siting-section.json
format: slide-16x9
density: medium
layout:
kind: annotated
canvas:
w: 1920
h: 1080
margin:
top: 74
right: 120
bottom: 86
left: 120
type:
kicker:
size: 20
weight: 700
tracking: 0.13em
title:
size: 46
weight: 700
tracking: -0.01em
deck:
size: 21
weight: 400
seaLabel:
size: 20
weight: 700
aquiferLabel:
size: 20
weight: 700
saltLabel:
size: 20
weight: 700
safeTitle:
size: 20
weight: 700
safeText:
size: 20
weight: 500
riskTitle:
size: 20
weight: 700
riskText:
size: 20
weight: 500
takeaway:
size: 27
weight: 700
note:
size: 17
weight: 400
colors:
ground: "#F5F4EF"
surface: "#FFFFFF"
ink: "#202D34"
muted: "#667982"
accent: "#A84F37"
rule: "#D5DCD9"
series:
- "#287C89"
- "#B76848"
- "#D7E9E6"
rules:
- 地表からの深さと海までの距離を同じ断面に描き、井戸位置と塩水くさびの近さを直接比べる
- 淡水域・塩水域・難透水層を色とラベルの両方で区別する
- 模式図を実測断面と誤認させない。縮尺外と明記し、実際の配置は調査結果で判断する{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "annotated",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 74,
"right": 120,
"bottom": 86,
"left": 120
}
},
"type": {
"kicker": {
"size": 20,
"weight": 700,
"tracking": "0.13em"
},
"title": {
"size": 46,
"weight": 700,
"tracking": "-0.01em"
},
"deck": {
"size": 21,
"weight": 400
},
"seaLabel": {
"size": 20,
"weight": 700
},
"aquiferLabel": {
"size": 20,
"weight": 700
},
"saltLabel": {
"size": 20,
"weight": 700
},
"safeTitle": {
"size": 20,
"weight": 700
},
"safeText": {
"size": 20,
"weight": 500
},
"riskTitle": {
"size": 20,
"weight": 700
},
"riskText": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 27,
"weight": 700
},
"note": {
"size": 17,
"weight": 400
}
},
"colors": {
"ground": "#F5F4EF",
"surface": "#FFFFFF",
"ink": "#202D34",
"muted": "#667982",
"accent": "#A84F37",
"rule": "#D5DCD9",
"series": [
"#287C89",
"#B76848",
"#D7E9E6"
]
},
"rules": [
"地表からの深さと海までの距離を同じ断面に描き、井戸位置と塩水くさびの近さを直接比べる",
"淡水域・塩水域・難透水層を色とラベルの両方で区別する",
"模式図を実測断面と誤認させない。縮尺外と明記し、実際の配置は調査結果で判断する"
]
} /designs/coastal-aquifer-well-siting-section/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:#F5F4EF;--surface:#FFFFFF;--ink:#202D34;--muted:#667982;--accent:#A84F37;--rule:#D5DCD9;--series-1:#287C89;--series-2:#B76848;--series-3:#D7E9E6;--earth-top:#E9DEC5;--earth-deep:#D8C8A7;--sea:#D9EAF0;--fresh:#B8DEDB;--salt:#EBC8B7;--contour:#A89777}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px;background:var(--ground);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif;color:var(--ink)}
svg{display:block;width:1920px;height:1080px;background:var(--ground);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif}
text{fill:var(--ink);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif}.muted{fill:var(--muted)}.accent{fill:var(--accent)}.blue{fill:var(--series-1)}.rust{fill:var(--series-2)}
.kicker{font-size:20px;font-weight:700;letter-spacing:2.5px}.title{font-size:46px;font-weight:700;letter-spacing:-.5px}.deck{font-size:21px}.tag{font-size:20px;font-weight:500}.label{font-size:20px;font-weight:700}.small{font-size:20px}.note{font-size:17px}.takeaway{font-size:27px;font-weight:700}.legend{font-size:20px;font-weight:500}
.ground{fill:var(--earth-top)}.deep{fill:var(--earth-deep)}.sea{fill:var(--sea)}.fresh{fill:var(--fresh)}.salt{fill:var(--salt)}.line{stroke:var(--rule);stroke-width:2}.contour{fill:none;stroke:var(--contour);stroke-width:2;opacity:.7}.waterline{fill:none;stroke:var(--series-1);stroke-width:5;stroke-dasharray:12 8}.well{stroke:var(--ink);stroke-width:8}.wellpipe{stroke:var(--surface);stroke-width:4}.guide{stroke:var(--rule);stroke-width:2;stroke-dasharray:7 7}.leader{fill:none;stroke:var(--muted);stroke-width:2}.flow{fill:none;stroke:var(--series-1);stroke-width:4;stroke-linecap:round}.riskflow{fill:none;stroke:var(--series-2);stroke-width:4;stroke-linecap:round}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<rect width="1920" height="1080" fill="var(--ground)"/>
<g data-content="true">
<text class="kicker accent" x="120" y="92" data-type="kicker">COASTAL AQUIFER / SITING STUDY</text>
<text class="title" x="120" y="151" data-type="title">海岸の井戸は、塩水のくさびから距離をとる</text>
<text class="deck muted" x="120" y="195" data-type="deck">地下水面と地層を横から見る — 井戸位置が塩水化リスクを左右する</text>
<line x1="120" y1="222" x2="1800" y2="222" stroke="var(--rule)" stroke-width="2"/>
<!-- section frame -->
<rect x="120" y="252" width="1680" height="590" rx="18" fill="var(--surface)" stroke="var(--rule)" stroke-width="1.5"/>
<!-- sea and ground section -->
<path class="sea" d="M1490 345 H1772 V710 H1490 Z"/>
<path class="ground" d="M148 430 C340 415 470 440 620 422 C790 402 930 423 1090 411 C1260 398 1380 415 1510 394 L1510 655 C1300 646 1130 681 920 660 C690 638 470 680 148 650 Z"/>
<path class="deep" d="M148 650 C470 680 690 638 920 660 C1130 681 1300 646 1510 655 L1510 786 H148 Z"/>
<!-- ground surface and coastline -->
<path d="M148 430 C340 415 470 440 620 422 C790 402 930 423 1090 411 C1260 398 1380 415 1510 394 L1510 430 C1380 449 1260 432 1090 447 C930 459 790 438 620 458 C470 476 340 451 148 466 Z" fill="var(--earth-top)"/>
<path d="M148 430 C340 415 470 440 620 422 C790 402 930 423 1090 411 C1260 398 1380 415 1510 394" fill="none" stroke="var(--ink)" stroke-width="4"/>
<line x1="1510" y1="394" x2="1510" y2="710" stroke="var(--ink)" stroke-width="4"/>
<path d="M1510 394 H1772 V430 H1510 Z" fill="var(--sea)"/>
<text class="label blue" x="1582" y="422" data-type="seaLabel">海</text>
<!-- layer texture lines -->
<path class="contour" d="M180 526 C420 512 610 542 820 525 S1220 530 1460 512"/><path class="contour" d="M180 558 C420 544 610 574 820 557 S1220 562 1460 544"/><path class="contour" d="M180 706 C420 692 610 722 820 705 S1220 710 1460 692"/>
<!-- aquifer/water table -->
<path d="M170 536 C420 520 605 555 835 542 C1060 528 1250 546 1420 550 C1488 552 1532 570 1570 600 C1490 606 1430 600 1360 584 C1160 570 1040 562 835 574 C600 586 420 555 170 574 Z" class="fresh" opacity=".95"/>
<path class="waterline" d="M170 536 C420 520 605 555 835 542 C1060 528 1250 546 1420 550"/>
<text class="label blue" x="190" y="513" data-type="aquiferLabel">淡水を含む帯水層</text>
<!-- salt wedge -->
<path class="salt" d="M1510 552 C1430 560 1370 576 1290 600 C1190 630 1100 651 990 660 C1120 680 1250 688 1370 660 C1450 642 1490 622 1510 604 Z"/>
<text class="label rust" x="1274" y="635" data-type="saltLabel">塩水くさび</text>
<!-- groundwater flow arrows -->
<path class="flow" d="M470 548 C580 542 680 548 775 552"/><path d="M775 552 l-16 -10 M775 552 l-16 10" stroke="var(--series-1)" stroke-width="4"/>
<path class="flow" d="M910 548 C1010 548 1110 550 1200 559"/><path d="M1200 559 l-17 -9 M1200 559 l-17 10" stroke="var(--series-1)" stroke-width="4"/>
<text class="tag blue" x="690" y="524">地下水の流れ</text>
<!-- safe well inland -->
<line class="well" x1="780" y1="414" x2="780" y2="558"/><line class="wellpipe" x1="780" y1="500" x2="780" y2="551"/><rect x="756" y="396" width="48" height="20" rx="5" fill="var(--series-1)"/>
<circle cx="780" cy="557" r="9" fill="var(--series-1)"/>
<path class="leader" d="M780 390 L720 350 L565 350"/><rect x="178" y="282" width="390" height="92" rx="12" fill="var(--surface)" stroke="var(--series-1)" stroke-width="2"/>
<text class="label blue" x="202" y="318" data-type="safeTitle">候補 A · 内陸側</text><text class="tag muted" x="202" y="350" data-type="safeText">淡水帯で取水する位置</text>
<!-- risky well near coast -->
<line class="well" x1="1374" y1="410" x2="1374" y2="650"/><line class="wellpipe" x1="1374" y1="540" x2="1374" y2="644"/><rect x="1350" y="392" width="48" height="20" rx="5" fill="var(--series-2)"/>
<circle cx="1374" cy="650" r="9" fill="var(--series-2)"/>
<path class="leader" d="M1374 386 L1436 350 L1450 350"/><rect x="1448" y="282" width="310" height="92" rx="12" fill="var(--surface)" stroke="var(--series-2)" stroke-width="2"/>
<text class="label rust" x="1472" y="318" data-type="riskTitle">候補 B · 海岸側</text><text class="tag muted" x="1472" y="350" data-type="riskText">くさびが近く、塩水化リスク</text>
<!-- depth markers -->
<line class="guide" x1="162" y1="466" x2="162" y2="650"/><text class="small muted" x="178" y="622">地層断面</text>
<!-- legend -->
<rect x="178" y="750" width="24" height="18" rx="4" fill="var(--fresh)"/><text class="legend" x="214" y="767">淡水域</text>
<rect x="340" y="750" width="24" height="18" rx="4" fill="var(--salt)"/><text class="legend" x="376" y="767">塩水域</text>
<line x1="530" y1="759" x2="570" y2="759" class="waterline"/><text class="legend" x="584" y="767">地下水面</text>
<rect x="739" y="750" width="24" height="18" rx="4" fill="var(--earth-deep)"/><text class="legend" x="775" y="767">難透水層</text>
<text class="small muted" x="1390" y="776">模式図 · 距離・深度は縮尺外</text>
<!-- conclusion -->
<line x1="120" y1="884" x2="1800" y2="884" stroke="var(--rule)" stroke-width="2"/>
<text class="takeaway" x="120" y="946" data-type="takeaway">取水位置は、海岸線だけでなく塩水くさびの先端から決める。</text>
<text class="note muted" x="120" y="992" data-type="note">説明用の模式図です。実際の井戸位置は調査井・地下水位・地質調査で判断します。</text>
</g></svg>
/designs/coastal-aquifer-well-siting-section/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 103 (8b75caa432aa3cae)
*
* 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+41-47, U+49, U+4c, U+4e-4f, U+51-55, U+59, U+b7, U+2014, U+3001-3002, U+304b-304c, U+304f-3052, U+3055-305a, U+305f-3060, U+3066-306a, U+306e-3070, U+3072-3073, U+307e, U+3080-3081, U+3089, U+308b-308c, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30ea, U+30fb, U+4e0b, U+4e95, U+4f4d, U+5019, U+5074, U+5148, U+5185, U+5224, U+5316, U+53d6, U+53f3, U+542b, U+56f3, U+5730, U+57df, U+5869, U+5916, U+5b9f, U+5c3a, U+5c64, U+5cb8, U+5de6, U+5e2f, U+5ea6, U+5f0f, U+6238, U+65ad, U+660e, U+67fb, U+6a21, U+6a2a, U+6c34, U+6c7a, U+6d41, U+6d77, U+6de1, U+6df1, U+7528, U+7aef, U+7dda, U+7e2e, U+7f6e, U+88dc, U+898b, U+8aac, U+8abf, U+8cea, U+8ddd, U+8fd1, U+900f, U+907f, U+9678, U+969b, U+96e2-96e3, U+9762;
}
@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+41-47, U+49, U+4c, U+4e-4f, U+51-55, U+59, U+b7, U+2014, U+3001-3002, U+304b-304c, U+304f-3052, U+3055-305a, U+305f-3060, U+3066-306a, U+306e-3070, U+3072-3073, U+307e, U+3080-3081, U+3089, U+308b-308c, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30ea, U+30fb, U+4e0b, U+4e95, U+4f4d, U+5019, U+5074, U+5148, U+5185, U+5224, U+5316, U+53d6, U+53f3, U+542b, U+56f3, U+5730, U+57df, U+5869, U+5916, U+5b9f, U+5c3a, U+5c64, U+5cb8, U+5de6, U+5e2f, U+5ea6, U+5f0f, U+6238, U+65ad, U+660e, U+67fb, U+6a21, U+6a2a, U+6c34, U+6c7a, U+6d41, U+6d77, U+6de1, U+6df1, U+7528, U+7aef, U+7dda, U+7e2e, U+7f6e, U+88dc, U+898b, U+8aac, U+8abf, U+8cea, U+8ddd, U+8fd1, U+900f, U+907f, U+9678, U+969b, U+96e2-96e3, U+9762;
}
@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+41-47, U+49, U+4c, U+4e-4f, U+51-55, U+59, U+b7, U+2014, U+3001-3002, U+304b-304c, U+304f-3052, U+3055-305a, U+305f-3060, U+3066-306a, U+306e-3070, U+3072-3073, U+307e, U+3080-3081, U+3089, U+308b-308c, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30ea, U+30fb, U+4e0b, U+4e95, U+4f4d, U+5019, U+5074, U+5148, U+5185, U+5224, U+5316, U+53d6, U+53f3, U+542b, U+56f3, U+5730, U+57df, U+5869, U+5916, U+5b9f, U+5c3a, U+5c64, U+5cb8, U+5de6, U+5e2f, U+5ea6, U+5f0f, U+6238, U+65ad, U+660e, U+67fb, U+6a21, U+6a2a, U+6c34, U+6c7a, U+6d41, U+6d77, U+6de1, U+6df1, U+7528, U+7aef, U+7dda, U+7e2e, U+7f6e, U+88dc, U+898b, U+8aac, U+8abf, U+8cea, U+8ddd, U+8fd1, U+900f, U+907f, U+9678, U+969b, U+96e2-96e3, U+9762;
}
海岸帯水層では淡水と塩水の境界がくさび状に入り込むことがある。候補井戸を断面上に置くと、 単に「海岸から遠いか」ではなく、取水深度と塩水域の位置を合わせて検討する必要があると示せる。 この図は地質・水位の説明用模式図で、縮尺や実際の井戸位置を表さない。