til/…/applied-sciences/design/design-system-transfer

design-system-transfer.mdupdated 2026-07-3111,117 chars

DESIGN.md ベースのデザイン移植プレイブック

軽い気持ちで DESIGN-elevenlabs-io.md を生成したあと、これを SCAS と次のコーポレートサイトへ移植するという前提のところで一度立ち止まり、2026 年 5 月時点での DesignMD（デザインエムディー）まわりのエコシステム（＝周辺のツール・サービス群）と、生成された仕様に「欠けているもの」を記録としてまとめた。

1. designmd.me というプロダクトの実体

1.1 何であるか

DesignMD は、任意の Web サイトの URL を貼り付けると DESIGN.md 形式のデザインシステム仕様（＝色・書体・余白・角丸などの決まりごとを、機械が読める 1 枚のテキストにまとめたもの）を返す AI サービスである。Vercel（ヴァーセル＝ Web アプリのホスティング大手）上で動く SPA（Single Page Application ＝ページ遷移せず画面を書き換える方式の Web アプリ）で、ランディングページは https://designmd.me/、CLI（Command Line Interface ＝端末からコマンドで操作する方式）のガイドは https://designmd.me/cli にある（環境によっては Vercel のセキュリティチェックポイントに阻まれ、直接取得できない）。Product Hunt（＝新作プロダクトを公開・投票する掲示サイト）の掲載ページ https://www.producthunt.com/products/designmd-2 は作者を Aditya Raj とし、タグラインを「Turn any website into an AI-ready design system」、価格を明確に Free と記載している。

運営は Crowdlinker（クラウドリンカー＝トロント拠点のデジタルプロダクト／ベンチャースタジオ、https://www.crowdlinker.com）。同社の X アカウントが https://x.com/crowdlinker/status/2042677716940452129 で告知している。「We just shipped DesignMD. Paste any website URL → get a complete DESIGN.md file in seconds. Color palette, typography, design tokens — extracted by AI and ready for your coding agents. Free. No sign-up.」。つまり、Aditya Raj をリードメーカーとして Crowdlinker が外部に配布している OSS／無料 SaaS（Software as a Service ＝ブラウザから使うクラウドサービス）、と読むのが一貫した理解になる。

1.2 解決している課題

「Claude Code や Cursor が生成する UI は AI スラップ（AI slop ＝ AI が量産する凡庸な見た目。紫のグラデーション、絵文字の多用、とりあえず Inter を当てる、といった特徴）になる」という課題に対し、実在の参照サイトのデザイントークン（design token ＝色や余白などの値に名前を付けて再利用可能にしたもの）を一発で抽出し、CLAUDE.md や .cursor/rules の隣に置くことで、エージェントの出力をそのブランド側へ引き寄せる。Google が Stitch（スティッチ）で標準化した DESIGN.md 形式（https://github.com/google-labs-code/design.md）に乗っているため、出力は素の Claude / Cursor / Cline でそのまま読める。

1.3 出力フォーマット

VoltAgent の awesome-design-md（https://github.com/VoltAgent/awesome-design-md）と designmd.app のガイド（https://designmd.app/what-is-design-md/）が一致して示すとおり、Stitch の DESIGN.md 標準は 8〜9 セクションからなる。

Visual Theme & Atmosphere（視覚テーマと雰囲気）
Color Palette & Roles（配色と役割）
Typography Rules（書体規則）
Component Stylings（部品のスタイル）
Layout Principles（レイアウト原則）
Depth & Elevation（奥行きと重なり）
Do's and Don'ts（推奨と禁止）
Responsive Behavior（画面幅への追従）
Agent Prompt Guide（エージェントへの指示文の書き方）

DesignMD の出力もこの構造に従っており、生成された DESIGN-elevenlabs-io.md も同じく 9 セクション構成になっている。

1.4 価格とクォータ

Crowdlinker の告知も Product Hunt も Free / No sign-up を明示している（2026 年 5 月時点）。CLI がログインを要求する理由は「ユーザー単位のクォータ（quota ＝利用量の上限枠）／レート制限の管理のため」と読むのが自然で、無料枠の範囲で呼び出す前提になる。商用で要求の厳しいサイトでは、Vercel のレート制限に当たることを前提に、ローカルへキャッシュしておくほうが安全である。

1.5 プライバシー上の含意

