create-specment 0.2.8 → 0.3.0

package/templates/docs/01-overview/odsc.mdx

@@ -0,0 +1,72 @@
+---
+sidebar_position: 3
+tags:
+  - ODSC
+---
+import TBD from '@site/src/components/TBD';
+
+# ODSC
+
+<!--
+TBDの使い方
+  <TBD/> コンポーネントは未確定項目を可視化するための占位マークです
+  執筆完了後はimport文といっしょにこのコメントも必ず削除すること
+-->
+
+## ODSCとは？ {#what-is-odsc}
+1. 目的(O)、成果物(D)、成功基準(SC)のこと
+1. 目的と手段(システム)を分け、開発対象を明確化する
+    1. プロジェクトを進めていく中で完了までに目標にブレをなくすのが目的
+
+## 目的 - Objectives {#objectives}
+
+:::tip TIP
+1. このプロジェクトが完了した時に達成したい目標を定量的に記述する
+1. ビジネスとしての目標とシステムとしての目標を書く
+    1. ビジネス目標
+        1. システムを含む全体像としてお客様や解決したい問題・課題を明記する
+        1. システムはこの目標を達成するための手段なので、明記することでブレをなくす
+    1. システムの目標
+        1. ソリューションの中でこのシステムが担う部分、システム化することで達成したい目標を明記する
+1. 記載できたらこのtipブロックを削除する
+:::
+
+1. ビジネス目標
+    1. <TBD/>
+1. システム目標
+    1. <TBD/>
+
+### 非ゴール - Out of Scope {#out-of-scope}
+1. 例: モバイルネイティブアプリの UI 実装
+1. 例: 店舗在庫とのリアルタイム同期
+
+## 成果物 - Deliverables {#deliverables}
+
+:::tip TIP
+1. 基本はシステムそのもの、そのマニュアルなど。プロジェクト完了後にお客様へ提供するもの
+1. 設計書を要求された場合、その意図を明確にする
+    1. 他社開発ベンダーへの引き継ぎの場合 -> このドキュメント含めたrepositoryで済む
+    1. Officeドキュメント、pdfを要求された場合の対応を考慮しておく
+1. 反対にシステム化しないことも明記する
+    1. その理由も明記し、プロジェクト途中でタスク追加されるリスクを減らす
+1. 記載できたらこのtipブロックを削除する
+:::
+
+1. <TBD/> 参照
+
+## 成功基準 - Success Criteria {#success-criteria}
+
+:::tip TIP
+1. 定量目標。数値による結果で判定できるようにすることで評価できるようにする
+1. 例
+    1. ピーク時のスケールサーバー数がx台以下、利用額がxxxドル以下、など
+    1. リリース後1ヶ月以内にサーバーエラーによるシステム断時間がx時間以下
+1. プロジェクト中盤で達成が難しいと分かった場合はその時点で再定義し、お客様と合意を得る
+1. 記載できたらこのtipブロックを削除する
+:::
+
+| # | 指標 | 目標値 | 期限 | 測定方法 |
+| - | ---- | ------ | ---- | -------- |
+| SC-01 | 例: 決済成功率 | 95 %以上 | GA +1 か月 | Datadog APM |
+| SC-02 | 例: 平均応答時間 | 200 ms 以下 | ベータ期間 | k6 & Grafana |
+| SC-03 | 例: NPS | +15 | GA +3 か月 | アンケート |

package/templates/docs/01-overview/roadmap.mdx

@@ -0,0 +1,27 @@
+---
+sidebar_position: 12
+tags:
+  - Overview
+  - Roadmap
+---
+# ロードマップ {#roadmap}
+
+import Gantt from '@site/static/img/gantt.drawio.svg';
+
+## マスタースケジュール {#master-schedule}
+<Gantt aria-label='マスタースケジュール' width='100%' height='auto' role='img' />
+
+## マイルストーン {#milestones}
+
+| フェーズ | 期間 | 主な成果物 |
+| ------- | ---- | ---------- |
+| 準備 | 2025-05 | 要件定義完了 |
+| 開発 | 2025-06 〜 2025-09 | Betaリリース |
+
+## リリース計画 {#release-plan}
+1. Alpha: 2025-07
+1. Beta: 2025-09
+1. GA: 2025-12
+
+## 依存関係 {#dependencies}
+1. 決済ゲートウェイv2公開

