coastdigitalgroup/coastai-skills

ロゴグリッドシステム

目的

ロゴグリッドシステムは、「ソーシャルプルーフ」ロゴ（顧客ブランド、テクノロジーパートナー、メディアでの取り上げなど）を整理し提示するための方法論を提供します。標準的な画像ギャラリーとは異なり、ロゴグリッドでは、アスペクト比（縦長、横長、正方形）や視覚的密度が異なるロゴが、バランスよく均等な「重み」に見えるようにするための光学的正規化が必要です。このスキルにより、ブランドのセカンダリトラストシグナルがプライマリデザインをサポートし、視覚的な乱雑さを生み出したり、外部ブランドの整合性を損なったりすることを防ぎます。

ユースケース

• 「ロゴクラウド」: ヒーローセクションの下に配置される、顧客ロゴの水平行。
• 「プレスバー」: フッターやサイドバーに表示されるメディアでの取り上げ（例：「As seen in...」）。
• 統合/パートナーディレクトリ: テクノロジーエコシステムを示すグリッド。
• スポンサーセクション: ページ下部に表示されるイベントやプロジェクトの貢献者。
• マーキー/ティッカー: ブランドマークの無限水平スクロール。

使用すべきでない場合

• プライマリブランドアイデンティティ: サイト独自のロゴデザイン（代わりにプロフェッショナルなブランディング/アイデンティティスキルを使用）。
• アイコン: 小さな機能的なUIシンボル（代わりにiconography-systemを使用）。
• 製品一覧ページ（PLP）: プライマリコンテンツが製品自体であり、そのブランドマークではない場合。
• ナビゲーションメニュー: プライマリサイトナビゲーションにテキストの代わりにロゴを使用する場合。

入力

1. アセットインベントリ: さまざまな形式（SVG推奨）のロゴコレクション。
2. ブランド整合性ルール: パートナーブランドの「クリアスペース」と色の使用要件に関する知識。
3. 親コンテキスト: グリッドが配置されるセクションの幅と背景色。
4. 視覚的階層の優先順位: ロゴを目立たせるか（フルカラー）、控えめにするか（モノクロ/ミュート）。

出力

1. 正規化マトリックス: 正方形、横長、縦長のロゴに対する境界ボックスルールの定義。
2. 視覚的加工仕様: 色（グレースケール、ノックアウト、またはオリジナル）、不透明度、ホバー状態に関するルール。
3. レスポンシブグリッド設計図: 列数の計画（例：モバイル2列、デスクトップ6列）。
4. 光学的サイジングガイド: 視覚的な重みのバランスを取るための、パーセンテージベースの特定のスケーリングルール。

ワークフロー

1. アセット形式の監査と標準化

すべてのロゴを収集し、SVG形式を優先します。ラスター（PNG/JPG）のみが利用可能な場合は、高解像度（表示サイズの少なくとも2倍）であることを確認します。ソースファイルから不要なパディングを削除し、「境界ボックス」がロゴの寸法を正確に反映するようにします。

2. 正規化コンテナの確立

各ロゴに対して「正規化コンテナ」（固定アスペクト比のボックス、通常は正方形または3:2）を作成します。

• object-fit: containを使用して、各ロゴをこのコンテナ内に配置します。
• 光学的調整: 単純にボックスを埋め尽くさないでください。横長のロゴは幅を多く占有しますが、高さは少なく占有する必要があります。正方形のロゴは、横長のロゴよりも幅と高さの両方で占有を少なくし、均等な「インク密度」を維持する必要があります。

3. 視覚的加工の定義

サイトの美観とブランド認知のバランスを取るスタイルを選択します。