投入する URL は公開サイトに限ること。社内ステージング（＝公開前の検証環境）や認証が必要なページを渡すと、DesignMD のバックエンドが puppeteer / playwright（＝ブラウザを自動操作するツール）のようなもので到達を試み、失敗するか、あるいは漏らすことになる
スクリーンショットと DOM（Document Object Model ＝ページの構造データ）のダンプがサーバー側へ送られるため、未公開のデザインを未公開のまま投入してはならない（自社サイトであっても本番 URL に限る）
出力される .md は色・書体・シャドウの値のテキストなので、成果物そのものには機密性がほぼ含まれない。コミットして差し支えない水準である

2. designmd.me/cli の使い方

2.1 注意：直接検証できなかった部分

https://designmd.me/cli への WebFetch は Vercel のボット対策に阻まれ、この作業では原文を取得できなかった。以下は同等の DESIGN.md 系ツール（@google/design.md、design-extract、designmd.ai など）と Crowdlinker の告知から推定した標準的な使い方なので、実際のフラグ名とパッケージ名は公式ページで確認すること。作業指示に出てくる designmdme --website <url> という形は、Crowdlinker 自身が提供しているラッパー（wrapper ＝内部のコマンドを包んで使いやすくした外側のコマンド）名だと推定している。

2.2 想定される基本フロー

# 1. インストール（npx で都度起動が標準）
npx designmdme@latest --help

# 2. ログイン（クォータ／API key 紐付け）
npx designmdme login

# 3. 生成
npx designmdme --website https://elevenlabs.io --out DESIGN-elevenlabs-io.md

--website が対象 URL、--out が出力先である。出力される Markdown は上述の 9 セクション構成で、そのまま CLAUDE.md の隣に置くか、@DESIGN-<domain>.md 参照でエージェントに渡す。

2.3 AI ツールへの組み込み

標準的なやり方は、banani.co のガイド（https://www.banani.co/blog/design-md-guide）と designmd.app（https://designmd.app/what-is-design-md/）に書かれているものである。

Claude Code：プロジェクトルートの CLAUDE.md から @DESIGN.md を読ませる。あるいは Anthropic 公式の frontend-design スキルを有効にすると DESIGN.md が自動で注入される
Cursor：.cursor/rules/design.mdc として置き、alwaysApply: true で全体に適用する
Cline / Roo Code：同様にプロジェクトルートへ置けばコンテキスト（＝AI が読み込む文脈）に拾われる
呼び出し時は「Build the pricing page. Use @DESIGN.md for all styling decisions.」のような明示的な参照を書くと再現度が高い

2.4 トークン／クォータの管理

CLI の 1 回の生成は対象サイトをスクレイピング（＝ページを取得して中身を抜き出すこと）し、LLM（Large Language Model ＝大規模言語モデル）で要約するため、サーバー側のコストは高めである。Crowdlinker の無料枠を圧迫しないよう、同一ドメインの再生成はローカルキャッシュから返すこと
生成結果は git にコミットして固定する。デザインシステムのバージョン管理は Markdown の差分で十分である

3. 再現度の監査：DESIGN-elevenlabs-io.md が捉えたものと落としたもの

3.1 捉えているもの（仕様が強い領域）

DESIGN-elevenlabs-io.md を実物の https://elevenlabs.io と突き合わせると、以下は妥当である。

カラートークン：黒と白を背骨に、暖色のベージュ／コーラル／ブルーダストをアクセントとし、ニュートラルスケール（#E5E5E5 の区切り線など）を持つ構成。ElevenLabs のブランドガイド（https://elevenlabs.io/brand）が「ElevenAPI uses a monochrome palette of black / white / neutral tones」と述べており、抽出結果と一致する
radius スケール（＝角丸の大きさの段階）：pill（9999px）／16px のカード／18px のセカンダリボタン、の 3 段。実装と整合する
shadow レシピ（＝影の重ね方）：多層シャドウ（outline ＋ soft ＋ cast）の L1〜L4 の段階が、ElevenLabs 系の繊細な見え方を正確に捉えている
spacing（＝余白）：4px を基数として 4 / 8 / 12 / 16 / 24 / 48 / 72 / 120 の刻み。実物の余白の取り方と一致する
Do's and Don'ts：AI スラップ回避のヒューリスティクス（＝経験則。紫のグラデーションを使わない、主要 CTA にアクセント色を使わない、シャドウを rgba(0,0,0,0.12) より濃くしない）は、エージェントへの指示文としてよく効く