package/templates/docs/01-overview/system-context.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_position: 13
+tags:
+  - Overview
+  - Architecture
+---
+
+# システムコンテキスト {#system-context}
+
+## コンテキスト図 {#context-diagram}
+```pumld
+@startuml
+!include <C4/C4_Container>
+System_Boundary(ec, "EC System") {
+  Container(web, "Web Frontend")
+  Container(api, "API Server")
+}
+System(billing, "Payment Gateway")
+Rel(web, api, "HTTPS/JSON")
+Rel(api, billing, "REST")
+@enduml
+```

package/templates/docs/01-overview/to-be.mdx

@@ -0,0 +1,102 @@
+---
+sidebar_position: 5
+tags:
+  - To-Be
+---
+import TBD from '@site/src/components/TBD';
+
+# To‑Be - 目指すべき姿
+
+<!--
+TBDの使い方
+  <TBD/> コンポーネントは未確定項目を可視化するための占位マークです
+  執筆完了後はimport文といっしょにこのコメントも必ず削除すること
+-->
+
+## 概要 {#target-overview}
+1. 本章で示す「理想状態」と As‑Is との差分を概観する
+1. ビジネス価値・ユーザ価値・システム観点を 1‒2 文でまとめる
+
+## 改善後業務フロー {#business-flow}
+
+:::tip
+1. BPMN やスイムレーン図で将来の業務プロセスを可視化
+1. PlantUML を直接埋め込むか、drawio・外部リンクでも可
+:::
+
+```pumld
+@startuml
+skinparam ParticipantPadding 20
+skinparam Shadowing false
+
+|顧客|
+start
+:商品閲覧;
+:ワンクリック購入;
+|ECシステム|
+:在庫自動確保;
+:決済トークン発行;
+|決済ゲートウェイ|
+:即時決済承認;
+|ECシステム|
+:出荷指示;
+|倉庫WMS|
+:自動ピッキング;
+|顧客|
+stop
+@enduml
+```
+
+## システム全体像 {#system-architecture}
+
+```pumld
+@startuml
+!include <C4/C4_Container>
+
+System_Boundary(ec, "EC System") {
+  Container(web, "Next.js Frontend", "TypeScript/React")
+  Container(api, "API Server", "Go + gRPC")
+  ContainerDb(db, "PostgreSQL", "Cloud SQL", "商品・注文DB")
+}
+System_Ext(billing, "Payment Gateway")
+System_Ext(cd, "CDN")
+
+Rel(web, api, "gRPC+JSON")
+Rel(api, db, "JDBC")
+Rel(api, billing, "REST")
+Rel(web, cd, "HTTPS (static assets)")
+@enduml
+```
+
+1. <TBD/> (詳細なサブシステム図や構成表を追加)
+
+## 主要機能一覧 {#features}
+
+| # | 機能 | 概要 | 優先度 |
+| - | ---- | ---- | ------ |
+| F‑01 | リアルタイム在庫同期 | ERP から Webhook で在庫更新 | High |
+| F‑02 | ワンクリック購入 | 顧客の決済トークンを再利用 | High |
+| F‑03 | レコメンド | 行動ログを用いた個別提案 | Medium |
+
+## 非機能要求サマリ {#non-functional-requirements}
+
+| 項目 | 目標値 | 備考 |
+| ---- | ------ | ---- |
+| 可用性 | 99.9 %以上 | マルチ AZ |
+| 性能 | 平均応答 200 ms 以下 | Peak 500 ms 以下 |
+| セキュリティ | OWASP Top‑10 準拠 | WAF / CSP |
+
+## 移行方針・ロードマップ {#migration-strategy}
+
+1. **フェーズ1: MVP**
+    1. カタログ閲覧 + 決済 (限定 SKU)
+1. **フェーズ2: Full Launch**
+    1. 全 SKU 移行・レコメンド ON
+1. **フェーズ3: Continuous Improvement**
+    1. A/B テスト・パフォーマンス最適化
+
+## 期待効果・成功要因 {#expected-effects}
+
+1. 売上 +20 %、離脱率 15 % → 8 %
+1. 運用工数 月 40 h 削減
+1. ユーザ満足度 (NPS) +15

package/templates/docs/02-requirements/_category_.yaml

@@ -0,0 +1,2 @@
+label: '要件定義'
+position: 1

package/templates/docs/02-requirements/functional/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "要件定義一覧",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "こんなことやあんなこと"
+  }
+}

