CSSの新しい公式ロゴが誕生しました、メインカラーに採用されたレベッカパープルの知られざる感動秘話

Post on:2024年12月4日

CSSの古いロゴ

「3」という数字が中央に配置されたブルーの盾のロゴはこれです。
Wikimediaを見ると、2013年に誕生したようで、10年以上前なのですね。
形はあまり好きではありませんでしたが、ブルーのカラーはけっこう好きでした。HTML 5のオレンジと対になっていい感じでした。

CSSの古いロゴより

CSSの新しい公式ロゴの誕生の経緯

この盾のロゴは10年以上に渡り、CSSのロゴとして機能してきましたが、CSSが進化し、機能が追加されても、中央に3がある盾は変化しませんでした。言語の進化をより視覚的に分かりやすくするために、CSSの開発元であるCSS-Next Community Groupは新しいCSSレベルに加えて、バージョン3だけでなく、CSS全体を表現できる、より汎用化された新しいロゴに作成に取り組みました。

GitHubで新しいロゴのアイデアを募集し、その中から一つを選出し、ブラッシュアップを重ねて完成したのが、この新しいロゴです。

CSSの新しい公式ロゴ

メインに使用されているカラーのレベッカパープル（#663399）は、Reset CSSなどでも有名なEric Meyerの娘にちなんだカラーです。

彼女は亡くなる数週間前に「Beccaは小さな女の子の名前なので、6才になったらRebeccaと呼んで欲しい」と言っていて、6才の誕生日を迎えた12時間後に帰らぬ人になりました。Webコミュニティでは追悼キャンペーン（#663399becca）が行われ、その後Rebeccaの思い出を永久的にしようという提案が生まれ、彼女に敬意を表して、彼女が好きだったこの紫色に名前をつけようという話がでました。Ericは娘が6才になったらRebeccaと呼んで欲しいと望んでいたことを思い出し、娘が大好きだった紫色にRebecca Purpleという名前をつけてほしいと頼みました。

rebeccapurpleは、CSSのカラーリストにも正式に追加されており、主要ブラウザすべてでこの紫色を表示します。
参考: rebeccapurple -meyerweb.com

CSSの新しい公式ロゴのガイドライン

ロゴはCC0に基づいて公開されています。ただし、ロゴがアクセスしやすく認識しやすい方法で使用されるように、使用ガイドラインが策定されています。

フォント

ロゴに使用されているフォントは、オープンソースで無料利用できるDinish Condensed Heave（GitHub）が使用されています。文字の配置はロゴ全体に併せて調整されているため、さまざまなソースでロゴを認識できるように、公式で配布されているロゴを使用することをお勧めします。

フォントのダウンロードは、Dinish Condensed Heavyから。

カラー

ロゴのカラーには3つのバリエーションがあり、あらゆるシナリオで使用できます。

メイン
メインのロゴは、背景色としてレベッカパープル（#663399）を使用し、フォントにはホワイト（#FFFFFF）を使用します。
ダーク
ダークバージョンは、背景色としてブラック（#000000）を使用し、フォントにはホワイト（#FFFFFF）を使用します。アクセシビリティを確保するために、このロゴは明るい背景でのみ使用してください。
ライト
ライトバージョンは、背景色としてホワイト（#FFFFFF）を使用し、フォントにはブラック（#000000）を使用します。アクセシビリティを確保するために、このロゴは暗い背景でのみ使用してください。