mcpField
C
creative-brief

creative-brief

github.com/rampstackcoデザイン・UI1.0k299 回インストール1 週間前に更新
リポジトリ

creative-brief について

デザイン、開発、プロジェクトチーム向けのクリエイティブブリーフ作成スキルです。漠然とした企画を実行可能な指針にまとめ、情報が不足している場合は要点を確認する質問を行います。

主な機能

  1. 01プロジェクトの目標と対象者の整理
  2. 02トーンとビジュアル方針の設定
  3. 03範囲、成果物、制約の明確化
  4. 04成功指標と承認手順の整理
  5. 05不足情報を埋める質問

活用シーン

  1. 01Webサイト、アプリ、ブランドの立ち上げ
  2. 02リデザインやリブランディングの計画
  3. 03デザイナーや開発者への引き継ぎ
  4. 04初期アイデアの実行計画への整理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rampstackco/claude-skills --skill creative-brief

インストール後、Claude Code で/creative-briefを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
creative-brief-template.md
example-brief.md
voice-and-tone-guide.md

詳細

クリエイティブブリーフ

発見から実行へとつなぎます。「ウェブサイトを作りたい」という要望を、デザイナー、開発者、AI エージェントが実際に作業を進められるブリーフに変換します。


使用するタイミング

  • 新しいプロジェクト(ウェブサイト、アプリ、ブランド、キャンペーン)を始めるとき
  • リデザインやリブランディングを開始するとき
  • デザイナー、開発者、AI エージェントに作業を引き継ぐとき
  • 方向性がずれてきたチームの足並みをそろえるとき
  • 漠然としたアイデアを、制作可能な形にするとき

使用しないタイミング

  • 単発のデザインに関する質問をしている場合(design-standards を使用)
  • PRD や開発チケットを求めている場合(pm-spec-writing を使用)
  • 何を作るかを決めておらず、初期調査をしている場合(まず brand-discovery を使用)
  • コピーを書いてほしいだけの場合(content-and-copy を使用)
  • スコープと制約がすでに固まっており、特に美的な方向性をさらに深める必要がある場合(構造化された美的軸については creative-direction を使用)

必須入力

ブリーフには、10の質問への回答が必要です。作成を始める前に、次の質問への回答が得られている(または聞き出せる)ことを確認してください。

  1. プロジェクトの内容は何ですか?
  2. なぜ存在するのですか?どのような問題を解決しますか?
  3. 対象者は誰ですか?
  4. 対象者に何をしてほしい、感じてほしい、知ってほしいですか?
  5. どのような個性がありますか?どんな口調ですか?
  6. ビジュアルの方向性はどのようなものですか?どんな見た目ですか?
  7. 対象範囲に含まれるものは何ですか?含まれないものは何ですか?
  8. 制約(時間、予算、技術、ブランド)は何ですか?
  9. 成功とはどのような状態ですか?
  10. 承認者は誰ですか?

5つ未満しか回答できない場合は、まず簡単なヒアリングを行ってください。詳しくは、以下の「不足情報の聞き出し方」を参照してください。


フレームワーク:ブリーフの構成

以下の10セクションからなる Markdown のブリーフを作成します。各セクションは簡潔にまとめてください。優れたブリーフは2ページであり、10ページではありません。

1. 概要

何を、誰に、なぜ、いつ行うのかを一段落で説明します。キックオフで30秒以内に話すような内容です。

2. 対象者

まず主要な対象者を記載します。対象者がどのような人で、何をしようとしており、現状何が障壁になっているのか、どこで接点を持てるのかを含めます。作業内容に大きく影響する場合に限り、副次的な対象者も加えます。

3. 目標

成功とはどのような状態かを記載します。すべての目標に、測定可能な指標を組み合わせます。

目標:トライアル登録を促進する。 指標:公開後30日以内に、ホームページからの登録コンバージョン率を3%にする。

4. キーメッセージ

訪問者に覚えて帰ってほしい、最も重要なことです。ホームページのヒーロー部分だけを見て離脱するとしたら、何を覚えていてほしいですか?一文で記載します。

5. 声とトーン

形容詞を3〜5個選びます。それぞれに、どのような印象ではないかも組み合わせます(例:「自信に満ちているが、傲慢ではない」)。フレームワークと具体例については、references/voice-and-tone-guide.md を参照してください。

6. ビジュアルの方向性

ムード、配色、書体、画像の方向性を記載します。参考 URL は3〜5件あれば、500語の説明よりも役立ちます。気に入っている点と、避けたい点の両方を記載してください。

7. スコープと成果物

制作するものを箇条書きにします。具体的に記載してください。「ホームページ」だけでは成果物になりません。「ヒーロー、3つの特徴ブロック、お客様の声のカルーセル、問い合わせ CTA を含むホームページ」のように記載します。

