見出し画像

カミナシ CI 策定。 ロゴ刷新にデザイナーが込めた想い

こんにちは。カミナシに11月に入社したデザインエンジニアのショウです。本日、カミナシの新 CI をリリースしました。この note では、新 CI のロゴリニューアルについて背景と想いをまとめています。

目的は新 MVV 及びプロダクトの方向性の反映とデザイン品質の底上げ

私がカミナシに入社したのは11月。実は入社する前に、いろんな記事やビデオでカミナシに関する情報を見ていました。その情報を見るうちに、カミナシのロゴがあらゆる場面に対応しきれてない状況に気づきました。

例えば、さまざまな大きさで使用される時にロゴが耐えきれてないことや、利用シーンに対して間違った表現形式で使われていたところです。私自身、ロゴのヤギマークには惹かれていましたが、デザイナーとしてそれらの課題を解決したいと思うようになりました。
その後、代表の諸岡に聞いたところ、既存のロゴは海外のクラウドソーシングサイトに依頼して作成されたものとのこと。ヤギマーク自体は気に入って入るものの、ディテールについては特にこだわりがないとのことでした。

一方、その時会社では、ミッション・ビジョン・バリュー(以下、「MVV」)が決定し、戦略なども固まったタイミングでした。取り組むべきことが明確になっていく中で、ビジュアル面でもカミナシらしさを追求するべきだと考えました。それが今回の CI 策定に繋がりました。

ロゴはすべてのデザインのベースで、企業とサービスが元来持っている価値を象徴するものであり、企業の方向性を示す最も重要なコミュニケーションツールです。それをさらにレベルアップさせたいという思いのもと、入社後すぐにデザインチームのプロジェクトとしてロゴのリニューアルに取り掛かりました。今回のリニューアルのメイン目的は、新 MVV 及びプロダクトの方向性の反映とデザイン品質の底上げでした。

カミナシのロゴリニューアルのポイントは3つ

旧ロゴはマークの意匠性は優れていたものの、ロゴの機能としては足りていないところがありました。使用時には基本画像を等倍拡大するため、Tシャツへの印刷など大きいサイズで使うとヤギマークに入っている「折れ線」が太く見えてしまったり、逆にアバター画像など小さいサイズに設定する時「折れ線」が細すぎて潰れてしまったり...。
あらゆる場面で、様々なサイズで使われるロゴにとっては、各シチュエーションに耐えられるデザインやそれに伴う利用ガイドラインが必要だったのです。

画像1

▲会社の紹介資料の1ページ

また、ブランディングの観点から、旧ロゴで使用していた青緑色は会社のカルチャーであるミッションやプロダクトのコンセプトとの繋がりがやや弱く、色を再考する必要がありました。書体もロゴ全体のコンセプトやヤギマークとの関連性が薄かったので、コーポレート書体と合わせて検討すべきと考えました。

以上の課題から、ロゴをリニューアルする時のポイントを下記の3つに絞りました。
 1. 会社の MVV 、プロダクトのコンセプトとロゴをもっと結びつける
 2. 紙というメタファーをさらに深堀りしてロゴ全体で表現する
 3. あらゆるシチュエーションに耐えるデザイン(=機能性)

書体・色・サイズを再考

書体

コンペで作成された旧ロゴは、納品データや提案内容などが残っていない状況だったので、何の書体を使っていたかが明文化されていませんでした。
そこで、まずは折り紙感のある書体の打ち出しを行いました。

画像2

一般的な書体の決め方は、いろんなスタイルの書体を打ち出して、カテゴリごとに印象整理などを行います。しかし、カミナシの場合は折り紙感を書体の部分にしっかり出したいこともあり、印象整理などは行わず 1,000 種類以上の書体から8種類程度をセレクト。
最終的にデザイナーチームで検討を行い、ブランドイメージとの兼ね合いから 「JAF Mashine」 に決めました。そこから文字のエレメントや文字間調整などを経て最終タイポグラフィが決まりました。

画像3


