CAM TECH BLOG

株式会社CAMのエンジニア・デザイナーの活動を綴るブログです

株式会社CAMの技術ブログです。 エンジニアとデザイナーの活動や組織文化を綴ります。

全部見せます!CAM新ロゴ制作のプロセスー企業ロゴデザインの実例

f:id:cam-engineer:20190228103157p:plain

目次:

| CAM18年史上初!会社CIを大幅刷新

株式会社シーエー・モバイルは、2019年3月1日をもって、株式会社CAM(キャム)に生まれ変わりました。

社長交代、収益バランスの変化、広告事業からの撤退とプロダクト中心へ事業構造の変化、BtoBからBtoCへ、社屋の移転(3月中旬予定)、、、

全てが新しくなる節目に、新生CAMは「Be a fanatic.(熱狂者であれ)」を新たなビジョンに掲げ、作り手とユーザ双方の熱狂を生む「プロダクトの会社」として再スタートを切りました。

そしてそのコンセプトを体現すべく、刷新されたロゴがコチラ(↓)。広告事業を展開していた事業色の強い過去のロゴに比べ、ものづくりの会社らしい、親しみやすさが重視された色と形が取り入れられました。



f:id:cam-engineer:20190227182753p:plain:w300
▲ 旧ロゴ。BtoB 向きなビジネス色の強いデザイン。

↓↓↓

f:id:cam-engineer:20190227185907p:plain:w500
▲ 新ロゴ。プロダクトの会社らしい、親しみやすさを重視した。



| 新ロゴは社内コンペで決定

新ロゴは、社内コンペから誕生しました。

社外のブランディングカンパニーを使わず、社内公募としたのは、「ものづくりの会社」らしく、みんなで作り上げていくことを重視する社長(飯塚勇太)の意向です。

コンペは2018年の秋口から年末にかけて完全匿名制で進められ、合計約 120 点もの案が寄せられました。

デザイナー職のみならず、エンジニアやディレクターなど、幅広い職種の社員が参加したことからも、この変化に対する社員の興味・関心の強さを感じとることができます。

選考は、9名の取締役・執行役員で構成される選考委員に、オブザーバとしてサイバーエージェントのクリエイティブ執行役員・佐藤洋介氏を迎えて進められました。


f:id:cam-engineer:20190227183001p:plain
▲ 全ての案は役員全員が目を通し、慎重に選考された


【 選考のプロセス 】

f:id:cam-engineer:20190228113050p:plain


最終的に採用されたのは、フロントエンドエンジニア出身で現在、新規事業のUIデザインに携わるデザイナー・安西 謙之の作品

社長・飯塚勇太によると、社名に色を持たせすぎて(事業の)広がりに制限をかけるようなものでなく、プロダクトにさりげなく寄り添える、シンプルでわかりやすくて、自由な感じという自分の要望に合致しており、そういう意味では最終まで残った他の2案もどれが選ばれてもいいと思う仕上がりだったそう。

一方で、安西の最終案を見た時「なんだか、CAMの従業員のイメージそのもののフォルムだなと。穏やかな丸みがあって、いい意味で目立たない」そんな印象をもったといいます。

そんな創業19年目の大変革を表現するのに ”御誂え向き” な意匠はどのように生みだされたのかー。

安西のロゴメイキング・プロセスの一つ一つを、本人の言葉とともに追っていきたいと思います。



| ロゴ制作・全プロセス公開

f:id:cam-engineer:20190227183707p:plain
安西 謙之(あんざい・のりゆき)

2009年サイバーエージェント入社。ガラケー全盛期にAmebaのゲームUIを担当。一度、別会社に出るも、2018年に再度CAMに入社。学生時代から入社当初はフロントエンドエンジニア。過去に、サイバーエージェントで行われたブログスキンの社内コンペに勝利してから、本格的にデザインを学び始める。

Process-1 条件を吟味・咀嚼する

僕は、CAM 入社が 2017年なので、昔の事とか、系譜とか詳しくは知らないのですが、サイバー(エージェント)の子会社の中でも歴史が長いので、社名や CI を変える事は、かなり深い意味があるということは理解できました。

飯塚さん(社長)の週報や社内広報サイト CAMedia から集めた情報をベースに今回の重要要素を掘り出してみたのですが、中でも(広告事業がなくなって)プロダクトの会社になること、という要素は外せないと思いました。

今回の変革自体、規模が大きいので、ガラッと変わった印象がなくてはならないですし、プロダクトの会社のロゴにふさわしい形状であるべきだと。これまでの BtoB らしい”かっちり”した形状から、BtoC らしい、柔らかで親しみやすさを感じるものにしていくのがいいだろうとか、大まかな方向性を決めて、キーワード化しました。


Process-2 参考イメージを集める

