<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="titleUnderlineSslFlow" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadSslFlow" 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">SSLが通信を守る仕組み</text>
  <rect x="460" y="62" width="280" height="4" rx="2" fill="url(#titleUnderlineSslFlow)"/>

  <!-- 上段: httpの通信（未対応・オレンジ） -->
  <text x="150" y="110" font-size="15" font-weight="700" fill="#a85a1e">未対応：http（暗号化なし）</text>

  <circle cx="150" cy="165" r="26" fill="#ffffff" stroke="#a9a9a9" stroke-width="2"/>
  <circle cx="150" cy="156" r="8" fill="none" stroke="#a9a9a9" stroke-width="2"/>
  <path d="M 136 178 A 16 16 0 0 1 164 178" fill="none" stroke="#a9a9a9" stroke-width="2"/>
  <text x="150" y="205" text-anchor="middle" font-size="12" fill="#4a4a4a">お客さま</text>

  <path d="M 178 165 L 470 165" stroke="#e0894a" stroke-width="2.5" fill="none" stroke-dasharray="6 5" marker-end="url(#arrowHeadSslFlow)"/>

  <!-- はがき（覗き見される） -->
  <rect x="230" y="130" width="180" height="70" rx="8" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="320" y="157" text-anchor="middle" font-size="12.5" font-weight="700" fill="#a85a1e">はがき</text>
  <text x="320" y="177" text-anchor="middle" font-size="11.5" fill="#a85a1e">名前・電話番号が丸見え</text>

  <!-- 覗き見の目アイコン -->
  <ellipse cx="320" cy="95" rx="22" ry="14" fill="#ffffff" stroke="#e0894a" stroke-width="2"/>
  <circle cx="320" cy="95" r="6" fill="#e0894a"/>
  <text x="365" y="99" font-size="11.5" fill="#a85a1e">第三者にのぞき見される危険</text>

  <rect x="480" y="130" width="200" height="70" rx="10" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="580" y="160" text-anchor="middle" font-size="13" font-weight="700" fill="#a85a1e">ブラウザに警告</text>
  <text x="580" y="182" text-anchor="middle" font-size="12" fill="#a85a1e">「保護されていない通信」</text>

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

  <!-- 下段: httpsの通信（対応・緑） -->
  <text x="150" y="275" font-size="15" font-weight="700" fill="#3f6b3c">対応：https（SSLで暗号化）</text>

  <circle cx="150" cy="330" r="26" fill="#ffffff" stroke="#a9a9a9" stroke-width="2"/>
  <circle cx="150" cy="321" r="8" fill="none" stroke="#a9a9a9" stroke-width="2"/>
  <path d="M 136 343 A 16 16 0 0 1 164 343" fill="none" stroke="#a9a9a9" stroke-width="2"/>
  <text x="150" y="370" text-anchor="middle" font-size="12" fill="#4a4a4a">お客さま</text>

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

  <!-- 封書（守られる） -->
  <rect x="230" y="295" width="180" height="70" rx="8" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="320" y="322" text-anchor="middle" font-size="12.5" font-weight="700" fill="#3f6b3c">封書（暗号化）</text>
  <text x="320" y="342" text-anchor="middle" font-size="11.5" fill="#3f6b3c">中身は第三者に読めない</text>

  <!-- 鍵マーク -->
  <circle cx="320" cy="262" r="16" fill="#79bb74"/>
  <rect x="313" y="260" width="14" height="12" rx="2" fill="#ffffff"/>
  <path d="M 316 260 L 316 253 A 4 4 0 0 1 324 253 L 324 260" fill="none" stroke="#ffffff" stroke-width="2.5"/>

  <rect x="480" y="295" width="200" height="70" rx="10" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="580" y="325" text-anchor="middle" font-size="13" font-weight="700" fill="#3f6b3c">鍵マーク表示</text>
  <text x="580" y="347" text-anchor="middle" font-size="12" fill="#3f6b3c">警告なし・安心して入力</text>

  <!-- 右側: サーバー到達 -->
  <rect x="720" y="260" width="180" height="140" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="810" y="300" text-anchor="middle" font-size="14" font-weight="700" fill="#2f6a91">ホームページ</text>
  <text x="810" y="325" text-anchor="middle" font-size="12" fill="#4a4a4a">問い合わせフォームも</text>
  <text x="810" y="345" text-anchor="middle" font-size="12" fill="#4a4a4a">安心して送信できる</text>
  <text x="810" y="372" text-anchor="middle" font-size="18" fill="#55aae2">🔒</text>

  <!-- フッター -->
  <rect x="90" y="440" width="1020" height="150" rx="14" fill="#f5f5f3"/>
  <text x="600" y="478" text-anchor="middle" font-size="16.5" font-weight="700" fill="#2d2d2d">SSLは「はがき」を「封書」に変える仕組み</text>
  <text x="600" y="508" text-anchor="middle" font-size="14" fill="#4a4a4a">httpsに対応すると通信内容が暗号化され、名前や電話番号を安心して入力してもらえる</text>
  <text x="600" y="536" text-anchor="middle" font-size="14" fill="#4a4a4a">未対応のままだと警告表示・入力の敬遠・検索評価の低下という3つの不利益につながる</text>
  <text x="600" y="562" text-anchor="middle" font-size="13" fill="#6b6b6b">おもてらいとは全プラン・全ページが自動でhttps対応</text>
</svg>
