<svg viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg" font-family="'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif">
  <defs>
    <linearGradient id="titleUnderlineFormFlow" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadFormFlow" markerWidth="9" markerHeight="9" refX="6" refY="4.5" orient="auto">
      <path d="M0,0 L9,4.5 L0,9 Z" fill="#a9a9a9"/>
    </marker>
  </defs>

  <rect x="0" y="0" width="1200" height="675" fill="#ffffff"/>

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">フォーム項目数と送信率の関係</text>
  <rect x="440" y="62" width="320" height="4" rx="2" fill="url(#titleUnderlineFormFlow)"/>

  <!-- 上段の流れ: 項目が少ない → 送信されやすい（緑） -->
  <text x="150" y="105" font-size="14.5" font-weight="700" fill="#3f6b3c">項目が少ない場合</text>

  <rect x="90" y="120" width="230" height="110" rx="13" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="205" y="150" text-anchor="middle" font-size="13.5" font-weight="700" fill="#3f6b3c">3項目</text>
  <text x="205" y="172" text-anchor="middle" font-size="11.5" fill="#4a4a4a">お名前</text>
  <text x="205" y="190" text-anchor="middle" font-size="11.5" fill="#4a4a4a">メールアドレス</text>
  <text x="205" y="208" text-anchor="middle" font-size="11.5" fill="#4a4a4a">お問い合わせ内容</text>

  <path d="M 330 175 L 410 175" stroke="#79bb74" stroke-width="2.5" fill="none" marker-end="url(#arrowHeadFormFlow)"/>

  <rect x="420" y="120" width="230" height="110" rx="13" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="535" y="158" text-anchor="middle" font-size="13.5" font-weight="700" fill="#3f6b3c">入力の負担が小さい</text>
  <text x="535" y="180" text-anchor="middle" font-size="11.5" fill="#4a4a4a">スマホでもすぐ埋まる</text>

  <path d="M 660 175 L 740 175" stroke="#79bb74" stroke-width="2.5" fill="none" marker-end="url(#arrowHeadFormFlow)"/>

  <rect x="750" y="120" width="260" height="110" rx="13" fill="#eafaf0" stroke="#79bb74" stroke-width="2.5"/>
  <text x="880" y="160" text-anchor="middle" font-size="15" font-weight="700" fill="#3f6b3c">送信されやすい</text>
  <text x="880" y="185" text-anchor="middle" font-size="12" fill="#4a4a4a">最後まで迷わず送信完了</text>
  <text x="880" y="205" text-anchor="middle" font-size="12" fill="#4a4a4a">問い合わせ数が増える</text>

  <!-- 区切り線 -->
  <line x1="90" y1="255" x2="1110" y2="255" stroke="#e5e5e5" stroke-width="1.5"/>

  <!-- 下段の流れ: 項目が多い → 離脱（オレンジ） -->
  <text x="150" y="295" font-size="14.5" font-weight="700" fill="#a85a1e">項目が多い場合</text>

  <rect x="90" y="310" width="230" height="130" rx="13" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="205" y="338" text-anchor="middle" font-size="13.5" font-weight="700" fill="#a85a1e">10項目</text>
  <text x="205" y="360" text-anchor="middle" font-size="11" fill="#4a4a4a">お名前・住所・年齢</text>
  <text x="205" y="378" text-anchor="middle" font-size="11" fill="#4a4a4a">来店回数・アンケート</text>
  <text x="205" y="396" text-anchor="middle" font-size="11" fill="#4a4a4a">…と項目が続く</text>
  <text x="205" y="418" text-anchor="middle" font-size="10.5" fill="#c99566">最初の返信に不要な項目も</text>

  <path d="M 330 375 L 410 375" stroke="#e0894a" stroke-width="2.5" fill="none" marker-end="url(#arrowHeadFormFlow)"/>

  <rect x="420" y="310" width="230" height="130" rx="13" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="535" y="355" text-anchor="middle" font-size="13.5" font-weight="700" fill="#a85a1e">入力の手間が増える</text>
  <text x="535" y="380" text-anchor="middle" font-size="11.5" fill="#4a4a4a">小さな画面で埋めるのは負担</text>
  <text x="535" y="400" text-anchor="middle" font-size="11.5" fill="#4a4a4a">「また今度でいいか」と離脱</text>

  <path d="M 660 375 L 740 375" stroke="#e0894a" stroke-width="2.5" fill="none" marker-end="url(#arrowHeadFormFlow)"/>

  <rect x="750" y="310" width="260" height="130" rx="13" fill="#fbefe0" stroke="#e0894a" stroke-width="2.5"/>
  <text x="880" y="358" text-anchor="middle" font-size="15" font-weight="700" fill="#a85a1e">送信されずに離脱</text>
  <text x="880" y="385" text-anchor="middle" font-size="12" fill="#4a4a4a">途中で入力をやめてしまう</text>
  <text x="880" y="405" text-anchor="middle" font-size="12" fill="#4a4a4a">問い合わせを取りこぼす</text>

  <!-- フッター -->
  <rect x="90" y="480" width="1020" height="140" rx="14" fill="#f5f5f3"/>
  <text x="600" y="516" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">項目をひとつ増やすごとに、送信率は確実に下がる</text>
  <text x="600" y="546" text-anchor="middle" font-size="14" fill="#4a4a4a">基本は「お名前・メールアドレス・お問い合わせ内容」の3項目</text>
  <text x="600" y="572" text-anchor="middle" font-size="14" fill="#4a4a4a">詳しい情報は、やり取りが始まってから伺えばよい</text>
  <text x="600" y="598" text-anchor="middle" font-size="13" fill="#6b6b6b">フォームの価値は設置ではなく「返信の速さ」で決まる</text>
</svg>
