> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# マーケティングページ

ランディングセクション、法的ページ、FAQ、更新履歴、サイト設定。

## 初心者向けのウォークスルー

前提条件: 以下の 2 つの初心者向けガイドを読み、Web ローカルのセットアップを完了し、エディターでルートにあるこのモノリポジトリを開きます。 Web 設定は `apps/web/.env.local` に属します。 Next.js はルート `.env` を読み取りません。デフォルトのフェイク モードの `/dashboard` はデータベースなしのデモです。 `/auth` には移行されたデータベースが必要です。

簡単に説明すると、ワークスペースは 1 つのチームの個別のユーザー、データ、設定です。サーバーは信頼できるバックエンドです。プロバイダー キーがブラウザーや電話コードに含まれないようにします。移行は、テーブルを作成または更新する、バージョン管理されたデータベースの変更です。 AI モデルは答えを返すエンジンです。モデル カタログは、使用可能なモデル ID と価格のサーバーのリストです。プロバイダーは、AI、電子メール、請求サービスなどの外部サービスです。資格は、ワークスペースで機能を使用できるようにする付与です。 Webhook は、あるサービスが別のサービスの URL に送信するメッセージです。

1. `apps/web/src/marketing/site-config.ts` を開き、製品名、キャッチフレーズ、ナビゲーション ラベル/URL、およびサポート アドレスを独自の値に変更します。

2. `apps/web/public/og.png` を置き換え、`apps/web/src/marketing/seo.tsx` の代替テキストと寸法を 1 つの変更として更新します。

3. ホーム、FAQ、フッター、ソーシャル プレビューを更新します。古いテキストが残っている場合は、公開する前にこのリポジトリで古い名前を検索してください。

カスタム コードの場合は、提供された `prompts/README.md` から始めて、最も近いプロンプト (アプリ画面の場合は `prompts/new-app-screen.md`、パブリック ページの場合は `prompts/new-landing-page.md`) をコピーします。サーバー、データベース、またはプロバイダーの作業については、コーディング エージェントにこのガイドのタスクを与え、`AGENTS.md`、`.ai/PROJECT_CONTEXT.md`、および一致する `.ai/` ミラーを読み取るように依頼します。ここで指定されている正確なソース ファイルを調べてください。ファイルをリストし、編集前にチェックします。ワークスペースの所有権とサーバーのみの秘密を保持します。そして差分を見せてください。必要な動作、入力フィールドと出力フィールド、許可されるロール、予想される成功とエラー、テスト アカウント、プロバイダー、またはデバイスを指定します。サンプル値を使用します。絶対に本当の秘密を貼り付けないでください。

[始める前に](https://supastack.dev/ja/docs/web/before-you-start.md)

【端末の基本】(/docs/web/terminal-basics)

[Webローカル設定](https://supastack.dev/ja/docs/web/ship-in-5-minutes.md)

[エージェント プロンプトとプロジェクト メモリ](https://supastack.dev/ja/docs/web/agents.md)


## サイト構成を更新する

`apps/web/src/marketing/site-config.ts` は、ブランド コピー、ナビゲーション/フッター リンク、FAQ、およびオプションのリポジトリ/ドキュメントの宛先を所有します。製品名をコンポーネント間で分散させる前に、これを更新してください。キット独自のクロムはこの構成を使用します。コピー可能なクロム ブロックはプロダクト プロップを受け入れます。


## アセット ファミリをまとめて置き換えます

共有 4 タイル マークには、左上/右下が白、右上/左下が薄い灰色のタイルがあります。ヘッダーマークを透明にしておきます。アプリのアイコン/ファビコンは、丸い黒い背景を使用します。派生製品は、マークとそれに関連するアプリ/デスクトップ アセットを一緒に置き換えることができます。

共有パブリック ソーシャル カードは `/og.png` です。 `marketing/seo.tsx` の記述子を寸法と代替テキストで更新します。ブログ記事カードは、別の次の画像ルートを使用します。


## すべての公共の場をチェックする

ヘッダー/フッター、連絡先、FAQ、法的ページ、ローカライズされたホーム コピー、タイトル、ソーシャル カードを確認します。製品のマーケティング テーマ モードを選択し、機能するサポート/問い合わせリンクのみを出荷します。

【製品スタイル】(/docs/web/theming)

[法的ページの足場](https://supastack.dev/ja/docs/web/project-structure.md)

[メタデータとソーシャル カード](https://supastack.dev/ja/docs/web/project-structure.md)


## インストールとセットアップ

マーケティング面はハードコードされた JSX ではなく型付きデータに配線されています——ヒーロー、機能セクション、価格、FAQ、更新履歴、ショーケース、問い合わせ、法的ページはすべてサイト設定とコンテンツファイルからコピーと構造を読みます。

MARKETING_THEME_MODE（src/theme/marketing-theme.ts）は、マーケティングをキットの固定ダークブランドに保つか、訪問者のテーマパックを継承するか、特定のパックに固定するかを決めます。派生プロダクトはそれぞれのモードを選びます。

```
src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"
```


## 実装ワークフロー

まずブロックライブラリからページを組み立て、パターンが足りなければ同じトークンのみのスタイルで新しいブロックを書き、src/kit/blocks.ts に登録します。マーケティングコンポーネントをプロダクト面に入れないでください——2つのクローム系は分離したままです。

ローカライズされたコピーは辞書と site-content オーバーレイを通って流れます。言語ごとにコンポーネントをフォークするのではなく、そこにキーを追加してください。


## 検証とトラブルシューティング

マーケティングページを 320px とデスクトップで、可視のキーボードフォーカス付きで、少なくとも1つのライトと1つのダークパックで、かつ reduced motion で確認します。マーケティングの主張が機能を参照する場合、リンク先のドキュメントページが存在することを確認してください。


## 次へ

[SEO と共有](https://supastack.dev/ja/docs/web/seo.md)