Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

製品の機能構成 — 分析を40%以上含む案が3つ

一軸
製品の機能構成 — 分析を40%以上含む案が3つ
140 100

1920 × 1080 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

ternary-plot-product-capability-mix-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.2 KB 
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 100 右 140 下 100 左 140

## 文字（版面 1920px に対する px）
title  46px / 700 / 字間 0.01em
subtitle  22px / 500
axisTitle  22px / 700
tick  20px / 500
vertex  22px / 700
label  20px / 500
legend  20px / 500
takeaway  28px / 500
note  20px / 400

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 三つの構成比を同じ単位・定義にそろえ、各案の合計を100%にする
- 各頂点がその成分100%を示し、対辺に平行な目盛り線でその成分の比率を読む
- 三成分の混合比を比較する図であり、独立な三変数の相関を示す散布図ではない
- 架空の七案。合計100%の前提が成り立たない項目は別の尺度として扱う

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/ternary-plot-product-capability-mix/pattern.html

仕様

1.4 KB

/ai/designs/ternary-plot-product-capability-mix.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
  vertex:
    size: 22
    weight: 700
  label:
    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:
  - 三つの構成比を同じ単位・定義にそろえ、各案の合計を100%にする
  - 各頂点がその成分100%を示し、対辺に平行な目盛り線でその成分の比率を読む
  - 三成分の混合比を比較する図であり、独立な三変数の相関を示す散布図ではない
  - 架空の七案。合計100%の前提が成り立たない項目は別の尺度として扱う

ファイル

pattern.html

4.7 KB

/designs/ternary-plot-product-capability-mix/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>製品の機能構成 — 分析を40%以上含む案が3つ</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="3機能の比率が合計100%となる7製品案を三角座標に配置。基盤・支援・分析の3構成比が各点の位置を決め、分析比率40%以上の案は3つ。">
<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}.label{font-size:20px;font-weight:500}.vertex{font-size:22px;font-weight:700}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.triangle{fill:var(--surface);stroke:var(--ink);stroke-width:3}.grid{stroke:var(--rule);stroke-width:1.5}.point{fill:var(--accent);stroke:var(--ground);stroke-width:3}.emphasis{fill:var(--plot-color-1);stroke:var(--ground);stroke-width:3}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">製品の機能構成 — 分析を40%以上含む案が3つ</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">機能比率は各案で合計100% / 架空の7製品案 / 1点=1案</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">3つの機能が入れ替わると、各案は三角形のどこへ動くか</text>
<path class="triangle" d="M960 370 L460 740 L1460 740 Z"/>
<!-- Ternary grid: each set of parallel lines holds one component share constant. -->
<g class="grid" fill="none">
<path d="M560 666 L1360 666 M660 592 L1260 592 M760 518 L1160 518 M860 444 L1060 444 M860 444 L1260 740 M760 518 L1060 740 M660 592 L860 740 M560 666 L660 740 M1060 444 L660 740 M1160 518 L860 740 M1260 592 L1060 740 M1360 666 L1260 740"/>
</g>
<g class="muted tick" text-anchor="middle">
<text data-type="tick" x="530" y="666">20%</text><text x="630" y="592">40%</text><text x="730" y="518">60%</text><text x="830" y="444">80%</text>
<text x="660" y="774">20%</text><text x="860" y="774">40%</text><text x="1060" y="774">60%</text><text x="1260" y="774">80%</text>
</g>
<g class="point"><circle cx="910" cy="481" r="11"/><circle cx="985" cy="537" r="11"/><circle cx="785" cy="610" r="11"/><circle cx="710" cy="666" r="11"/></g>
<g class="emphasis"><circle cx="1110" cy="629" r="11"/><circle cx="935" cy="685" r="11"/><circle cx="1135" cy="574" r="11"/></g>
<g class="ink label">
<text data-type="label" x="928" y="474">Launch</text><text x="1004" y="529">Standard</text><text x="804" y="604">Service</text><text x="1129" y="623">Platform</text>
<text x="952" y="679">Growth</text><text x="1154" y="568">Pro</text><text x="674" y="660" text-anchor="end">Flex</text>
</g>
<g class="ink vertex" text-anchor="middle">
<text data-type="vertex" x="960" y="350">基盤 100%</text><text x="415" y="776">支援 100%</text><text x="1505" y="776">分析 100%</text>
</g>
<text class="muted label" x="960" y="817" text-anchor="middle">点の位置を決める3構成比の合計は常に100%</text>
<circle cx="700" cy="870" r="10" class="point"/><text class="ink label" data-type="legend" x="722" y="877">分析比率 40% 未満</text>
<circle cx="1110" cy="870" r="10" class="emphasis"/><text class="ink label" x="1132" y="877">分析比率 40% 以上</text>
<text class="ink takeaway" data-type="takeaway" x="960" y="940" text-anchor="middle">Platform・Growth・Pro は分析機能の比率が40%以上</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">比率は架空の相対構成。数値合計が100%にならない項目を混ぜず、定義を揃えて比較する。</text>
</svg></div></div>