3.2 落としているもの、間違えやすいもの

モーション仕様：ボイスオーブ（voice orb ＝音声に反応して形が変わる球体の演出。agentState が listening / thinking / talking のときに変形する Three.js ＋ GLSL の球体。Three.js は 3D 描画ライブラリ、GLSL は GPU 上で走る描画用の言語）は、テキストの仕様では再現できない。ElevenLabs 公式の https://ui.elevenlabs.io/docs/components/orb が OSS なので、デザイン仕様ではなく実装をそのまま持ち込むべきである（後述）
グラデーションオーブの配色レシピ：["#CADCFC", "#A0B9D1"] のような具体的なグラデーションの組、ノイズシェーダー（noise shader ＝揺らぎを作る描画プログラム）の周波数、音声反応の応答カーブは仕様に書かれない
クラドニ図形（Chladni patterns ＝板を振動させたときに砂が描く幾何模様）：ブランドガイドにある「Creative / API プラットフォーム向けのクラドニ図形」は静的なトークンでは表現できず、別途 SVG／canvas の実装が要る
Waldenburg の指定：仕様には「Primary Display: Waldenburg (light weight)」とあるが、Waldenburg は Klim ファミリーの有償商用フォントである（Michael Clasen、2021 年。商用利用には購入が必要）。この指定をそのまま採用するとライセンス違反になる。後述の無償代替へマッピングする必要がある
PP NeueBit のようなピクセル／等幅アクセント：ElevenLabs が部分的に使っている pp neue bit 系のレトロ等幅書体は仕様に拾われない。これも商用ライセンスが前提である
アクセシビリティの状態：フォーカスリング（＝キーボード操作時に当たっている要素を囲む枠）の太さ、prefers-reduced-motion（＝動きを減らす設定）への挙動、forced-colors モード（＝OS 側で色を強制する表示モード）への対応は仕様に含まれない。WCAG AA（Web Content Accessibility Guidelines のレベル AA ＝国際的なアクセシビリティ基準の実務水準）は別途検証が要る
コピーライティングの声：ElevenLabs の見出しは「The most realistic AI voice platform」のような短い断定文と、開発者向けのコードスニペットの組み合わせである。トーン・オブ・ボイス（＝文章の語り口）はトークンでは捉えられない
アイコンシステム／イラスト：9 セクションの仕様は色・書体・形状までしか扱わず、アイコンセットもイラストも捉えない

3.3 DESIGN.md が構造的に伝えられないもの

カテゴリ	伝えられない理由
有償フォントそのもの	ライセンス上の理由から URL すら埋め込まれない
イラスト／写真	バイナリ資産であり、生成 AI であっても仕様からは起動できない
モーションの実装	Three.js / Rive / Lottie のコードは Markdown の外にある
実際のコンポーネントライブラリ	状態遷移・props 設計・アクセシビリティ属性は別問題である
ブランドボイス	コピーのリズムと語彙のコントロールは文字数では表せない
写真のカラーグレーディング	LUT（Look Up Table ＝色変換の対応表）や露出方針はテキストに落ちない

要するに DESIGN.md はデザイン言語の骨格であって、デザインそのものではない。

4. 他サイトへ移植するためのプレイブック

4.1 SCAS とハイフンテクノロジーズのコーポレートサイトへの適用手順

手順は固定である。

対象 URL を決める。SCAS なら、参照したい既存サイトを 1〜2 本選ぶ（例：https://stripe.com/jp/atlas や https://linear.app など、SCAS のトーンに近いもの）
npx designmdme --website <ref-url> --out DESIGN-<domain>.md で生成する
リポジトリルート（Hyphen-Tech-Org/scas 内）にコミットする。複数を参照する場合は DESIGN-<domain>.md を複数置き、優先順位を CLAUDE.md に明記する

CLAUDE.md の末尾に次のような節を追加する：

## Design system
- 第一参照: `@DESIGN-<primary>.md`
- 補助参照: `@DESIGN-<secondary>.md`
- これらと矛盾する Tailwind / shadcn デフォルトは無視。色・radius・shadow は spec を厳守

