挽き目を一段細かく — 36gを28秒で抽出

1 列目

2 列目

120 72

1920 × 1080 作品として見る

この 1 枚について

豆量と目標量を固定し、挽き目を一段変えた前後のエスプレッソ抽出カーブを比較する

使いどころ

比較・選定

出典

保存: 2026.09.25
ライセンス: Original

以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白上 72 右 120 下 76 左 120 - 2 カラム（等分）、間隔 40 ## 文字（版面 1920px に対する px） kicker 20px / 700 / 字間 0.14em title 48px / 700 / 字間 -0.02em deck 21px / 400 recipeLabel 20px / 400 recipeValue 25px / 700 shot 20px / 700 / 字間 0.1em shotTitle 29px / 700 result 20px / 700 targetLabel 20px / 500 metricLabel 20px / 400 metricValue 24px / 700 takeaway 25px / 700 note 17px / 400 ## 配色地 #F6F4EF / 面 #FFFFFF / 文字 #252A2C / 補助 #697476 / 強調 #A34F34 / 罫 #D8D5CD / #B8B1A3 / #A34F34 / #406C67 ## 外すと崩れる点 - 比較する二枚で縦横のスケールを揃え、目標時間帯も同じ背景帯で示す - 変える条件は挽き目だけ。豆量と抽出量が同じなので、調整前後の差を追いやすい - 曲線は説明用の架空サンプルと明記し、味や機材によって適正値が異なることを添える内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/espresso-dial-in-extraction-curves/pattern.html

format: slide-16x9 density: medium layout: kind: 2-column canvas: w: 1920 h: 1080 margin: top: 72 right: 120 bottom: 76 left: 120 columns: count: 2 gap: 40 type: kicker: size: 20 weight: 700 tracking: 0.14em title: size: 48 weight: 700 tracking: -0.02em deck: size: 21 weight: 400 recipeLabel: size: 20 weight: 400 recipeValue: size: 25 weight: 700 shot: size: 20 weight: 700 tracking: 0.1em shotTitle: size: 29 weight: 700 result: size: 20 weight: 700 targetLabel: size: 20 weight: 500 metricLabel: size: 20 weight: 400 metricValue: size: 24 weight: 700 takeaway: size: 25 weight: 700 note: size: 17 weight: 400 colors: ground: "#F6F4EF" surface: "#FFFFFF" ink: "#252A2C" muted: "#697476" accent: "#A34F34" rule: "#D8D5CD" series: - "#B8B1A3" - "#A34F34" - "#406C67" rules: - 比較する二枚で縦横のスケールを揃え、目標時間帯も同じ背景帯で示す - 変える条件は挽き目だけ。豆量と抽出量が同じなので、調整前後の差を追いやすい - 曲線は説明用の架空サンプルと明記し、味や機材によって適正値が異なることを添える

