Content Brief Engineの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

content brief engine content brief engine は、テーマ・読者・検索意図・CTA を入力すると、コンテンツ制作チーム向けのブリーフ草案を生成する静的Webアプリです。 機能 テーマ、読者、目的、チャネル、検索意図、CTA の入力 ブリーフ本文の自動生成 生成結果のワンクリックコピー Vite によるローカル開発と本番ビルド 開発 品質確認 公開URL 本番URLが決まっている場合は、ビルド前に VITE PUBLIC SITE URL を設定すると public/robots.txt と public/sitemap.xml がそのURLで生成されます。 Vercel デプロイ vercel.json で Vite の出力先を dist に固定しています。Vercel 側では次の1点だけ設定すれば公開できます。 Environment Variable: VITE PUBLIC SITE URL=https:// ローカルでは .env.example をコピーして .env.local を作っても運用できます。 公開後の最終確認 1. トップページが表示される 2. 入力フォームからブリーフ本文が生成される 3. 「コピー」ボタンで生成結果をクリップボードへコピーできる 4. https:// /robots.txt が本番ドメインを返す 5. https:// /sitemap.xml が本番ドメインを返す 6. title と meta description が意図どおりに出ている Vercel 側の設定メモ Framework Preset: Vite Build Command: npm run build Output Directory: dist Environment Variable: VITE PUBLIC SITE URL

本記事は公開されている構成と main ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

• 単一アプリケーション構成
• 機能単位の責務分割

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/08/15
   支援・購入への導線を追加する0bdb31fをGitHubで確認 ↗
2. 2026/08/11
   実装内容を更新f1c2876をGitHubで確認 ↗
3. 2026/08/11
   機能・コンテンツを追加346b78bをGitHubで確認 ↗
4. 2026/08/11
   実装内容を更新2a9fb55をGitHubで確認 ↗
5. 2026/08/11
   実装内容を更新b4ac42aをGitHubで確認 ↗
6. 2026/07/20
   プロジェクトの初期構成を作成a5f58cbをGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  JavaScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問