<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="spamTitleBar" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="spamCard1" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="spamCard2" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="spamCard3" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="spamArrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L8,3 L0,6 Z" fill="#79bb74"/>
    </marker>
  </defs>

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

  <text x="600" y="48" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">フォームスパムを防ぐ3つの層</text>
  <rect x="470" y="64" width="260" height="4" rx="2" fill="url(#spamTitleBar)"/>
  <text x="600" y="94" text-anchor="middle" font-size="15" fill="#4a4a4a">下から積み上げるほど、ボットが通り抜けにくくなる</text>

  <!-- 層1: 必須項目 -->
  <rect x="90" y="130" width="1020" height="130" rx="16" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <rect x="90" y="130" width="150" height="130" rx="16" fill="url(#spamCard1)"/>
  <rect x="200" y="130" width="40" height="130" fill="url(#spamCard1)"/>
  <text x="165" y="185" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">層1</text>
  <text x="165" y="210" text-anchor="middle" font-size="15" font-weight="700" fill="#ffffff">必須項目</text>
  <text x="165" y="230" text-anchor="middle" font-size="15" font-weight="700" fill="#ffffff">確認</text>

  <text x="270" y="168" font-size="17" font-weight="700" fill="#3f6b3c">氏名・連絡先・確認チェックボックス</text>
  <text x="270" y="196" font-size="14" fill="#4a4a4a">空欄や機械的な入力を弾く、いちばん手軽な対策</text>
  <text x="270" y="222" font-size="14" fill="#4a4a4a">効果：弱いボットには効くが、精巧なボットは素通り</text>
  <text x="270" y="248" font-size="14" fill="#4a4a4a">費用：無料・今日から設定できる</text>

  <line x1="600" y1="260" x2="600" y2="285" stroke="#79bb74" stroke-width="3" marker-end="url(#spamArrow)"/>

  <!-- 層2: ハニーポット -->
  <rect x="90" y="290" width="1020" height="130" rx="16" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <rect x="90" y="290" width="150" height="130" rx="16" fill="url(#spamCard2)"/>
  <rect x="200" y="290" width="40" height="130" fill="url(#spamCard2)"/>
  <text x="165" y="345" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">層2</text>
  <text x="165" y="370" text-anchor="middle" font-size="15" font-weight="700" fill="#ffffff">ハニー</text>
  <text x="165" y="390" text-anchor="middle" font-size="15" font-weight="700" fill="#ffffff">ポット</text>

  <text x="270" y="328" font-size="17" font-weight="700" fill="#2f6a91">人には見えない「おとり」の入力欄</text>
  <text x="270" y="356" font-size="14" fill="#4a4a4a">ボットだけがうっかり入力してしまう空欄を仕込む</text>
  <text x="270" y="382" font-size="14" fill="#4a4a4a">効果：見た目を変えずに機械的な入力だけを判別できる</text>
  <text x="270" y="408" font-size="14" fill="#4a4a4a">費用：無料・お客様の操作は一切増えない</text>

  <line x1="600" y1="420" x2="600" y2="445" stroke="#55aae2" stroke-width="3" marker-end="url(#spamArrow)"/>

  <!-- 層3: reCAPTCHA -->
  <rect x="90" y="450" width="1020" height="130" rx="16" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <rect x="90" y="450" width="150" height="130" rx="16" fill="url(#spamCard3)"/>
  <rect x="200" y="450" width="40" height="130" fill="url(#spamCard3)"/>
  <text x="165" y="505" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">層3</text>
  <text x="165" y="530" text-anchor="middle" font-size="15" font-weight="700" fill="#ffffff">reCAPTCHA</text>

  <text x="270" y="488" font-size="17" font-weight="700" fill="#3f6b3c">Googleの判定サービスで機械的な操作を見抜く</text>
  <text x="270" y="516" font-size="14" fill="#4a4a4a">クリックの動きや操作の癖から人かボットかを自動判定</text>
  <text x="270" y="542" font-size="14" fill="#4a4a4a">効果：精巧なボットにも強い。3層の中で最も確実</text>
  <text x="270" y="568" font-size="14" fill="#4a4a4a">費用：無料枠内で導入できることが多い</text>

  <text x="600" y="625" text-anchor="middle" font-size="14" fill="#4a4a4a">3つとも入れる必要はない。まずは層1から、スパムが減らなければ層2・層3を足していく</text>
</svg>
