メインコンテンツへ移動
AIチュートリアル

Claude Codeで計測可能なブランドアイデンティティを構築する

ブランドアイデンティティ用のClaude Codeスキルをインストールして使用し、一貫性のある複数のアイデンティティ案を作成する方法を学びます。各案をアクセシビリティと技術要件の観点から検証し、最も優れた要素を選択または組み合わせて、完全なブランドガイドラインキットを書き出します。

約12分で読了
Claude Codeで計測可能なブランドアイデンティティを構築する

ブランドアイデンティティが行うこと

brand-identityは、ブランドアイデンティティを一体となったシステムとして設計するためのClaude Codeスキルです。ロゴ、書体、カラーパレットを個別に選ぶのではなく、それら3つすべてに反映される1つのアイデアまたは仕組みを軸に、各案を構築します。

このスキルは、3つ、場合によっては4つのアイデンティティセットを作成します。それらをアイデンティティカードとして並べて表示し、重要な技術的特性を測定したうえで、方向性を選べるよう停止します。セットを選択した後、または複数のセットから要素を組み合わせた後、ブランドガイドラインキットを作成します。

このスキルが作成した、24の異なるブランドの24個のロゴ

主な機能

  • 連携したアイデンティティセット：各セットでは、1つの中心的な仕組みを通じて、マーク、タイポグラフィ、パレットを結び付けます。
  • 測定に基づく判断：WCAG 2とAPCAのコントラスト、色覚多様性シミュレーション、グリフ対応範囲、フォントライセンス、表形式数字、16ピクセルおよび32ピクセルでのロゴ表示を確認します。
  • 品質ゲート：測定に失敗したセットは、問題が修正されるまで停止します。ヒューリスティックは警告としてラベル付けし、主観的な選択は判断として明示します。
  • ブランドガイドラインキット：標準キットには、8ページのPDF、ロゴファイル、CSS・SCSS・Tailwind・DTCG JSON形式のデザイントークン、埋め込みコード付きのフォントシートが含まれます。--fullオプションを使うと、グリッド、ダークモード、アクセシビリティ、アイコノグラフィ、画像のセクションが追加され、13ページになります。
  • ウェブサイトのリスタイリング：URLを渡すと、既存のページ上で各方向性をプレビューできます。一部の要素を残し、他の要素を更新することもできます。
  • 焦点を絞った作業：ロゴ、タイプシステム、パレットのみの作成や、既存のアイデンティティの批評を依頼できます。

スキルをインストールする

推奨：Claude Codeプラグインとしてインストールする

Claude Codeでマーケットプレイスを追加し、プラグインをインストールします。

/plugin marketplace add fatihaydost/brand-identity-skill
/plugin install brand-identity@brand-identity-skill

通常のスキルとしてインストールする

最新リリースからbrand-identity.zipをダウンロードし、~/.claude/skills/に解凍します。Claude Codeがそこからスキルを読み込みます。

このスキルが作成した、24の異なるブランドの24個のロゴ

リポジトリをクローンして、シンボリックリンクを作成することもできます。

git clone https://github.com/fatihaydost/brand-identity
mkdir -p ~/.claude/skills
ln -s "$PWD/brand-identity-skill/skills/brand-identity" ~/.claude/skills/brand-identity

要件を確認する

このプロジェクトにはPython 3.10以降と、Chrome、Chromium、Edge、BraveなどのChromiumベースのブラウザが必要です。初回使用時にスクリプトがPythonパッケージをキャッシュ環境へインストールするため、uvの使用を推奨します。

組み込みのチェックを実行して、不足している依存関係を確認します。

python3 skills/brand-identity/scripts/brand.py check

uvを使う場合、通常はfonttools、uharfbuzz、skia-pathopsを手動でインストールする必要はありません。推奨ホストはClaude Codeです。claude.aiのチャットでは、サンドボックスがデフォルトでGoogle Fontsを許可していないため、タイプの測定やレンダリングに失敗することがあります。

最初のアイデンティティプロジェクトを実行する

1. 平易な言葉で概要を伝える

必要な成果物をClaude Codeに依頼します。たとえば次のように入力します。

リスボンのスペシャルティコーヒーロースター向けのロゴ、フォント、カラー。

比較表付きのTessellate向け3つの方向性

依頼内容を絞ることもできます。

https://example.com の新しいタイプとパレット。ロゴは残してください。
ニュースレター用のタイプシステムだけ。
私たちのブランドアイデンティティを批評してください。

2. 質問に答える

このスキルでは、何を作成するか、いくつのセットを生成するか、ブランドで使用する言語、関連する競合について、1回の質問ラウンドで確認します。可能な範囲で、対象者、トーン、マーケット、用途、制約について具体的な情報を提供してください。

3. アイデンティティボードを確認する

このスキルは提案する方向性を構築し、比較ボードに表示します。各方向性には、仕組み、マーク、タイプの選択、パレット、測定結果が含まれます。6つの概要に基づく測定では、ボードまでのフル実行にエージェントのターンが約40回、請求対象入力換算で約0.9百万トークン必要です。

このスキルが方向性を選ぶことはありません。コンセプト、概要への適合度、必要なゲートを測定結果が通過しているかを比較してください。