実際のコンポーネント（Button、Card、Input、Header）を 1 つずつ実装し、Playwright MCP（＝ブラウザ自動操作ツールを AI から呼び出す接続）でスクリーンショットを撮る → 仕様とずれていたら、仕様ではなく実装を直す（仕様はあくまで土台である）
いくつか部品がそろったら、.storybook または _components/ の下に社内カタログを作る

4.2 仕様を正典として扱う場面と、外す場面の切り分け

状況	仕様を信じる	仕様を外す
カラートークンの hex 値	◎ そのまま採用	既にブランドガイドがあるなら上書き
radius / spacing スケール	◎ 採用	サイドバー主体の SaaS UI で `16px` のカードが過剰なら詰める
書体ファミリー	△ 商用フォントは差し替え必須	常に無償代替へマッピングする
日本語組版	× 仕様は英文テキストを前提にしている	Noto Sans JP / IBM Plex Sans JP / LINE Seed JP を別途決める
Do's and Don'ts	◎ AI スラップの抑制に効く	アクセシビリティ要件と衝突するならアクセシビリティを優先
コンポーネントの細部	△ 出発点として	実プロダクトの状態機械で上書きする

4.3 注意点

有償フォントの置換マッピング（必須）：
- Waldenburg → Manrope（Google Fonts、OFL）／ Geist（Vercel、OFL）／ Inter Display（OFL）。OFL は SIL Open Font License ＝無償で商用利用も可能なフォントライセンス。日本語が混ざるなら本文は Noto Sans JP または IBM Plex Sans JP に固定する
- PP NeueBit → DepartureMono（OFL）／ JetBrains Mono の等幅アクセント／ Press Start 2P（Google Fonts）
- Geist Mono は 2024 年から Vercel が OFL で公開しているため、そのまま使える
- フォントを差し替えると x-height（＝小文字 x の高さ。書体の見た目の大きさを決める寸法）と字幅が必ず変わる → spacing と line-height（＝行の高さ）を再調整する
コントラストの検証：仕様の「secondary text #777169 on white」は WCAG AA の 4.5:1 を割るおそれがある。@google/design.md の lint コマンドが WCAG AA のコントラストを自動検証する（https://designmd.app/what-is-design-md/）。これを CI（Continuous Integration ＝変更のたびに自動でチェックを走らせる仕組み）に入れる
レイアウトパターンは仕様に含まれない：9 セクションはトークン／コンポーネントまでしか及ばないため、「サイドバー付きダッシュボード」「マーケティング用ランディングページ」「ドキュメント」のページレベルのパターンは別のデザインである。用途ごとに別の参照を抽出するのが正しい——SCAS にはサイドバー型、コーポレートサイトにはマーケティング LP 型
日本語組版：仕様は英文前提なので line-height 1.5 では日本語が詰まりすぎる。日本語では 1.7〜1.9 へ上書きし、letter-spacing（＝字間）は 0.02em 前後にする
ブランドボイス：ElevenLabs の英語コピーを直訳すると硬くなりすぎる。トーン・オブ・ボイスのガイドは別に書く

5. 画像・イラスト・アイコンの調達

DESIGN.md はビジュアル資産を生成しない。以下は 2026 年 5 月時点で有効な選択肢である。

5.1 アイコン

ライブラリ	アイコン数	ライセンス	ElevenLabs 系との相性
Lucide	1,500+	ISC	◎ 細く中立的な線。Inter / Geist とよく合う。週 500 万ダウンロードの事実上の標準
Phosphor	7,700+ ／ 6 ウェイト	MIT	◎ thin / regular / fill / duotone のウェイト切り替えが、ElevenLabs の軽い見た目に理想的
Tabler	5,500+	MIT	○ 24×24 グリッド。SCAS のような業務 UI に向く
Heroicons	292	MIT	△ Tailwind 公式セット。outline / solid のみ。数が足りない場面がある
Radix Icons	333 ／ 15px	MIT	△ 小サイズ最適化。社内 SaaS UI でとりわけ活きる

推奨：ElevenLabs の質感を狙うなら Phosphor の thin / regular を基本にし、足りない分を Lucide で埋める。SCAS のような業務系ダッシュボードなら Lucide 単体で十分である。

5.2 イラスト