方向性が決まったら、ドリブル を見て、今回自分がテーマにした「柔らかで親しみやすい印象」を感じるクリエイティブをガンガン保存していきました。

このフェーズでは遠慮はいりません。ちょっとでも自分のフィルターに引っかかったものは、取り込んでいく作業です。僕は全ての情報を自分の iPhone に集約しているので、移動時間や業務外の時間を使ってせっせと溜め込みました。最終的に、50 個くらいのアートワークを集めました。


f:id:cam-engineer:20190228123554p:plain:w500
▲ いつでもすぐにアクセスできるよう、情報は全て iPhone の中に


Process-3 印象をロジックで定義する

ある程度、参考ビジュアルが集まってきたら、なぜそれを自分が直感的に「柔らかで親しみやすい印象」と思ったか、それぞれについて検証します。

たとえば、繊細なカーブに優しさを感じたのか、連続する形状に気持ちのいいリズムを感じたのかなど。受けた「印象」を自分の中で定義していく作業です。


Process-4 定義に合わせてイメージを広げる

ここから手を動かすフェーズです。自分の定義に合うと思われる形を、どんどん広げていきます

今回はロゴタイプだったので「 CAM 」の3文字のフォントをひたすらタイプしては俯瞰して、「 A と M が山っぽく見えるなあ〜」など、3文字の塊のアウトラインから感じる印象を確認しながら、テーマに合致しそうなフォントを模索しました。

f:id:cam-engineer:20190228123744p:plain:w500
▲ ちょっとでも可能性のあるものは出して広げて俯瞰していく

使ったツールは、Adobe Illustrator です。ちょっとパワープレイではありますが、いきなりツールで描き始めちゃいます。クロッキー帳に手描きで形を取っていってからデジタルトレースするデザイナーも多いですが、僕は美大出身でもないですし、絵、描けないんです(苦笑)。


Process-5 広げたイメージを絞り込んでいく

アイディアを広げ切ったら、ここから絞り込みをしていきます。アウトラインが綺麗だと思うものも、今回のテーマに合わなければばっさり捨てます。

f:id:cam-engineer:20190228123912p:plain:w500
▲ 絶対ないなと思うもの、テーマに合わないものはどんどん削除

そうするうちに、なんとなく方向性がまとまった、ポテンシャルのあるいくつかが残ります


Process-6 絞りこんだ案を形成

フォントのアウトラインをちょっとずついじりながら、シンボリックな形状に整えていきます。

f:id:cam-engineer:20190228124939p:plain:w500
▲ ロゴの印象をどう演出するか。まとめたり切り離したり、たくさん検証する

ベースのテーマは同じでも、プラス要素が異なると、人に与えるメッセージもちょっとずつ変わっていきます。

全てのメッセージを1つの形に込める事は難しいので、あえてそこは絞りきらず、1つのロゴに1つのメッセージをこめて、複数案出すことにしました。どのメッセージが正解に近いのかが分からない状況だったので。

それから、作業は一気に行わず、日を変えながら少しずつすすめて行きました。日によってアイディアや見えるものは変わるので、一気にやるよりも面白い結果が得られると思います。

最終的に、7案まで絞り込みました。


Process-7 フィニッシュワーク

絞り込んだ7つのロゴ案は、視認性や可読性など、ロゴとしての成立条件や今回のテーマを鑑みながら修正を加えていきました。つながり、可愛い、いい感じに力が抜けている印象になれば OK という基準設定をしました。

僕は、結構色々な人に意見をもらうタイプなので、今回もデザイナーじゃない普通の人に見てもらって、印象のチェックをしました。

ちょうど年末年始が作業期間だったこともあって、帰省した際に、地元の友達や家族、親戚とか、たくさんの目線に晒してコメントをもらいました。

今回はサービスのロゴじゃなくて、企業のロゴなので「会社っぽい感じがするか?」も大事にしました。良いコメントがもらえる事ではなく、狙い通り「かわいい」とか「楽しそう」という印象ならOK、でも「かっこいいね」「堅すぎるかもね」ってコメントが返ってきた時は、直すというふうな印象基準を設けました。

一方で印象だけを求めると、文字としての視認性が下がる場合があるので、普通の人が「C」「A」「M」と読めるかという点も重視しました。 こうして整えた7案を、コンペに出しました。

f:id:cam-engineer:20190228125209p:plain:w500
▲ メッセージの異なる7つの案を用意し、提案した


Process-8 CDのアドバイスでブラッシュアップ

通常であれば、ここまででひと通りの作業は終わるのですが、コンペで最終選考まで残った3人の案が、それぞれに拮抗していて、またそれぞれにもう少し改善の余地があったので、サイバーエージェントのクリエイティブ統括からの講評・アドバイスをもらって、3人とも持ち帰り、再度ブラッシュアップとなりました。

