brand-visual-generator

コンポーネント：ブランドのビジュアルアイデンティティ

一貫したブランド表現を実現するためのビジュアルアイデンティティをガイドします。一貫したブランディングを行う企業では、売上が最大23〜33％増加し、消費者の94％が一貫性は購買決定に影響すると回答しています。

キーワード：ビジュアルアイデンティティ、デザイントークン、カラーパレット、タイポグラフィ、CSS 変数、スライドデッキ、ブランドガイドライン、フロントエンドの美しさ、アクセシビリティ

呼び出し時：初回の使用時は、役立つ場合、このスキルの対象範囲と重要性を1〜2文で最初に説明してから、主な出力を提示します。2回目以降の使用時、またはユーザーから省略を求められた場合は、主な出力を直接提示します。

初期評価

プロジェクトのコンテキスト： ルートに contextus.md がある場合は読み込み、このタスクに関連するモジュールのみを読み込みます。Contextus がない場合は、利用可能なプロジェクト資料またはユーザーから提供された情報を使い、不足している情報を確認します。並行する別のコンテキストシステムは作成しないでください。

以下を確認します。

1. 範囲：新規ブランド、監査、またはコンポーネントのデザイン
2. タッチポイント：ウェブ、印刷物、ソーシャルメディア、製品 UI、スライド（PowerPoint、Google Slides、Keynote）、ドキュメント（Word、Google Docs、PDF レポート）
3. 既存のアセット：ロゴ、スタイルガイド、デザインファイル

ベストプラクティス

タイポグラフィ

• 2種類のフォントシステム：見出し用のディスプレイフォントと、本文用のフォントを1種類ずつ使用します。コントラストと調和の両立を目指し、役割が明確になる程度に異なりながらも、全体に統一感が生まれる組み合わせにします。
• 本文フォント：読みやすさを優先し、xハイトが大きく、カウンターが開いたフォントを選びます。無難な選択肢としては、Source Sans 3、Lora、IBM Plex Sans があります。独自性を重視する場合：使われすぎている AI フォント（Inter、Roboto、Arial、システムフォント）は避け、ブランドの価値を高める個性豊かなフォントを選びます。フロントエンドの美しさを参照してください。
• 見出しフォント：ブランドの声を伝え、1秒以内に読める必要があります。本文が基盤となる役割を担う一方で、個性を表現します。
• 文字サイズのスケール：階層構造には1.25〜1.5の比率（メジャーサードまたはパーフェクトフィフス）を使用します。1つのブロック内のスタイルは3〜4種類までにします。
• フォントの組み合わせルール：装飾的なフォントはニュートラルな書体とのみ組み合わせます。それぞれに明確な役割を割り当て、3種類以上のフォントファミリーを混在させないでください。
• サイズ：ヒーロー、セクション、小見出し、本文、キャプションを設定し、レスポンシブに拡大縮小します。1行の最大文字数は120文字とし、行間にはゆとりを持たせます。

カラーパレット

• 構成：プライマリ、セカンダリ、CTA、背景、テキストを設定します。単一の固定色ではなく、柔軟なシステム（主要なヒーローカラーと補色のシェード）を使用します。
• 業界別のカラー設定：金融 → 青、グレー、ネイビー（安定感）；ラグジュアリー → ローズゴールド、バーガンディ、黒（高級感）；テクノロジー → ティール、ネオンカラーのアクセント、チャコール（革新性）；ウェルネス → ラベンダー、ピーチ、ミント（落ち着き）；サステナビリティ → セージグリーン、アースカラー。
• 再現性：印刷とデジタルの両方に対応できるよう、HEX、RGB、CMYK を用意します。プログラムで生成するスライド（例：python-pptx）では、ブランドの HEX 値を塗りつぶしとテキスト用の RGB タプル (R, G, B) に変換し、成果物には単一の信頼できる参照元となる表（HEX + RGB）を含めます。
• アクセシビリティ：通常のテキストはコントラスト比を4.5:1以上、大きなテキスト（18px以上、または太字の14px以上）は3:1以上にします。情報を伝える際、色だけに頼らないでください。

余白

• マージン：横方向（例：120px）と、セクションの縦方向のパディングを設定します。
• グリッド：一貫したスペーシングスケールを使用します（8pxを基本単位とするのが一般的です）。
• ロゴのクリアスペース：ロゴの周囲に必要な最小限の余白を確保し、ブランドガイドに記載します。

ロゴの使用

• バリエーション：プライマリ、セカンダリ、モノグラム。明るい背景用と暗い背景用。
• 最小サイズ：判読不能にならないサイズを確保します。
• 禁止事項：承認なしに、引き伸ばす、色を変更する、効果を追加すること。

アンチパターン（避けるべきこと）