• ミュート/モノクロ（標準）: すべてのロゴを単色（通常はダークグレーまたは背景色の「ノックアウト」）に変換します。通常はfilter: grayscale(1)とopacityの低減、または単色SVGマスクを使用する場合はcolor-mix()を使用します。これにより、プライマリCTAから注意をそらす「虹効果」を防ぎます。
• ホバー/表示: デフォルトではロゴをミュートにし、ホバー時にのみ元のブランドカラーを表示します。
• フルカラー: ロゴ自体がプライマリドローである場合（例：著名なスポンサーシップページ）にのみ使用します。

4. 間隔とリズムの適用

fluid-spacing-systemを使用して、ロゴ間のギャップを定義します。

• ガター幅: ブランドガイドラインを尊重するために、各ロゴの周囲に十分な「クリアスペース」を確保します（通常、ロゴの高さの少なくとも50%）。
• 配置: 正規化コンテナを中心軸（水平および垂直の両方）に合わせて、安定した水平線を作成します。

5. レスポンシブリフローの設計

グリッドが小さい画面でどのように折りたたまれるかをマッピングします。

• デスクトップ: 1行あたり5～8個のロゴ。
• タブレット: 1行あたり3～4個のロゴ。
• モバイル: 1行あたり2個のロゴ（またはスペースが極端に限られている場合は水平「マーキー」スクロール）。
• 縮小: モバイルでもロゴが読みやすいことを確認します。ロゴが「ぼやけて」しまう場合は、そのブランドのアイデンティティの「マークのみ」バージョンに切り替えます。

判断ルール

• 「インク密度」ルール: 非常に「重い」またはソリッドなロゴ（塗りつぶされた円など）は、「軽い」または風通しの良いロゴ（細いワードマークなど）よりも10～15%小さくサイズ設定し、重みが等しく見えるようにする必要があります。
• グレースケールデフォルト: 常にモノクロロゴから始めます。クライアントが特に全パートナーに「ブランドの信頼性」を要求する場合にのみ、色を追加します。
• 中央揃えの地平線: 常にロゴを行内で垂直方向に中央揃えにします。高さの異なるロゴを上揃えにすると「階段効果」が生じ、プロフェッショナルでない印象を与えます。
• 最大幅/高さ: 正規化コンテナのmax-heightを定義して（例：40pxから60px）、単一のロゴがセクションを支配するのを防ぎます。

制約

• アクセシビリティ: すべてのロゴに会社名を示すalt属性が必要です（例：alt="Acme Corp logo"）。セクションに「Our Partners」などの見出しがある場合、ロゴは装飾用としてマーク（alt=""）することで冗長性を回避できます。
• ブランドの整合性: ロゴを決して伸ばしたり歪めたりしないでください。ロゴの内部比率を変更しないでください。
• レスポンシブ性: グリッドは流動的である必要があります。グリッド全体に固定ピクセル幅を使用せず、100%の幅とmax-widthの制約を使用します。

一般的な失敗パターン

• 「巨大な正方形」: 正方形のロゴが横長のロゴと同じ高さを占め、3倍大きく見える。
• 色の乱雑さ: 異なるパレットを持つカラフルなロゴを混在させ、サイトが「リンクファーム」のように見える。
• ソースパディング: ロゴファイル自体に異なる量の「ホワイトスペース」を残し、自動配置を不可能にする。
• モバイルでの混雑: モバイル画面で1行に4つのロゴを収めようとし、すべてが読みにくくなる。
• 階段状の配置: 高さの異なるロゴを上揃えにし、ギザギザで気が散る下端を作成する。

検証基準

• ロゴが光学的にバランスが取れている（単一のロゴが著しく「重く」見えない）。
• すべてのロゴが一貫した視覚的加工（例：すべてグレースケール）を共有している。
• 配置がセル内で水平および垂直方向に中央揃えされている。
• ソースファイルがSVGまたは内部パディングのない高解像度ラスターである。
• モバイルビューで混雑がなく、読みやすさが維持されている。
• アクセシビリティ: すべてのロゴに適切なaltテキストまたは装飾マークがある。
• 各ブランドの「クリアスペース」要件が尊重されている。