<!doctype html>
<html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>要件定義書から、自分の Claude でアプリをつくる｜SOUZOH SPECS</title>
<meta name="description" content="ソウゾウが制作したアプリの要件定義書と、それを使って自分の Claude Code でアプリをつくる手順・プロンプトをまとめています。">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap">
<style>:root{--gpt:#10a37f;--gpt-tint:#e9f7f2;--code-bg:#16181c;--code-ink:#e8e9eb;--accent:#fd5c02;--accent-strong:#cc4a00;--accent-tint:#fef4ec;--ink:#1f2328;--sub:#5b6169;--line:#ecedef;--line-strong:#dcdee2;--page:#fff;--soft:#f7f7f8;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.8 "Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1.1;font-family:"Zen Kaku Gothic New",sans-serif}
.brand b{font-size:15px;letter-spacing:.04em}.brand small{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.nav{display:flex;gap:18px}.nav a{font-size:13px;font-weight:700;text-decoration:none;color:var(--sub)}.nav a:hover{color:var(--accent)}
@media (max-width:520px){.nav .ext{display:none}.nav{gap:14px}}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.hero{padding:64px 0 28px}
.hero h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(32px,6vw,48px);line-height:1.2;margin:8px 0 16px}
.lead{color:var(--sub);max-width:640px;margin:0}
.count{margin:20px 0 0;font-size:13px;color:var(--sub)}
.cat{margin:40px 0}
.cat h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;display:flex;align-items:baseline;gap:10px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat h2 span{font-size:13px;color:var(--sub);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{border:1px solid var(--line-strong);border-radius:14px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(253,92,2,.08)}
.card-main{flex:1;padding:20px 20px 12px;text-decoration:none}
.card h3{margin:0 0 6px;font-size:17px;font-family:"Zen Kaku Gothic New",sans-serif}
.card p{margin:0;color:var(--sub);font-size:14px;line-height:1.7}
.tags{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;background:var(--soft);border-radius:999px;padding:1px 10px;color:var(--sub)}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line)}
.meta{font-size:12px;color:var(--sub);margin:0}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:13px;border-radius:999px;padding:7px 16px;white-space:nowrap}
.btn:hover{background:var(--accent-strong)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line-strong)}.btn.ghost:hover{border-color:var(--ink)}
.empty{color:var(--sub);padding:40px 0}
.doc-wrap{max-width:820px}
.crumb{font-size:13px;color:var(--sub);padding-top:28px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--accent)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:24px 0 8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.doc h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(26px,5vw,36px);line-height:1.3;margin:24px 0}
.doc h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px;margin:48px 0 14px;padding-left:12px;border-left:4px solid var(--accent);line-height:1.4}
.doc h3{font-size:17px;margin:28px 0 10px}
.doc ul,.doc ol{padding-left:1.4em}
.doc code{background:var(--soft);border-radius:4px;padding:1px 5px;font-size:.9em}
.doc blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid var(--line-strong);color:var(--sub)}
.tbl{overflow-x:auto;margin:14px 0;border:1px solid var(--line-strong);border-radius:10px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.6}
.doc th,.doc td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--soft);font-weight:700;white-space:nowrap}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{white-space:nowrap}
.doc-foot{display:flex;gap:10px;flex-wrap:wrap;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);margin-top:64px;padding:24px 0;font-size:12px;color:var(--sub)}
@media (max-width:480px){.grid{grid-template-columns:1fr}.hero{padding-top:40px}}
.doc h1{scroll-margin-top:76px}.doc h2,.doc h3{scroll-margin-top:76px}
.doc h1:not(:first-child){font-size:clamp(22px,4vw,28px);margin:72px 0 16px;padding-top:24px;border-top:2px solid var(--ink)}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.doc pre{background:#16181c;color:#e8e9eb;border-radius:10px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.6}
.doc pre code{background:none;padding:0;color:inherit}
.doc li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2em}.doc input[type=checkbox]{margin-right:6px;accent-color:var(--accent)}