package/templates/docs/02-requirements/functional/_req-template.mdx

@@ -0,0 +1,46 @@
+---
+id: req-001
+title: 要求タイトル
+sidebar_label: REQ-001：要求タイトル
+description: 要求の簡単な説明
+tags: [タグ1, タグ2]
+urgency: 5
+importance: 5
+draft: true
+---
+import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+
+<!-- <div style={{ marginBottom: "1rem" }}>
+  {frontMatter.tags.map((tag) => (
+    <Tag key={tag} name={tag} />
+  ))}
+</div> -->
+
+## 概要
+<!-- 1-2文で要求の概要を記述 -->
+
+## 詳細要件
+<!-- 箇条書きで具体的な要件を記述 -->
+- 要件1
+- 要件2
+- 要件3
+
+## 受け入れ基準
+<!-- この要求が満たされたと判断できる基準を記述 -->
+- [ ] 基準1
+- [ ] 基準2
+
+## 関連する非機能要件
+<!-- 関連するNFRへのリンク -->
+- [NFR-001：パフォーマンス要件](../non-functional/nfr-001.mdx)
+
+## 参考情報
+<!-- 追加の情報、図表、リンクなど -->
+
+export const changes = [
+  {
+    date: "2025-01-02",
+    author: "作成者名",
+    changes: "初版作成",
+  },
+]

package/templates/docs/02-requirements/functional/req-001.mdx

@@ -0,0 +1,52 @@
+---
+id: req-001
+title: ユーザー認証機能
+sidebar_label: REQ-001：ユーザー認証
+description: システムへのアクセスを制御するための認証機能
+tags: [認証, セキュリティ, ユーザー管理]
+urgency: 7
+importance: 8
+---
+import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+
+<PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+
+<!-- <div style={{ marginBottom: "1rem" }}>
+  {frontMatter.tags.map((tag) => (
+    <Tag key={tag} name={tag} />
+  ))}
+</div> -->
+
+## 概要
+システムへのアクセスを制御するためのユーザー認証機能を提供する。
+
+## 詳細要件
+1. ユーザーはメールアドレスとパスワードでログインできること
+1. パスワードは8文字以上であること
+1. 2要素認証に対応すること
+1. パスワードリセット機能を提供すること
+
+## 受け入れ基準
+- [ ] 正しい認証情報でログインできる
+- [ ] 誤った認証情報ではログインできない
+- [ ] パスワードリセットメールが送信される
+- [ ] 2要素認証が正常に機能する
+
+## 関連する非機能要件
+1. [NFR-001：セキュリティ要件](../non-functional/nfr-001.mdx)
+1. [NFR-002：パフォーマンス要件](../non-functional/nfr-002.mdx)
+
+## 参考情報
+- [OWASP認証のベストプラクティス](https://owasp.org/)
+
+## 更新履歴
+
+export const changes = [
+  {
+    date: "2025-01-02",
+    author: "作成者名",
+    changes: "初版作成",
+  },
+]
+
+{/* <ChangeHistoryComponent changes={changes} /> */}

package/templates/docs/02-requirements/index.mdx

@@ -0,0 +1,14 @@
+---
+id: index
+sidebar_position: 1
+---
+# 要件定義
+
+:::note Note
+1. 編集途中
+:::
+
+:::tip Tip
+1. 要件定義の目的はシステムが完成した時のイメージを共有すること
+1. 成果物の認識がブレてしまうと、時間のロス、果ては作り直しになってしまうこともある
+:::

package/templates/docs/02-requirements/non-functional/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "非機能要件一覧",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "非機能のあれやこれ"
+  }
+}

package/templates/docs/02-requirements/non-functional/_nfr-template.mdx

@@ -0,0 +1,42 @@
+---
+id: nfr-template
+title: 非機能要件テンプレート
+sidebar_label: NFR-XXX：タイトル
+description: 非機能要件の説明
+tags: [タグ1, タグ2]
+draft: true
+---
+
+import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+import { ChangeHistoryComponent } from '@site/src/components/ChangeHistory';
+
+<PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+
+## 概要
+<!-- 非機能要件の概要を記述 -->
+
+## 詳細要件
+### カテゴリ1
+<!-- 要件の詳細を記述 -->
+
+### カテゴリ2
+<!-- 要件の詳細を記述 -->
+
+## 測定方法
+<!-- 要件の達成を測定する方法を記述 -->
+
+## 制約条件
+<!-- 制約条件があれば記述 -->
+
+## 関連する機能要件
+<!-- 関連する機能要件へのリンク -->
+
+export const changes = [
+  {
+    date: "2025-01-02",
+    author: "作成者名",
+    changes: "初版作成",
+  },
+]
+
+<ChangeHistoryComponent changes={changes} />

