<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="titleUnderlineResponsiveComp" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
  </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="380" y="62" width="440" height="4" rx="2" fill="url(#titleUnderlineResponsiveComp)"/>

  <!-- 左カラム: 未対応（オレンジ） -->
  <rect x="90" y="100" width="480" height="410" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="330" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#a85a1e">未対応（固定レイアウト）</text>
  <text x="330" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">パソコン用のまま、スマホで表示</text>

  <!-- スマホ枠（未対応） -->
  <rect x="255" y="185" width="150" height="270" rx="16" fill="#ffffff" stroke="#e0894a" stroke-width="2.5"/>
  <!-- 画面内はパソコン用レイアウトが縮小されて見切れる -->
  <rect x="267" y="197" width="126" height="246" rx="4" fill="#fbefe0"/>
  <rect x="267" y="197" width="230" height="18" fill="#f7ddc4"/>
  <rect x="273" y="222" width="80" height="8" fill="#e0894a"/>
  <rect x="273" y="238" width="60" height="8" fill="#e0a878"/>
  <rect x="273" y="258" width="70" height="50" fill="#f7ddc4"/>
  <rect x="349" y="258" width="70" height="50" fill="#f7ddc4"/>
  <rect x="425" y="258" width="70" height="50" fill="#f7ddc4"/>
  <text x="330" y="330" text-anchor="middle" font-size="10.5" fill="#a85a1e">→ 横に見切れる</text>
  <rect x="273" y="345" width="200" height="6" fill="#e0a878"/>
  <rect x="273" y="360" width="180" height="6" fill="#e0a878"/>

  <text x="330" y="480" text-anchor="middle" font-size="13" font-weight="700" fill="#a85a1e">文字が小さく、横スクロールが必要</text>
  <text x="330" y="500" text-anchor="middle" font-size="12.5" fill="#4a4a4a">拡大しないと読めず、離脱の原因に</text>

  <!-- 右カラム: 対応済み（緑） -->
  <rect x="630" y="100" width="480" height="410" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="870" y="140" text-anchor="middle" font-size="19" font-weight="700" fill="#3f6b3c">対応済み（レスポンシブ）</text>
  <text x="870" y="165" text-anchor="middle" font-size="13.5" fill="#4a4a4a">画面幅に合わせて自動で組み変わる</text>

  <!-- スマホ枠（対応済み） -->
  <rect x="795" y="185" width="150" height="270" rx="16" fill="#ffffff" stroke="#79bb74" stroke-width="2.5"/>
  <rect x="807" y="197" width="126" height="246" rx="4" fill="#eafaf0"/>
  <rect x="807" y="197" width="126" height="18" fill="#c9e8c6"/>
  <rect x="817" y="225" width="70" height="9" fill="#79bb74"/>
  <rect x="817" y="243" width="90" height="7" fill="#9ccb98"/>
  <!-- カードが縦に並び直る -->
  <rect x="817" y="262" width="106" height="38" rx="6" fill="#e3f3e1"/>
  <rect x="817" y="306" width="106" height="38" rx="6" fill="#e3f3e1"/>
  <rect x="817" y="350" width="106" height="38" rx="6" fill="#e3f3e1"/>
  <text x="870" y="420" text-anchor="middle" font-size="10.5" fill="#3f6b3c">↕ 縦一列に並び直る</text>

  <text x="870" y="480" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">文字は読みやすい大きさに自動調整</text>
  <text x="870" y="500" text-anchor="middle" font-size="12.5" fill="#4a4a4a">横スクロール不要、ボタンも押しやすい</text>

  <!-- フッター -->
  <rect x="90" y="540" width="1020" height="90" rx="12" fill="#f5f5f3"/>
  <text x="600" y="573" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">Googleはスマホでの見え方を基準にサイトを評価している</text>
  <text x="600" y="602" text-anchor="middle" font-size="14" fill="#4a4a4a">来店前の閲覧の多くはスマホ経由。見づらさはそのまま機会損失につながる</text>
</svg>
