<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="titleUnderlineShowcaseWorks" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
    <marker id="arrowShowcaseWorks" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
      <polygon points="0,0 10,5 0,10" 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">実績を登録して並び替えるまでの流れ</text>
  <rect x="410" y="62" width="380" height="4" rx="2" fill="url(#titleUnderlineShowcaseWorks)"/>

  <!-- ステップ1 -->
  <rect x="80" y="160" width="280" height="260" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <circle cx="220" cy="160" r="24" fill="#79bb74"/>
  <text x="220" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">1</text>
  <text x="220" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#3f6b3c">実績を入力する</text>
  <rect x="104" y="234" width="232" height="1" fill="#c9ddc7"/>
  <text x="120" y="264" font-size="13.5" fill="#4a4a4a">・実績画像（1枚）</text>
  <text x="120" y="290" font-size="13.5" fill="#4a4a4a">・タイトル（必須）</text>
  <text x="120" y="316" font-size="13.5" fill="#4a4a4a">・説明（任意）</text>
  <text x="120" y="342" font-size="13.5" fill="#4a4a4a">・制作年月</text>
  <rect x="104" y="364" width="232" height="30" rx="15" fill="#79bb74"/>
  <text x="220" y="384" text-anchor="middle" font-size="12.5" font-weight="700" fill="#ffffff">「新しい実績を追加」</text>

  <!-- 矢印1 -->
  <line x1="368" y1="290" x2="394" y2="290" stroke="#a9a9a9" stroke-width="2.5" marker-end="url(#arrowShowcaseWorks)"/>

  <!-- ステップ2 -->
  <rect x="414" y="160" width="280" height="260" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <circle cx="554" cy="160" r="24" fill="#55aae2"/>
  <text x="554" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">2</text>
  <text x="554" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#2f6a91">公開状態を選ぶ</text>
  <rect x="438" y="234" width="232" height="1" fill="#bcdcea"/>
  <text x="454" y="264" font-size="13.5" fill="#4a4a4a">・「下書き保存」</text>
  <text x="454" y="290" font-size="13.5" fill="#4a4a4a">・「公開して保存」</text>
  <text x="454" y="316" font-size="13.5" fill="#4a4a4a">保存ボタンそのものが</text>
  <text x="454" y="342" font-size="13.5" fill="#4a4a4a">公開状態を決める</text>
  <rect x="438" y="364" width="232" height="30" rx="15" fill="#55aae2"/>
  <text x="554" y="384" text-anchor="middle" font-size="12.5" font-weight="700" fill="#ffffff">2択で公開まで完了</text>

  <!-- 矢印2 -->
  <line x1="702" y1="290" x2="728" y2="290" stroke="#a9a9a9" stroke-width="2.5" marker-end="url(#arrowShowcaseWorks)"/>

  <!-- ステップ3 -->
  <rect x="748" y="160" width="280" height="260" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <circle cx="888" cy="160" r="24" fill="#e0894a"/>
  <text x="888" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">3</text>
  <text x="888" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#a85a1e">並び順を変更する</text>
  <rect x="772" y="234" width="232" height="1" fill="#f0d5b8"/>
  <text x="788" y="264" font-size="13.5" fill="#4a4a4a">・一覧に「#1」「#2」</text>
  <text x="788" y="290" font-size="13.5" fill="#4a4a4a">・「上へ移動」</text>
  <text x="788" y="316" font-size="13.5" fill="#4a4a4a">・「下へ移動」</text>
  <text x="788" y="342" font-size="13.5" fill="#4a4a4a">で自由に入れ替え</text>
  <rect x="772" y="364" width="232" height="30" rx="15" fill="#e0894a"/>
  <text x="888" y="384" text-anchor="middle" font-size="12.5" font-weight="700" fill="#ffffff">表示順は手動で管理</text>

  <!-- フッター -->
  <rect x="80" y="460" width="1040" height="86" rx="12" fill="#f5f5f3"/>
  <text x="600" y="494" text-anchor="middle" font-size="16" font-weight="700" fill="#2d2d2d">実績は「代表的な1枚の画像＋説明文」で仕事の成果を伝える機能</text>
  <text x="600" y="522" text-anchor="middle" font-size="13.5" fill="#4a4a4a">制作年月順の自動並びはなく、見せたい実績を先頭に意識的に配置できる</text>
</svg>