package/templates/docs/02-requirements/non-functional/nfr-001.mdx

@@ -0,0 +1,57 @@
+---
+id: nfr-001
+title: セキュリティ要件
+sidebar_label: NFR-001：セキュリティ要件
+description: システム全体のセキュリティに関する非機能要件
+tags: [セキュリティ, SLA]
+urgency: 9
+importance: 9
+---
+
+import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+
+<PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+
+## 概要
+システム全体のセキュリティに関する要件を定義する。
+
+## 性能要件
+### レスポンス時間
+1. 画面表示：2秒以内
+1. API応答：1秒以内
+1. バッチ処理：指定された時間枠内で完了
+
+### スループット
+1. 同時接続ユーザー数：1000ユーザー
+1. トランザクション処理：100 TPS
+
+### リソース使用
+1. CPU使用率：平常時80%以下
+1. メモリ使用率：平常時70%以下
+1. ストレージ使用率：80%以下
+
+## 監視要件
+1. APMツールによる常時監視
+1. パフォーマンスメトリクスの収集
+1. アラート閾値の設定
+
+## 測定方法
+1. 負荷テストツール：JMeter
+1. 監視ツール：Datadog
+1. 測定間隔：5分
+
+## 関連する機能要件
+1. [REQ-001：ユーザー認証](../functional/req-001.mdx)
+
+export const changes = [
+  {
+    date: "2024-01-15",
+    author: "鈴木次郎",
+    changes: "監視要件の追加",
+  },
+  {
+    date: "2024-01-01",
+    author: "山田太郎",
+    changes: "初版作成",
+  },
+]

package/templates/docs/02-requirements/non-functional/nfr-002.mdx

@@ -0,0 +1,57 @@
+---
+id: nfr-002
+title: システムパフォーマンス要件
+sidebar_label: NFR-002：パフォーマンス
+description: システム全体のパフォーマンスに関する非機能要件
+tags: [パフォーマンス, SLA]
+urgency: 4
+importance: 8
+---
+
+import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+
+<PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+
+## 概要
+システム全体のパフォーマンスに関する要件を定義する。
+
+## 性能要件
+### レスポンス時間
+1. 画面表示：2秒以内
+1. API応答：1秒以内
+1. バッチ処理：指定された時間枠内で完了
+
+### スループット
+1. 同時接続ユーザー数：1000ユーザー
+1. トランザクション処理：100 TPS
+
+### リソース使用
+1. CPU使用率：平常時80%以下
+1. メモリ使用率：平常時70%以下
+1. ストレージ使用率：80%以下
+
+## 監視要件
+1. APMツールによる常時監視
+1. パフォーマンスメトリクスの収集
+1. アラート閾値の設定
+
+## 測定方法
+1. 負荷テストツール：JMeter
+1. 監視ツール：Datadog
+1. 測定間隔：5分
+
+## 関連する機能要件
+1. [REQ-001：ユーザー認証](../functional/req-001.mdx)
+
+export const changes = [
+  {
+    date: "2024-01-15",
+    author: "鈴木次郎",
+    changes: "監視要件の追加",
+  },
+  {
+    date: "2024-01-01",
+    author: "山田太郎",
+    changes: "初版作成",
+  },
+]

package/templates/docs/03-external/business-model.mdx

@@ -0,0 +1,14 @@
+---
+sidebar_position: 2
+hide_table_of_contents: true
+---
+# ビジネスモデル図
+
+import BusinessModel from '@site/static/img/business-model.drawio.svg';
+
+<BusinessModel aria-label='ビジネスモデル' width='100%' height='auto' role='img' />
+
+1. 参考
+    1. https://drawio-app.com/blog/business-model-canvas/
+    1. note: 『ビジネスの仕組みがわかる 図解のつくりかた』全文公開
+        1. https://note.com/bizgram/n/n3dbed12f95ea