サービス	ライセンス	用途
unDraw	MIT、再配色可	SaaS ランディングページのヒーロー／空状態。最速
Storyset	無償＋クレジット表記必須	キャラクター系。アニメーション付き
Open Peeps	CC0	手描き調。サイトに人の気配を足したいとき
Humaaans	CC0	組み合わせ式の人物。コーポレートサイトの多文化表現に
Blush	無料枠あり、商用利用可	上記アーティストのハブ。バリエーションを揃えるのに良い
Lummi	無償＋有償の混在	写真寄りのアート資産

AI 生成側では以下。

Recraft V4（https://www.recraft.ai）：ブランド画像 5〜10 枚をスタイルとして学習させると、以降の生成を同じトーンの SVG ベクターで保てる。UI/UX チームが Midjourney から乗り換えている主な理由でもある（参照：https://flowith.io/blog/why-ui-ux-design-teams-choosing-recraft-over-midjourney-vector-illustration/）
Midjourney V8 ＋スタイルリファレンス（--sref）：ムードボード／ヒーロー画像の方向性を探るのに向く。一貫性が要る本番用途には弱い
Ideogram v3：文字を含むキービジュアル向け。スタイル参照を最大 3 点渡せる

ワークフロー：Midjourney で方向性を決める → Recraft にスタイルとして食わせてベクターを量産 → Figma / Illustrator で微調整 → SVG としてコミット。

5.3 写真

Unsplash / Pexels：無償・商用利用可。ただし「Unsplash っぽさ」は SaaS のランディングページで見飽きられているため、カラーグレーディングを統一する（全画像に同じ LUT を当てる）ことで差別化する
キュレーションのルール：ヒーロー 1 枚＋機能紹介 3 枚のあいだで、色温度・露出・被写体の視線の向きを揃える。サイト全体では 6〜10 枚に絞る
撮影発注：ブランドとして人の顔を出すなら、最低 1 日の撮影が必要になる。東京の相場で半日プランが 15〜30 万円、フル撮影で 50〜100 万円

5.4 モーション／ボイスオーブ（ElevenLabs 固有）

公式 OSS：ElevenLabs UI の Orb コンポーネントが https://github.com/elevenlabs/ui で MIT 公開されている。Three.js ＋ React Three Fiber（＝Three.js を React から扱うためのライブラリ）＋ WebGL シェーダー構成で、colors・agentState・getInputVolume などを props（＝部品に渡す設定値）として受け取る。自作するより移植するほうが速い
代替：Rive（https://rive.app）で軽量ランタイムに状態遷移を組む、あるいは shadertoy のノイズシェーダーを Three.js へ移植する
ノイズシェーダーのレシピ：simplex noise（＝滑らかな乱数模様を生む手法）で時間軸に沿って歪ませた球を用意し、ローパスフィルター（＝高い周波数成分を落とす処理）をかけた音声振幅を頂点変位に流し込むだけで、ElevenLabs 風の「呼吸する球体」になる。色は 2 色の線形グラデーションを fresnel（フレネル＝視線の角度に応じて縁が明るくなる効果）と混ぜる
prefers-reduced-motion は必須：オーブは楽しいが、アクセシビリティのために静止版を必ず用意する

5.5 ブランド専用資産を作るべきタイミング

状況	取るべき選択	費用／期間
ローンチ最初の 1〜2 ヶ月	無償資産＋AI 生成	0 円／即日
MVP（Minimum Viable Product ＝検証用の最小構成の製品）検証中、ブランド未確定	後で捨てる前提で Recraft 量産	月 $30 ／ 1 週間
IPO（株式公開）／大型契約／採用ブランディング	デザイナーへ発注、専用イラストセット	50〜200 万円／4〜8 週間
音声／エージェント系プロダクト	ElevenLabs UI の Orb をフォークし、シェーダーを自前で調整	エンジニア 2〜5 人日
写真が必要	フォトグラファーへ発注	15〜100 万円／半日〜1 日

判断軸は「その資産を 3 ヶ月後に差し替える見込みがあるか」である。差し替える見込みがあるなら AI 生成／無償資産、固定する見込みなら発注する。

6. まとめ