4. 要素を選択または組み合わせる

ボードを確認したら、1つのセットを選ぶか、「セットAのロゴとセットBのパレット」のように組み合わせを依頼します。その後、このスキルが選択したキットを構築します。

4種類の背景に配置したロゴ、コントラスト比、6つの誤用例比較表付きのTessellate向け3つの方向性

生成された成果物を理解する

選択したアイデンティティから、表紙、アイデア、ロゴ、バリエーション、カラー上でのロゴ使用、マーク固有の誤用例、カラー、タイポグラフィ、用途を扱う8ページのガイドラインPDFが生成されます。グリッド、ダークモード、アクセシビリティ、アイコノグラフィ、画像のガイダンスも必要な場合は、--fullを使用してください。

このキットには、SVGおよびPNG形式のロゴ書き出しデータも含まれています。フルカラー、1色、反転、アプリアイコン、ファビコンの各バージョンを用意しています。デザイントークンはCSS、SCSS、Tailwind、DTCG JSONに対応しています。フォントシートには選定した書体の情報と埋め込みコードを記載しています。

サイトヘッダー、名刺、アバター、アプリアイコン

ワークフローの仕組み

このプロセスでは、クリエイティブディレクションと技術検証を分離します。

  1. 質問: Claude Codeが、概要、言語要件、競合の情報、希望するセット数を収集します。
  2. セット生成: メカニズム、マーク、書体の選択、パレットのシードを含むsets.jsonを作成します。
  3. ロゴレビュー: ロゴを16ピクセルと32ピクセルのコンタクトシートにレンダリングし、複数回の修正で不具合を解消します。
  4. ビルドと監査: スクリプトがパレットの役割、アイデンティティカード、監査結果、比較ボードを生成します。
  5. ゲート処理: コントラスト、フォントライセンス、グリフ対応範囲、ファイルの有効性、レンダリングエラーによって、セットが修正に戻されます。
  6. 選択とキット作成: 選択後、PDF、ロゴファイル、トークン、フォントシートを書き出します。

より良い結果を得るための応用ヒント

言語要件を明確に指定する

ブランドが対応すべきすべての言語をClaude Codeに伝えてください。このスキルは、ブランドが使用する言語に基づいてグリフ対応範囲を確認するため、この情報が書体の選定と検証に影響します。

アクセシビリティをデザイン要件にする

コントラストを最後に行う見た目の確認として扱わないでください。このプロジェクトでは、WCAG 2とAPCAの測定、色覚特性シミュレーション、ロゴサイズの確認をゲートとして使用します。生成したパレットを実際の文脈で評価できるよう、想定する背景と用途を概要に含めてください。

サイトヘッダー、名刺、アバター、アプリアイコン

ウェブサイトのプレビューを依頼する

サイトURLを指定すると、このスキルは現在のロゴ、書体、色を読み取り、各アイデンティティの方向性をページ上でプレビューします。残したい要素にはkeep、進化させたい部分にはrefreshを使用します。

おなじみのAIデフォルトに挑戦する

Brand-identityは、クリーム、テラコッタ、ゴールド、Fraunces、Inter、または円の中に文字を隠すといった組み合わせへ自動的に収束することを避けるよう設計されています。方向性が定番のパターンを使う場合、スキルは概要に基づく理由を求めます。また、1回の実行につき少なくとも1セットでは、これらのデフォルトを一切使用しません。

コントラスト比と6つの誤用例を示した4種類の背景上のロゴ

ライセンスとネットワークアクセスを確認する

このスキルは、Google Fontsとgoogle/fontsリポジトリからフォントとメタデータをダウンロードします。uvはPythonパッケージ取得のためにPyPIへ接続します。また、ブラウザがサイトや指定した競合サイトを開くのは、それらのURLを提供した場合に限られます。

テレメトリーはなく、何もアップロードされません。フォントはサブセット化も再配布もせず、キットからリンクし、埋め込みコードを提供します。フォントライセンスはファミリーごとに確認し、デフォルトではOFLを使用します。Fontshareや商用書体については追加の注記を付けます。

ローカルで開発・テストする

リポジトリに貢献する場合や検証する場合は、開発要件をインストールしてテストコマンドを実行してください。

pip install -r requirements-dev.txt
python3 -m unittest discover -s tests
python3 tools/smoke_test.py
python3 tools/package_skill.py

リポジトリには、skills/brand-identity/内のスキル、tools/内の開発ツール、tests/内のユニットテスト、evals/内の評価用フィクスチャ、docs/内のアーキテクチャおよびテスト関連ドキュメントが含まれています。

まとめ

brand-identityは、自然言語による概要を複数の連携したアイデンティティの方向性に変換し、クリエイティブな探索と測定可能な技術チェックを組み合わせます。Claude Codeにインストールし、ブランドとその制約を説明して、生成されたセットを比較し、概要に最も合う要素を選択または組み合わせてください。完成するのは、単独のロゴ案ではなく、実用的なガイドラインキットです。

このプロジェクトはMITライセンスで公開されています。実装の詳細については、リポジトリのGitHubプロジェクトを参照してください。