8. 制約

時間。予算。技術(既存のスタック、必須の連携、ホスティング)。ブランド(使用必須のロゴ、色、フォント)。法務(コンプライアンス、必要なアクセシビリティレベル)。

9. インスピレーションと競合

参考にしたいサイトやブランドを3〜5件、異なる印象にしたいサイトやブランドを3〜5件挙げます。それぞれについて、理由も記載してください。

10. 承認

承認者を記載します。承認の対象となる成果物(Figma ファイル、ステージング URL、PDF など)を示します。期限までに承認されなかった場合の対応も記載します。

不足している情報を引き出す

ユーザーの回答が部分的な場合(例:「コーヒーショップのウェブサイトを作りたい」)、一般的なブリーフをそのまま書かないでください。質問しましょう。以下のプロンプトを使ってください。

対象者について

  • このサイトを訪れる可能性が最も高いのは、どのような人ですか?その人の一日の流れを教えてください。
  • 問い合わせを最も増やしてくれそうな顧客層を一つ選ぶとしたら、どの層ですか?
  • どのような人には来てほしくないですか?

目標について

  • ローンチから6か月後を想像してください。成功したと判断できる数値は何ですか?
  • 訪問者に最もしてほしい行動は何ですか?

トーンについて

  • トーンを参考にしたいブランドや人物を3つ挙げてください。
  • もしサイトがディナーパーティーに出席する人だとしたら、どんな話し方をするでしょうか?

ビジュアルについて

  • 好きなサイトを3つ見せてください。どこが気に入っていますか?
  • 嫌いなサイトを1つ見せてください。なぜですか?

スコープについて

  • ページを1つだけ作れるとしたら、どのページにしますか?
  • 予算が半分になった場合、何を削りますか?

これらすべてを質問する必要はありません。実際の不足を埋められる質問を選んでください。


ワークフロー

  1. 会話を読む。 すでに伝えられている事実をすべて拾い上げます。文脈から答えられる質問はしないでください。
  2. 不足を特定する。 必須の10項目のうち、欠けているもの、情報が薄いものはどれですか?
  3. ヒアリングを行う。 不足を埋めるために、対象を絞った質問を3~5つします。会話が散漫にならないよう、関連する質問をまとめます。
  4. ブリーフを作成する。 構成には references/creative-brief-template.md を使います。1500語以内に収めてください。
  5. ストレステストを行う。 提示する前に、以下の失敗パターンに照らしてブリーフを確認します。該当するものがあれば、ユーザーに見せる前に修正してください。
  6. 提出する。 プロジェクトのルートに creative-brief.md として保存します。関係者に共有したい場合は、Word文書またはPDFにすることも提案してください。
  7. 美的方向性を深めるために引き継ぐ(任意)。 セクション5(声とトーン)と6(ビジュアルの方向性)を、このブリーフで示す以上に詳細に検討する必要があるプロジェクトでは、次に creative-direction を実行します。コンテンツ、コピー、アートディレクションのスキルが直接利用できるよう、4つの方向軸(トーンのレジスター、美学の哲学、対象者との関係、感覚的な志向)を使った構造化された美的ブリーフを作成します。

失敗パターン

ユーザーの入力が以下のいずれかに該当する場合は、執筆前に立ち止まって確認してください。

  • 「ニッチ市場の[大手ブランド]のようになりたい。」 そのブランドのどの点を具体的に参考にしたいのか尋ねてください。おそらく、すべてではなく1、2点でしょう。
  • 対象者が「18~65歳の男性と女性」。 これは対象者とは言えません。最も価値の高い顧客層を一つ尋ね、そこから始めてください。
  • 指標のない「認知度を高める」。 何の認知度を、誰に対して、どのように測定するのでしょうか?具体的な数値を尋ねてください。
  • 「モダン、クリーン、ミニマル」。 これらの言葉だけでは意味がありません。イメージに合う具体的なURLを3つ尋ねてください。
  • 明確な依頼のない、20ページ分の背景情報。 「デザイナーが1段落だけ読むとしたら、何を伝えたいですか?」と尋ねます。それを要約として使ってください。

出力形式

デフォルトでは、プロジェクトのルートに creative-brief.md というMarkdownファイルを作成します。構成はテンプレートに厳密に従います。

プロジェクトの規模が大きい場合は、分割します。メインのブリーフは1500語以内に収め、詳細はリンク付きの付録(audience-research.md、brand-guidelines.md など)に記載します。すべてを盛り込もうとしたブリーフは、結局誰にも読まれません。


参考ファイル

作成前にテンプレートを読んでください。ユーザーがまだ声を指定していない場合は、声とトーンのガイドを読んでください。各セクションにどの程度の情報を盛り込むべきか迷った場合は、例を読んでください。

コメント