applying-bitwarden-branding

Bitwarden ブランドの適用

このスキルでは、Bitwarden のブランド適用に関する判断の根拠として、以下の2つの正式な情報源を使用します。

• bitwarden.com/brand — ブランドガイドラインのハブです。ロゴのロックアップ、角丸システム、ソーシャル投稿のフレーミング、製品画像、Bロールなどを掲載しています。
• github.com/bitwarden/brand — SVG ロゴ、複数サイズの PNG 製品アイコン、シールドマーク、複数形式（HEX、HSL、SCSS）のカラーパレット、スクリーンショット、メディアアセットを収録した、信頼できる唯一のリポジトリです。

実際の作業でブランドを適用する際は、アセットについてはリポジトリを、使用ルールについてはブランドサイトを正式な情報源として扱ってください。詳細な参考資料は、references/brand-assets.md（アセット一覧とファイルパス）および references/color-palette.md（使用上の注意と SCSS 変数名を含む完全なパレット）にあります。

最もよくある間違いを防ぐ5つのルール

1. Bitwarden の B は大文字にします。 常に大文字です。W は大文字にしません。「bitwarden」が小文字で使われるのは、公式ロゴのロックアップ内だけです。本文、見出し、ハンドル名、URLでは使いません。
2. 第3パレットより先にプライマリパレットを使います。 Green、Yellow、Red は第3パレットの色です。控えめに使用し、主に製品グラフィックや成功／警告／エラーのコミュニケーションに用います。見出しの色には使いません。
3. すべてに Inter を使用します。 製品とウェブサイトの両方が対象です。使用可能なウェイトは 300（ライト）、400（レギュラー）、500（ミディアム）、600（セミボールド）、700（ボールド）です。
4. ロゴのセーフエリアは必ず守ります。 横型ロックアップでは、四辺すべてに Bitwarden シールドの幅1つ分の余白が必要です。縦型ロックアップでは、ロゴタイプの「X」の高さを使用します。ロゴを窮屈に配置すると、ロックアップが損なわれます。
5. 角丸システムは36pxですが、ボタンは例外です。 ブランドの主要な面では、角丸の半径を36pxにします。ボタンはこのシステムの対象外です。ボタンに36pxを適用しないでください。

ロゴの使用方法