/* hero */
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:28px 0 0}
.hero-cta .count{margin:0}
.btn.lg{font-size:15px;padding:12px 24px}
.btn.sm{font-size:12px;padding:5px 12px}
.small-hero{padding-bottom:8px}
.flow{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flow li{position:relative;background:var(--soft);border-radius:12px;padding:14px 12px 12px;font-size:13px;line-height:1.5;font-weight:700}
.flow li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;margin-bottom:6px}
.flow li span{display:block}
.flow li.opt{background:none;border:1.5px dashed var(--line-strong)}
.flow li.opt b{background:var(--gpt)}
.flow li em{position:absolute;top:10px;right:10px;font-style:normal;font-size:11px;color:var(--gpt);font-weight:700}
.flow li i{font-style:normal;display:inline-block}
.nb{display:inline-block}
@media (max-width:720px){.flow{grid-template-columns:1fr}.flow li{display:flex;align-items:center;gap:12px;padding:12px 14px}.flow li b{margin:0;flex:none}.flow li em{position:static;margin-left:auto}}
.card-actions{display:flex;gap:6px}
.steps-count{margin:10px 0 0!important;font-size:12px!important;color:var(--accent)!important;font-weight:700}

/* app page */
.app-head{margin:20px 0 0}
.app-head h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(30px,6vw,42px);line-height:1.25;margin:6px 0 8px}
.app-head .meta{margin-top:8px}
.tabs{display:flex;gap:4px;margin:28px 0 0;border-bottom:1px solid var(--line-strong);position:sticky;top:60px;background:#fff;z-index:4}
.tabs button{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px;font:700 15px/1 "Noto Sans JP",sans-serif;color:var(--sub);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tab-panel{padding-top:8px}
.spec-bar{display:flex;justify-content:flex-end;margin:16px 0 0}
.steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:step}
.step{position:relative;counter-increment:step;padding:0 0 36px 52px;border-left:2px solid var(--line);margin-left:17px;padding-left:34px}
.step:last-child{border-left-color:transparent}
.step::before{content:counter(step);position:absolute;left:-18px;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:900 15px/1 "Zen Kaku Gothic New",sans-serif}
.step.optional::before{background:#fff;color:var(--gpt);border:2px solid var(--gpt);width:30px;height:30px}
.step h3{font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px;margin:2px 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step p{margin:8px 0}
.badge{font-size:11px;font-weight:700;font-style:normal;color:var(--gpt);border:1px solid var(--gpt);border-radius:999px;padding:1px 9px;font-family:"Noto Sans JP",sans-serif;letter-spacing:0}
.small{font-size:13px;color:var(--sub)}
.note{font-size:13px;background:var(--soft);border-radius:10px;padding:10px 14px;color:var(--sub)}
code{background:var(--soft);border-radius:4px;padding:1px 6px;font:500 .88em "JetBrains Mono",ui-monospace,monospace}
.phases details{border:1px solid var(--line-strong);border-radius:12px;margin:10px 0;overflow:hidden}
.phases summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:12px 16px;font-size:14px}
.phases summary::-webkit-details-marker{display:none}
.phases summary::after{content:"＋";margin-left:auto;color:var(--sub)}
.phases details[open] summary::after{content:"－"}
.phases details[open] summary{border-bottom:1px solid var(--line)}
.phase-label{font:700 12px/1.6 "JetBrains Mono",monospace;color:var(--accent);white-space:nowrap}
.phase-name{font-weight:700}
.phases .prompt{margin:12px}
.to-guide{margin:8px 0 0;font-size:14px;color:var(--sub)}
.to-guide a,.step a:not(.btn),.guide a:not(.btn){color:var(--accent-strong)}

/* prompt block */
.prompt{margin:14px 0;border-radius:12px;overflow:hidden;background:var(--code-bg);color:var(--code-ink)}
.prompt-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.prompt .to{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;color:#fdb68a}
.prompt .to::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prompt.gpt .to{color:#7fdcbf}.prompt.gpt .to::before{background:var(--gpt)}
.prompt.plain .to{color:#b8bcc4}.prompt.plain .to::before{background:#8a8f98}
.copy{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:8px;padding:4px 12px;font:700 12px/1.4 "Noto Sans JP",sans-serif;cursor:pointer}
.copy:hover{background:rgba(255,255,255,.1)}
.copy.done{background:var(--accent);border-color:var(--accent)}
.prompt pre{margin:0;padding:14px 16px 16px;white-space:pre-wrap;word-break:break-word;font:14px/1.75 "Noto Sans JP",system-ui,sans-serif}


/* guide */
.guide{max-width:820px}
.toc{border:1px solid var(--line-strong);border-radius:14px;padding:16px 22px;margin:36px 0 8px}
.toc p{margin:0 0 6px;font-weight:700;font-size:13px;color:var(--sub)}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:28px;font-size:14px}
.toc a{text-decoration:none}.toc a:hover{color:var(--accent)}
@media (max-width:560px){.toc ol{columns:1}}
.g-sec{margin:56px 0 0;scroll-margin-top:76px}
.g-sec h2{font-family:"Zen Kaku Gothic New",sans-serif;font-size:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.g-sec h2>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;flex:none}
.g-sec h2 .badge{font-size:12px}
.plain{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.plain th,.plain td{border-top:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.plain th{white-space:nowrap;width:1%;padding-right:20px}
@media (max-width:560px){.plain th,.plain td{display:block;width:auto;border:0;padding:4px 0}.plain tr{display:block;border-top:1px solid var(--line);padding:10px 0}}
.sub{padding-left:1.4em}.sub li{margin:6px 0}
.callout{background:var(--accent-tint);border-radius:12px;padding:14px 18px;font-size:14px;margin:16px 0}
.callout.warn{background:#fff6e0}
.more{margin:12px 0;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.more summary{cursor:pointer;font-weight:700;font-size:14px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}
.app-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.app-links a{display:block;border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:14px;text-decoration:none;color:var(--ink)!important}
.app-links a:hover{border-color:var(--accent)}
@media (max-width:480px){.step{padding-left:26px}.tabs button{padding:12px 10px;font-size:14px}}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
.doc :not(pre)>code,.step code,.guide :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
.doc a{overflow-wrap:anywhere}
/* consult CTA */
.cta{background:#1f2328;color:#fff;margin-top:72px;padding:56px 0}
.cta .eyebrow{color:#fdb68a}
.cta h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.cta-lead{color:#c9ccd1;margin:0 0 28px}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.cta-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px}
.cta-box.main{background:#fff;color:var(--ink);border-color:#fff}
.cta-box h3{margin:0 0 6px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:19px}
.cta-box p{margin:0 0 18px;font-size:14px;color:#c9ccd1}
.cta-box.main p{color:var(--sub)}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}.cta .btn.ghost:hover{border-color:#fff}
.btn.line{background:#06c755}.btn.line:hover{background:#05a948}
.cta-box.main .btn{width:100%;justify-content:center}
.cta-inline{font-size:14px;background:var(--accent-tint);border-radius:10px;padding:10px 14px;margin:12px 0}
.cta-inline a{color:var(--accent-strong);font-weight:700}
.foot{margin-top:0}
@media (max-width:720px){.cta-grid{grid-template-columns:1fr}.cta{padding:44px 0}.cta-btns .btn{flex:1 1 auto;justify-content:center}}
.cta{scroll-margin-top:60px}
/* helpdock: always-visible consult */
.helpdock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;transition:opacity .2s,transform .2s}
.helpdock.is-away{opacity:0;transform:translateY(12px);pointer-events:none}
.hd-panel{position:relative;width:236px;background:#1f2328;color:#fff;border-radius:14px;padding:12px 14px 10px;box-shadow:0 10px 32px rgba(0,0,0,.22)}
.hd-close{position:absolute;top:6px;right:8px;appearance:none;border:0;background:none;color:#9aa0a8;font-size:20px;line-height:1;padding:6px;cursor:pointer}
.hd-close:hover{color:#fff}
.hd-title{margin:0 18px 0 0;font:700 14px/1.5 "Zen Kaku Gothic New",sans-serif}
.hd-sub{margin:0 0 10px;font-size:12px;line-height:1.6;color:#c9ccd1}
.hd-btns{display:grid;gap:8px}
.hd-btns{gap:6px}.hd-btns .btn{justify-content:center;padding:8px 8px;font-size:12.5px}
.hd-form{display:block;text-align:center;margin-top:6px;font-size:12px;color:#c9ccd1}
.hd-pill{display:none;appearance:none;border:0;cursor:pointer;align-items:center;gap:6px;background:#1f2328;color:#fff;border-radius:999px;padding:12px 18px;font:700 14px/1 "Noto Sans JP",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.helpdock.is-mini .hd-panel{display:none}
.helpdock.is-mini .hd-pill{display:inline-flex}
@media (max-width:720px){
  .helpdock{left:0;right:0;bottom:0}
  .helpdock.is-mini{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hd-panel{width:auto;border-radius:16px 16px 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .hd-close{top:4px;right:6px}
  .hd-title{font-size:13px;margin:0 28px 6px 0;white-space:normal}
  .hd-sub,.hd-form,.hd-long{display:none}
  .hd-btns{grid-template-columns:1fr 1fr}
  body.has-dock{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* demo → production */
.prod-note{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:16px 0 0;padding:10px 14px;border-radius:10px;background:#fff6e0;text-decoration:none;font-size:13px;color:var(--ink)}
.prod-note b{white-space:nowrap}
.prod-note span{color:var(--sub)}
.prod-note::after{content:"→";margin-left:auto;color:var(--accent-strong);font-weight:700}
.spec-bar{align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.spec-note{margin:0;font-size:13px;color:var(--sub)}.spec-note a{color:var(--accent-strong);font-weight:700}
.prod{background:var(--soft);margin-top:64px;padding:56px 0;scroll-margin-top:60px}
.prod-in{max-width:1080px;margin:0 auto;padding-inline:20px}
.prod h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(24px,5vw,34px);line-height:1.35;margin:8px 0 10px}
.prod>.prod-in>.lead{max-width:720px}
.gaps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gaps li{background:#fff;border:1px solid var(--line-strong);border-radius:14px;padding:18px}
.gaps h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px;line-height:1.4}
.gaps h3 b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;flex:none}
.gaps dl{margin:0;font-size:13px;line-height:1.7}
.gaps dt{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.gaps dt.p{color:var(--accent-strong);margin-top:10px}
.gaps dd{margin:2px 0 0}
@media (max-width:960px){.gaps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gaps{grid-template-columns:1fr}}
.prod-cta{margin-top:28px;background:#fff;border:1px solid var(--line-strong);border-radius:18px;padding:24px;display:grid;gap:18px}
.prod-cta-text{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;align-items:start}
.prod-cta-text h3,.prod-cta-text>p:first-of-type{grid-column:1}.prod-cta-text .checks{grid-column:2;grid-row:1/span 3;margin:4px 0 0}.prod-cta-text .small{grid-column:1}
.prod-cta-text h3{margin:0 0 8px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px}
.prod-cta-text p{margin:0 0 12px;font-size:14px}
.checks{list-style:none;padding:0;margin:0 0 12px;font-size:14px}
.checks li{position:relative;padding-left:24px;margin:6px 0}
.checks li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;min-width:0}
.embed iframe{display:block;width:100%;height:800px;border:0}
.prod-alt{margin:0;font-size:13px;color:var(--sub)}
.prod-alt a{color:var(--accent-strong);font-weight:700}
@media (max-width:860px){.prod-cta{padding:18px}.prod-cta-text{grid-template-columns:1fr}.prod-cta-text .checks{grid-column:1;grid-row:auto}.embed iframe{height:1060px}}
.prod-band{margin:56px 0 0;padding:28px;border-radius:18px;background:#1f2328;color:#fff;display:grid;grid-template-columns:1fr auto;gap:18px 28px;align-items:center}
.prod-band .eyebrow{color:#fdb68a}
.prod-band h2{margin:6px 0;font-family:"Zen Kaku Gothic New",sans-serif;font-size:22px}
.prod-band p{margin:0;color:#c9ccd1;font-size:14px}
.prod-band ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;order:3}
.prod-band li{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 14px 6px 6px;font-size:13px;font-weight:700}
.prod-band li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);font-size:11px}
@media (max-width:720px){.prod-band{grid-template-columns:1fr}.prod-band .btn{justify-content:center}}
/* スマホでは埋め込みカレンダーを画面の端から端まで使う（Lark の画面は枠が狭いと右が切れる） */
@media (max-width:560px){
  .prod-cta{margin-inline:-20px;width:calc(100% + 40px);border-radius:0;border-inline:0;padding:20px 0}
  .prod-cta-text,.prod-alt{padding-inline:20px}
  .embed{border-radius:0;border-inline:0}
}
/* gallery-style cards (gallery.souzoh.app/showcase に合わせる) */
.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 20px}
.card{border:0;border-radius:0;background:none}
.card:hover{box-shadow:none}
.card-visual{position:relative;display:block;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6 0%,#fdf1e7 100%);border:1px solid var(--line)}
.card-visual:hover .mock{transform:translateY(-4px)}
.card-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.mock{position:absolute;inset:0;display:block;transition:transform .25s}
.mock-pc{position:absolute;left:6%;top:12%;width:80%;aspect-ratio:16/10;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(31,35,40,.12)}
.mock-pc i{display:block;height:7%;background:#f0f1f3;position:relative}
.mock-pc i::before{content:"";position:absolute;left:3%;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#d5d8dc;box-shadow:9px 0 #d5d8dc,18px 0 #d5d8dc}
.mock-pc img{display:block;width:100%;height:93%;object-fit:cover;object-position:top}
.mock-sp{position:absolute;right:6%;bottom:7%;width:21%;aspect-ratio:9/19;background:#1f2328;border-radius:14px;padding:3px;box-shadow:0 10px 24px rgba(31,35,40,.25)}
.mock-sp img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:11px}
.card-body{padding:14px 2px 0}
.card-cat{margin:0;font-size:12px;font-weight:700;color:var(--accent)}
.card-body h3{margin:4px 0 6px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px}
.card-body h3 a{text-decoration:none}.card-body h3 a:hover{color:var(--accent)}
.card-sum{margin:0;font-size:14px;line-height:1.7;color:var(--sub)}
.card .card-foot{border:0;padding:12px 2px 0;gap:8px}
.card-demo{font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;white-space:nowrap}
.card-demo::after{content:" ↗"}
.card-demo:hover{color:var(--accent)}
/* app header with visual */
.app-head.has-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;align-items:center}
.app-head.has-visual .prod-note{grid-column:1/-1}
.app-head-visual{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f3f4f6 0%,#fdf1e7 100%);border:1px solid var(--line)}
.app-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
@media (max-width:720px){.app-head.has-visual{grid-template-columns:1fr}.app-head-visual{order:-1}}
.app-head.has-visual{grid-template-columns:1.15fr 1fr}
.app-head.has-visual h1{font-size:clamp(26px,3.6vw,34px)}
@media (max-width:720px){.app-head.has-visual{grid-template-columns:1fr}.app-head.has-visual h1{font-size:clamp(28px,7vw,34px)}}

/* ===== 色の役割を整理（2026-09-23）=====
   オレンジ＝その場でいちばん押してほしい操作だけ／黒＝順番と構造／グレー＝小見出し・補足の札
   緑＝LINE と ChatGPT（サービスの色）／黄＝注意 */
:root{--label:#6b7178;--chip:#f1f2f4}
.eyebrow{color:var(--label)}
.cta .eyebrow,.prod-band .eyebrow{color:#9aa0a8}
/* 流れ */
.flow li b{background:var(--ink)}
.flow li.opt b{background:#fff;color:var(--label);border:1.5px solid var(--line-strong)}
.flow li em{color:var(--label)}
/* 補足の札 */
.badge{color:var(--label);border:0;background:var(--chip);font-weight:700}
/* 段階の番号 */
.step::before{background:var(--ink)}
.step.optional::before{background:#fff;color:var(--label);border:2px dashed var(--line-strong)}
.phase-label{color:var(--label)}
/* コピー枠の見出し：送り先の色は点だけにして、文字は落ち着かせる */
.prompt .to{color:#c9ccd1}
.prompt.gpt .to{color:#c9ccd1}
.prompt .to::before{background:#d97757}
/* 相談の1行 */
.cta-inline{background:var(--soft);border-left:3px solid var(--ink);border-radius:0 10px 10px 0}
.cta-inline a{color:var(--ink);text-decoration:underline}
/* 本番の節 */
.gaps dt.p{color:var(--ink)}
.prod-band li b{background:rgba(255,255,255,.18)}
.prod-note::after{margin-left:6px}
.prod-note span{flex:1 1 16em}
/* カード */
.card{display:flex;flex-direction:column}
.card-body{flex:1}
.card .card-foot{margin-top:auto}
.card-badge{background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line);font-weight:700;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.card-code{margin:0;font:500 11px/1.6 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--label)}
.card-go{font-size:14px;font-weight:700;color:var(--accent-strong);text-decoration:none;white-space:nowrap;padding:6px 2px}
.card-go:hover{color:var(--accent)}
.card-actions{align-items:center;gap:12px}
/* アプリの頭：分類は灰色 */
.app-head .eyebrow{color:var(--label)}
/* カード全体を押せる（タイトルのリンクを全面に広げる）。デモ・MD だけは上に重ねて個別に押せる */
.card{position:relative;cursor:pointer}
.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.card-demo,.card-actions .btn{position:relative;z-index:2}
.card .card-visual{transition:transform .2s,box-shadow .2s}
.card:hover .card-visual{transform:translateY(-3px);box-shadow:0 10px 28px rgba(31,35,40,.10)}
.card:hover .mock{transform:none}
.card:hover h3 a{color:var(--accent-strong)}
.card:hover .card-go{color:var(--accent)}
.card:has(.card-link:focus-visible){outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
.card-link:focus-visible{outline:none}
.card .card-foot{flex-wrap:wrap;row-gap:6px}
.card-actions{gap:10px;margin-left:auto}
.card-go{padding:6px 0}
/* カード下段：「デモを触る」「ダウンロード」を同じ幅で並べる。「要件定義書を見る →」は説明文の下 */
.card .card-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px}
.card .card-foot .btn{justify-content:center;position:relative;z-index:2;color:var(--ink)}
.card-demo::after{content:" ↗"}
.card-go{display:inline-block;margin-top:8px;padding:0;font-size:14px}
.card-body{display:flex;flex-direction:column}
.card-go{margin-top:auto;padding-top:8px;align-self:flex-start}
.card-sum{margin-bottom:0}
</style></head>
<body>
<header class="top"><div class="wrap"><a class="brand" href="./"><svg viewBox="0 0 40 40" width="28" height="28" aria-hidden="true"><path d="M27.5 9.5c-4.2-2.6-9 .3-11.6 4.2-2.4 3.6-6.2 6.2-9.4 4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><path d="M12.5 30.5c4.2 2.6 9-.3 11.6-4.2 2.4-3.6 6.2-6.2 9.4-4.5" fill="none" stroke="var(--accent)" stroke-width="4.6" stroke-linecap="round"/><circle cx="30.5" cy="10.5" r="4.4" fill="var(--accent)"/><circle cx="9.5" cy="29.5" r="4.4" fill="var(--accent)"/></svg><span><b>SOUZOH</b><small>SPECS</small></span></a>
<nav class="nav"><a href="./">要件定義書</a><a href="./guide/">作り方ガイド</a><a class="ext" href="https://gallery.souzoh.app/showcase">デモを触る</a></nav></div></header>
<main class="wrap">
<div class="hero"><p class="eyebrow">BUILD WITH CLAUDE</p><h1><span class="nb">要件定義書から、</span><span class="nb">自分の Claude で</span><span class="nb">アプリをつくる</span></h1>
<p class="lead">ソウゾウがつくったアプリの要件定義書を公開しています。ダウンロードして Claude Code に渡し、「作って」と頼めば、同じアプリを自分の手元でつくれます。<br>送る文はアプリごとにコピーできるようにしました。デザインにこだわりたい人は、先に ChatGPT で画面イメージを作って一緒に渡します。</p>
<ol class="flow">
<li><b>1</b><span><i>要件定義書を</i><i>ダウンロード</i></span></li>
<li class="opt"><b>2</b><span><i>ChatGPT で</i><i>画面イメージを作る</i></span><em>任意</em></li>
<li><b>3</b><span><i>Claude Code に渡して</i><i>「作って」と頼む</i></span></li>
<li><b>4</b><span><i>動かして</i><i>確かめる・直す</i></span></li>
</ol>
<p class="hero-cta"><a class="btn lg" href="guide/">作り方ガイドを読む</a><span class="count">要件定義書 16件</span></p></div>
<section class="cat"><h2>業務システム<span>8件</span></h2><div class="grid">
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/relate-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/relate-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">RELATE</p><h3><a class="card-link" href="relate/">顧客・商談管理</a></h3><p class="card-sum">Excelをやめられる、中小企業のための顧客・商談管理システム</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://relate.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/relate.md" download="顧客・商談管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/fieldpin-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/fieldpin-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">FIELDPIN</p><h3><a class="card-link" href="fieldpin/">地図・訪問記録</a></h3><p class="card-sum">訪問先を地図で管理し、GPSで訪問を記録する</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://fieldpin.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/fieldpin.md" download="地図・訪問記録_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/portal-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/portal-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh Portal</p><h3><a class="card-link" href="portal/">社内ポータル</a></h3><p class="card-sum">会社の「いま」が、ひと目で分かるダッシュボード型ポータル</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-portal.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/portal.md" download="社内ポータル_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/tsumu-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/tsumu-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">TSUMU</p><h3><a class="card-link" href="tsumu/">タスク管理</a></h3><p class="card-sum">3秒で積む。今日／リスト／ボード／カレンダーの4つの見え方で捌く</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://tsumu.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/tsumu.md" download="タスク管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/tenken-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/tenken-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">TENKEN</p><h3><a class="card-link" href="tenken/">点検・チェックリスト</a></h3><p class="card-sum">1項目、1タップ、0.8秒。紙より速い点検表と、異常の是正追跡</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://tenken.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/tenken.md" download="点検・チェックリスト_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/hibi-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/hibi-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">HIBI</p><h3><a class="card-link" href="hibi/">日報・週報</a></h3><p class="card-sum">書く時間を、90秒に。前回をコピーして変わった分だけ直す日報</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://hibi.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/hibi.md" download="日報・週報_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/kura-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/kura-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">KURA</p><h3><a class="card-link" href="kura/">在庫管理</a></h3><p class="card-sum">在庫数は、書き換えない。入出庫の履歴から積み上げる</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://kura.souzoh.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/kura.md" download="在庫管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/tokiwa-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/tokiwa-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">TOKIWA</p><h3><a class="card-link" href="tokiwa/">勤怠・シフト管理</a></h3><p class="card-sum">打刻は書き換えない。丸めも残業も、毎回そこから計算する</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://tokiwa.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/tokiwa.md" download="勤怠・シフト管理_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article></div></section>
<section class="cat"><h2>一般向けアプリ<span>8件</span></h2><div class="grid">
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/hirebase-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/hirebase-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">HIREBASE</p><h3><a class="card-link" href="hirebase/">求人・スカウト</a></h3><p class="card-sum">スカウトが届く、新しい求人体験のデモ</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://hirebase.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/hirebase.md" download="求人・スカウト_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/casta-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/casta-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">CASTA</p><h3><a class="card-link" href="casta/">動画配信</a></h3><p class="card-sum">会員制の動画配信プラットフォームのデモ</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://casta.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/casta.md" download="動画配信_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/kanade-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/kanade-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">KANADE</p><h3><a class="card-link" href="kanade/">音楽配信</a></h3><p class="card-sum">画面を消しても止まらない、音楽配信アプリのデモ</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://kanade.souzohnic.workers.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/kanade.md" download="音楽配信_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/sns-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/sns-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh SNS</p><h3><a class="card-link" href="sns/">SNS</a></h3><p class="card-sum">投稿・いいね・フォローの、基本がそろったSNSアプリのデモ</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-sns.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/sns.md" download="SNS_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/match-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/match-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh Match</p><h3><a class="card-link" href="match/">マッチング</a></h3><p class="card-sum">「できる」と「借りたい」で人をつなぐ共創マッチング</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-match.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/match.md" download="マッチング_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/market-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/market-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh Market</p><h3><a class="card-link" href="market/">フリマ</a></h3><p class="card-sum">使わなくなったものに、次の人を。C2Cフリマのデモ</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-market.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/market.md" download="フリマ_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/delivery-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/delivery-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh Delivery</p><h3><a class="card-link" href="delivery/">デリバリー</a></h3><p class="card-sum">注文から到着まで、配達が進む様子がリアルタイムに見える</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-delivery.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/delivery.md" download="デリバリー_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article>
<article class="card">
  <div class="card-visual" aria-hidden="true"><span class="mock"><span class="mock-pc"><i></i><img src="shots/reviews-desktop.webp" alt="" loading="lazy" decoding="async"></span><span class="mock-sp"><img src="shots/reviews-mobile.webp" alt="" loading="lazy" decoding="async"></span></span><span class="card-badge">要件定義書</span></div>
  <div class="card-body"><p class="card-code">Souzoh Reviews</p><h3><a class="card-link" href="reviews/">口コミ・レビュー</a></h3><p class="card-sum">星の数より、その中身を。評価の理由が見えるレビュー</p><span class="card-go" aria-hidden="true">要件定義書を見る →</span></div>
  <div class="card-foot"><a class="btn sm ghost card-demo" href="https://souzoh-reviews.pages.dev/?src=specs" target="_blank" rel="noopener">デモを触る</a><a class="btn sm ghost" href="/md/reviews.md" download="口コミ・レビュー_要件定義書.md"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5M4 15h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>ダウンロード</a></div>
</article></div></section>



<section class="prod-band"><div><p class="eyebrow">FROM DEMO TO PRODUCTION</p><h2>作ったアプリを、本番で使いたい方へ</h2>
<p>ここの要件定義書はデモです。本番で使うには、あと4つ必要です。</p></div>
<ol><li><b>1</b>データの保存</li><li><b>2</b>セキュリティ</li><li><b>3</b>ガバナンス（運用ルール）</li><li><b>4</b>公開・デプロイ</li></ol>
<a class="btn lg" href="guide/#production">本番に必要なことと、相談の日程</a></section>
</main>
<section class="cta" id="consult"><div class="wrap">
<p class="eyebrow">FREE CONSULTATION</p>
<h2><span class="nb">分からないときは、</span><span class="nb">お気軽に</span><span class="nb">30分無料相談へ</span></h2>
<p class="cta-lead">途中で止まった、エラーが消えない、自社向けに作り変えたい。どんなことでも大丈夫です。</p>
<div class="cta-grid">
<div class="cta-box main"><h3>日程を決めて話す</h3><p>代表の西澤と直接お話しできます。空いている日時を選ぶだけで予約できます。</p>
<a class="btn lg" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener">代表 西澤と話す日程を選ぶ</a></div>
<div class="cta-box"><h3>まずは問い合わせる</h3><p>要件定義書がほしい方・ご相談は公式LINEから。メールでのお問い合わせはフォームから。</p>
<div class="cta-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">公式LINEで相談する</a><a class="btn ghost" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a></div></div>
</div></div></section>
<footer class="foot"><div class="wrap">© SOUZOH LLC.</div></footer>
<aside class="helpdock" data-helpdock aria-label="相談窓口">
<div class="hd-panel">
<button type="button" class="hd-close" data-hd-toggle aria-label="小さくする">×</button>
<p class="hd-title"><span class="nb">つまずいたら、</span><span class="nb">気軽に聞いてください</span></p>
<p class="hd-sub">LINEなら1通送るだけ。</p>
<div class="hd-btns"><a class="btn line" href="https://lin.ee/UNwvWjp" target="_blank" rel="noopener">LINEで聞く</a><a class="btn" href="https://vszh6zudz50.jp.larksuite.com/scheduler/e7fecdad1a756dbe" target="_blank" rel="noopener"><span>30分無料相談<span class="hd-long">の日程を選ぶ</span></span></a></div>
<a class="hd-form" href="https://service.souzoh-official.com/contact/" target="_blank" rel="noopener">お問い合わせフォーム</a>
</div>
<button type="button" class="hd-pill" data-hd-toggle><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>相談する</button>
</aside>
<script>(function () {
  // プロンプトのコピー
  document.addEventListener("click", function (e) {
    var btn = e.target.closest(".copy");
    if (!btn) return;
    var pre = btn.closest(".prompt").querySelector("pre");
    var text = pre.innerText.replace(/\n{3,}/g, "\n\n").trim();
    var done = function () {
      btn.textContent = "コピーしました";
      btn.classList.add("done");
      setTimeout(function () { btn.textContent = "コピー"; btn.classList.remove("done"); }, 1600);
    };
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(done, function () { fallback(pre); done(); });
    } else { fallback(pre); done(); }
  });
  function fallback(pre) {
    var r = document.createRange(); r.selectNodeContents(pre);
    var s = getSelection(); s.removeAllRanges(); s.addRange(r);
    try { document.execCommand("copy"); } catch (e) {}
    s.removeAllRanges();
  }

  // つくり方／要件定義書のタブ。本文の見出しへのリンク（#…）で来たときは要件定義書側を開く
  var tabs = document.querySelectorAll("[data-tab]");
  if (!tabs.length) return;
  function show(name) {
    tabs.forEach(function (t) { t.setAttribute("aria-selected", t.dataset.tab === name ? "true" : "false"); });
    document.getElementById("tab-build").hidden = name !== "build";
    document.getElementById("tab-spec").hidden = name !== "spec";
  }
  function fromHash() {
    var id = decodeURIComponent(location.hash.slice(1));
    if (id === "spec") return show("spec");
    var el = id && document.getElementById(id);
    show(el && el.closest("#tab-spec") ? "spec" : "build");
    if (el) el.scrollIntoView();
  }
  tabs.forEach(function (t) {
    t.addEventListener("click", function () {
      show(t.dataset.tab);
      history.replaceState(null, "", t.dataset.tab === "spec" ? "#spec" : location.pathname);
      document.querySelector(".tabs").scrollIntoView({ block: "start" });
    });
  });
  window.addEventListener("hashchange", fromHash);
  fromHash();
})();

// 相談窓口：たたむ／ひらく（この端末だけ覚える）。下の大きな相談ブロックが見えている間は隠す
(function () {
  var dock = document.querySelector("[data-helpdock]");
  if (!dock) return;
  var KEY = "souzoh-specs-helpdock";
  var mini = false;
  try { mini = localStorage.getItem(KEY) === "mini"; } catch (e) {}
  dock.classList.toggle("is-mini", mini);
  document.body.classList.add("has-dock");
  dock.addEventListener("click", function (e) {
    if (!e.target.closest("[data-hd-toggle]")) return;
    mini = !mini;
    dock.classList.toggle("is-mini", mini);
    try { localStorage.setItem(KEY, mini ? "mini" : "open"); } catch (e) {}
  });
  // 相談の節（下の相談ブロック・本番の節）が見えている間は、同じ案内を二重に出さない
  var targets = ["consult", "production"].map(function (id) { return document.getElementById(id); }).filter(Boolean);
  if (targets.length && "IntersectionObserver" in window) {
    var seen = {};
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) { seen[e.target.id] = e.isIntersecting; });
      dock.classList.toggle("is-away", Object.keys(seen).some(function (k) { return seen[k]; }));
    });
    targets.forEach(function (t) { io.observe(t); });
  }
})();
</script>
</body></html>