僕の7案のなかで選ばれたものは、最初「A」と「M」の山の部分の角度を同じにして「つながり」感を出していたのですが、等倍だと「M」が間延びして見えるという指摘があったので、「M」の幅を少し詰めて「C」の余白を本当〜に微妙に調整して、バランスを整えました。

また、僕は旧コーポレートカラーが青で、ここは引き継いだ方がいいかなと思い、青で提出してしまったのですが、”新しい会社のビジョンが「Be a fanatic」なんだから、ここは暖色でしょ” というごもっともな指摘が入り、色の見直しも必要になりました。

f:id:cam-engineer:20190228125428p:plain:w500
▲ コーポレートカラーは後で変更に

より可読性を高めるために、「A」の山の中に、丸を入れて、ここを fanatic のイメージの赤にすることにしました。

赤は赤でも、トーンによって印象は随分変わるので、幾つものバリエーションを試しました。

ロゴは、web だけじゃなく名刺などの印刷物でも使うので、DIC のカラーチップである程度あたりをつけたあと、ロゴと色とのバランスを見るため、印刷会社に実際に名刺サイズに印刷見本を作ってもらって、細かくチェックしました。

f:id:cam-engineer:20190228125654p:plain
▲ 画面上で見る色と印刷の色の差は大きい

今っぽいグラデーションも見てみましたが、印刷にした時、ちょっと眠い印象になる可能性があるので、単色にしました。

最終的に、サンプルを見ながら多数決をとった結果、現状の赤に決定しました。親しみやすく、fanatic にふさわしい色に着地したと思います。

f:id:cam-engineer:20190228125758p:plain
▲ 名刺にしたときのバランスを考えて、微妙な違いを吟味した

最終案は、再ブラッシュアップ後の3案から、再び選考委員の投票により決定しました。



f:id:cam-engineer:20190228134310p:plain
▲ 形状の変遷。調整に調整を重ねて最終形に
f:id:cam-engineer:20190228134854p:plain
▲ 新ロゴの名刺も完成。白黒の2パターンを用意。白は赤丸を生かし、黒は白ベタ


↓社内の映像クリエイターが新ロゴのイメージ映像を作り、盛り上げた。

CAM新ロゴ イメージ映像



| おまけ:ロゴを作る上で心がけている7か条

今回のロゴ制作プロセスには、一貫した思想のようなものを感じたため、安西のデザインにおける信条を聞いたところ、普段そういうことはあまり意識していないと前置きしつつも、7つの大事な心がけを伝授してくれました。

これからロゴ制作にトライしようと思っている人には参考になる内容かと思います。


1. キーワード、理念を決める

常にキーワードを念頭に置いて自分の作品をチェックすることで、成果物がぶれなくなる。


2. アーティストにならない

クライアントが求めるもの、期待しているものを追求するのが前提。あなたが大御所デザイナーでない限り!


3. 第三者の「印象」をチェック

利害関係のない幅広い層に客観的な意見をもらうことで、自分の思い込みを排除する。

一般の人にとってロゴは印象が全てなので、思わぬ気づきを与えてくれる。


4. 構造的に作り、ダメなら崩してみる

テクニックの話。同じパーツで組み合わせたり、角度を揃えたり、規則的な形を作ってみると気持ちがいい形ができる。

しっくりこない場合は、ちょっと崩してみるといい。


5. 個性も大事にする

ロゴは汎用性が大事、でも、ちょっと他と違うなという「引っかかり」がなければならない。


6. 他のロゴの中で、沈まないかチェック

ロゴの個性や印象を確認するのに、他の会社のロゴのリスト(タイル状表示が良い)の中に紛れ込ませて、俯瞰する。

そこで、目が止まらない場合は、印象が薄いという事。


7. 実際のシーンに置いてみる

webサイト上、印刷面など、実際に使われる場にプロトタイプを使って「置いてみる」と、想像以上のことに気づくことができる。


f:id:cam-engineer:20190228143422p:plain:w500



| 取材の最後に

ひと通りインタビューが終わり、最後に ”どのようにアピールをしたか?” と尋ねるとー

安西: 特にアピールはしないです。企業理念とかコンセプトとか、書きはするんですが、それに頼らないようにしています。言葉の力で相手を説得するのではなく、ビジュアルの「印象」に全てを委ねることが大事だと思うんです。

との答え。

その主義を裏付けるように、今回、見せてもらった資料には、安西自作の企業理念がギリギリ読めるレベルの薄墨で記されていました。「話せばわかる」が通用しない、一瞬の印象が勝負を決めるのが、ロゴの世界であり、デザインの醍醐味と言えるでしょう。



f:id:cam-engineer:20190228135227p:plain:w600
▲ 実際のプレゼン資料。言葉の影響を極力避けるため、コンセプトは読めるか読めないかの薄墨文字で



( 文・デザイン: 技術/クリエイティブ広報 桑田 )