• 標準マーク。 ブランドリポジトリの /logos/logo-horizontal-blue.svg。横型が主要なロックアップであり、優先して使用します。
• 反転版（暗い背景用）。 /logos/logo-horizontal-white.svg。
• 縦型ロックアップ。 横型が適さない用途で使用できます。セーフエリアには、ロゴタイプの「X」の高さを使用します。
• 製品アイコン（シールド）。 角丸と正方形の両方があり、16／32／64／128／256 px の PNG と SVG（/logos/icon.svg、/logos/icon-inverse.svg、/icons/*.png）を利用できます。シールド本体は /shield/ にあります。
• 製品ロゴ。 個々の Bitwarden 製品（Password Manager、Secrets Manager など）には、それぞれ固有のロックアップがあります。これらは「主に製品内で使用」してください。

ロゴの色を変えたり、変形、回転、再構成したりしないでください。提供された SVG が用途に合わない場合は、独自のバリエーションを作るのではなく、ブランドの担当者に問い合わせてください。

カラーパレットのクイックリファレンス

すべての変数名を含む完全なパレットは references/color-palette.md にあります。主要な役割を担う色は次の5色です。

色	HEX	用途
Bitwarden Blue	#175DDC	ブランドのプライマリカラーです。見出し、プライマリ CTA、アクセントに使います。
Deep Blue	#0C3276	ブランドのセカンダリカラーです。密度の高いサーフェスやヘッダーに使います。
Off White	#F3F6F9	デフォルトのライトサーフェスです。
True Black	#000000	ライトサーフェス上のデフォルトのテキスト色です。
Teal Highlight	#2CDDE9	アクセントとハイライトに使います。ブルーと組み合わせます。

ターシャリーパレット（Green #7BF1A8、Yellow #FDC700、Red #FF6550）は、プロダクトのグラフィックや成功／警告／エラー状態に控えめに使用します。ブランドサイトでもこの方針が明示されています。

SCSS 変数名（ブランドリポジトリの brand-colors/palette.scss より）：

• $bitwarden-blue、$deep-blue、$off-white、$true-white、$true-black、$light-grey、 $teal-highlight、$light-teal-highlight、$tertiary-green、$tertiary-yellow、 $tertiary-red。

タイポグラフィ

• 書体： Inter（オープンソース、Google Fonts）。
• 使用可能なウェイト： 300（ライト）、400（レギュラー）、500（ミディアム）、600（セミボールド）、700（ボールド）。
• 用途： プロダクト UI とウェブサイトの本文／見出しのテキストです。ブランドサイトには、用途ごとのウェイトのルールは列挙されていません。例外的なケースが発生した場合は、プロダクトまたはマーケティングのリードに確認してください。

アイコノグラフィー

• ウェブアイコン。 プロダクトアイコンよりも詳細で、幅広い用途に対応するようにデザインされています。
• プロダクトアイコン（盾）。 ブランドリポジトリの /icons/ ディレクトリから、複数のサイズの角丸版と四角版を利用できます。

アセットのパスと完全なサイズ表は references/brand-assets.md にあります。

大文字表記と商標

• すべてのコピーで、Bitwarden の「B」は大文字にします。
• 「W」は大文字にしません。本文での BITWARDEN も bitWarden も使用しません。
• 小文字の「bitwarden」が使われるのは、公式ロゴのロックアップ内のみです。
• 「Bitwarden」は Bitwarden Inc. の登録商標です。外部向けコンテンツでは、商標の帰属表示が適切な場合にその旨を明記してください。

他のスキルとの併用

• content-style-guide。 ブランドはコンテンツスタイルと併せて扱います。ユーザーに見える画面をレビューする際は、両方を確認してください。このスキルでは色、ロゴ、大文字表記をチェックし、コンテンツスタイルガイドでは文体、トーン、センテンスケース、アクセシビリティをチェックします。
• using-figma。 get_variable_defs を使って、デザインの色がライブラリに紐付けられ、ブランドパレットに沿っているかを確認します。デザインがブランドに沿っていると判断する前に、get_libraries を使って適切なデザインライブラリが読み込まれていることを確認してください。
• preparing-design-handoff。 ブランドに関する指摘は引き継ぎのゲートで提示してください。引き継ぎ時にブランドに沿っていない点があれば、Figma の注釈または Epic の未解決の質問としてフラグを立てます。黙って修正しないでください。
• evolving-design-system-components。 新しいパターンは、ブランドパレットと 36px の角丸システム（ボタンを除く）に従う必要があります。Component Library のガバナンスレビューで明らかな違反を検出できますが、パターンを提案する際は、そのような違反を明示的に指摘してください。

ブランドチェックの出力形式

「ブランドに合っていますか？」と尋ねられた場合は、次の形式で回答します。

1. チェック項目 — このデザインに関係するブランド要素（ロゴ、色、タイポグラフィ、アイコン、表記）。
2. ブランドに合っている点 — うまく機能しており、維持すべき点。
3. ブランドに合っていない点 — 該当するブランドルールに結び付けて、それぞれの指摘を示します（該当する節を引用します。例：「ターシャリーパレットの過剰使用 — bitwarden.com/brand のターシャリーカラー使用ルールにより、状態表示以外の3つの要素にGreenが使われています」）。
4. 修正案 — 正式なパレットまたはアセットに基づき、デザイナーが適用できる具体的な差し替え案。

指摘は具体的にしてください。「見出しに、ブランドのプライマリーカラーであるBitwarden Blue（#175DDC）ではなく、ターシャリーカラーのGreen（#7BF1A8）が使われています」のほうが、「色が間違っています」より適切です。

追加リソース

• references/brand-assets.md — ブランドリポジトリのアセット（ロゴ、アイコン、シールド、スクリーンショット、メディアアセット）を、ファイルパス付きで網羅した一覧です。
• references/color-palette.md — HEX、HSL、SCSS 変数名、色ごとの使用上の注意を含む、パレット全体です。