{
  "id": "team-founders-portrait-row",
  "schemaVersion": 2,
  "title": {
    "ja": "チーム — 同じ大きさの 4 つの顔写真の枠と、この事業をやれる理由 1 行",
    "en": "Team — Four Equal Portrait Frames, Each With One Line on Why They Can Do This"
  },
  "summary": {
    "ja": "中核の 4 人を同じ大きさの正方形の枠で横に並べ、役割・名前・この事業に効く経歴 1 行を添える。写真は図形の差し替え枠",
    "en": "The core four in equal square frames, each with role, name and one line of background that matters for this business. Photos are shape stand-ins"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "people"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "grid",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 112,
      "right": 160,
      "bottom": 96,
      "left": 160
    },
    "columns": {
      "count": 4,
      "gap": 40
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.2em"
    },
    "title": {
      "size": 56,
      "weight": 900,
      "leading": 1.3
    },
    "role": {
      "size": 20,
      "weight": 700,
      "tracking": "0.12em"
    },
    "name": {
      "size": 34,
      "weight": 900,
      "tracking": "0.04em"
    },
    "why": {
      "size": 22,
      "weight": 400,
      "leading": 1.7
    },
    "footLabel": {
      "size": 20,
      "weight": 700
    },
    "footText": {
      "size": 22,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#101318",
    "surface": "#1A1F27",
    "ink": "#F2F4F7",
    "muted": "#8B93A1",
    "accent": "#F5B83D",
    "rule": "#2A303A",
    "series": []
  },
  "rules": [
    {
      "ja": "4 人とも同じ大きさにする。代表だけ大きくすると、チームではなく 1 人の会社に見える",
      "en": "All four the same size — enlarge the founder and it reads as a one-person company"
    },
    {
      "ja": "経歴は 1 行、この事業に効く経験だけ。学歴や前職の社名を並べない",
      "en": "One line of background, only what matters for this business — no list of schools or employers"
    },
    {
      "ja": "経歴の中で数字か固有の領域を 1 句だけ太字にする",
      "en": "Bold one phrase in each line — a number or a specific domain"
    },
    {
      "ja": "写真が無いうちは、頭と肩の位置だけを面で示す。人物の絵は描かない",
      "en": "Until photos exist, flat shapes mark only head and shoulders — never draw a person"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BcL5uTa-.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "speaker-profile-portrait",
      "org-tree-three-tiers",
      "team-structure-joint-pmo"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "grid",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 112,
          "right": 160,
          "bottom": 96,
          "left": 160
        },
        "columns": {
          "count": 4,
          "gap": 40
        }
      },
      "type": {
        "kicker": {
          "size": 22,
          "weight": 700,
          "tracking": "0.2em"
        },
        "title": {
          "size": 56,
          "weight": 900,
          "leading": 1.3
        },
        "role": {
          "size": 20,
          "weight": 700,
          "tracking": "0.12em"
        },
        "name": {
          "size": 34,
          "weight": 900,
          "tracking": "0.04em"
        },
        "why": {
          "size": 22,
          "weight": 400,
          "leading": 1.7
        },
        "footLabel": {
          "size": 20,
          "weight": 700
        },
        "footText": {
          "size": 22,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#101318",
        "surface": "#1A1F27",
        "ink": "#F2F4F7",
        "muted": "#8B93A1",
        "accent": "#F5B83D",
        "rule": "#2A303A"
      },
      "rules": [
        "All four the same size — enlarge the founder and it reads as a one-person company",
        "One line of background, only what matters for this business — no list of schools or employers",
        "Bold one phrase in each line — a number or a specific domain",
        "Until photos exist, flat shapes mark only head and shoulders — never draw a person"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 112 右 160 下 96 左 160\n- 4 カラム（等分）、間隔 40\n\n## 文字（版面 1920px に対する px）\nkicker  22px / 700 / 字間 0.2em\ntitle  56px / 900 / 行送り 1.3\nrole  20px / 700 / 字間 0.12em\nname  34px / 900 / 字間 0.04em\nwhy  22px / 400 / 行送り 1.7\nfootLabel  20px / 700\nfootText  22px / 400\n\n## 配色\n地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A\n\n## 外すと崩れる点\n- 4 人とも同じ大きさにする。代表だけ大きくすると、チームではなく 1 人の会社に見える\n- 経歴は 1 行、この事業に効く経験だけ。学歴や前職の社名を並べない\n- 経歴の中で数字か固有の領域を 1 句だけ太字にする\n- 写真が無いうちは、頭と肩の位置だけを面で示す。人物の絵は描かない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/team-founders-portrait-row/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 112 right 160 bottom 96 left 160\n- 4 equal columns, gap 40\n\n## Type (px against a 1920px canvas)\nkicker  22px / 700 / tracking 0.2em\ntitle  56px / 900 / leading 1.3\nrole  20px / 700 / tracking 0.12em\nname  34px / 900 / tracking 0.04em\nwhy  22px / 400 / leading 1.7\nfootLabel  20px / 700\nfootText  22px / 400\n\n## Colour\nGround #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A\n\n## Constraints — dropping these breaks it\n- All four the same size — enlarge the founder and it reads as a one-person company\n- One line of background, only what matters for this business — no list of schools or employers\n- Bold one phrase in each line — a number or a specific domain\n- Until photos exist, flat shapes mark only head and shoulders — never draw a person\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/team-founders-portrait-row/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>チーム — 4 人の顔写真の枠と、この事業をやれる理由 1 行</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;700;900\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */\n  :root {\n    --ground: #101318;\n    --surface: #1A1F27;\n    --ink: #F2F4F7;\n    --muted: #8B93A1;\n    --accent: #F5B83D;\n    --rule: #2A303A;\n    /* 写真の差し替え枠。人物は描かず、頭と肩の位置だけを面で示す */\n    --frame-figure: color-mix(in srgb, var(--ink) 18%, var(--surface));\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 112px 160px 96px;            /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 48px; }\n\n  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }\n  .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; }\n\n  .grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; align-content: center; }\n  /* 1:1 で 4 人とも同じ大きさ。代表だけ大きくすると、チームではなく 1 人の会社に見える */\n  .photo { aspect-ratio: 1 / 1; background: var(--surface); position: relative; overflow: hidden; }\n  .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n  .role { font-size: 20px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-top: 28px; }\n  .name { font-size: 34px; font-weight: 900; margin-top: 8px; letter-spacing: .04em; }\n  .why { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 14px; }\n  .why b { font-weight: 700; color: var(--ink); }\n\n  .foot { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 24px; }\n  .footLabel { font-size: 20px; font-weight: 700; color: var(--muted); white-space: nowrap; }\n  .footText { font-size: 22px; font-weight: 400; color: var(--ink); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">チーム</p>\n      <h1 class=\"title\" data-type=\"title\">経理の現場と、銀行の内側を知る 4 人</h1>\n    </div>\n\n    <div class=\"grid\">\n      <div data-col=\"1\">\n        <div class=\"photo\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><circle cx=\"50\" cy=\"40\" r=\"17\" fill=\"var(--frame-figure)\"/><path d=\"M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z\" fill=\"var(--frame-figure)\"/></svg></div>\n        <p class=\"role\" data-type=\"role\">代表</p>\n        <p class=\"name\" data-type=\"name\">湊 慎一</p>\n        <p class=\"why\" data-type=\"why\"><b>120 社</b>の月次締めを担当</p>\n      </div>\n      <div data-col=\"2\">\n        <div class=\"photo\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><circle cx=\"50\" cy=\"40\" r=\"17\" fill=\"var(--frame-figure)\"/><path d=\"M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z\" fill=\"var(--frame-figure)\"/></svg></div>\n        <p class=\"role\">開発責任者</p>\n        <p class=\"name\">高梨 遥</p>\n        <p class=\"why\">地方銀行の<b>法人向け明細連携</b>を設計</p>\n      </div>\n      <div data-col=\"3\">\n        <div class=\"photo\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><circle cx=\"50\" cy=\"40\" r=\"17\" fill=\"var(--frame-figure)\"/><path d=\"M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z\" fill=\"var(--frame-figure)\"/></svg></div>\n        <p class=\"role\">事業責任者</p>\n        <p class=\"name\">岡部 拓</p>\n        <p class=\"why\">会計ソフトの<b>販売店網</b>を構築</p>\n      </div>\n      <div data-col=\"4\">\n        <div class=\"photo\"><svg viewBox=\"0 0 100 100\" aria-hidden=\"true\"><circle cx=\"50\" cy=\"40\" r=\"17\" fill=\"var(--frame-figure)\"/><path d=\"M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z\" fill=\"var(--frame-figure)\"/></svg></div>\n        <p class=\"role\">顧客支援</p>\n        <p class=\"name\">片山 由佳</p>\n        <p class=\"why\">中小企業の経理を <b>9 年</b>、1 人で担当</p>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"footLabel\" data-type=\"footLabel\">社員</p>\n      <p class=\"footText\" data-type=\"footText\">全 14 名（開発 8・事業 4・管理 2）。顧問に公認会計士 1 名</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/team-founders-portrait-row/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/team-founders-portrait-row/font.css",
        "https://design-vault.pages.dev/designs/team-founders-portrait-row/font-0.woff2",
        "https://design-vault.pages.dev/designs/team-founders-portrait-row/font-1.woff2",
        "https://design-vault.pages.dev/designs/team-founders-portrait-row/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/team-founders-portrait-row",
    "en": "https://design-vault.pages.dev/en/designs/team-founders-portrait-row"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の\n1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the ten pitch slides, drawn as the\nSeries A deck of a fictional company; every company, person and figure on it is invented.\n\n### Techniques\n\n- 4 列の格子に 1:1 の枠、役割は強調色の小さな字\n- 経歴は灰色、太字の句だけ本文色に戻す\n- 下端の罫の下に社員数と顧問を 1 行で\n\n### Apply to\n\n- ピッチのチームの 1 枚\n- 提案書の体制紹介（経歴を案件の実績に替える）"
}