<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="titleUnderlineCustomizeDesign" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="hubGradCustomizeDesign" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadCustomizeDesign" 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">デザインを決める3つの要素</text>
  <rect x="460" y="62" width="280" height="4" rx="2" fill="url(#titleUnderlineCustomizeDesign)"/>

  <!-- 中央ハブ -->
  <ellipse cx="600" cy="300" rx="120" ry="74" fill="url(#hubGradCustomizeDesign)"/>
  <text x="600" y="288" text-anchor="middle" font-size="17" font-weight="700" fill="#ffffff">「デザイン」画面</text>
  <text x="600" y="313" text-anchor="middle" font-size="13" fill="#eafaf0">文章・写真はそのまま</text>
  <text x="600" y="332" text-anchor="middle" font-size="13" fill="#eafaf0">保存ですぐ公開に反映</text>

  <!-- スポーク1: 左上 テンプレート -->
  <path d="M 500 260 L 340 185" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadCustomizeDesign)"/>
  <rect x="90" y="95" width="300" height="130" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="240" y="128" text-anchor="middle" font-size="16" font-weight="700" fill="#3f6b3c">テンプレート（3種類）</text>
  <text x="240" y="154" text-anchor="middle" font-size="13" fill="#4a4a4a">ウォーム・クラシック・モダン</text>
  <text x="240" y="176" text-anchor="middle" font-size="13" fill="#4a4a4a">レイアウトと余白をまとめて</text>
  <text x="240" y="198" text-anchor="middle" font-size="13" fill="#4a4a4a">切り替え。何度でも試せる</text>

  <!-- スポーク2: 右上 カラー -->
  <path d="M 700 260 L 860 185" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadCustomizeDesign)"/>
  <rect x="810" y="95" width="300" height="130" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="960" y="128" text-anchor="middle" font-size="16" font-weight="700" fill="#2f6a91">カラー（5項目）</text>
  <text x="960" y="154" text-anchor="middle" font-size="13" fill="#4a4a4a">メイン・サブ・アクセント等を</text>
  <text x="960" y="176" text-anchor="middle" font-size="13" fill="#4a4a4a">個別指定、または24種類の</text>
  <text x="960" y="198" text-anchor="middle" font-size="13" fill="#4a4a4a">プリセットから一括選択</text>

  <!-- スポーク3: 下 フォント -->
  <path d="M 600 374 L 600 415" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadCustomizeDesign)"/>
  <rect x="360" y="420" width="480" height="120" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="600" y="450" text-anchor="middle" font-size="16" font-weight="700" fill="#a85a1e">フォント（4グループ16書体）</text>
  <text x="600" y="476" text-anchor="middle" font-size="13" fill="#4a4a4a">ゴシック・明朝・丸ゴシック・デザイン書体</text>
  <text x="600" y="498" text-anchor="middle" font-size="13" fill="#4a4a4a">既定は「Zen Kaku Gothic New」。業種の印象に合わせて選ぶ</text>

  <!-- フッター -->
  <rect x="90" y="580" width="1020" height="65" rx="12" fill="#f5f5f3"/>
  <text x="600" y="618" text-anchor="middle" font-size="15.5" font-weight="700" fill="#2d2d2d">プレビューで確認しながら、保存すれば公開サイトに即反映される</text>
</svg>