• 機能性より見た目を優先する：見栄えのために使いやすさを犠牲にしないでください。
• CTA が不明瞭：各セクションの主要な CTA は 1 つにし、主要な CTA と副次的な CTA を視覚的に区別してください。
• 要素に一貫性がない：ピクセル化されたアイコン、ばらばらな余白やタイポグラフィ、色使いは信頼感を損ないます。
• テキストの階層が不明瞭：まとまりがなく雑然としたテキストは、ユーザーを混乱させます。
• エフェクトの多用：ドロップシャドウ、ポップアップ、雑然とした UI はコンテンツの妨げになります。
• トレンドを無批判に追う：プロジェクトのニーズに合う場合にのみ、トレンドを取り入れてください。
• パフォーマンスを無視する：容量の大きいアセットや複雑なレイアウトは、読み込み時間に悪影響を与えます。
• ありきたりな AI の美的表現：Inter、Roboto、Arial、Space Grotesk、システムフォントは、型にはまったデザインにつながります。白地に紫のグラデーションなど、使い古された配色は避けてください。ブランドの差別化が重要な場合は、独自性のある選択を優先してください。
• 絵文字をアイコンとして使う：SVG アイコン（Heroicons、Lucide、Simple Icons）を使い、絵文字（🎨 🚀 ⚙️）を UI アイコンとして使わないでください。絵文字はプロフェッショナルさと一貫性に欠けます。
• 不安定なホバー状態：ホバー時には色や不透明度のトランジションを使い、レイアウトがずれたりコンテンツが飛び跳ねたりするスケール変換は避けてください。

アクセシビリティチェックリスト

• コントラスト：通常のテキストは 4.5:1 以上、大きなテキストは 3:1 以上、インタラクティブ要素は 3:1 以上にしてください。
• フォーカス：視認できるフォーカスインジケーター（2px 以上の実線、コントラスト比 3:1）、論理的な Tab 順序を用意し、キーボードトラップを設けないでください。
• 色：情報を色だけで伝えないでください。状態（エラー、成功）にはテキストやアイコンも加えてください。
• キーボード：すべてのインタラクティブ要素に Tab、Enter、Spacebar でアクセスできるようにしてください。
• モーションの軽減：アニメーションでは prefers-reduced-motion を尊重してください。

フロントエンドの美的表現

独自性があり、本番環境で通用するフロントエンド実装の指針です。コンポーネント（ヒーロー、CTA、フッターなど）やページ（ランディングページ、ホーム、機能紹介）では、視覚的な差別化のためにこれらの原則を参考にしてください。強さより意図を重視：大胆でマキシマリズムな表現も、洗練されたミニマリズムも、精密に実行すれば効果を発揮します。

タイポグラフィ

• ありきたりな AI フォントを避ける：Inter、Roboto、Arial、システムフォント、Space Grotesk は、型にはまった美的表現につながります。
• 個性のある組み合わせ：ディスプレイフォント（見出し、個性）を 1 種類、洗練された本文フォント（読みやすさ）を 1 種類使います。インターフェースを引き立てる、個性があり意外性のあるフォントを選んでください。
• 一貫性：CSS 変数を使い、ブロックごとに 3～4 種類の文字スタイルに制限してください。

モーション

• 印象的な場面：段階的な表示（animation-delay）を取り入れた、よく演出されたページ読み込みを 1 つ用意する方が、細かなインタラクションを散発的に加えるよりも満足感を生みます。
• 優先事項：HTML では CSS のみを使い、利用できる場合は React で Motion ライブラリを使ってください。スクロールをトリガーとする演出や、驚きを生むホバー状態を取り入れます。
• アクセシビリティ：常に prefers-reduced-motion を尊重し、モーションを抑えた、またはモーションのない代替手段を用意してください。

空間構成

• 意外性のあるレイアウト：非対称、重なり、斜めの流れ、グリッドからはみ出す要素を取り入れます。
• バランス：ゆとりのある余白か、計算された密度のどちらかを意図的に選んでください。
• 階層：明確な視覚的な流れを作り、予測可能で均等に配置されたレイアウトは避けてください。

背景と視覚的なディテール

• 平面的な表現より雰囲気を重視：単色を安易に使うのではなく、奥行きを作ります。
• 手法：グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤー状の透明表現、印象的なシャドウ、装飾的な境界線、グレインオーバーレイなどを使います。
• 文脈：エフェクトは全体的な美的表現に合わせ、コンテンツの妨げにならないようにしてください。

避けるべきこと

• 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• ありきたりな配色（例：白地に紫のグラデーション）
• 予測可能なレイアウトや型にはまったコンポーネントパターン
• 文脈に応じた個性に欠けるデザイン
• UI アイコンとしての絵文字（SVG を使用：Heroicons、Lucide、Simple Icons）

AI ブランドの美的表現（任意）

AI／SaaS 製品では、似たり寄ったりになるのを避けるため、こうした視覚的トレンドやブランドの類型を検討し、意識的に採用、無視、または逆手に取ってください。

ビジュアルトレンド

