新生＠cosmeロゴ リニューアルのお話
こんにちは！ アイスタイル デザイン部 リードデザイナー大石です。
巷では年末を彩る様々なアワードや流行語、今年の漢字なども発表され、すっかり年の瀬の様相になってきました。
そんな中、弊サービスの@cosmeでは20周年を迎えた2019年12月3日にサービスロゴをリニューアルいたしました。
※新ロゴについてのご紹介は、プロモーションページを是非ご覧ください。
全国に店舗を展開している@cosme STORE（アットコスメストア）の看板など、みなさまの目に入る “@cosme” は、12月以降 順次新しいロゴに刷新されていきます。
（※左から @cosme アプリ、@cosme web、@cosme STORE）
今回の記事では、その新しい@cosmeのロゴリニューアルの背景について「どうしてロゴを変えたのか」そして「@cosmeのサービスの広がりとロゴでの表現」について、ちょっと真面目にお話したいと思います。（まるで前回の記事が不真面目だったような…）
どうしてロゴ変えたの？
以前の@cosmeのロゴといえば、そのぽってりとした愛されボディ系のフォルムで20年もの長きに渡り多くのみなさんに親しまれてきました。
が、実はこのロゴ、様々な事情を抱えている、ちょっぴり困った子でした。
そこで、@cosmeが大きく変わろうとしている20周年を機にいろいろな課題を解決し生まれ変わらせるべく、ロゴのリニューアルが行われることになりました。
（なお、ロゴのベース開発は外部にお願いすることとし、デザイン部としては旧ロゴの課題抽出や、細かな調整やロゴの展開、ガイドライン検討などに携わっています。）
今までなかった、軸となるデザインコンセプトの確立
旧ロゴはおよそ20年前、@cosmeの誕生時に生まれました。が、当時はまだまだクチコミサイトとして走り出したばかり。
（ロゴがオレンジ…！インターネット黎明期っぽい。）
その後20年を経て、サービスはどんどん「クチコミサイト」から「ビューティプラットフォーム」へと進化を遂げているにも関わらず、ロゴは（グリーンにはなったようですが）ずっとそのまま。
※「ビューティプラットフォーム」については後ほど。
また、今 @cosmeでは『one @cosme』を掲げ、すべてのサービスがひとつ(one)に繋がっていることを表現しようとしていますが、ロゴに軸となるコンセプトがないこともあり、@cosme◯◯◯◯…といった関連サービスが生まれる度に部分最適が行われてきてしまい、年月を経て大変カオスな状態に。
（個々で独自性を出している…と言えなくもないですが……）
これでは “@cosme” というブランドを価値化できていない。
これを機にしっかり “@cosme” というサービスのブランドアイデンティティを植え付けることになりました。
“@cosme” のブランド・価値。
それはユーザーさんブランドさん、双方の視点を持った中立的な立場、フラットな関係性。
これをデザインコンセプトに落とし込んだのが「Dot＆Space」です。
（サラッと書いていますが、ここに辿り着くまでは相当な議論が……）
@cosmeのフォント
旧ロゴはFrutigerで「@cosme」と打たれたものでしたが、これは「意匠（デザイン）ではなくテキストでしかない」とみなされ、海外で商標をとろうとした際に不利な状態でした。
新ロゴの開発においてはこの問題を解決する必要もあったため、前述のコンセプトに則り円をベースにしてオリジナルフォントを作字。すべてがDot&Spaceによって生まれる円のカーブによってデザインされています。
なお、ここまで読んでいただいた方はお気づきかもしれませんが、＠の中のキラッとした部分は「星」を意識したものではなく「Space」です！
また、もしかすると「s」が気になる…！という方もいらっしゃるかもしれません。
ちょっと傾いたような「s」は「c」と同じ角度（45°）になっており、あえて不安定で足りないように見せることによって目の錯覚で足りない部分を補い、ロゴ全体に動きを生む狙いがあります。（なお、ここの調整は最後の最後まで難航…）
象徴となるモチーフやアイコンがなかった
これはUIデザイナーを生業としている私たちにとっては地味に頭を抱えていた問題でした。
SNSのアイコンやアプリのアイコン、faviconなどなど…
今まで、サービスの「象徴」がなかった@cosmeは、それらが必要になると
「ロゴでいいか…？」とか「コスメのイラストいれておく…？」なんて悩むこともしばしば。
今回待望の「単体で使えるモチーフ」、そしてサービスを象徴する「Dot&Spaceパターン」が誕生しました。
こちらも今後、様々な場所で活用されていきます。
@cosmeグリーンって何色？
実は旧来の「@cosmeグリーン」は2色存在していました。Webやアプリで使用されるRGBベースのグリーン と、印刷物や店頭などで使用されるCMYKベースのグリーン です。
本来ブランドカラーたるもの、どこで見ても同じ色だと認識できるよう調整されていることが一般的ですが、今までの@cosmeグリーンは何故か結構違うよねレベルで印象の異なる色が規定されており、歴代のデザイナーの悩みの種でもありました。
そのため、このグリーンに関しても今回のタイミングで統一がはかられました。
どう調整していくかについても検討を要しましたが、スクリーンで見たときの目へのやさしさを重視したRGBのグリーンは印刷できれいに再現・出力することが難しく、どうしてもくすんでしまいます。
また、新しいロゴが以前より線が細くなることも加味した結果、CMYKで使用していた鮮やかなグリーンに一本化することに。
・・・・・・・・・・・・・・・・・・・・・・・・・
細かなものを含めると他にもありましたが、これらの課題がこの度の新ロゴ開発でひとつひとつ解決されていきました。
@cosmeのサービスの広がりとロゴでの表現
@cosmeはまだまだ「コスメのクチコミ」というイメージが強いですが、美容に関わるあらゆるヒト・モノ・コト・場所がリアルでもオンラインでも繋がる「ビューティプラットフォーム」です。
このプラットフォームに存在するサービスはすべて「@cosme」という名のもとに存在しています。
……というサービスのあり方を、サービスの顔であるロゴでも表現するため、@cosmeの関連サービスのロゴは、決して「@cosme」と並列にならないサイズ感で組み合わされています。
イメージ的に「@cosme」という大きな木に「STORE」や「SHOPPING」等の枝葉が存在している状態を想像していただくとわかりやすいでしょうか。
（想像して……って書いてるのに図を載せる）
リアル店舗「@cosme STORE」、ECの「@cosme SHOPPING」が代表的ではありますが、その他にも大小さまざまな関連サービスが存在しており、その事業・サービスの位置づけによってロゴもパターンを変えて組まれています。そしていずれも「@cosme」との関係性は同じです。
@cosmeブログや@cosme Q&Aに関しては、webでサービスを展開している「機能別」の集約サービスであることから、@cosmeの1機能だということがわかるよう一歩引いた組み方になっています。（旧ロゴと見比べると、より「@cosme」が際立っていますね。）
例外としては先日終了した、年に一度の公式通販スペシャルイベント「@cosme Beauty Day」と、こちらも毎年恒例の「@cosmeベストコスメアワード」です。
オンライン/オフラインの垣根を超えた全社あげての一大イベントであることから、独自のロゴがデザインされています。
これらのロゴのデザインプロセスや制作の紆余曲折については個別に語っていますので、こちらもどうぞご覧ください。
さいごに
最後になりましたが、今回根深い課題たちをクリアにし、オンライン、オフライン、海外、法務的……すべての方面での展開力の強さを叶えた@cosmeの新ロゴは、「Hand」の八木 秀人様に制作いただきました。
http://handdesign.jp/
この新しい@cosmeのロゴに込められた思想・コンセプトを社内のデザイナーが十分に理解し、吸収し、@cosmeのブランドを守りながら運用していくことが次の段階の課題となりそうです。
・・・・・・・・・・・・・・・・・・・・・・・・・
今回@cosmeの新ロゴについてお話しさせていただきましたが、私たちの本業（？）はエンジニアと共にアプリケーションを開発しているUIデザイナーです。そんなUIにも新しいサービスのアイデンティティをバリバリ適用していく仲間たちを随時募集しています！
もし少しでも興味が出てきた！という方はお話だけでもしてみませんか？是非お気軽にご連絡ください！
ここまでお読みいただきありがとうございました。
筆者について
2007年にアイスタイルに中途（第二新卒）で入社し13年目。＠cosme界隈のUIを一貫性のあるクリエイティブに推進中。主軸としているUIデザイン以外にも、過去にはweb以外のデザインや、ほんのちょっとだけプログラムもかじったり。最近はロゴデザインに興味。プライベートも多趣味で典型的な器用貧乏。年末は家で猫を撫でまわしつつ積みゲーを消化する予定。
この記事が気に入ったらサポートをしてみませんか？