Community画像github.com

ashuwhy/ブランドアイデンティティ

ロゴ、アプリアイコン、ストアアートの作成プロセス。ブリーフィング、画像モデルによるラウンド、実サイズで最終候補をテストする対比シート、そしてコードで描画した1つのデザインをすべてのランチャー、アダプティブ、通知、スプラッシュ、ファビコン、フォント、ストアアセットにレンダリングします。ロゴの選定、アプリアイコンの制作、ストアのスクリーンショットやポスター作成時に使用します。

ブランドアイデンティティ とは?

このスキルは、ロゴ、アプリアイコン、ストアアートを体系的に制作するためのプロセス全体を提供します。ブリーフィングから始まり、画像生成モデルを使った複数ラウンドのコンセプト探索、最終候補を実際の使用サイズで徹底比較する対比シート(versus sheet)の作成、そして選ばれた1つのデザインをコードで描画してすべてのアセット(ランチャーアイコン、アダプティブアイコン、通知アイコン、スプラッシュ画面、ファビコン、フォント、ストアのスクリーンショットやポスター)に自動変換するまでをカバーします。主にClaude Codeで使用されることを想定しており、`make_versus.py`や`make_fonts.py`などのツールスクリプトを`~/claude-skills/tools/brand/`から利用します。プロセスはプラットフォーム仕様に依存しないよう設計されており、現在のプラットフォーム仕様を常に確認することを推奨します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ashuwhy/claude-skills/tree/HEAD/skills/brand-identity

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ブランドアイデンティティ は何をしますか?

以下に示すプロセスは永続的な部分です。画像モデル、アイコンの仕様、ストアのサイズは変化するため、レンダリングする前に現在のプラットフォーム仕様を確認し、 (checked 2026-10) とあるものは変更される可能性が高いサイズを示します。

スクリプトは ~/claude-skills/tools/brand/ にあります。make_versus.py(ステップ3で使用するシート)と make_fonts.py(ステップ5)は、どのアプリでもそのまま実行できます。残りのスクリプト(プロンプト、候補の描画、アセットレンダラー、ストアフレーム、ポスター)は特定のアプリ用に作成され、そのアプリのマークを描画するため、メソッドを読み取って適応させてください。これらには rsvg-convert、Pillow、fontTools、ヘッドレスChromeが必要です。

1. ブリーフィング

各コンセプトの前に貼り付ける共通のブリーフィングを1つ作成します(tools/brand/logo-prompts.md は実際の例です)。

  • 使用場所(ランチャーアイコン、ストア一覧)を明記し、48pxで認識でき、単色のシルエットとしても機能する必要があることを記載
  • フラットベクター、ベタ塗りの形状、グラデーション、影、3D、テクスチャ、テキストは使用しない
  • 正確なパレットを16進数で指定し、「それ以外は使用しない」と明記
  • 角丸四角形のタイル上に中央揃えで1つのマークを配置
  • 1回の実行で複数のバリエーションをグリッド状に表示し、1回の実行で1つのコンセプトを探求し、1つのレンダリングに賭けないようにする
  • そのカテゴリーのクリシェ(ありきたりな表現)の禁止リスト

完了条件: ブリーフィングが1段落に収まり、各コンセプトが1行追加で記述されていること。

2. ラウンド

  • ラウンド1: 6~7のコンセプトと1つの自由なブリーフィング。1つを選びます。
  • ラウンド2: 勝者を保持し、プロンプトごとに1つの軸を変えます(幾何学的 vs 丸みを帯びた、アクセントの意味、カウンター、小さな単色ストレステスト)。文字の解剖学的構造を言葉で明示します。モデルは異なる文字体系で類似したグリフを混同します。
  • さらに進む前に、ビルド外の人に見せます。 文字、記号、色がターゲットユーザーにどのように読まれるかは、プロンプトでは決して捉えられないミスを引き起こす可能性があります。外部からのコメント1つでラウンド1回分の価値があります。
  • ラウンド3 テスト: 子供が一度見ただけで記憶から描けるか? スケッチのクレジットは描いた人に帰属します。

3. 対比シート

2~3の最終候補をコード(SVG文字列)で再描画し、ランチャーアイコンが実際に直面する条件でテストします(make_versus.py がSVGからすべてを実行します)。

  • 円形およびスクィークル(角丸四角形)マスク
  • ぼかした「一目でわかる」ビュー
  • ライトおよびダークシステムトーンでのテーマ(モノクロ)アイコン
  • 48px、32px、24px、16px を拡大表示
  • インク占有率、および候補ごとの1行の評価

好みではなくシートを信頼します。説明が必要なマークは、それ自体で意味を成すマークに負けます。

完了条件: 1つの候補がシート上で勝ち、なぜその候補が選ばれたかを一文で説明できること。

4. 1つの描画、すべてのアセット

勝者をパラメータを持つ関数(色、サイズ未満で詳細をオン/オフ)にします。1つのスクリプトですべてのアセットを生成します。icon-assets.md にマトリックスと各サイズのルールがあります。アプリ内では、PNGを出荷するのではなく、同じ数値でコンポーネントを使用してマークを描画し、すべてのサイズでシャープに表示され、ダークモードで色を反転できるようにします。

次に、リポジトリのドキュメントにロゴキット(ロックアップと単体マーク、ライト/ダーク、SVG/PNG)を配置し、誰もロゴのためにアプリのスクリーンショットを撮らなくて済むようにします。

5. タイポグラフィ

フォントをセルフホストし、fontTools で woff2 にサブセット化します(製品に必要なテキスト、通貨、記号を含む。可変軸は保持)。フォントをダウンロードするビルドはネットワーク依存関係があり、デプロイに失敗する可能性があります。(checked 2026-10: next/font/google がこの方法でVercelビルドに失敗しました。)

6. ストアアートとポスター

  • ストアフレームをHTMLとしてヘッドレスChromeでストアの現在のサイズにレンダリングします (checked 2026-10: Play電話のスクリーンショット1080x1920、フィーチャーグラフィック1024x500、リスティングアイコン512px RGB、アルファなし)。実際の電話からの実際のキャプチャを描画フレーム内で使用します。Chromeは書き込み後に非ゼロで終了する可能性があるため、出力ファイルを成功シグナルとして扱います。
  • どの画面にも実際のユーザーの名前やデータは表示せず、コピー内のすべての主張はレビュー対象のビルドで真実であること。
  • play.py icon と play.py art でアップロードします(expo-release を参照)。リスティングアイコンは独自のアセットであり、どのビルドもそれを変更しません。
  • ポスターとサムネイル: アプリが作成するすべてのクロップに対応するようにデザインし、各レンダリングを新しいパスにアップロードします(mobile-performance、Images を参照)。

関連スキル