font.css

2.9 KB

/designs/ternary-plot-product-capability-mix/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   110 (d1cf57ea675a3d6b)
 *
 * 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+2f-34, U+36-38, U+3d, U+46-47, U+4c, U+50, U+53, U+61, U+63-66, U+68-69, U+6c-6f, U+72, U+74-78, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305c, U+3064-306b, U+306e-3070, U+3078-3079, U+3080-3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30fb, U+4e09-4e0a, U+4ee5, U+4f4d, U+5024, U+5165, U+5206, U+52d5, U+5404, U+5408, U+542b, U+54c1, U+57fa, U+5b9a, U+5bfe, U+5e38, U+5f62, U+6210, U+63c3, U+63f4, U+652f, U+6570, U+66ff, U+672a, U+6790, U+67b6, U+6848, U+69cb, U+6a5f, U+6bd4, U+6c7a, U+6df7, U+6e80, U+70b9, U+7387, U+76e4, U+76ee, U+76f8, U+7a7a, U+7f6e, U+7fa9, U+80fd, U+88fd, U+89d2, U+8a08, U+8f03, U+9805;
}
@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+2f-34, U+36-38, U+3d, U+46-47, U+4c, U+50, U+53, U+61, U+63-66, U+68-69, U+6c-6f, U+72, U+74-78, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305c, U+3064-306b, U+306e-3070, U+3078-3079, U+3080-3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30fb, U+4e09-4e0a, U+4ee5, U+4f4d, U+5024, U+5165, U+5206, U+52d5, U+5404, U+5408, U+542b, U+54c1, U+57fa, U+5b9a, U+5bfe, U+5e38, U+5f62, U+6210, U+63c3, U+63f4, U+652f, U+6570, U+66ff, U+672a, U+6790, U+67b6, U+6848, U+69cb, U+6a5f, U+6bd4, U+6c7a, U+6df7, U+6e80, U+70b9, U+7387, U+76e4, U+76ee, U+76f8, U+7a7a, U+7f6e, U+7fa9, U+80fd, U+88fd, U+89d2, U+8a08, U+8f03, U+9805;
}
@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+2f-34, U+36-38, U+3d, U+46-47, U+4c, U+50, U+53, U+61, U+63-66, U+68-69, U+6c-6f, U+72, U+74-78, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305c, U+3064-306b, U+306e-3070, U+3078-3079, U+3080-3081, U+3089, U+308b-308c, U+308f, U+3092, U+3099, U+30fb, U+4e09-4e0a, U+4ee5, U+4f4d, U+5024, U+5165, U+5206, U+52d5, U+5404, U+5408, U+542b, U+54c1, U+57fa, U+5b9a, U+5bfe, U+5e38, U+5f62, U+6210, U+63c3, U+63f4, U+652f, U+6570, U+66ff, U+672a, U+6790, U+67b6, U+6848, U+69cb, U+6a5f, U+6bd4, U+6c7a, U+6df7, U+6e80, U+70b9, U+7387, U+76e4, U+76ee, U+76f8, U+7a7a, U+7f6e, U+7fa9, U+80fd, U+88fd, U+89d2, U+8a08, U+8f03, U+9805;
}

ノート

視覚的な問い

基盤・支援・分析の3機能を合計100%で配分したとき、どの製品案が分析機能を厚く持つか。

構造

正三角形の3頂点がそれぞれ1機能の100%を表し、点は基盤・支援・分析の構成比で重心座標上に置かれる。 辺と平行な目盛りから各成分の比率を読み、分析が40%以上の案を橙で強調する。Platformは50%、Growthは40%、 Proは45%を分析機能に配分している。

棒・面積で構成比の推移を比較する図と違い、この図は合計100%の3成分が作る混合比を1点に符号化する。 3成分の単位や分類が重複せず、合計が一定という前提が必要。例の製品案と比率は架空。