課題となっていた「折れ線」の部分は、線を消してヤギの各パーツを接続してヤギの折り紙感を折れ線なしで表現することにしました。色を複数使う発想からスタートして、簡単な検証を実施。そこで3色以上の色を使ってヤギマークを表現するのはかなり難しいことがわかり、折り紙の表と裏を2色で表現することに。
その際、デザイナーチームで各自案を出しあいましたが、副業勤務のデザイナーもいるため、非同期コミュニケーションに Figma で思考プロセスを書くように心がけました。

画像4

▲デザイナーメンバーの色案(一部)

配色検証とは別に、「ロゴはどんな色であるべきなのか」も考えました。
参考にしたのは、以前、サービスサイトが作られた時にイメージスケールで社内の意見を集めた結果です。みんながイメージするブランドイメージは、若干明るいカラーでした。

画像5

会社のカルチャーとサービスのコンセプトから、「ノンデスクワーカー(ブルーカラー)、清潔感、遊び心、親近感、信頼感」のキーワードに辿り着きました。そして、ビジョン・ミッションを言葉にした時に、おのずとブルーカラーと世間で認知されている青基調のイメージが浮かんだのです。
それらをもとに色検証をした結果、メインとなるロゴの色が決まりました。そのあと、さらなる紙の質感を出すため、色を単色からグラデーションに調整。違う色の境目に影を付けることで、より立体的な折り紙感を出してみました。ここでロゴがグラフィックエレメントを持つことによって、今後の展開はこれをベースに印象的なデザインが容易にできるようになります。

画像9

▲グラデーションとシャドウを加えることによっての変化

サイズ

最後はロゴのサイズ関連の部分です。
旧ロゴの一番の課題は違うサイズでの利用シーンで、それに合わせた最適化が行われていなかったことです。そこで、今回は「レスポンシブロゴ」という考え方を取り入れて、大きいサイズの平面媒体から小さいファビコンサイズまで4段階に分けて、各シーンに対してロゴの表現形式を最適化してみました。合わせて使用ルールを策定することによって、「見る人にとって常に一番良い状態」でロゴを認識できるようにしました。

画像7

▲ Image Credit: https://medium.com/@jackanto/responsive-logo-must-to-follow-4901cb0cfcbc

画像9

▲VI ガイドラインでレスポンシブロゴのページ

新ロゴからの展開

折り紙のヤギをモーショングラフィックで再現しました。

コーポレートサイトを新ロゴに合わせて刷新を行いました。

VI ガイドラインの整備も行いました。

デザインを通じてノンデスクワーカー市場に貢献していきたい

カミナシの進化は CI 刷新だけでは終わりません。
今回の新しいロゴをベースとした新デザインシステムは、カミナシのプロダクトの土台になります。私自身、カミナシに入社して、この領域に対するデザインの貢献度合いはとても高いと感じています。

『カミナシ』は、日本にいるノンデスクワーカー 3,100 万の現場管理のためのプラットフォームです。ITに慣れたデスクワーカー向けのデザインをそのまま流用しても、適応できないことが多いと思います。
私がある企業のユーザーヒアリングに行った時に非常に印象に残ったのは、ゴム手袋をしている従業員がタブレット操作する際に、十分なタップエリアが確保されているにもかかわらずボタンを押しづらそうにしていたシーンです。現場には作業で手が塞がれていたり、手が汚れていたり、デスクワーカーにはないさまざまなシチュエーションがあふれています。さらに障害者や高齢者、外国人などがいて、インクルーシブデザイン的な考え方も必要であると感じました。

今回策定した会社のミッション「ノンデスクワーカーの才能を解き放つ」に、デザインは大きな役割を担っていると考えています。いまだにデジタル化が浸透していないノンデスクカー市場に対して、私はデザインを通じて貢献していきたいと思っています。これからカミナシのさらなる進化をご期待ください。



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
70
B2B SaaS カミナシのデザインエンジニア | 中国上海出身トライリンガル | DM 大歓迎 | 🐴 + 🥕 → 🦄