ビットワルデンブランド
ビットワルデンのブランドガイドラインへようこそ。このドキュメントは、ビットワーデンのブランド戦略を共有し、ビジュアル・アイデンティティの核となる要素を詳述し、すべてのメディアで一貫したコミュニケーションをデザインすることによってビットワーデンのブランドを守る方法を説明することを目的としています。
Bitwardenは、信頼性が高く、ユーザーフレンドリーで、最先端のクレデンシャル管理ソリューションを提供することで、個人や組織がオンラインアイデンティティを簡単に保護できるようにすることをお約束します。Bitwardenは、セキュリティ、アクセシビリティ、オープンソーステクノロジーを最優先し、より安全でプライバシーに配慮したデジタル環境を実現するために、透明性、信頼性、利便性を重視するグローバルコミュニティを育成することに尽力しています。
ビットウォーデンのロゴ
ビットワルデンのロゴには、水平と垂直の2つの構図が認められている。Bitwardenのロゴを使用する場合、主要で好ましい構図は水平のロックアップです。横長のロゴがうまくいかない場合、縦長のロックアップを使用することもできる。
ロゴ安全エリア
水平ロックアップと垂直ロックアップの両方で、ビットワーデンのロゴに適切な間隔を与えることが重要です。横長のロゴの場合は、ビットワーデンのシールド幅を1つ使って、ロゴの適切な間隔を測ってください。縦書きのロゴの場合、「Bitwarden」のロゴタイプの「X」の高さを使い、ロゴの適切な間隔を測ってください。
製品ロゴのロックアップ
ビットワーデン傘下の製品は、独自のロゴ入りロックアップでブランド化されている。これらのロゴは、その製品専用のコンテンツを作成する場合にのみ使用されます。その他のブランドスタイル（色、タイプなど）はすべて変わらない。
ブランド書体
DM Sansは親しみやすく特徴的な書体で、ウェブでの使用はあまり飽和していない。その円形のボウルは、テキストに親しみやすさを与え、ビットワルデンの提案する丸みを帯びたアイデンティティ・システムとうまく結びついている。オープンソースのGoogleフォントであるDM Sansは、多くのウェイトを持つ低コントラストの幾何学的なサンセリフ書体。小さな文字サイズでの使用を想定しているが、より大きなスケールでも素晴らしい。
ビットワーデン・ブルーは、ブランドを認識し、所有できる色であり、コミュニケーションを統一し、ブランドに強いアイデンティティを与えている。
hex #175ddc | rgb 23 93 220 | cmyk 86% 84% 0% 0
セカンダリーのライトグレーは、ビットワルデンブルーを可能な限りサポートするために使用されるべきである。これはビットワルデンブルーに余裕を与え、より意図的な色使いにつながっている。
hex #f3f6f9 | rgb 243 246 249 | cmyk 3% 2% 2% 0%
ディープ・ブルーは、ビットワルデン・ブルーとインディゴ・ブルーの中間色として使われる。グラデーションとイラスト要素にのみ使用する。
hex #1a41ac | rgb 26 65 172 | cmyk 95% 82% 0% 0
より濃いインディゴ・ブルーは、テキスト・カラー、暗い背景、よりコントラストが必要なアセットに使用される。
hex #020f66 | rgb 2 15 102 | cmyk 100% 97% 23% 27
ハイライト ティールブルーは、特定の情報やイラストに視聴者の注意を引くためのハイライトカラーとして機能する。
hex #2cdde9 | rgb 44 221 233 | cmyk 0% 71% 18% 0%
三次色は控えめに使うべきで、使う場合はじっくりと考える必要がある。
アンバーオレンジhex #ffbf00 | rgb 255 191 0 | cmyk 0% 27% 100% 0%
メロンレッド：HEX #FF4E63 | RGB 255 78 99 | CMYK 0% 84% 50% 0%
ミディアムパープル：HEX #976FD9｜RGB 151 111 217｜CMYK 50% 62% 0% 0
半径
丸みを帯びた半径は、ブランド基盤の大きな枠組みのひとつである。このビジュアル・アイデンティティは、ビットワーデンのロゴマークの丸みを帯びた角と、ブランド書体の形状をベースにしています。
ボタン
この半径36pxのシステムから外れる唯一のアセットはボタンです。ピル形状を実現するために、ボタンはボタンの高さの50％のコーナー半径を使用する。半径は直径の半分。例えば、高さ50pxのボタンのコーナー半径は25pxです。
ハイライト
このシステムにより、ビットワーデンはユニークなブランドのビジュアルエレメントを作成することができ、同時に文章や見出しの中で重要なキーワードを強調する方法を作り出すことができる。ハイライトシステムは、1語または2語のハイライトにのみ使用すること。一語のハイライトは、読者の理解を要約したり、効率化したりするような言葉に使うべきである。2つの単語をハイライトすることは、同じユースケースで使用されるべきですが、ハイライトを適切に伝えるために形容詞や副詞が必要な場合に限られます。
イコノグラフィー
Bitwardenのウェブアイコンは、製品アイコンとは異なり、より大きな用途に対応し、より詳細で、マルチカラーにすることができます。これらのアイコンは2：1のストローク比を使用している。太いストロークはアイコンを定義するのに使われ、細いストロークはディテールを加えるのに使われる。これらのアイコンはモノトーンでもフルカラーでも使用できる。丸や四角など、立体感やコントラストが必要な図形の背景には、無地を使うこともできる。
製品
商品はデバイス・ラッパーなしで表示され、代わりに白いボーダーで商品を囲みます。ユースケースによっては、製品の忠実度の高いバージョンを使用することもあれば、不要なものやフィラーを基本的な形状に減らした、より様式化されたバージョンを使用することもある。
より具体的な使用例では、製品の背景を暗くし、フォーカスエリアを拡大して、機能やセクションの詳細をより明確に表示します。
その他の商品画像をご希望の方は、press@bitwarden.com。
ソーシャルポスト
Twitter用に1200x675pxに作られたフレームは、Bitwardenのソーシャルメディア投稿のための統一されたシステムを作り出します。フレーミング・システムはこのように機能する：
ビットワルデン・ブルーの背景のカードは、ビットワルデン・ライトグレーのボーダーと相性が良い。
ビットワルデン ライトグレー背景のカードは、ビットワルデン ブルーのボーダーと相性が良い。
ビットワーデン・インディゴ・ブルーの背景のカードは、ビットワーデン・ブルーのボーダーに最適です。
ビットワルデン Bロール
ビットワルデンのBロールは、一般に使用・配布することができます。この補足映像は、レビューやメディアの特集、その他の報道でBitwarden製品を紹介するために使用することができます。このBロールセレクションには、製品の実写ショットや、さまざまなクライアントでウェブサイトやBitwarden Password Managerをナビゲートするユーザーの姿が含まれています。