DesignMD（designmd.me、Crowdlinker 製）は Stitch の DESIGN.md 形式に準拠した無料のデザイン抽出 SaaS である。URL を渡すと 9 セクションの Markdown が返る
出力される仕様はトークン／radius／shadow／spacing までは強い。モーション／イラスト／ブランドボイス／アクセシビリティ／日本語組版／ページレベルのパターンは捉えられない
SCAS とハイフンテクノロジーズのコーポレートサイトへの移植は固定フローである：参照 URL を選ぶ → DESIGN-<domain>.md をコミット → CLAUDE.md で参照 → 実装と検証で反復する
有償フォント（Waldenburg、PP NeueBit）は必ず無償代替へ再マッピングする。日本語組版とアクセシビリティのコントラストは、仕様の外で別途決める
ビジュアル資産は、Phosphor / Lucide（アイコン）＋ unDraw / Storyset / Recraft（イラスト）＋ ElevenLabs UI の Orb のフォーク（モーション）が 2026 年 5 月時点の最短ルートである

2026-05-18

DESIGN.md ベースのデザイン移植プレイブック

1. designmd.me というプロダクトの実体

1.1 何であるか

1.2 解決している課題

1.3 出力フォーマット

1.4 価格とクォータ

1.5 プライバシー上の含意

2. designmd.me/cli の使い方

2.1 注意：直接検証できなかった部分

2.2 想定される基本フロー

2.3 AI ツールへの組み込み

2.4 トークン／クォータの管理

3. 再現度の監査：DESIGN-elevenlabs-io.md が捉えたものと落としたもの

3.1 捉えているもの（仕様が強い領域）

3.2 落としているもの、間違えやすいもの

3.3 DESIGN.md が構造的に伝えられないもの

4. 他サイトへ移植するためのプレイブック

4.1 SCAS とハイフンテクノロジーズのコーポレートサイトへの適用手順

4.2 仕様を正典として扱う場面と、外す場面の切り分け

4.3 注意点

5. 画像・イラスト・アイコンの調達

5.1 アイコン

5.2 イラスト

5.3 写真

5.4 モーション／ボイスオーブ（ElevenLabs 固有）

5.5 ブランド専用資産を作るべきタイミング

6. まとめ

参考文献

関連ノート

DESIGN.md ベースの​デザイン移植プレイブック

1. designmd.me と​いう​プロダクトの​実体

1.1 何であるか

1.2 解決している​課題

1.3 出力フォーマット

1.4 価格と​クォータ

1.5 プライバシー上の​含意

2. designmd.me/cli の​使い方

2.1 ​注意：直接検証できなかった​部​分

2.2 想定される​基本フロー

2.3 AI ツールへの​組み込み

2.4 トークン／クォータの​管理

3. 再現度の​監査：DESIGN-elevenlabs-io.md が​捉えた​ものと​落とした​もの

3.1 捉えている​もの​（仕様が​強い領域）

3.2 落と​している​もの、​間違えやすい​もの

3.3 DESIGN.md が​構造的に​伝えられない​もの

4. 他サイトへ​移植する​ための​プレイブック

4.1 SCAS と​ハイフンテクノロジーズの​コーポレートサイトへの​適用手順

4.2 仕様を​正典と​して​扱う​場面と、​外す​場面の​切り分け

4.3 注意点

5. 画像・イラスト・アイコンの​調達

5.1 アイコン

5.2 イラスト

5.3 写真

5.4 モーション／ボイスオーブ​（ElevenLabs 固有）

5.5 ブランド専用資産を​作るべきタイミング

6. まとめ

参考文献

関連ノート

DESIGN.md ベースのデザイン移植プレイブック

1. designmd.me というプロダクトの実体

1.2 解決している課題

1.4 価格とクォータ

1.5 プライバシー上の含意

2. designmd.me/cli の使い方

2.1 注意：直接検証できなかった部分

2.2 想定される基本フロー

2.3 AI ツールへの組み込み

2.4 トークン／クォータの管理

3. 再現度の監査：DESIGN-elevenlabs-io.md が捉えたものと落としたもの

3.1 捉えているもの（仕様が強い領域）

3.2 落としているもの、間違えやすいもの

3.3 DESIGN.md が構造的に伝えられないもの

4. 他サイトへ移植するためのプレイブック

4.1 SCAS とハイフンテクノロジーズのコーポレートサイトへの適用手順

4.2 仕様を正典として扱う場面と、外す場面の切り分け

5. 画像・イラスト・アイコンの調達

5.4 モーション／ボイスオーブ（ElevenLabs 固有）

5.5 ブランド専用資産を作るべきタイミング