Frame — Brand Strategy Builder

ブランディングの意思決定で「実は決まっているけど曖昧にしている部分」を構造化し、判断可能な文書に変換するシステム。

---

これは何か

Frame は、ブランド戦略の入力情報からブランドストーリーとガイドラインを生成するツールです。

ただし、一般的なデザインシステムジェネレーターやブランディングテンプレートとは設計思想が異なります。

普通のデザインシステムとの違い

Frame が解決するのは「見た目」ではなく「意思決定の曖昧さ」

ブランディングの現場で本当に困るのは「アイデアがない」ことではありません。

困るのは：

• 決めたことが言語化されていない — 会議で合意したはずの方針が、人によって解釈が違う
• 言語化されたけど共有されていない — ドキュメントはあるが、制作の現場で参照されていない
• 共有されたけど判断基準として使えない — 「信頼感のあるデザイン」と書いてあるが、具体的に何を許容し何を禁止するか分からない

Frame はこの断絶を埋めるために、入力フォーム自体が意思決定の問いかけになる構造を採用しています。

LLM を使わない理由

Frame は意図的に LLM を導入していません。

設計判断	理由
proof_type は人間が選ぶ	「この主張は事実か、制約か、トレードオフか」を自問させるプロセスそのものに価値がある
テーマは正規表現マッチで決定する	同じ入力から常に同じ出力が得られる再現性が、ブランド文書の信頼性を担保する
テンプレート文は固定	章ごとの導入文が毎回変わると、チーム内で「これが正式版か」の判断ができなくなる

LLM は「自問のプロセスをスキップ」させてしまう。入力が曖昧なまま見栄えの良い文書が出てしまうと、意思決定の曖昧さを温存したまま「できた感」だけが生まれる。Frame はそれを避けています。

構造化された入力 → 決定論的な変換 → 再現性のある出力

この設計により：

• 同じ入力からは常に同じ出力 — バージョン管理が効く。差分で「何が変わったか」が分かる
• 入力を変えると確実に出力が変わる — テンプレート感がないのではなく、入力の差がそのまま出力の差になる
• 「決まっていない」ことが可視化される — 空欄や未分類は空欄として表示される。ごまかさない

入力構造が意思決定を促す仕組み

proof_type — 主張に「なぜ言えるのか」を強制する

ブランドが主張するすべての claim に、以下のラベルのいずれかを付与します。

ラベル	問いかけ	例
FACT	これはデータで証明できるか？	「継続率78%（n=3,240）」
CONSTRAINT	これをやらないと決めたか？	「肥料販売を行わない」
TRADE_OFF	何を失うか正直に言えるか？	「即効性はない。最短8週間」
TIME_AXIS	いつまでにどうなるか？	「2026年Q2に法人版リリース予定」
TESTIMONY	誰がそう言ったか？	「受講者の声（匿名・許諾済）」

自動推定は行いません。 「この主張はFACTと言い切れるのか、それとも実はTRADE_OFFなのか」と人間が考えること自体が、ブランド戦略の精度を上げるプロセスだからです。

Before / After — 「誰の何を変えるか」を分離する

「ターゲット」という一言で済ませがちな対象者定義を、現状（Before）と到達点（After）に明示的に分離します。これにより「このブランドは結局何を解決するのか」が曖昧なまま進むことを防ぎます。

Transparency / Disclosure — 開示を構造の一部にする

「信頼」「安心」と書くだけでは信頼は生まれない。Frame は透明性のコミットメントと開示事項を独立したセクションとして扱い、検証可能性・継続性まで含めた開示設計を要求します。

自動テーマ選定

入力されたカテゴリ・キーワード・パーソナリティのテキストを分析し、8つのプロファイルからフォントとカラーを自動選定します。

プロファイル	カラー	見出し	本文
Tech / SaaS	Blue (220)	Outfit	Inter
Creative / Design	Purple (262)	DM Serif Display	DM Sans
Education	Indigo (230)	Outfit	Inter
Healthcare	Teal (168)	Source Sans 3	Source Sans 3
Finance / Legal	Navy (215)	IBM Plex Sans	IBM Plex Sans
Food / Lifestyle	Amber (28)	Josefin Sans	Nunito
Nature / Environment	Emerald (152)	Outfit	Inter
Community / Social	Cyan (187)	Outfit	Nunito

選定は正規表現のキーワードマッチで決定論的に行います。同じ入力からは常に同じテーマが選ばれます。

生成される成果物

ファイル	内容
brand-story.html	ブランドの存在理由・主張・制約・リスク・透明性を構造的に記述した文書
brand-guidelines.html	人格・言葉・造形原理・情報の見せ方・SVGロゴ候補を含むガイドライン

クイックスタート

npm install
npm run build:ts

# ウィザード（Webフォーム）で入力・生成
node dist-build/server.js
# → http://localhost:3456

# CLIで生成
node dist-build/index.js --input=./example-data/sample-brand.json

# テストデータで即座に動作確認
# → http://localhost:3456/?test

入力データ

JSON または YAML。唯一の必須項目は brand_name のみ。

最低限の入力でも動作しますが、高品質な出力には全項目の入力が推奨されます。欠損は欠損として表示され、ごまかしません。

claims の構造

{
  "title": "主張のタイトル",
  "claim": "主張の内容",
  "proof_type": "FACT",
  "evidence": "根拠・出典",
  "comparison_resistance": "比較に対する耐性"
}

全入力フィールドの詳細は example-data/sample-brand.json を参照してください。

ディレクトリ構成

/
├── src/
│   ├── index.ts              # CLI エントリーポイント
│   ├── server.ts             # Webサーバー（ウィザード + API）
│   ├── lib/
│   │   ├── types.ts           # 型定義
│   │   ├── normalizeInput.ts  # 入力の正規化・欠損検出
│   │   ├── resolveTheme.ts    # テーマ自動選定エンジン
│   │   ├── generateLogo.ts    # SVGロゴ生成
│   │   ├── buildStoryModel.ts # ストーリー文書のビューモデル
│   │   ├── buildGuidelineModel.ts # ガイドライン文書のビューモデル
│   │   └── render.ts          # Nunjucksレンダリング
│   └── templates/
│       ├── brand-story.njk
│       └── brand-guidelines.njk
├── wizard/
│   └── index.html             # 9ステップ入力ウィザード
├── assets/
│   └── style.css
├── example-data/
│   └── sample-brand.json
└── dist/                      # 生成出力先

制約事項

• これは意思決定の構造化ツールであり、事実調査ツールでもコピーライティングツールでもありません
• 入力データの正確性は利用者の責任です
• proof_type の自動推定は行いません — それは意図的な設計判断です
• 法務・医療・金融等の分野では、生成された文書の正確性を別途専門家が検証してください
• SVGロゴは概念レベルの方向性候補であり、最終的なロゴ制作は別途必要です

ライセンス

MIT