{ "format": "slide-16x9", "density": "medium", "layout": { "kind": "2-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 72, "right": 120, "bottom": 76, "left": 120 }, "columns": { "count": 2, "gap": 40 } }, "type": { "kicker": { "size": 20, "weight": 700, "tracking": "0.14em" }, "title": { "size": 48, "weight": 700, "tracking": "-0.02em" }, "deck": { "size": 21, "weight": 400 }, "recipeLabel": { "size": 20, "weight": 400 }, "recipeValue": { "size": 25, "weight": 700 }, "shot": { "size": 20, "weight": 700, "tracking": "0.1em" }, "shotTitle": { "size": 29, "weight": 700 }, "result": { "size": 20, "weight": 700 }, "targetLabel": { "size": 20, "weight": 500 }, "metricLabel": { "size": 20, "weight": 400 }, "metricValue": { "size": 24, "weight": 700 }, "takeaway": { "size": 25, "weight": 700 }, "note": { "size": 17, "weight": 400 } }, "colors": { "ground": "#F6F4EF", "surface": "#FFFFFF", "ink": "#252A2C", "muted": "#697476", "accent": "#A34F34", "rule": "#D8D5CD", "series": [ "#B8B1A3", "#A34F34", "#406C67" ] }, "rules": [ "比較する二枚で縦横のスケールを揃え、目標時間帯も同じ背景帯で示す", "変える条件は挽き目だけ。豆量と抽出量が同じなので、調整前後の差を追いやすい", "曲線は説明用の架空サンプルと明記し、味や機材によって適正値が異なることを添える" ] }

<!doctype html> <meta charset="utf-8"> <title>挽き目を一段細かく — 36gを28秒で抽出</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;500;700"> <link rel="stylesheet" href="./font.css"> <style> :root{--ground:#F6F4EF;--surface:#FFFFFF;--ink:#252A2C;--muted:#697476;--accent:#A34F34;--rule:#D8D5CD;--series-1:#B8B1A3;--series-2:#A34F34;--series-3:#406C67;--target-fill:#EAF1EF;--before-fill:#F2F0EB} *{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)}.green{fill:var(--series-3)} .kicker{font-size:20px;font-weight:700;letter-spacing:2.8px}.title{font-size:48px;font-weight:700;letter-spacing:-1px}.deck{font-size:21px}.recipe-label{font-size:20px}.recipe-value{font-size:25px;font-weight:700}.shot{font-size:20px;font-weight:700;letter-spacing:2px}.shot-title{font-size:29px;font-weight:700}.target-label{font-size:20px;font-weight:500}.badge{font-size:20px;font-weight:700}.tick{font-size:20px}.axis-label{font-size:20px;font-weight:500}.end{font-size:20px;font-weight:700}.metric-label{font-size:20px}.metric-value{font-size:24px;font-weight:700}.takeaway{font-size:25px;font-weight:700}.note{font-size:17px} .panel{fill:var(--surface);stroke:var(--rule);stroke-width:1.5}.axis{stroke:var(--rule);stroke-width:2}.grid{stroke:var(--rule);stroke-width:1.5}.target{fill:var(--target-fill)}.targetline{stroke:var(--series-3);stroke-width:2;stroke-dasharray:8 8}.curveA{fill:none;stroke:var(--series-1);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.curveB{fill:none;stroke:var(--series-3);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.guide{stroke:var(--rule);stroke-width:2;stroke-dasharray:5 7} </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="108" data-type="kicker">ESPRESSO / DIAL-IN NOTE 04</text> <text class="title" x="120" y="166" data-type="title">挽き目を一段細かく。36gを28秒で止める</text> <text class="deck muted" x="120" y="207" data-type="deck">同じ豆量・同じ目標量で、抽出の流れだけを比べる</text> <rect x="1450" y="72" width="350" height="112" rx="12" fill="var(--surface)" stroke="var(--rule)" stroke-width="1.5"/> <text class="recipe-label muted" x="1476" y="112" data-type="recipeLabel">固定レシピ</text><text class="recipe-value" x="1476" y="153" data-type="recipeValue">18g in → 36g out</text> <line x1="120" y1="230" x2="1800" y2="230" stroke="var(--rule)" stroke-width="2"/>  <g data-col="1"> <rect class="panel" x="120" y="258" width="820" height="608" rx="16"/><path d="M136 260 H924" stroke="var(--series-1)" stroke-width="5"/> <text class="shot muted" x="156" y="302" data-type="shot">SHOT A · 現状</text><text class="shot-title" x="156" y="342" data-type="shotTitle">流れが速すぎる</text><rect x="690" y="282" width="218" height="48" rx="8" fill="var(--before-fill)"/><text class="badge muted" x="710" y="314" data-type="result">22秒 · 粗い</text>  <text class="target-label green" x="714" y="405">目標帯 · 25–30秒</text><rect class="target" x="753" y="430" width="107" height="270" rx="4" opacity=".8"/><line class="targetline" x1="753" y1="430" x2="753" y2="700"/><line class="targetline" x1="860" y1="430" x2="860" y2="700"/> <line class="grid" x1="220" y1="700" x2="860" y2="700"/><line class="grid" x1="220" y1="632.5" x2="860" y2="632.5"/><line class="grid" x1="220" y1="565" x2="860" y2="565"/><line class="grid" x1="220" y1="497.5" x2="860" y2="497.5"/><line class="grid" x1="220" y1="430" x2="860" y2="430"/> <line class="axis" x1="220" y1="700" x2="860" y2="700"/><line class="axis" x1="220" y1="700" x2="220" y2="430"/> <text class="tick muted" x="184" y="707">0</text><text class="tick muted" x="175" y="640">10</text><text class="tick muted" x="175" y="572">20</text><text class="tick muted" x="175" y="505">30</text><text class="tick muted" x="175" y="437">40</text> <text class="tick muted" x="216" y="732">0</text><text class="tick muted" x="319" y="732">5</text><text class="tick muted" x="426" y="732">10</text><text class="tick muted" x="533" y="732">15</text><text class="tick muted" x="640" y="732">20</text><text class="tick muted" x="746" y="732">25</text><text class="tick muted" x="852" y="732">30</text> <text class="axis-label muted" x="675" y="762">経過時間（秒）</text><text class="axis-label muted" transform="translate(154 622) rotate(-90)">抽出量（g）</text> <polyline class="curveA" points="220,700 262,686 305,659 348,632 391,592 433,565 476,531 519,504 562,484 604,470 647,464 689,457"/> <line class="guide" x1="689" y1="457" x2="689" y2="700"/><circle cx="689" cy="457" r="8" fill="var(--series-1)"/><text class="end" x="702" y="484">36g</text><text class="end" x="661" y="681">22秒</text> <line x1="156" y1="786" x2="904" y2="786" stroke="var(--rule)" stroke-width="1.5"/> <text class="metric-label muted" x="156" y="821" data-type="metricLabel">抽出時間</text><text class="metric-value" x="156" y="851" data-type="metricValue">22秒</text> <text class="metric-label muted" x="410" y="821">流速</text><text class="metric-value" x="410" y="851">速い</text> <text class="metric-label muted" x="658" y="821">調整</text><text class="metric-value" x="658" y="851">一段細かく</text> </g>  <g data-col="2"> <rect class="panel" x="980" y="258" width="820" height="608" rx="16"/><path d="M996 260 H1784" stroke="var(--series-3)" stroke-width="5"/> <text class="shot muted" x="1016" y="302" data-type="shot">SHOT B · 調整後</text><text class="shot-title" x="1016" y="342" data-type="shotTitle">目標帯に収まる</text><rect x="1550" y="282" width="218" height="48" rx="8" fill="var(--target-fill)"/><text class="badge green" x="1570" y="314" data-type="result">28秒 · 一段細かく</text> <text class="target-label green" x="1574" y="405">目標帯 · 25–30秒</text><rect class="target" x="1613" y="430" width="107" height="270" rx="4" opacity=".8"/><line class="targetline" x1="1613" y1="430" x2="1613" y2="700"/><line class="targetline" x1="1720" y1="430" x2="1720" y2="700"/> <line class="grid" x1="1080" y1="700" x2="1720" y2="700"/><line class="grid" x1="1080" y1="632.5" x2="1720" y2="632.5"/><line class="grid" x1="1080" y1="565" x2="1720" y2="565"/><line class="grid" x1="1080" y1="497.5" x2="1720" y2="497.5"/><line class="grid" x1="1080" y1="430" x2="1720" y2="430"/> <line class="axis" x1="1080" y1="700" x2="1720" y2="700"/><line class="axis" x1="1080" y1="700" x2="1080" y2="430"/> <text class="tick muted" x="1044" y="707">0</text><text class="tick muted" x="1035" y="640">10</text><text class="tick muted" x="1035" y="572">20</text><text class="tick muted" x="1035" y="505">30</text><text class="tick muted" x="1035" y="437">40</text> <text class="tick muted" x="1076" y="732">0</text><text class="tick muted" x="1179" y="732">5</text><text class="tick muted" x="1286" y="732">10</text><text class="tick muted" x="1393" y="732">15</text><text class="tick muted" x="1500" y="732">20</text><text class="tick muted" x="1606" y="732">25</text><text class="tick muted" x="1712" y="732">30</text> <text class="axis-label muted" x="1535" y="762">経過時間（秒）</text><text class="axis-label muted" transform="translate(1014 622) rotate(-90)">抽出量（g）</text> <polyline class="curveB" points="1080,700 1123,693 1165,679 1208,659 1251,632 1293,606 1336,565 1379,531 1421,504 1464,484 1507,470 1549,464 1592,461 1635,459 1678,457"/> <line class="guide" x1="1678" y1="457" x2="1678" y2="700"/><circle cx="1678" cy="457" r="8" fill="var(--series-3)"/><text class="end" x="1620" y="484">36g</text><text class="end" x="1641" y="681">28秒</text> <line x1="1016" y1="786" x2="1764" y2="786" stroke="var(--rule)" stroke-width="1.5"/> <text class="metric-label muted" x="1016" y="821">抽出時間</text><text class="metric-value" x="1016" y="851">28秒</text> <text class="metric-label muted" x="1270" y="821">流速</text><text class="metric-value" x="1270" y="851">安定</text> <text class="metric-label muted" x="1518" y="821">次の確認</text><text class="metric-value" x="1518" y="851">味で微調整</text> </g> <line x1="120" y1="906" x2="1800" y2="906" stroke="var(--rule)" stroke-width="2"/> <text class="takeaway" x="120" y="960" data-type="takeaway">変えたのは挽き目だけ。次は味を確かめる。</text> <text class="note muted" x="120" y="1002" data-type="note">抽出カーブは説明用の架空サンプル。豆・機材・環境で最適値は変わります。</text> </g></svg>

/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit. * font Zen Kaku Gothic New 400;500;700 * chars 121 (aff5379509ead515) * * 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+2d, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, 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+2d, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, 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+2d, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, U+ff08-ff09; }

挽き目を一段細かく — 36gを28秒で抽出

持ち帰る

全部入り

依頼文

仕様

ファイル

pattern.html

font.css

ノート