package/templates/docs/03-external/img/business-model-by-claude.xml

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" viewBox="0 0 700 600" style="background-color: #ffecdb;">
+  <!-- 人物アイコン：販売者 -->
+  <circle cx="175" cy="80" r="30" fill="none" stroke="black" stroke-width="2" />
+  <path d="M 175 110 L 175 160 M 145 130 L 205 130" fill="none" stroke="black" stroke-width="2" />
+  <text x="175" y="190" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">販売者</text>
+  <text x="175" y="215" text-anchor="middle" font-family="Arial" font-size="14">商品を売りたい</text>
+
+  <!-- 人物アイコン：購入者 -->
+  <circle cx="525" cy="80" r="30" fill="none" stroke="black" stroke-width="2" />
+  <path d="M 525 110 L 525 160 M 495 130 L 555 130" fill="none" stroke="black" stroke-width="2" />
+  <text x="525" y="190" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">購入者</text>
+  <text x="525" y="215" text-anchor="middle" font-family="Arial" font-size="14">商品を買いたい</text>
+
+  <!-- Amazon -->
+  <rect x="300" y="250" width="100" height="100" rx="10" ry="10" fill="white" stroke="black" stroke-width="2" />
+  <text x="350" y="290" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">Amazon</text>
+  <text x="350" y="310" text-anchor="middle" font-family="Arial" font-size="12">プラットフォーム</text>
+  <text x="350" y="330" text-anchor="middle" font-family="Arial" font-size="12">運営</text>
+
+  <!-- 倉庫アイコン -->
+  <rect x="100" y="400" width="80" height="60" fill="white" stroke="black" stroke-width="2" />
+  <polygon points="100,400 140,360 180,400" fill="white" stroke="black" stroke-width="2" />
+  <rect x="115" y="420" width="25" height="25" fill="none" stroke="black" stroke-width="1" />
+  <text x="140" y="490" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">FBA倉庫</text>
+
+  <!-- 商品アイコン -->
+  <circle cx="525" cy="400" r="40" fill="#b7e1a1" stroke="black" stroke-width="2" />
+  <text x="525" y="405" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">商品</text>
+
+  <!-- Amazon物流センター -->
+  <rect x="300" y="500" width="100" height="70" fill="white" stroke="black" stroke-width="2" />
+  <rect x="310" y="510" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <rect x="340" y="510" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <rect x="370" y="510" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <rect x="310" y="540" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <rect x="340" y="540" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <rect x="370" y="540" width="20" height="20" fill="none" stroke="black" stroke-width="1" />
+  <text x="350" y="590" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">物流センター</text>
+
+  <!-- 矢印と説明 -->
+  <!-- 販売者 → Amazon -->
+  <path d="M 175 220 L 175 260 L 295 260" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="200" y="250" text-anchor="start" font-family="Arial" font-size="14">出品</text>
+  <circle cx="235" cy="260" r="15" fill="#b7e1a1" stroke="black" stroke-width="1" />
+  <!-- 販売者 → FBA倉庫 -->
+  <path d="M 140 220 L 140 400" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="100" y="300" text-anchor="middle" font-family="Arial" font-size="14">商品</text>
+  <text x="100" y="320" text-anchor="middle" font-family="Arial" font-size="14">発送</text>
+
+  <!-- Amazon → 購入者 -->
+  <path d="M 405 260 L 525 260 L 525 220" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="465" y="250" text-anchor="middle" font-family="Arial" font-size="14">販売</text>
+  <circle cx="465" cy="260" r="15" fill="#b7e1a1" stroke="black" stroke-width="1" />
+
+  <!-- Amazon → 商品 -->
+  <path d="M 400 300 L 525 300 L 525 355" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="465" y="320" text-anchor="middle" font-family="Arial" font-size="14">商品情報</text>
+
+  <!-- FBA倉庫 → 物流センター -->
+  <path d="M 140 460 L 140 535 L 295 535" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="200" y="525" text-anchor="middle" font-family="Arial" font-size="14">在庫移動</text>
+
+  <!-- 物流センター → 購入者 -->
+  <path d="M 405 535 L 580 535 L 580 220" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
+  <text x="500" y="555" text-anchor="middle" font-family="Arial" font-size="14">配送</text>
+
+  <!-- 購入者 → Amazon -->
+  <path d="M 490 190 L 350 190 L 350 245" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)" />
+  <text x="400" y="180" text-anchor="middle" font-family="Arial" font-size="14">支払い</text>
+  <text x="400" y="200" text-anchor="middle" font-family="Arial" font-size="14">(¥)</text>
+
+  <!-- Amazon → 販売者 -->
+  <path d="M 350 155 L 350 130 L 210 130" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)" />
+  <text x="280" y="120" text-anchor="middle" font-family="Arial" font-size="14">売上金</text>
+  <text x="280" y="140" text-anchor="middle" font-family="Arial" font-size="14">(手数料差引後)</text>
+
+  <!-- マーケットプレイス手数料の説明 -->
+  <rect x="450" y="440" width="180" height="70" fill="#ffcccc" stroke="black" stroke-width="1" rx="5" ry="5" />
+  <text x="540" y="465" text-anchor="middle" font-family="Arial" font-size="14">販売手数料</text>
+  <text x="540" y="485" text-anchor="middle" font-family="Arial" font-size="14">販売価格の8-15%</text>
+
+  <!-- FBAの説明 -->
+  <rect x="50" y="520" width="180" height="60" fill="#ffcccc" stroke="black" stroke-width="1" rx="5" ry="5" />
+  <text x="140" y="545" text-anchor="middle" font-family="Arial" font-size="14">FBA(フルフィルメント)</text>
+  <text x="140" y="565" text-anchor="middle" font-family="Arial" font-size="14">保管・配送代行サービス</text>
+
+  <!-- 矢印マーカー -->
+  <defs>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
+      <path d="M0,0 L0,6 L9,3 z" fill="black" />
+    </marker>
+  </defs>
+
+  <!-- Amazonのロゴ -->
+  <g transform="translate(320, 275) scale(0.03)">
+    <path d="M1858.7,806c-48,35.3-117.4,54-177.3,54c-84,0-159.6-31-216.8-82.7c-4.5-4-0.5-9.5,4.9-6.4 c62.3,36,139.2,57.7,218.6,57.7c53.7,0,112.7-11.1,167.1-34c8.2-3.5,15,5.3,7.1,11.4H1858.7z" fill="black"/>
+    <path d="M1900,758.2c-6.1-7.8-40.6-3.7-56.1-1.9c-4.7,0.6-5.4-3.5-1.2-6.5c27.5-19.3,72.6-13.7,77.8-7.3 c5.2,6.5-1.4,51.1-26.8,72.4c-3.9,3.3-7.6,1.5-5.9-2.8C1893.6,797.1,1906.1,766,1900,758.2L1900,758.2z" fill="black"/>
+    <path d="M1696.1,482.8v-58.5c0-8.9,6.7-14.8,14.8-14.8h263.1c8.4,0,15.1,6,15.1,14.8V467c0,8.4-7.2,19.4-19.7,36.8 l-136.2,194.6c50.6-1.2,104-6.3,149.8-31.5c10.3-5.7,13.1-14,13.9-22.2v-60.6c0-8.3,6.9-15.1,15.3-15.1h50.4 c8.6,0,15.7,6.7,15.7,15.1v101.4c0,8-5.5,17.7-15.1,24.3c-39.7,33.1-86.5,48.6-127.9,60.5c-9.7,2.7-15.7,5.4-22.7,9.9 c-15.1,10-38.6,15.7-56.3,15.7H1710c-8.3,0-15.1-6.7-15.1-15.1v-56.8c0-10.8,0.8-18.5,7.8-28.7L1855,537h-144.3 C1702.6,497.9,1695.9,491.2,1696.1,482.8z" fill="black"/>
+    <path d="M676.3,802.8h-54.3c-5.2-0.3-9.3-4.3-9.7-9.2V488.9c0-5.6,4.7-10,10.4-10h50.6c5.2,0.3,9.5,4.3,9.9,9.3v39.8h1 c13.2-35.2,38.1-51.6,71.6-51.6c34,0,55.3,16.4,70.6,51.6c13.2-35.2,43.1-51.6,75.1-51.6c22.8,0,47.6,9.4,62.8,30.4 c17.2,23.3,13.7,57.1,13.7,86.9v174.9c0,5.6-4.7,10-10.4,10h-54.1c-5.4-0.3-9.7-4.7-9.7-10V577.7c0-13,1.2-45.5-1.7-57.9 c-4.5-20.8-18-26.6-35.4-26.6c-14.6,0-29.8,9.7-36,25.3c-6.2,15.6-5.6,41.6-5.6,59.2v215.2c0,5.6-4.7,10-10.4,10h-54.1 c-5.5-0.3-9.7-4.7-9.7-10V577.7c0-34.4,5.7-85-36.9-85c-43.1,0-41.4,49.3-41.4,85v215.2C686.8,798.4,682,802.8,676.3,802.8z" fill="black"/>
+    <path d="M2139,469.3c80.3,0,123.7,68.9,123.7,156.6c0,84.7-48,152-123.7,152c-78.8,0-121.8-68.9-121.8-154.8 C2017.2,537.3,2060.9,469.3,2139,469.3z M2139,517.7c-39.9,0-42.4,54.4-42.4,88.3c0,33.9-0.5,106.4,42,106.4 c42,0,44.1-58.7,44.1-94.3c0-23.5-1-51.6-8.1-73.9C2167.1,526.6,2154.9,517.7,2139,517.7z" fill="black"/>
+    <path d="M2469.9,802.8h-53.9c-5.4-0.3-9.7-4.7-9.7-10V489.6c0.4-5,4.8-8.9,10-8.9h50.2c4.5,0.2,8.3,3.3,9.3,7.5v46.9h1 c15.1-38,36.3-56.3,73.6-56.3c24.2,0,47.8,8.7,62.9,32.7c14.1,22.2,14.1,59.6,14.1,86.4v173.3c-0.6,4.8-4.9,8.6-10,8.6h-54.3 c-4.8-0.3-8.8-3.9-9.5-8.6V611.7c0-33.9,3.9-83.7-37.9-83.7c-14.7,0-28.2,9.9-35,24.8c-8.5,19-9.7,37.9-9.7,58.9v181.2 C2480,798.4,2475.3,802.8,2469.9,802.8L2469.9,802.8z" fill="black"/>
+    <path d="M1082.1,651.2c0,21.2,0.5,38.9-10.2,57.7c-8.6,15.4-22.3,24.8-37.6,24.8c-20.8,0-33-15.9-33-39.4 c0-46.3,41.5-54.7,80.8-54.7V651.2z M1136.9,802.4c-3.6,3.2-8.7,3.4-12.7,1.3c-17.9-14.9-21.1-21.8-30.9-35.9 c-29.5,30.1-50.5,39.1-88.7,39.1c-45.3,0-80.5-28-80.5-83.8c0-43.6,23.6-73.4,57.4-87.8c29.2-12.8,70-15.1,101.2-18.6v-7 c0-12.8,1-28-6.5-39.1c-6.5-9.9-19.1-14-30.2-14c-20.5,0-38.8,10.5-43.3,32.3c-0.9,4.8-4.4,9.5-9.2,9.7l-52.5-5.7 c-4.4-1-9.3-4.6-8.1-11.4c12.1-63.9,69.8-83.1,121.3-83.1c26.4,0,60.9,7,81.7,27c26.4,24.6,23.9,57.4,23.9,93.1v84.4 c0,25.3,10.5,36.4,20.3,50.1c3.4,4.8,4.2,10.6-0.2,14.2C1168,775.9,1148.7,794.2,1136.9,802.4L1136.9,802.4z" fill="black"/>
+    <path d="M345.5,651.2c0,21.2,0.5,38.9-10.2,57.7c-8.6,15.4-22.2,24.8-37.6,24.8c-20.8,0-33-15.9-33-39.4 c0-46.3,41.5-54.7,80.8-54.7V651.2z M400.3,802.4c-3.6,3.2-8.7,3.4-12.7,1.3c-17.9-14.9-21.1-21.8-30.9-35.9 c-29.5,30.1-50.5,39.1-88.7,39.1c-45.3,0-80.5-28-80.5-83.8c0-43.6,23.6-73.4,57.4-87.8c29.2-12.8,70-15.1,101.2-18.6v-7 c0-12.8,1-28-6.5-39.1c-6.5-9.9-19.1-14-30.2-14c-20.5,0-38.8,10.5-43.3,32.3c-0.9,4.8-4.4,9.5-9.2,9.7l-52.5-5.7 c-4.4-1-9.3-4.6-8.1-11.4c12.1-63.9,69.8-83.1,121.3-83.1c26.4,0,60.9,7,81.7,27c26.4,24.6,23.9,57.4,23.9,93.1v84.4 c0,25.3,10.5,36.4,20.3,50.1c3.4,4.8,4.2,10.6-0.2,14.2C431.4,775.9,412.1,794.2,400.3,802.4L400.3,802.4z" fill="black"/>
+  </g>
+</svg>