import type { SolutionLocaleCopy } from './types';

export const JA: SolutionLocaleCopy = {
  prototype: {
    title: 'Open Design + Claude Code でインタラクティブなプロトタイプを作る',
    description:
      'プロンプトを、ターミナルから離れることなくクリック可能なマルチスクリーンのプロトタイプに変えます。Open Design はコーディングエージェントに、デザインスキル、テンプレート、デザインシステムを与え、ブラウザで開ける本物のプロトタイプを出力します。',
    breadcrumb: 'プロトタイプ',
    label: 'ユースケース · プロトタイプ',
    heading: 'プロンプトの速さでプロトタイピング',
    lead: '頭の中にあるフローを説明するだけで、エージェントが本物のクリック可能なプロトタイプを組み立てます。複数の画面、共有スタイル、ライブなインタラクションが、開いて共有しエンジニアリングに渡せる HTML へとそのままレンダリングされます。',
    heroImageAlt:
      '手がワイヤーフレームをスケッチし、それがクリック可能なマルチスクリーンのアプリプロトタイプに変わる様子を描いたエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design は、あなたがすでに使っているコーディングエージェントのためのデザインレイヤーです。プロトタイピングにおいては、一段落のアイデアから、操作可能でスタイルの整ったプロトタイプを一度のセッションで生み出せるということ。デザインツールも、エクスポート工程も、引き継ぎの断絶もありません。',
    stepsTitle: 'Open Design でのプロトタイピングの流れ',
    steps: [
      {
        title: 'フローを説明する',
        body: '作りたいものを普通の言葉で伝えます。「ウェルカム画面、プラン選択、確認画面のあるオンボーディングフロー」のように。Open Design がプロトタイプスキルを読み込み、エージェントは単一ページではなく複数の画面を生み出すべきだと理解します。',
        imageAlt:
          'アプリフローの説明を普通の言葉でターミナルに打ち込む人物のイラスト',
      },
      {
        title: 'スタイル付きの画面を生成する',
        body: 'エージェントは Open Design のデザインシステムとプロトタイプテンプレートを適用するため、どの画面もタイポグラフィ、余白、コンポーネントを共有し、ラフな下書きには見えません。バラバラのモックアップではなく、まとまりのある画面群が手に入ります。',
        imageAlt:
          '複数のアプリ画面が順番に現れ、すべてが一貫したビジュアルスタイルを共有しているイラスト',
      },
      {
        title: 'インタラクションをつなぐ',
        body: 'ボタンで遷移し、タブが切り替わり、モーダルが開きます。プロトタイプは自己完結した HTML にレンダリングされるので、どのブラウザでも本物のように動作します。閲覧のためにプロトタイピングツールのアカウントは要りません。',
        imageAlt:
          'カーソルがリンクされた画面をクリックしていき、矢印が画面間のナビゲーションを示すイラスト',
      },
      {
        title: '反復し、引き継ぐ',
        body: 'エージェントと話しながら磨き込みます。「プラン選択を3カラムのレイアウトにして」のように。成果物はあなたのプロジェクト内にあるため、デザインと最終的なコードが一つの信頼できる情報源を共有し、よくあるデザイナーからエンジニアへの引き継ぎの断絶を解消します。',
        imageAlt:
          'プロトタイプが修正され、その後エンジニアに渡され、デザインとコードが一つのファイルに統合されるイラスト',
      },
    ],
    tableTitle: 'Open Design でのプロトタイピング vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: '従来のプロトタイピングツール',
    tableRows: [
      {
        capability: 'アイデアから最初の画面へ',
        withOd: 'すでに開いているエージェントへの一つのプロンプト',
        without: '別のツールを開き、ファイルを始め、手でボックスをドラッグする',
      },
      {
        capability: 'リンクされた複数の画面',
        withOd: '共有スタイルと動作するナビゲーションを備えた一式として生成',
        without: '各フレームを手で描き、手でリンクする',
      },
      {
        capability: '一貫したビジュアルシステム',
        withOd: 'エージェントが適用する再利用可能なデザインシステムから取得',
        without: 'ファイルごとに作り直すか、手で維持する',
      },
      {
        capability: '共有できる成果物',
        withOd: '自己完結した HTML — どのブラウザでも開け、アカウント不要',
        without: '閲覧者にはベンダーツールのシートか共有リンクが必要',
      },
      {
        capability: '本物のコードへの道筋',
        withOd: '成果物がリポジトリ内にあり、デザインとコードが一つの情報源を共有',
        without: '別途の引き継ぎ後にゼロから作り直し',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、自分の鍵を持ち込み、ローカルで動作',
        without: 'シート単位のサブスク、ベンダーホスト、エクスポート制限あり',
      },
    ],
    featuresTitle: 'プロトタイプにできるもの',
    features: [
      {
        title: 'マルチスクリーンの Web アプリ',
        body: '共有ナビゲーションを備えた完全なフロー — オンボーディング、ダッシュボード、設定 — 単一ページではなく。',
        thumb: 'example-web-prototype',
      },
      {
        title: 'モバイルアプリのフロー',
        body: 'ネイティブのような遷移と状態を備えた、画面ごとのモバイル体験。',
        thumb: 'example-mobile-app',
      },
      {
        title: 'ランディングページ',
        body: 'クリックして確かめ、そのまま出荷できるマーケティングページや SaaS のランディング。',
        thumb: 'example-saas-landing',
      },
      {
        title: 'あらゆるビジュアルの好み',
        body: 'エディトリアル、ソフト、ブルータリスト — プロトタイプは一貫したスタイルを最初から最後まで貫きます。',
        thumb: 'example-web-prototype-taste-editorial',
      },
      {
        title: 'ウェイトリストと料金',
        body: 'コンバージョン面 — ウェイトリスト、料金表 — を配線済みでブランドに沿って。',
        thumb: 'example-waitlist-page',
      },
      {
        title: 'ゲーム化された遊び心',
        body: 'モーションと状態がプレゼンの一部となる、インタラクション重視のコンセプト。',
        thumb: 'example-gamified-app',
      },
    ],
    galleryTitle: 'Open Design で作られたプロトタイプ',
    galleryLead:
      'どれもプロンプトから始まり、クリック可能な成果物へとレンダリングされました。アイデアに近いテンプレートを選び、あなたのバリエーションを説明すれば、エージェントがそれを適応させます。',
    gallery: [
      { thumb: "example-dating-web", caption: "デーティング Web アプリ — マルチスクリーンのフロー" },
      { thumb: "example-hr-onboarding", caption: "人事オンボーディングのフロー" },
      { thumb: "example-kami-landing", caption: "プロダクトのランディングページ" },
      { thumb: "example-web-prototype-taste-soft", caption: "ソフトスタイルの Web プロトタイプ" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'プロトタイプテンプレートを見る',
    faqTitle: 'プロトタイピング FAQ',
    faq: [
      {
        q: 'Open Design でプロトタイプを作るのに Figma のようなデザインツールは必要ですか？',
        a: 'いいえ。Open Design はコーディングエージェントの中で動き、プロトタイプを HTML にレンダリングします。フローを言葉で説明すれば、エージェントが画面を生み出します。学んだり料金を払ったりする別のキャンバスツールはありません。',
      },
      {
        q: 'プロトタイプはインタラクティブですか、それともただの静的なモックアップですか？',
        a: 'インタラクティブです。出力は本物の HTML と CSS なので、ナビゲーション、タブ、モーダルが動作します。ユーザーとまったく同じように、どのブラウザでもクリックして確かめられます。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Open Design は Claude Code、Codex、Cursor Agent、Gemini CLI、その他10種以上のファーストパーティアダプターで動作します。プロバイダーの鍵は自分で持ち込み、何もホストされません。',
      },
      {
        q: 'プロトタイプは本物のプロダクトになれますか？',
        a: 'まさにそれが狙いです。成果物がプロジェクト内にあるため、同じデザインシステムとコンポーネントが、引き継ぎ後に捨てられるのではなく、本番コードへと引き継がれます。',
      },
    ],
    ctaTitle: '次のアイデアを今夜プロトタイプに',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、次の「もし〜だったら」を、すでに使っているエージェントの中で、クリックできる形に変えましょう。',
  },
  dashboard: {
    title: 'Open Design + Claude Code でデータダッシュボードを生成する',
    description:
      '追跡している指標を説明するだけで、コーディングエージェントがスタイルの整ったレスポンシブなダッシュボードを構築します。チャート、KPI カード、テーブルがどこにでもホストできる HTML にレンダリングされます。BI ツールのシートも、ドラッグ&ドロップのビルダーも不要です。',
    breadcrumb: 'ダッシュボード',
    label: 'ユースケース · ダッシュボード',
    heading: 'ドラッグ&ドロップのビルダーではなく、説明からダッシュボードを',
    lead: '何を見せたいか、どう感じさせたいかをエージェントに伝えます。Open Design がチャートのパターン、レイアウトシステム、ビジュアル言語を供給するので、デフォルトスタイルのウィジェットの壁ではなく、まとまりのある見栄えの良いダッシュボードが手に入ります。',
    heroImageAlt:
      '左側の生の数値が、右側のチャートと KPI カードのきれいなダッシュボードへと流れ込むエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design は指標を普通の言葉で書いた仕様を、エージェントが HTML にレンダリングするスタイルの整ったダッシュボードに変えます。リポジトリでバージョン管理され、どこにでもホストでき、シート単位の BI サブスクは不要です。',
    stepsTitle: 'Open Design でのダッシュボードの流れ',
    steps: [
      {
        title: '指標を説明する',
        body: '大切なものを挙げます。「週間アクティブユーザー、プラン別の収益、解約率、30日間のトレンド」のように。エージェントがダッシュボードスキルを読み込み、一塊のテキストではなく、KPI カード、チャート、テーブルをレイアウトすべきだと理解します。',
        imageAlt: '自分が重視する指標を列挙する人物のイラスト',
      },
      {
        title: 'チャートのパターンを選ぶ',
        body: 'Open Design はチャートとレイアウトのテンプレートを備えているので、トレンドは折れ線グラフに、内訳は棒グラフに、比率は適切なビジュアルになります。ちぐはぐなデフォルトではなく、一貫したタイポグラフィと余白が全体を通ります。',
        imageAlt: 'いくつかのチャートタイプがまとまりのあるグリッドに配置されたイラスト',
      },
      {
        title: 'データをつなぐ',
        body: 'ダッシュボードを CSV や JSON エンドポイントに向けるか、サンプル行を貼り付けます。データが変わると更新される自己完結した HTML にレンダリングされ、どのブラウザでも開け、どの静的ホストにも置けます。',
        imageAlt: 'データファイルがライブ更新されるダッシュボードに接続するイラスト',
      },
      {
        title: '磨いて出荷する',
        body: 'エージェントと話して調整します。「収益を地域別にまとめて、KPI 行を一番上に移して」のように。成果物がプロジェクト内にあるので、ダッシュボードは他のコードと同じようにレビューでき、バージョン管理されます。',
        imageAlt: 'ダッシュボードが磨かれ、その後デプロイされるイラスト',
      },
    ],
    tableTitle: 'Open Design でのダッシュボード vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'BI ツール / 手書きコード',
    tableRows: [
      {
        capability: '指標リストからレイアウトへ',
        withOd: '一つのプロンプト。エージェントがカード、チャート、テーブルをレイアウト',
        without: 'ウィジェットを一つずつドラッグ、またはチャートコードをゼロから記述',
      },
      {
        capability: '一貫したビジュアルシステム',
        withOd: '再利用可能なデザインシステムからのチャートパターンと余白',
        without: 'デフォルトのウィジェットスタイル、またはチャートごとに手でスタイリング',
      },
      {
        capability: 'データの接続',
        withOd: 'CSV / JSON / 貼り付けた行を、ライブな HTML にレンダリング',
        without: 'ベンダーのコネクタや独自のデータ配管',
      },
      {
        capability: 'ホスティングと共有',
        withOd: 'どの静的ホストでも動く自己完結した HTML、アカウント不要',
        without: '閲覧者には BI ベンダーのシートが必要',
      },
      {
        capability: 'レビューとバージョン管理',
        withOd: 'リポジトリ内にあり、コードのように差分が取れる',
        without: 'ベンダー内に閉じ込められ、本当の差分が取れない',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、自分の鍵を持ち込み、ローカルで動作',
        without: 'シート単位のサブスク、ベンダーホスト',
      },
    ],
    featuresTitle: '構築できるもの',
    features: [
      { title: "プロダクト分析", body: "アクティブユーザー、ファネル、リテンション — プロダクトチームが日々向き合う指標。", thumb: "example-dashboard" },
      { title: "リポジトリと開発の指標", body: "スター、PR、CI の健全性 — 自分のデータから作るエンジニアリングダッシュボード。", thumb: "example-github-dashboard" },
      { title: "財務レポート", body: "収益、バーン、ランウェイを共有できるレポートとしてレイアウト。", thumb: "example-finance-report" },
      { title: "ライブオペレーション", body: "基となるデータが動くにつれて更新されるリアルタイム指標。", thumb: "example-live-dashboard" },
      { title: "ソーシャルとマーケティング", body: "チャネルのパフォーマンスとキャンペーンのトラッキングを一つのビューに。", thumb: "example-social-media-dashboard" },
      { title: "ドメインレポート", body: "あらゆる分野の構造化されたレポート — 臨床からトレーディングまで。", thumb: "example-clinical-case-report" },
    ],
    galleryTitle: 'Open Design で作られたダッシュボード',
    galleryLead:
      'プロンプトとデータソースからレンダリングされた本物のダッシュボード。自分に近いものから始め、追跡している指標を説明してください。',
    gallery: [
      { thumb: "example-data-report", caption: "データレポート" },
      { thumb: "example-flowai-live-dashboard-template", caption: "ライブオペレーションのダッシュボード" },
      { thumb: "example-trading-analysis-dashboard-template", caption: "トレーディング分析のダッシュボード" },
      { thumb: "example-frame-data-chart-nyt", caption: "エディトリアルなデータチャート" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'ダッシュボードテンプレートを見る',
    faqTitle: 'ダッシュボード FAQ',
    faq: [
      {
        q: 'Tableau や Looker のような BI ツールは必要ですか？',
        a: 'いいえ。Open Design はコーディングエージェントの中でダッシュボードを HTML にレンダリングします。指標を説明してデータに向けるだけで、ライセンスや習得が必要な別の BI プラットフォームはありません。',
      },
      {
        q: 'データはどこから来ますか？',
        a: 'CSV、JSON エンドポイント、または貼り付けた行から。ダッシュボードはプレーンな HTML と JavaScript なので、どこから読むかを正確に自分で制御できます。ホストされたサービスを経由するものは何もありません。',
      },
      {
        q: '技術者でないチームメンバーも見られますか？',
        a: 'はい。出力は自己完結した Web ページです。リンクやファイルがあれば誰でもブラウザで開けます。アカウントもシートも不要です。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Claude Code、Codex、Cursor Agent、Gemini CLI、その他10種以上のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。',
      },
    ],
    ctaTitle: '今夜あなたのダッシュボードを構築',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、あなたの指標を、すでに使っているエージェントの中で、どこにでもホストできるダッシュボードに変えましょう。',
  },
  slides: {
    title: 'Open Design + Claude Code でプレゼンテーション資料を生成する',
    description:
      'アウトラインを、プレゼンアプリを開かずにデザインされたブランドに沿ったスライド資料に変えます。Open Design はコーディングエージェントに資料テンプレートとビジュアルシステムを与え、プレゼン・エクスポート・共有できる HTML にスライドをレンダリングします。',
    breadcrumb: 'スライド',
    label: 'ユースケース · スライド',
    heading: 'デザインされて見える資料を、プロンプトで書く',
    lead: 'エージェントにアウトラインとトーンを渡します。Open Design が資料テンプレートとビジュアルシステムを適用するので、どのスライドもレイアウトされ、組版され、ブランドに沿います。空白の背景に箇条書きが並ぶだけではありません。',
    heroImageAlt:
      '左側のアウトラインが、右側のデザインされたプレゼンスライドの連なりに変わるエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design はアウトラインを、エージェントが一度のセッションでレンダリングするデザインされた HTML 資料に変えます。ブラウザでプレゼンし、PDF や PPTX にエクスポートし、ソースはリポジトリに保持できます。',
    stepsTitle: 'Open Design での資料作成の流れ',
    steps: [
      {
        title: 'アウトラインを渡す',
        body: '話したいポイントやおおまかな構成を貼り付けます。エージェントが資料スキルを読み込み、一つの長い文書ではなく、レイアウトされたスライドの連なりを生み出します。',
        imageAlt: 'テキストのアウトラインがエージェントに渡されるイラスト',
      },
      {
        title: '資料のスタイルを選ぶ',
        body: 'Open Design は資料テンプレートを備えています — エディトリアル、スイス・インターナショナル、ダークなテクニカルなど。エージェントが一つを適用し、タイポグラフィ、グリッド、アクセントがすべてのスライドで一貫します。',
        imageAlt: 'いくつかの資料スタイルの選択肢が横並びに配置されたイラスト',
      },
      {
        title: 'スライドを生成する',
        body: '各ポイントが適切な階層を備えたデザインされたスライドになります — タイトル、補助となるビジュアル、データの強調表示。HTML にレンダリングされるので、どのブラウザでもフルスクリーンでプレゼンできます。',
        imageAlt: '一貫したスタイリングで仕上がったスライドの連なりのイラスト',
      },
      {
        title: 'プレゼン、エクスポート、反復',
        body: 'ブラウザからプレゼンするか、共有用に PDF / PPTX にエクスポートします。エージェントと話して磨きます。「データスライドを引き締めて、締めの行動喚起を加えて」のように。資料のソースはプロジェクト内に残ります。',
        imageAlt: '資料がプレゼンされ、複数の形式にエクスポートされるイラスト',
      },
    ],
    tableTitle: 'Open Design での資料 vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'PowerPoint / Keynote / AI スライドツール',
    tableRows: [
      {
        capability: 'アウトラインからスライドへ',
        withOd: '一つのプロンプト。エージェントが全スライドをレイアウト',
        without: '各スライドを手で作るか、テンプレートと格闘する',
      },
      {
        capability: '一貫したデザイン',
        withOd: '本物のグリッドと文字組みシステムを備えた資料テンプレート',
        without: 'テーマのずれ、手動の位置合わせ、ブランド外のデフォルト',
      },
      {
        capability: 'データと図表',
        withOd: 'スライドの一部としてレンダリングされるチャートと強調表示',
        without: '静止画を貼るか、毎回チャートを作り直す',
      },
      {
        capability: 'エクスポート形式',
        withOd: 'プレゼン用の HTML に加え、PDF / PPTX エクスポート',
        without: '一つのアプリの形式に縛られる',
      },
      {
        capability: 'レビューとバージョン管理',
        withOd: 'ソースがリポジトリ内にあり、差分が取れる',
        without: 'バイナリファイル、意味のある差分が取れない',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、自分の鍵を持ち込み、ローカルで動作',
        without: 'アプリのライセンスやシート単位の AI アドオン',
      },
    ],
    featuresTitle: 'プレゼンできるもの',
    features: [
      { title: "ピッチ資料", body: "力強いストーリーときれいなデータスライドを備えた投資家・営業向け資料。", thumb: "example-html-ppt-pitch-deck" },
      { title: "スイス / エディトリアル", body: "アートディレクションされたように見える、グリッド主導でタイポグラフィ的な資料。", thumb: "example-deck-swiss-international" },
      { title: "コースモジュール", body: "明確なステップ、強調表示、ペース配分を備えた教育用資料。", thumb: "example-html-ppt-course-module" },
      { title: "データグラフ資料", body: "分析やレビューのための、ダークでチャート前面の資料。", thumb: "example-html-ppt-graphify-dark-graph" },
      { title: "プレゼンターモード", body: "ブラウザでライブにプレゼンするために作られた Reveal 風の資料。", thumb: "example-html-ppt-presenter-mode-reveal" },
      { title: "技術ブループリント", body: "複雑なシステムを図解する、アーキテクチャと知識の資料。", thumb: "example-html-ppt-knowledge-arch-blueprint" },
    ],
    galleryTitle: 'Open Design で作られた資料',
    galleryLead:
      'アウトラインからレンダリングされた本物の資料。あなたの話に近いスタイルを選び、内容を説明してください。',
    gallery: [
      { thumb: "example-deck-guizang-editorial", caption: "エディトリアルなマガジン資料" },
      { thumb: "example-guizang-ppt", caption: "イラスト入りのキーノート" },
      { thumb: "example-deck-open-slide-canvas", caption: "オープンスライドキャンバスの資料" },
      { thumb: "example-html-ppt-obsidian-claude-gradient", caption: "グラデーションテーマの資料" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: '資料テンプレートを見る',
    faqTitle: 'スライド FAQ',
    faq: [
      {
        q: 'PowerPoint や Keynote は必要ですか？',
        a: 'いいえ。Open Design はコーディングエージェントの中で資料を HTML にレンダリングし、PDF や PPTX にエクスポートできます。ブラウザからプレゼンするかファイルを渡すだけで、作るためにプレゼンアプリは要りません。',
      },
      {
        q: 'これは単なる AI 生成の箇条書きですか？',
        a: 'いいえ。エージェントはグリッド、文字サイズの体系、ビジュアル階層を備えた本物の資料テンプレートを適用するので、スライドは自動入力されたものではなく、デザインされて見えます。',
      },
      {
        q: 'クライアント向けに PowerPoint にエクスポートできますか？',
        a: 'はい。資料はプレゼン元の HTML に加えて PPTX と PDF にエクスポートできるので、相手が期待するどんな形式にも合わせられます。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Claude Code、Codex、Cursor Agent、Gemini CLI、その他のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。',
      },
    ],
    ctaTitle: '次の資料を今夜作る',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、あなたのアウトラインを、すでに使っているエージェントの中で、デザインされた資料に変えましょう。',
  },
  image: {
    title: 'Open Design + Claude Code でブランドに沿ったグラフィックを生成する',
    description:
      'ソーシャルカード、記事のカバー、マーケティンググラフィックをプロンプトから生み出します。本物のタイポグラフィとブランドシステムでレイアウトされ、PNG にエクスポートできる鮮明な HTML にレンダリングされます。デザインアプリも、テンプレートのサブスクも不要です。',
    breadcrumb: '画像',
    label: 'ユースケース · 画像',
    heading: 'ブランドに沿ったグラフィックを、生成しレイアウトまで',
    lead: '必要なカードやカバーを説明します。Open Design が本物の文字組み、グリッド、ブランドカラーで構成し、画像としてエクスポートできる HTML にレンダリングします。デザインアプリと格闘したり、ありきたりなテンプレートを使ったりする必要はありません。',
    heroImageAlt:
      'プロンプトが、レイアウトされたソーシャルカードと記事カバーの一式に変わるエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design はプロンプトを、エージェントが HTML にレンダリングして PNG にエクスポートする、組版されたブランドに沿ったグラフィックに変えます。繰り返し可能で、バージョン管理され、シート単位のデザインツールから解放されます。',
    stepsTitle: 'Open Design でのグラフィック作成の流れ',
    steps: [
      {
        title: 'グラフィックを説明する',
        body: '何かを伝えます。「ローンチ用の Twitter カードで、見出しと引用を入れて」のように。エージェントが適切なスキルを読み込み、プレーンなテキストブロックではなく、レイアウトされたグラフィックを構成します。',
        imageAlt: '必要なソーシャルカードを説明する人物のイラスト',
      },
      {
        title: 'ブランドシステムを適用する',
        body: 'Open Design があなたの色、文字組み、余白を再利用可能なデザインシステムから引き出すので、どのカードも一度きりのものに見えるのではなく、ブランドの他の部分と揃います。',
        imageAlt: 'ブランドカラーと文字組みがカードレイアウトに適用されるイラスト',
      },
      {
        title: 'レンダリングしてエクスポートする',
        body: 'グラフィックは必要なちょうどの寸法で HTML にレンダリングされます — ソーシャルカード、カバー、バナー — そして PNG にエクスポートされます。鮮明な文字、本物のレイアウト、手動の微調整なし。',
        imageAlt: 'グラフィックがレンダリングされ、画像ファイルにエクスポートされるイラスト',
      },
      {
        title: 'レシピを再利用する',
        body: 'テンプレートなので、次のグラフィックはプロンプト一つの距離です — 見出しを変えて、レイアウトはそのまま。一連のカードは完璧に一貫したままです。',
        imageAlt: '一つのカードテンプレートが一貫した一連のグラフィックを生み出すイラスト',
      },
    ],
    tableTitle: 'Open Design でのグラフィック vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'デザインアプリ / ありきたりなテンプレート',
    tableRows: [
      {
        capability: 'アイデアからレイアウトされたグラフィックへ',
        withOd: '一つのプロンプト。エージェントが文字組みとレイアウトを構成',
        without: 'アプリを開き、要素を一つずつ手で配置する',
      },
      {
        capability: 'ブランドを保つ',
        withOd: '再利用可能なデザインシステムからの色と文字組み',
        without: 'ファイルごとにブランドスタイルを選び直すか、ブランドから外れる',
      },
      {
        capability: '一貫したシリーズ',
        withOd: '同じテンプレート、新しいコピー — 完璧に揃った一式',
        without: '各バリエーションを手で揃え直す',
      },
      {
        capability: 'エクスポート',
        withOd: 'ちょうどの寸法の HTML を PNG にエクスポート',
        without: '手動のキャンバスサイズ設定とエクスポート設定',
      },
      {
        capability: '繰り返し可能',
        withOd: 'リポジトリ内のプロンプト駆動のレシピ',
        without: '毎回作り直す一度きりのファイル',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、自分の鍵を持ち込み、ローカルで動作',
        without: 'シート単位のデザインツールやテンプレートマーケットプレイス',
      },
    ],
    featuresTitle: '作れるもの',
    features: [
      { title: "ソーシャルカード", body: "あなたの見出しとブランドで構成された X / Twitter カード。", thumb: "example-card-twitter" },
      { title: "記事カバー", body: "投稿やニュースレター向けの、エディトリアルでマガジン風のカバー。", thumb: "example-article-magazine" },
      { title: "Xiaohongshu カード", body: "そのフィードに合わせて調整された RedNote 風のカード。", thumb: "example-card-xiaohongshu" },
      { title: "ヒーローグラフィック", body: "サイトやローンチ向けの、リキッドでグラデーションのヒーロービジュアル。", thumb: "example-frame-liquid-bg-hero" },
      { title: "カルーセル", body: "フレーム間で一貫性を保つ、複数スライドのソーシャルカルーセル。", thumb: "example-social-carousel" },
      { title: "UI モックフレーム", body: "プロダクトのストーリーテリング向けの通知・デバイスフレーム。", thumb: "example-frame-macos-notification" },
    ],
    galleryTitle: 'Open Design で作られたグラフィック',
    galleryLead:
      'プロンプトからレンダリングされた本物のカードとカバー。必要なものに近いものを選び、あなたのコピーに差し替えてください。',
    gallery: [
      { thumb: "example-html-ppt-xhs-pastel-card", caption: "パステルのソーシャルカード" },
      { thumb: "example-html-ppt-zhangzara-editorial-tri-tone", caption: "エディトリアルな三色ポスター" },
      { thumb: "example-magazine-poster", caption: "マガジン風ポスター" },
      { thumb: "example-html-ppt-zhangzara-biennale-yellow", caption: "大胆なエディトリアルカバー" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'グラフィックテンプレートを見る',
    faqTitle: '画像 FAQ',
    faq: [
      {
        q: 'これは Midjourney のような AI 画像ジェネレーターですか？',
        a: 'いいえ。Open Design は本物のレイアウトとタイポグラフィでグラフィックを構成します — あなたの見出し、あなたのブランド、ちょうどの寸法で — そして PNG としてエクスポートする HTML にレンダリングします。ピクセル生成ではなく、デザインの構成です。',
      },
      {
        q: '一貫した一連のカードを作れますか？',
        a: 'はい。各グラフィックがテンプレートなので、レイアウトを保ったままコピーを変えられます。一連のシリーズ全体が完璧に揃い、ブランドに沿ったままです。',
      },
      {
        q: 'どんなサイズを作れますか？',
        a: 'どんなサイズでも。グラフィックは指定したちょうどの寸法でレンダリングされ、正方形のソーシャルカードから横長のバナーまで対応し、PNG にエクスポートします。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Claude Code、Codex、Cursor Agent、Gemini CLI、その他のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。',
      },
    ],
    ctaTitle: '次のグラフィックを今夜作る',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、プロンプトを、すでに使っているエージェントの中で、ブランドに沿ったグラフィックに変えましょう。',
  },
  video: {
    title: 'Open Design + Claude Code でモーショングラフィックとショート動画を生成する',
    description:
      'スクリプトを、アニメーションフレームとショート動画に変えます — タイトルカード、モーション背景、アウトロが、あなたのブランドシステムで構成され、HTML からレンダリングされます。モーショングラフィックスイートも、タイムラインのスクラブも不要です。',
    breadcrumb: '動画',
    label: 'ユースケース · 動画',
    heading: 'タイムラインではなく、スクリプトからモーショングラフィックを',
    lead: '欲しい瞬間を説明します — タイトルの登場、データのアニメーション、ロゴのアウトロ。Open Design があなたのブランドシステムでアニメーションフレームを構成し、動画にレンダリングします。モーショングラフィックスイートは要りません。',
    heroImageAlt:
      'スクリプトが、アニメーションする動画フレームの連なりに変わるエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design はスクリプトを、エージェントがショート動画にレンダリングする、アニメーションするブランドに沿ったフレームに変えます。HTML から構成され、リポジトリでバージョン管理され、習得すべきタイムラインエディターはありません。',
    stepsTitle: 'Open Design でのモーションの流れ',
    steps: [
      {
        title: '瞬間を説明する',
        body: '何が起きるべきかを伝えます。「グリッチのタイトルが我々のロゴに解決し、その後に締めのカード」のように。エージェントがモーションスキルを読み込み、静止画ではなくアニメーションフレームを生み出します。',
        imageAlt: 'モーションシーケンスを説明する人物のイラスト',
      },
      {
        title: 'ブランドとモーションのスタイルを適用する',
        body: 'Open Design がフレームテンプレートを供給します — 映画的なライトリーク、グリッチのタイトル、ロゴのアウトロ — そしてあなたの色と文字組みを適用するので、モーションは意図的でブランドに沿って見えます。',
        imageAlt: 'ブランドのスタイリングがアニメーションフレームに適用されるイラスト',
      },
      {
        title: 'フレームを動画にレンダリングする',
        body: 'フレームは HTML で構成され動画にレンダリングされるので、タイミングとレイアウトが正確で繰り返し可能です — タイムライン上での手動キーフレームはありません。',
        imageAlt: 'HTML フレームが動画クリップにレンダリングされるイラスト',
      },
      {
        title: '反復してエクスポートする',
        body: 'エージェントと話して磨きます。「タイトルの登場を遅くして、キャプションを加えて」のように。ソーシャルやプロダクト向けにショートクリップをエクスポートします。ソースはプロジェクト内に残ります。',
        imageAlt: '動画クリップが磨かれ、ソーシャル向けにエクスポートされるイラスト',
      },
    ],
    tableTitle: 'Open Design でのモーション vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'After Effects / モーションスイート',
    tableRows: [
      {
        capability: 'スクリプトからアニメーションフレームへ',
        withOd: '一つのプロンプト。エージェントがシーケンスを構成',
        without: '各要素をタイムライン上で手でキーフレームする',
      },
      {
        capability: 'ブランドを保つ',
        withOd: 'フレームテンプレート + あなたの色と文字組み',
        without: 'プロジェクトごとにブランドスタイリングを作り直す',
      },
      {
        capability: '正確で繰り返し可能なタイミング',
        withOd: 'HTML で構成され、決定論的にレンダリング',
        without: '手動スクラブ、再現が難しい',
      },
      {
        capability: 'ソーシャル向けエクスポート',
        withOd: '動画にレンダリングされたショートクリップ',
        without: 'エクスポートプリセットとコーデックとの格闘',
      },
      {
        capability: 'レビューとバージョン管理',
        withOd: 'フレームソースがリポジトリ内にあり、差分が取れる',
        without: 'バイナリのプロジェクトファイル、本当の差分が取れない',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、自分の鍵を持ち込み、ローカルで動作',
        without: '高価なスイート、急な学習曲線',
      },
    ],
    featuresTitle: 'アニメーションにできるもの',
    features: [
      { title: "Hyperframes", body: "HTML から構成されたフレームごとのモーションシーケンス。", thumb: "example-video-hyperframes" },
      { title: "ショート向けソーシャル", body: "ソーシャルフィード向けに作られた縦型クリップ。", thumb: "example-video-shortform" },
      { title: "モーションフレームセット", body: "クリップに組み立てる再利用可能なアニメーションフレーム。", thumb: "example-motion-frames" },
      { title: "映画的なライトリーク", body: "フィルム的なトランジションと雰囲気のある背景。", thumb: "example-frame-light-leak-cinema" },
      { title: "グリッチタイトル", body: "モーションとテクスチャを伴うタイトルの登場。", thumb: "example-frame-glitch-title" },
      { title: "ロゴアウトロ", body: "どんなクリップにも合うブランドの締めアニメーション。", thumb: "example-frame-logo-outro" },
    ],
    galleryTitle: 'Open Design で作られたモーション',
    galleryLead:
      'プロンプトからレンダリングされた本物のアニメーションフレームとクリップ。アイデアに近いものを選び、モーションを説明してください。',
    gallery: [
      { thumb: "example-hyperframes", caption: "Hyperframes のシーケンス" },
      { thumb: "example-frame-liquid-bg-hero", caption: "リキッドなモーション背景" },
      { thumb: "example-frame-macos-notification", caption: "アニメーションする UI フレーム" },
      { thumb: "example-frame-data-chart-nyt", caption: "アニメーションするデータチャート" },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'モーションテンプレートを見る',
    faqTitle: '動画 FAQ',
    faq: [
      {
        q: 'After Effects やモーショングラフィックスイートは必要ですか？',
        a: 'いいえ。Open Design はコーディングエージェントの中でアニメーションフレームを HTML で構成し、動画にレンダリングします。習得やライセンスが必要なタイムラインエディターはありません。',
      },
      {
        q: 'これはどんな種類の動画に向いていますか？',
        a: 'ショート向けのモーション — タイトルカード、データアニメーション、ロゴアウトロ、ソーシャルクリップ。長尺の編集ではなく、ブランドとプロダクトのモーション向けに作られています。',
      },
      {
        q: 'タイミングは再現可能ですか？',
        a: 'はい。フレームはコードで構成され決定論的にレンダリングされるので、毎回同じ結果が得られ、プロンプトで正確に微調整できます。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Claude Code、Codex、Cursor Agent、Gemini CLI、その他のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。',
      },
    ],
    ctaTitle: '次のアイデアを今夜アニメーションに',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、スクリプトを、すでに使っているエージェントの中で、モーションに変えましょう。',
  },
  designSystem: {
    title: 'Open Design + Claude Code でデザインシステムを構築し適用する',
    description:
      'ブランドを、コーディングエージェントがあらゆる成果物に適用する再利用可能なデザインシステムとして捉えます — 色、文字組み、コンポーネント、トーンを一つの DESIGN.md に。一度定義すれば、どのプロトタイプ、資料、ダッシュボードもブランドに沿ったままです。',
    breadcrumb: 'デザインシステム',
    label: 'ユースケース · デザインシステム',
    heading: '一つのデザインシステムを、エージェントが作るすべてに適用',
    lead: 'ブランドを一度定義すれば、Open Design がそれをすべての出力に持ち込みます — プロトタイプ、資料、ダッシュボード、グラフィック。システムはエージェントが読む DESIGN.md としてリポジトリ内にあるので、一貫性は手作業ではなく自動です。',
    heroImageAlt:
      '一つのデザインシステムが、多くのブランドに沿った成果物へと放射状に広がるエディトリアルなイラスト',
    tldrTitle: '一言で言うと',
    tldrBody:
      'Open Design はブランドを、エージェントがあらゆる成果物に適用する持ち運び可能なデザインシステムとして捉えます — リポジトリ内で一度定義し、どこでも強制され、それを管理する中央のデザインツールはありません。',
    stepsTitle: 'Open Design でのデザインシステムの流れ',
    steps: [
      {
        title: 'システムを捉える',
        body: 'ブランドを説明します — 色、文字組み、余白、声 — または既存のサイトをエージェントに指して抽出させます。Open Design がそれをプロジェクト内にある DESIGN.md に書き込みます。',
        imageAlt: 'ブランドが一つのデザインシステムファイルに捉えられるイラスト',
      },
      {
        title: '実証済みのベースから始める',
        body: 'Open Design は140以上の参照デザインシステムを備えています — Apple や Linear からエディトリアル、ブルータリストまで。白紙から始めるのではなく、自分のブランドに近いものをフォークしましょう。',
        imageAlt: '参照デザインシステムのギャラリーが閲覧されるイラスト',
      },
      {
        title: 'どこにでも適用する',
        body: '他のすべてのスキルが同じシステムを読むので、プロトタイプも、資料も、ダッシュボードも、一つのビジュアル言語を共有します — 毎回それを指定し直すことなく。',
        imageAlt: '一つのシステムが多くの成果物タイプに一貫して適用されるイラスト',
      },
      {
        title: '一か所で進化させる',
        body: 'システムを変えれば、次のレンダリングがそれをどこでも反映します。リポジトリ内のファイルなので、デザインの判断はコードのようにレビューされバージョン管理されます。',
        imageAlt: 'デザインシステムが更新され、すべての出力に伝播するイラスト',
      },
    ],
    tableTitle: 'Open Design でのデザインシステム vs これまでのやり方',
    tableColCapability: '必要なこと',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'デザインツールのライブラリ / スタイルガイド',
    tableRows: [
      {
        capability: 'システムを定義する',
        withOd: 'エージェントが読む DESIGN.md、140以上の参照からフォーク',
        without: '静的なスタイルガイドか、ツールに縛られたライブラリ',
      },
      {
        capability: '成果物タイプをまたいで適用する',
        withOd: '同じシステムがプロトタイプ、資料、ダッシュボード、グラフィックに供給',
        without: 'ツールごと、ファイルごとに実装し直す',
      },
      {
        capability: 'すべてを一貫させる',
        withOd: '自動 — すべてのスキルが一つの情報源を読む',
        without: '手作業の規律。時間とともにずれる',
      },
      {
        capability: 'ブランドを進化させる',
        withOd: '一度編集すれば、次のレンダリングがどこでも更新',
        without: 'ファイルとツールをまたいで探して置換',
      },
      {
        capability: 'レビューとバージョン管理',
        withOd: 'リポジトリ内にあり、コードのように差分が取れる',
        without: 'デザインツールに埋もれ、監査が難しい',
      },
      {
        capability: 'コストとロックイン',
        withOd: 'オープンソース、持ち運び可能、ローカルで動作',
        without: 'デザインツールのサブスクに縛られる',
      },
    ],
    featuresTitle: '始められるシステム',
    features: [
      { title: "Apple", body: "クリーンで抑制された、システムフォントの美学。", thumb: "design-system-apple" },
      { title: "Linear", body: "余白を詰めた、シャープなプロダクトツールの見た目。", thumb: "design-system-linear-app" },
      { title: "Notion", body: "柔らかく、文書を主役にした、親しみやすさ。", thumb: "design-system-notion" },
      { title: "Figma", body: "遊び心があり、カラフルで、クリエイティブツールのエネルギー。", thumb: "design-system-figma" },
      { title: "OpenAI", body: "ミニマルで、ニュートラルで、研究グレード。", thumb: "design-system-openai" },
      { title: "GitHub", body: "密度が高く、テクニカルで、開発者ネイティブ。", thumb: "design-system-github" },
    ],
    galleryTitle: 'Open Design のデザインシステム',
    galleryLead:
      '出発点としてフォークできる140以上の参照システムのほんの一部。自分のブランドに近いものを選び、適応させてください。',
    gallery: [
      { thumb: "design-system-airbnb", caption: "Airbnb 風のシステム" },
      { thumb: "design-system-vercel", caption: "Vercel 風のシステム" },
      { thumb: "design-system-stripe", caption: "Stripe 風のシステム" },
      { thumb: "design-system-spotify", caption: "Spotify 風のシステム" },
    ],
    exampleHref: '/plugins/systems/',
    exampleLinkLabel: 'デザインシステムを見る',
    faqTitle: 'デザインシステム FAQ',
    faq: [
      {
        q: 'ここで言うデザインシステムとは正確には何ですか？',
        a: '色、文字組み、余白、コンポーネント、声を捉えた、リポジトリ内の DESIGN.md ファイルです。Open Design のすべてのスキルがそれを読むので、あなたのブランドがエージェントの生み出すものに自動的に適用されます。',
      },
      {
        q: 'ゼロから始めなければなりませんか？',
        a: 'いいえ。Open Design はフォークできる140以上の参照デザインシステムを備えています — Apple や Linear からエディトリアル、ブルータリストまで — そこから自分のブランドに適応させます。',
      },
      {
        q: '資料、ダッシュボード、プロトタイプをまたいでどう一貫性を保つのですか？',
        a: 'それらのスキルがすべて同じ DESIGN.md を読むからです。システムを一度定義すれば、手で取り締まるものではなく、一貫性が自動になります。',
      },
      {
        q: 'どのエージェントを使えますか？',
        a: 'Claude Code、Codex、Cursor Agent、Gemini CLI、その他のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。',
      },
    ],
    ctaTitle: 'あなたのデザインシステムを今夜定義する',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、すでに使っているエージェントに、どこにでも適用できる一つのブランドを与えましょう。',
  },
  roleSoloBuilder: {
    title: 'ソロビルダーとインディーハッカーのための Open Design',
    description:
      '一人でもチームのように出荷しよう。Open Design はあなたのコーディングエージェントを、スタートアップのデザイン担当に変えます。プロトタイプ、ランディングページ、ダッシュボード、ブランドビジュアルまで、すべてプロンプトから、すべてブランドに沿って、すべてあなたのリポジトリの中で。',
    breadcrumb: 'ソロビルダー',
    label: '対象 · ソロビルダー',
    heading: 'あなたのデザインチームは、すでに動かしているエージェントだ',
    lead: 'デザイナーも、予算も、引き継ぎも不要。必要なものを伝えれば、エージェントが描き出します。今朝はランディングページ、午後はダッシュボード、出荷前にはソーシャルカード。すべてが、一度定義したひとつのデザインシステムを共有します。',
    heroImageAlt:
      '一貫したスタイルのランディングページ、アプリ、ダッシュボード、ソーシャルカードに囲まれて机に向かう一人の人物を描いたエディトリアルイラスト',
    tldrTitle: 'ひと言で言うと',
    tldrBody:
      'Open Design は、ソロ創業者がこれまで持てなかったデザイン部門です。プロダクトに必要なあらゆる面で、プロンプトから成果物へ。ひとつのブランドで、引き継ぎゼロ、追加ツールなし。',
    stepsTitle: 'ソロビルダーは Open Design をこう使う',
    steps: [
      {
        title: 'ブランドを一度だけ定義する',
        body: 'カラー、タイポグラフィ、トーンを DESIGN.md に記述します（または 140 以上のリファレンスシステムから一つを fork します）。それ以降に生成するすべての成果物は、自動的にブランドに沿います。',
        imageAlt: '単一のブランド定義ファイルのイラスト',
      },
      {
        title: '次に必要なものを何でも生成する',
        body: 'プロトタイプ、ランディングページ、ダッシュボード、ピッチデック、ソーシャルカード。同じエージェント、同じブランド、それぞれワンプロンプトで。ツールを切り替えたり席を買い足したりする必要はありません。',
        imageAlt: 'ひとつのプロンプトから多種多様な成果物が生まれるイラスト',
      },
      {
        title: 'そのまま出荷する。すでに本物だから',
        body: 'すべてはあなたのリポジトリの HTML / コードとしてレンダリングされます。だからプロトタイプはそのままプロダクトになり、ランディングページは公開されます。使い捨てのモックアップはありません。',
        imageAlt: '成果物がプロンプトから公開まで一直線に進むイラスト',
      },
    ],
    tableTitle: 'Open Design でのソロ開発 vs. 手作業でやり抜く道',
    tableColCapability: '必要なもの',
    tableColWithOd: 'Open Design なら',
    tableColWithout: '今、一人でやると',
    tableRows: [
      { capability: 'あらゆるデザイン面をカバー', withOd: '一つのエージェントがプロトタイプ、ランディング、ダッシュボード、ブランドを担当', without: '五つの SaaS ツールとチュートリアルを継ぎ接ぎ' },
      { capability: 'ブランドを保つ', withOd: '一つの DESIGN.md がどこにでも自動適用', without: 'ツールごとに見た目を再現し、時とともにブレる' },
      { capability: 'ソロのスピードで動く', withOd: 'アイデアから成果物までワンプロンプト', without: '時間のないあなたがデザインツールを習得' },
      { capability: 'モックではなく出荷', withOd: 'リポジトリ内の HTML / コード、デプロイ可能', without: '誰かが結局作り込まねばならないモックアップ' },
      { capability: 'コスト', withOd: 'オープンソース、自分の鍵を持参、ローカルで動作', without: '席ごとに課金されるサブスクの山' },
    ],
    featuresTitle: 'ソロビルダーが出荷できるもの',
    features: [
      { title: 'ランディングページ', body: 'マーケティングと SaaS のランディング、クリック可能でライブ。', thumb: 'example-saas-landing' },
      { title: 'プロダクトプロトタイプ', body: 'アイデアを検証するマルチスクリーンの Web アプリ。', thumb: 'example-web-prototype' },
      { title: 'ダッシュボード', body: 'あなたのプロダクトの指標と管理ビュー。', thumb: 'example-dashboard' },
      { title: 'ブランドグラフィック', body: 'ブランドに合うカバーとポスター。', thumb: 'example-magazine-poster' },
      { title: 'モバイルフロー', body: 'Web を超えるときのアプリ画面。', thumb: 'example-mobile-app' },
      { title: 'ソーシャルカード', body: 'あらゆるチャネル向けのローンチ・更新カード。', thumb: 'example-card-twitter' },
    ],
    galleryTitle: 'Open Design で一人で作った',
    galleryLead:
      '一人のスタートアップに必要なあらゆる面を、プロンプトから。次の一手に近いものを選んで、それを説明してください。',
    gallery: [
      { thumb: 'example-saas-landing', caption: 'SaaS ランディングページ' },
      { thumb: 'example-web-prototype', caption: 'プロダクトプロトタイプ' },
      { thumb: 'example-dashboard', caption: 'プロダクトダッシュボード' },
      { thumb: 'example-card-twitter', caption: 'ローンチ用ソーシャルカード' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'テンプレートを見る',
    faqTitle: 'ソロビルダー FAQ',
    faq: [
      { q: 'デザイナーではありませんが、本当に使えますか？', a: 'はい。やりたいことを平易な言葉で説明すれば、エージェントがデザインシステムを適用してレンダリングします。スキルはプロンプトを書くことであって、ピクセルを動かすことではありません。' },
      { q: 'すべてをカバーしますか、それとも一つだけ？', a: '小さなプロダクトに必要なすべてを。プロトタイプ、ランディングページ、ダッシュボード、デック、グラフィックを、同じエージェントと同じブランドから。' },
      { q: '出力は何になりますか？', a: 'あなたのリポジトリの本物の HTML / コードです。だからプロトタイプはプロダクトになり、ランディングページは公開できます。使い捨てのモックアップではありません。' },
      { q: 'どのエージェントを使えますか？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。' },
    ],
    ctaTitle: '今夜、すべてを作り上げよう',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、一つのエージェントをあなたのデザインチームにしよう。すでに使っているそのエージェントの中で。',
  },
  roleDesigner: {
    title: 'デザイナーのための Open Design',
    description:
      '時間をセンスに使い、雑務には使わない。Open Design は、繰り返しの制作作業（バリエーション、状態、デザインシステム全体）をエージェントに任せ、あなたは見た目をディレクションし、最終判断を握ります。',
    breadcrumb: 'デザイナー',
    label: '対象 · デザイナー',
    heading: 'デザインをディレクションし、制作はエージェントに任せる',
    lead: 'システムと基準はあなたが定める。画面、状態、バリエーション、ハイフィデリティのカンプはエージェントがレンダリングします。長方形を押し動かす時間を減らし、良いとは何かを決める時間を増やしましょう。',
    heroImageAlt:
      'デザイナーがディレクションし、エージェントが画面、バリエーション、デザインシステムを埋めていくエディトリアルイラスト',
    tldrTitle: 'ひと言で言うと',
    tldrBody:
      'Open Design は決して疲れない制作アシスタントです。あなたがデザインシステムを定義しセンスを判断し、エージェントが残りをシステムに沿って、あなたのリポジトリの中で生成します。',
    stepsTitle: 'デザイナーは Open Design をこう使う',
    steps: [
      {
        title: 'システムをコード化する',
        body: 'ブランドを DESIGN.md に落とし込みます。タイプスケール、カラー、スペーシング、コンポーネント、トーン。これがエージェントの従う真実の源です。',
        imageAlt: 'ファイルとして記述されたデザインシステムのイラスト',
      },
      {
        title: 'ロングテールを生成する',
        body: '本来なら手で組み上げるあらゆる画面、状態、バリエーションを、エージェントがシステムに沿ってレンダリングします。だから退屈な 80% は数分で片付きます。',
        imageAlt: 'システムに沿った多数の画面が一度に生成されるイラスト',
      },
      {
        title: 'ディレクションして磨く',
        body: '言葉で批評します。「スペーシングを詰めて、空状態をもっと温かく」。最終判断はあなたが握り、反復はエージェントが行います。',
        imageAlt: 'デザイナーが指示を出し、デザインが更新されるイラスト',
      },
    ],
    tableTitle: 'Open Design でのデザイン vs. 手作業のやり方',
    tableColCapability: '必要なもの',
    tableColWithOd: 'Open Design なら',
    tableColWithout: '手作業のデザインツール',
    tableRows: [
      { capability: 'デザインシステムを構築', withOd: 'エージェントがどこにでも適用する DESIGN.md', without: 'ツールごとに手で保守するライブラリ' },
      { capability: 'バリエーションと状態を作る', withOd: 'プロンプトからシステムに沿って生成', without: 'フレームを複製して一つひとつ調整' },
      { capability: 'ハイフィデリティのカンプ', withOd: 'フラットなモックではなく本物の HTML にレンダリング', without: 'どのみちエンジニアが作り直すピクセル作業' },
      { capability: '一貫性を保つ', withOd: '一つのシステムが自動的に強制される', without: '手作業の規律。時とともにブレる' },
      { capability: '引き継ぎ', withOd: '成果物はコード。翻訳のギャップなし', without: '仕様書とレッドライン' },
    ],
    featuresTitle: 'デザイナーがディレクションできるもの',
    features: [
      { title: 'エディトリアルレイアウト', body: 'アートディレクションされた、グリッド主導の構成。', thumb: 'example-web-prototype-taste-editorial' },
      { title: '記事カバー', body: 'マガジン風のカバーと特集。', thumb: 'example-article-magazine' },
      { title: 'ポスター', body: 'ブランドに沿った大胆なタイポグラフィのポスター。', thumb: 'example-magazine-poster' },
      { title: 'ソーシャルセット', body: '一貫したマルチフレームのカルーセル。', thumb: 'example-social-carousel' },
      { title: 'アプリ画面', body: 'ハイフィデリティのモバイル・Web 画面。', thumb: 'example-mobile-app' },
      { title: 'ダッシュボード', body: 'あなたのシステムを尊重するデータ UI。', thumb: 'example-dashboard' },
    ],
    galleryTitle: 'Open Design でディレクションした',
    galleryLead:
      'ディレクションからエージェントが生み出した、システムに沿ったハイフィデリティの作品。あなたのスタイルに近いものを選んで磨きましょう。',
    gallery: [
      { thumb: 'example-web-prototype-taste-editorial', caption: 'エディトリアルレイアウト' },
      { thumb: 'example-article-magazine', caption: 'マガジンカバー' },
      { thumb: 'example-social-carousel', caption: 'ソーシャルカルーセル' },
      { thumb: 'example-magazine-poster', caption: 'タイポグラフィポスター' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'テンプレートを見る',
    faqTitle: 'デザイナー FAQ',
    faq: [
      { q: 'これは私の代わりになりますか？', a: 'いいえ。代わるのは雑務です。システムとセンスはあなたが定め、繰り返しの制作はエージェントが行います。だからあなたにしかできない決定に時間を使えます。' },
      { q: '見た目のコントロールをどう保てますか？', a: 'あなたの DESIGN.md が契約です。エージェントはその範囲内でレンダリングし、あなたは正しくなるまで言葉で批評します。' },
      { q: '出力は編集可能 / 本物ですか？', a: 'フラットな書き出しではなく、本物の HTML/CSS です。だから作り直されることなく、そのまま本番に運ばれます。' },
      { q: 'どのエージェントを使えますか？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。' },
    ],
    ctaTitle: '今夜、次のデザインをディレクションしよう',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、制作はエージェントに任せ、センスはあなたが判断しよう。すでに使っているそのエージェントの中で。',
  },
  roleEngineering: {
    title: 'エンジニアのための Open Design',
    description:
      'デザインの引き継ぎを飛ばそう。Open Design は DESIGN.md を、あなたのコーディングエージェントが直接書く本物のフロントエンドに変えます。システムに沿った UI、プロトタイプ、ダッシュボードを、リポジトリの中で、Figma の往復なしに。',
    breadcrumb: 'エンジニアリング',
    label: '対象 · エンジニアリング',
    heading: '仕様からフロントエンドへ、間に引き継ぎなし',
    lead: 'エージェントに DESIGN.md と説明を向けるだけで、システムに沿った本物のフロントエンドコード（コンポーネント、画面、ダッシュボード）をあなたのプロジェクトに直接書きます。レッドラインも、「デザイン待ち」もありません。',
    heroImageAlt:
      'DESIGN.md が引き継ぎ工程を飛ばして、直接フロントエンドコードとレンダリングされた UI に流れ込むエディトリアルイラスト',
    tldrTitle: 'ひと言で言うと',
    tldrBody:
      'Open Design はデザインシステムを機械可読にすることで、デザイナーからエンジニアへのギャップを埋めます。あなたのコードを書く同じエージェントが、システムを適用し本物の UI をレンダリングします。',
    stepsTitle: 'エンジニアは Open Design をこう使う',
    steps: [
      {
        title: 'レッドラインではなく、システムを読む',
        body: 'DESIGN.md はリポジトリの中に存在します。エージェントはコードベースの残りを読むのと同じようにそれを読みます。解釈すべき書き出された仕様はありません。',
        imageAlt: 'エージェントがコードと並べて DESIGN.md を読むイラスト',
      },
      {
        title: 'システムに沿った UI を生成する',
        body: '画面やコンポーネントを説明すれば、エージェントはすでにシステムに合致したフロントエンドを書きます。プロトタイプ、管理ダッシュボード、社内ツールを、数分で。',
        imageAlt: 'デザインシステムに合致するように生成された UI コードのイラスト',
      },
      {
        title: 'それはすでにあなたのコード',
        body: '出力はあなたのリポジトリの HTML / フレームワークコードで、PR でレビュー可能です。「デザイン」と「実装」の間に翻訳工程はありません。',
        imageAlt: '生成された UI がレビュー可能な PR として着地するイラスト',
      },
    ],
    tableTitle: 'Open Design でのフロントエンド vs. 引き継ぎのやり方',
    tableColCapability: '必要なもの',
    tableColWithOd: 'Open Design なら',
    tableColWithout: 'デザインから開発への引き継ぎ',
    tableRows: [
      { capability: '実装の元になるデザインを得る', withOd: 'エージェントが直接読む DESIGN.md', without: '手で再解釈する Figma ファイル' },
      { capability: 'システムに合わせる', withOd: '生成時に自動で強制される', without: '仕様と見比べる。ブレが忍び込む' },
      { capability: '社内ツール / ダッシュボードを作る', withOd: 'プロンプト → リポジトリ内のシステムに沿ったフロントエンド', without: 'デザイナーを待ち、それから二度作る' },
      { capability: 'レビュー', withOd: 'コードだから PR で差分を見る', without: 'モックアップとピクセル比較' },
      { capability: 'コストとロックイン', withOd: 'オープンソース、リポジトリ内、ローカルで動作', without: 'チーム全員がライセンスを要するデザインツール' },
    ],
    featuresTitle: 'エンジニアが生成できるもの',
    features: [
      { title: 'Web アプリ UI', body: '説明からのマルチスクリーンフロントエンド。', thumb: 'example-web-prototype' },
      { title: '開発ダッシュボード', body: 'リポジトリ、CI、指標のダッシュボード。', thumb: 'example-github-dashboard' },
      { title: 'データレポート', body: 'あなたのデータからの構造化レポート。', thumb: 'example-data-report' },
      { title: '管理ダッシュボード', body: '社内ツールと管理ビュー。', thumb: 'example-dashboard' },
      { title: 'ランディングページ', body: 'デザイン待ちなしのマーケティングページ。', thumb: 'example-saas-landing' },
      { title: 'Kanban / ボード', body: '社内ワークフロー UI。', thumb: 'example-kanban-board' },
    ],
    galleryTitle: 'エンジニアが Open Design で作った',
    galleryLead:
      'リポジトリの中で直接生成された、システムに沿った本物のフロントエンド。作っているものに近いものを選んで説明してください。',
    gallery: [
      { thumb: 'example-web-prototype', caption: 'Web アプリ UI' },
      { thumb: 'example-github-dashboard', caption: '開発ダッシュボード' },
      { thumb: 'example-data-report', caption: 'データレポート' },
      { thumb: 'example-kanban-board', caption: '社内ボード UI' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'テンプレートを見る',
    faqTitle: 'エンジニアリング FAQ',
    faq: [
      { q: 'それでもデザイナーは必要ですか？', a: 'ブランドとディレクションには、はい。しかしシステムに沿った UI や社内ツールの構築には、エージェントが DESIGN.md を読んでフロントエンドを書きます。引き継ぎの往復はありません。' },
      { q: '何を出力しますか？', a: 'あなたのリポジトリの本物の HTML / フレームワークコードで、PR でレビュー可能です。作り直すモックアップではありません。' },
      { q: 'どうやってシステムに沿い続けますか？', a: 'DESIGN.md が真実の源です。エージェントが生成時にそれを適用するので、手作業のピクセルチェックなしに出力が合致します。' },
      { q: 'どのエージェントを使えますか？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。' },
    ],
    ctaTitle: '今夜、次の UI を生成しよう',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、DESIGN.md をフロントエンドに変えよう。すでに使っているそのエージェントの中で。',
  },
  roleProductManagers: {
    title: 'プロダクトマネージャーのための Open Design',
    description:
      'アイデアを伝えるために、デザインのリソースを待つのはもう終わり。Open Design は PM がプロンプトを、クリック可能なプロトタイプやワイヤーフレームに変えられるようにします。ステークホルダーの足並みを揃え、チームにブリーフィングするために、デザインチケットなしで。',
    breadcrumb: 'プロダクトマネージャー',
    label: '対象 · プロダクトマネージャー',
    heading: 'キックオフの前に、アイデアをクリック可能にする',
    lead: 'フローを説明すれば、エージェントが本物のクリック可能なプロトタイプをレンダリングし、今日にもステークホルダーの前に出せます。だからレビューはドキュメントの一段落ではなく、実物について議論できます。',
    heroImageAlt:
      'PM が書かれたアイデアを、ステークホルダーに見せるクリック可能なプロトタイプに変えるエディトリアルイラスト',
    tldrTitle: 'ひと言で言うと',
    tldrBody:
      'Open Design は PM にデザイン不要の方法でアイデアを形にする手段を与えます。足並みを揃えるためのブリーフのための、プロンプトからプロトタイプへ。チームのデザイン予算を使わずに。',
    stepsTitle: 'PM は Open Design をこう使う',
    steps: [
      {
        title: 'フローを説明する',
        body: 'ユーザージャーニーを平易な言葉で書きます。画面、状態、ハッピーパス。ワイヤーフレームツールは不要です。',
        imageAlt: 'PM がユーザーフローを説明するイラスト',
      },
      {
        title: 'クリック可能なプロトタイプを得る',
        body: 'エージェントが実際にクリックして進める画面をレンダリングします。ステークホルダーレビューには、スライドやドキュメントよりはるかに明快です。',
        imageAlt: '説明から生み出されたクリック可能なプロトタイプのイラスト',
      },
      {
        title: '足並みを揃えて引き継ぐ',
        body: 'リンクを共有し、実物についてフィードバックを集め、それからプロトタイプを、正確で共有された出発点としてデザイン / エンジニアに渡します。',
        imageAlt: 'プロトタイプが足並みを揃えるために共有され、それからチームに渡されるイラスト',
      },
    ],
    tableTitle: 'Open Design での PM 業務 vs. デザイン待ち',
    tableColCapability: '必要なもの',
    tableColWithOd: 'Open Design なら',
    tableColWithout: '今、それなしだと',
    tableRows: [
      { capability: 'アイデアを形にする', withOd: 'プロンプト → 自分でクリック可能なプロトタイプ', without: 'デザインチケットを起票してリソースを待つ' },
      { capability: 'ステークホルダーの足並みを揃える', withOd: '彼らが本物のフローをクリックする', without: 'ドキュメントを読んで各自が別々に想像する' },
      { capability: 'チームにブリーフィングする', withOd: '仕様としての具体的なプロトタイプ', without: '大量の文章と何度ものやり取り' },
      { capability: '実装前に反復する', withOd: 'プロンプトで変更し、再共有', without: 'デザインキューでもう一周' },
      { capability: 'コスト', withOd: 'オープンソース、すでに使っているエージェントの中で', without: '使い捨てのコンセプトに費やすデザイン工数' },
    ],
    featuresTitle: 'PM が人に見せられるもの',
    features: [
      { title: 'モバイルフロー', body: 'エンドツーエンドのアプリジャーニー、クリック可能。', thumb: 'example-mobile-app' },
      { title: 'オンボーディングフロー', body: 'ようこそ → セットアップ → 初回起動。', thumb: 'example-mobile-onboarding' },
      { title: 'ボードとワークフロー', body: '仕様のための Kanban とプロセス UI。', thumb: 'example-kanban-board' },
      { title: 'ダッシュボード', body: '問題を枠づける指標ビュー。', thumb: 'example-dashboard' },
      { title: 'Web プロトタイプ', body: 'レビュー用のマルチスクリーン Web フロー。', thumb: 'example-web-prototype' },
      { title: 'トレンドビュー', body: '文脈のための 30 日間・トレンドのスナップショット。', thumb: 'example-last30days' },
    ],
    galleryTitle: 'PM が Open Design でプロトタイプ化した',
    galleryLead:
      '説明からレンダリングされた、ステークホルダーレビューに使えるクリック可能なフロー。あなたのアイデアに近いものを選んで説明してください。',
    gallery: [
      { thumb: 'example-mobile-app', caption: 'モバイルフロー' },
      { thumb: 'example-mobile-onboarding', caption: 'オンボーディングフロー' },
      { thumb: 'example-kanban-board', caption: 'ワークフローボード' },
      { thumb: 'example-web-prototype', caption: 'Web プロトタイプ' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'テンプレートを見る',
    faqTitle: 'プロダクトマネージャー FAQ',
    faq: [
      { q: 'デザインはできません。これは私向けですか？', a: 'はい。フローを言葉で説明すれば、エージェントがそれをクリック可能にします。伝えて足並みを揃えるためのものであり、デザインツールは不要です。' },
      { q: '本物のプロトタイプですか、それともモックアップですか？', a: '本物でクリック可能です。ナビゲーションも状態も動くので、ステークホルダーは実際の体験に反応します。' },
      { q: 'デザインの代わりになりますか？', a: 'いいえ。テキスト仕様の代わりに、デザインとエンジニアに正確で共有された出発点を与え、必要な仕事のためにデザインのリソースを温存します。' },
      { q: 'どのエージェントを使えますか？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。' },
    ],
    ctaTitle: '今夜、あなたのアイデアをクリック可能にしよう',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、次の仕様を人がクリックできるものに変えよう。すでに使っているそのエージェントの中で。',
  },
  roleMarketing: {
    title: 'マーケティングチームのための Open Design',
    description:
      'コンテンツのスピードでキャンペーンを出荷しよう。Open Design はあなたのエージェントが、ランディングページ、ソーシャルカード、キャンペーンビジュアルをプロンプトから作れるようにします。ブランドに沿って、オンデマンドで、デザインの順番待ちなしに。',
    breadcrumb: 'マーケティング',
    label: '対象 · マーケティング',
    heading: 'プロンプトのスピードのキャンペーンビジュアル',
    lead: 'ランディングページ、ソーシャルカード、カバー、告知グラフィック。言葉で説明し、ブランドに沿ってレンダリングし、同日に出荷。デザインチケットも、テンプレートとの格闘もなし。',
    heroImageAlt:
      'マーケターがブリーフを、ランディングページとブランドに沿った一連のソーシャルカードに変えるエディトリアルイラスト',
    tldrTitle: 'ひと言で言うと',
    tldrBody:
      'Open Design はマーケティングの常時稼働のデザインリソースです。ランディングページとソーシャルのための、プロンプトからアセットへ。ブランドに沿って。だからキャンペーンはコピーを書くスピードで出荷されます。',
    stepsTitle: 'マーケティングチームは Open Design をこう使う',
    steps: [
      {
        title: 'ブランドを固める',
        body: 'あなたの DESIGN.md がカラー、タイポグラフィ、トーンを保持します。エージェントが作るすべてのアセットは自動的にブランドに沿います。アセットごとの再スタイリングは不要です。',
        imageAlt: 'マーケティングアセットに適用されたブランドシステムのイラスト',
      },
      {
        title: 'キャンペーンを生成する',
        body: 'ランディングページ、ソーシャルカード、カバー、告知グラフィック。それぞれワンプロンプトで、あらゆるチャネルにわたって一貫したセットを。',
        imageAlt: 'プロンプトから生成された完全なキャンペーンセットのイラスト',
      },
      {
        title: '出荷して反復する',
        body: 'ランディングページはデプロイできる HTML にレンダリングされ、グラフィックは PNG に書き出されます。見出しを変えてセットを再レンダリング。順番待ちはありません。',
        imageAlt: 'キャンペーンアセットが素早く出荷され反復されるイラスト',
      },
    ],
    tableTitle: 'Open Design でのマーケティング vs. いつものドタバタ',
    tableColCapability: '必要なもの',
    tableColWithOd: 'Open Design なら',
    tableColWithout: '今、それなしだと',
    tableRows: [
      { capability: 'ランディングページを公開', withOd: 'プロンプト → ブランドに沿ったページ、デプロイ可能', without: 'デザインに依頼するか、サイトビルダーと格闘' },
      { capability: '一貫したソーシャルセット', withOd: '同じテンプレート、新しいコピー、完璧に整列', without: 'カードごとに手で整列し直す' },
      { capability: 'ブランドを保つ', withOd: '一つの DESIGN.md があらゆるアセットに適用', without: '各アセットがガイドラインに合うことを祈る' },
      { capability: 'キャンペーンのスピードで動く', withOd: 'プロンプトでアセット、同日に', without: 'デザインのバックログの後ろで順番待ち' },
      { capability: 'コスト', withOd: 'オープンソース、席ごと課金のデザインツールなし', without: 'サブスクに加えてデザイン工数' },
    ],
    featuresTitle: 'マーケティングチームが出荷できるもの',
    features: [
      { title: 'ランディングページ', body: 'キャンペーンとプロダクトのランディング、デプロイ可能。', thumb: 'example-saas-landing' },
      { title: 'ソーシャルカード', body: 'ブランドに沿った X / Twitter カード。', thumb: 'example-card-twitter' },
      { title: 'カルーセル', body: '一貫したマルチスライドのソーシャルセット。', thumb: 'example-social-carousel' },
      { title: 'ポスター', body: '告知とイベントのポスター。', thumb: 'example-magazine-poster' },
      { title: '記事カバー', body: 'ブログとニュースレターのカバー。', thumb: 'example-article-magazine' },
      { title: 'Web ページ', body: 'マイクロサイトとキャンペーンページ。', thumb: 'example-web-prototype' },
    ],
    galleryTitle: 'マーケティングが Open Design で出荷した',
    galleryLead:
      'プロンプトからレンダリングされた、ブランドに沿ったキャンペーンアセット。あなたのキャンペーンに近いものを選んで、コピーを差し替えてください。',
    gallery: [
      { thumb: 'example-saas-landing', caption: 'キャンペーンランディングページ' },
      { thumb: 'example-card-twitter', caption: 'ソーシャルカード' },
      { thumb: 'example-social-carousel', caption: 'ソーシャルカルーセル' },
      { thumb: 'example-magazine-poster', caption: '告知ポスター' },
    ],
    exampleHref: '/plugins/templates/',
    exampleLinkLabel: 'テンプレートを見る',
    faqTitle: 'マーケティング FAQ',
    faq: [
      { q: 'すべてのアセットにデザイナーが必要ですか？', a: 'いいえ。エージェントがブランドに沿ったランディングページとソーシャルアセットをプロンプトからレンダリングします。だからチームは定例のキャンペーン業務を、デザインの順番待ちなしに出荷できます。' },
      { q: 'アセットはどうやってブランドに沿い続けますか？', a: 'あなたの DESIGN.md がすべてに自動適用されます。カラー、タイポグラフィ、トーンがあらゆるアセットにわたって引き継がれます。' },
      { q: 'ランディングページは実際に公開できますか？', a: 'はい。デプロイできる HTML にレンダリングされ、グラフィックは PNG に書き出されます。これらは出荷可能なアセットであり、モックアップではありません。' },
      { q: 'どのエージェントを使えますか？', a: 'Claude Code、Codex、Cursor Agent、Gemini CLI ほか、各種ファーストパーティアダプター。自分のプロバイダー鍵で。' },
    ],
    ctaTitle: '今夜、次のキャンペーンを出荷しよう',
    ctaBody:
      'リポジトリにスターを付け、Open Design をインストールして、ブリーフをブランドに沿ったアセットに変えよう。すでに使っているそのエージェントの中で。',
  },
};
