会社カラーをマイナーチェンジしたので、工夫した点をまとめました
スマートキャンプデザインブログ、モリシゲです。
スマートキャンプおよび主力運営事業(ボクシル、ベイルズ)のカラーをマイナーチェンジしました。
変更点の解説に加え、他の会社でもカラー変更する際に気をつけてほしいことをまとめました。
スマートキャンプのカラーを明るくした
(左側2色:旧カラー、右側2色:新カラー)
ご覧のとおり、旧カラーより彩度が上がって明るい印象になりました。
カラーを明るくした理由は「視認性の向上」
このような発言がカラー変更のスタートでした。
この発言の背景として、旧カラーを設定したときには会社のカラーだけで、事業のカラーと連動するかどうかは未確定でした。
その後、ボクシルやベイルズといった事業にもスマートキャンプのカラーが展開されるようになりました。事業に展開されるようになってから、資料やWebでこの旧カラーを使う場面が増えてきました。
このカラーの問題点としては彩度が低いため、ブラックとほぼ同じ色に見えてしまうぐらい目立たないことです。
Webではボタンや文字色に使うため、明確に「色がついている」と分かるようなカラーのほうがユーザーフレンドリーです。
印刷物についても、目立たせたいメッセージやグラフに使っていました。
このような背景から、「今のカラーをなるべく変えないまま、より分かりやすくしたい!」ということで、マイナーチェンジという手段を提案することになりました。
カラー変更での影響範囲に気をつけた
事業のカラーにも影響があるため、実際のUIに色を流し込んでみて、読みやすいか、色を判別しやすいかなどを入念にチェックしました。
特にボクシルは何千ページもある大きなWebサイトですので、事業担当のデザイナーが中心となって開発チームメンバーぐるみで進めました。
ただ、会社で管理しているすべてのWebページ、システム、制作物、資料……とさらに影響範囲を考えてみるとどうでしょう。すべてを変更するとなればもちろん人手が足りません。
そこで、主要な事業、公式HPなどの主要なものに限定し、その他で変更ができていない部分については、社員全員でチェックできる体制を考えることにしました。
社員全員がカラーの変化に気づけるように
デザイナーだけでは気づけない、対応できないところがどうしても出てくるということで、社員全員でカラー変更に対応できるようになるために2つの取り組みを行いました。
① 全社向けの報告会でカラー変更について解説
マイナーチェンジということで、色の変化に気づきにくい方もいると思い、間違い探し、色のbefore/after、頭の中で答えられる程度のテストを行いました。
(簡易テストも小学生のテストのようなデザインに)
このようにデザインに親しみやすさを感じてもらえるようなスライドを使って解説を行いました。
② カラー変更後のデータを誰でもアクセスできるように
カラーの変化に気づけるようになってもらったあとは、旧カラーがあったときにどう対処してもらうかを覚えていただきます。
ほとんどの場合はロゴを新しく交換する作業だけなので、どなたでもできるのですが、デザイナーだけではリソースが足りません。
そこで、「みなさんができる範囲で変更作業をやってほしい」ということを伝えました。
変更作業をするために必要な、新カラーになったロゴデータや使い方がどこに置いてあって、どのように入手できるかという情報も解説しました。
ロゴデータやガイドラインについては、以前は共有ドライブにアップロードする形をとっていましたが、今回のカラーチェンジを機にWebで閲覧できるものに変更しました。
「スマートキャンプ公式HP」から「プレスキット」のページに行くだけで、閲覧もダウンロードもできるので、社員だけでなく社外の方にロゴデータを求められたときも、このページを案内していただくようにお願いしました。
ガイドラインのページを作るのは大変なので、「Frontify」という無料のブランド・マネジメントツールを使うことにしました。
このFrontifyでスマートキャンプのガイドライン(プレスキット)を構築したものが以下になります。
開発要らずで、デザイナーだけの力でも作成できるのでおすすめです。
このページを実装すれば、「ロゴってどこにありますか?」「このロゴのAIデータっていただけますか?」という質問・要望への対応がなくなります。
さらにサイズを変えて取得できるようFigma上にあるロゴデータも更新し、ツールを使いこなせる方はFigmaも使ってください、というお知らせをしました。
デザイナーにも非デザイナーにも親切で、やってよかったと思っています。
ロゴデータやカラーチェンジで同じような課題を感じているデザインチームにこの情報が届くと嬉しいです。
WRITER & EDITOR
SMARTCAMP Designer/PR モリシゲ @MorishigeYuta