<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="titleUnderlineFiveRoles" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <linearGradient id="hubGradFiveRoles" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowHeadFiveRoles" 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="42" text-anchor="middle" font-size="25" font-weight="700" fill="#2d2d2d">最小構成に必要な5つの役割</text>
  <rect x="440" y="58" width="320" height="4" rx="2" fill="url(#titleUnderlineFiveRoles)"/>

  <!-- 中央ハブ -->
  <ellipse cx="600" cy="300" rx="102" ry="62" fill="url(#hubGradFiveRoles)"/>
  <text x="600" y="294" text-anchor="middle" font-size="16" font-weight="700" fill="#ffffff">ホームページ</text>
  <text x="600" y="317" text-anchor="middle" font-size="13" fill="#eafaf0">最小構成の5役割</text>

  <!-- カード1: トップ（左上） -->
  <path d="M 512 260 L 340 165" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadFiveRoles)"/>
  <rect x="70" y="90" width="260" height="100" rx="13" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="200" y="122" text-anchor="middle" font-size="15" font-weight="700" fill="#3f6b3c">①トップ</text>
  <text x="200" y="147" text-anchor="middle" font-size="12.5" fill="#4a4a4a">お店の顔・全体の入口</text>
  <text x="200" y="167" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「どんなお店？」に答える</text>

  <!-- カード2: サービス（右上） -->
  <path d="M 688 260 L 860 165" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadFiveRoles)"/>
  <rect x="870" y="90" width="260" height="100" rx="13" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="1000" y="122" text-anchor="middle" font-size="15" font-weight="700" fill="#2f6a91">②サービス</text>
  <text x="1000" y="147" text-anchor="middle" font-size="12.5" fill="#4a4a4a">提供内容と料金の目安</text>
  <text x="1000" y="167" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「何をいくらで？」に答える</text>

  <!-- カード3: お店について（左） -->
  <path d="M 500 320 L 320 380" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadFiveRoles)"/>
  <rect x="60" y="360" width="260" height="100" rx="13" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <text x="190" y="392" text-anchor="middle" font-size="15" font-weight="700" fill="#a85a1e">③お店について</text>
  <text x="190" y="417" text-anchor="middle" font-size="12.5" fill="#4a4a4a">人柄・想い・信頼を伝える</text>
  <text x="190" y="437" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「どんな人？」に答える</text>

  <!-- カード4: アクセス（右） -->
  <path d="M 700 320 L 880 380" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadFiveRoles)"/>
  <rect x="880" y="360" width="260" height="100" rx="13" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <text x="1010" y="392" text-anchor="middle" font-size="15" font-weight="700" fill="#3f6b3c">④アクセス</text>
  <text x="1010" y="417" text-anchor="middle" font-size="12.5" fill="#4a4a4a">場所と行き方を案内</text>
  <text x="1010" y="437" text-anchor="middle" font-size="12.5" fill="#4a4a4a">「どこ？どう行く？」に答える</text>

  <!-- カード5: お問い合わせ（下） -->
  <path d="M 600 362 L 600 460" stroke="#a9a9a9" stroke-width="2" fill="none" marker-end="url(#arrowHeadFiveRoles)"/>
  <rect x="410" y="465" width="380" height="90" rx="13" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <text x="600" y="497" text-anchor="middle" font-size="15" font-weight="700" fill="#2f6a91">⑤お問い合わせ</text>
  <text x="600" y="522" text-anchor="middle" font-size="12.5" fill="#4a4a4a">連絡手段を用意する「質問・予約はどこから？」に答える</text>

  <!-- フッター -->
  <rect x="90" y="590" width="1020" height="60" rx="12" fill="#f5f5f3"/>
  <text x="600" y="626" text-anchor="middle" font-size="15.5" font-weight="700" fill="#2d2d2d">ページ数より、5つの役割が過不足なくそろっていることが大事</text>
</svg>