トレンド	シグナル
オフホワイト／ベージュ	信頼、自制、光沢に頼らない上質さ
有機的なグラデーション	独自性。粒子感や質感を加えます
デジタル印象派	文字どおりの表現よりも雰囲気を重視。説明的ではなく、暗示的に表現します
ロモ／不完全さ	探究心、人間の創造性
現代的なリアリズム	精度、信頼性、熟達
スケッチ／落書き	人間の思考、確実性よりも探究
ノンブランドのアカデミックな表現	権威。成果そのものが語ります
技術イラスト	厳密さ、エンジニアリングの深さ
風変わりなかわいらしさ	親しみやすさ。終末論的な物語への対抗
変形するオブジェクト	創発、学習するシステム
未来的なシュルレアリスム	新しい世界への入り口
宇宙空間	探索、未知
ASCII／ピクセル	レトロ、遊び心、技術的
ジェネレーティブアート	アルゴリズム的、生きているシステム

ブランドのアーキタイプ

アーキタイプ	トーン	ビジュアル
親しみやすいリーダー	真剣さ、安定感、信頼	彩度を抑えたグレー、温かみのあるベージュ。印象派的
穏やかなヒューマニスト	テクノロジーよりも人を重視	手描き、日常のひととき、自然
オタク気質の理想主義者	エンジニアリング文化	飾らない、風変わり、ノンブランド
大胆なビルダー	画期的、変革をもたらす	ダークな配色、宇宙のモチーフ
ユートピアを夢見る人	可能になること	レトロフューチャー、幻想的な世界

ビジュアルアイデンティティのコンテキストを返す

Contextus を通じて確認済みのビジュアルアイデンティティのコンテキストを返す際は、次を含めます。

## 12. Visual Identity (Optional)

**Colors**: Primary #XXX, secondary #XXX; backgrounds #XXX
**Typography**: Headings (font, weight, color); Body (font, weight, color)
**Sizes**: Hero Xpt, section Xpt, body Xpt
**Spacing**: Margins Xpx; section padding Xpx
**Layout**: Viewport, top bar, footer heights if fixed

スライドとドキュメント（ウェブ以外）

ユーザーがウェブサイトだけでなく、スライド資料やドキュメントのブランディングを求めている場合：

• スライドマスター：トークンから背景色を設定します。タイトルフォントにはディスプレイ／見出しトークン、本文には本文トークンを使用します。タイトルと本文のデフォルトサイズは、branding／セクション 12 のタイプスケールに合わせます。
• テーマカラー：プライマリ、セカンダリ、背景、テキスト、アクセント 1 色をプレゼンテーションアプリのテーマに割り当てます（PowerPoint デザイン → バリエーション、Google Slides テーマ、Keynote の 書類 設定）。これにより、図形やグラフにパレットが継承されます。
• グラフと図形：ランダムな色ではなく、アクセントを固定順（例：プライマリ → セカンダリ → ターシャリ）で使います。これにより、スライド資料のブランドイメージを一貫させられます。
• ドキュメント：可能な限りウェブと同じフォントおよび見出し階層を使用します。ポイントサイズと色を指定した段落スタイル名（タイトル、見出し 1～3、標準）を指定します。

戦略とナラティブのレイヤーは branding に含まれます。このセクションは、オフィス／スライドツール向けのビジュアル実装を扱います。

ブランドガイドラインの構成（信頼できる唯一の情報源）

あらゆるタッチポイントで一貫性を保ちます。次を含めます。

• ロゴ：使用ルール、クリアスペース、最小サイズ、バリエーション（ライト／ダーク）
• カラー：プライマリ、セカンダリ、CTA、背景、テキスト（HEX、RGB、CMYK）
• タイポグラフィ：フォントファミリー、階層、サイズ、間隔
• 画像：写真のトーン、被写体、ビジュアルの雰囲気
• アイコノグラフィ：スタイル、線の太さ、使用ルール

出力形式

• タイポグラフィの仕様（フォント、ウェイト、サイズ、色）
• カラーパレット（HEX、使用ルール、業界との対応付け）
• スペーシングのスケール
• ロゴのクリアスペースとバリエーション
• フロントエンドの美的表現（任意）：動き、空間構成、背景。特徴的な実装向け
• アンチパターンとアクセシビリティチェックリスト
• AI 製品（任意）：ビジュアルトレンドとアーキタイプの整合性
• Contextus：プロジェクト固有のビジュアルアイデンティティを維持
• スライド／ドキュメント（要望時）：テーマへの割り当て＋マスターのタイポグラフィ＋グラフのアクセント順

関連スキル

• branding：ブランド戦略、ビジュアルアイデンティティ戦略。このスキルではタイポグラフィ、カラー、スペーシングを実装します
• logo-generator：ロゴの配置、クリアスペース。ブランドビジュアルでロゴのルールを定義します
• favicon-generator：ファビコンをブランドマークとカラーに合わせます
• media-kit-page-generator：メディアキットにブランドガイドライン文書を掲載し、ロゴとファビコンにリンクします
• hero-generator：ヒーローにブランドのタイポグラフィ、カラー、スペーシングを使用します
• 404-page-generator：エラーページのブランドイメージを一貫させます