ABEJA Tech Blog

中の人の興味のある情報を発信していきます

ABEJAリブランディングのデザインプロセス

f:id:takana8:20180508135641j:plain

おひさしぶりです。骨とワニが好きなデザイナー兼アートディレクターの吹上(@takana8)です🐊

去る2月22日、ABEJAは大規模AIカンファレンス「SIX 2018」を開催し、その基調講演でコーポレート・リブランディングを発表しました。
本記事では、この発表に至るまでのブランディングプロジェクトの「舞台裏」を、アートディレクターの視点からご紹介します。

1. ブランディングプロジェクト、はじまる

ブランディングプロジェクトのはじまりは、2016年の秋に遡ります。

当時はまだ正式なプロジェクトではなく、チームもない(社内に専任デザイナーは1人だけ)、まさに暗中模索な日々😎
絶えず発生する様々なデザイン業務と並行しながら、まずは「現状整理」を粛々と行っていました。経営陣へヒアリングしたり、社内外に散らばった制作物をかき集めたり、「ABEJAをとりまく環境」や「ABEJAらしさとは何か」についてひたすらGoogleドキュメントにまとめたり……。

f:id:takana8:20180508115712p:plain この時にまとめた資料は最終的に1万数千字を超え、16ページものボリュームになっていました。

それから、しばしの冬眠を経て、ブランディングプロジェクトが改めて始動したのは、2017年の春。
まずはコーポレートサイトをフルリニューアルしようという話が持ち上がり、企画から制作までガツッと一緒に進められるパートナーを探しはじめたところ、縁あってOVERKASTのディレクター・遠藤さん(@endout)と大林さん(@ekrits)、そしてShedのアートディレクター・橘さん(@Shed_Inc)の3名に加わっていただくことになりました。

念願の「チーム」が結成されたことで、ここから本格的にプロジェクトが動きはじめたのです。

2. なぜABEJAにブランディングが必要なのか、なぜこのタイミングなのか

具体的なプロセスの話に入る前に、ここで「なぜ」の話をまとめておきます。

なぜABEJAにブランディングが必要なのか

今回のブランディングの目的は、大きく2つあります。

1つめは組織成長の観点で、「ABEJAが目指す方向性を共有し、各メンバーが一貫したメッセージで(社内外に)発信できるようにすること」。

2つめは事業成長の観点で、「『日本でもっとも有名なIoT×Big Data×AIエコシステム』を構築している会社であるというレピュテーションを得て、 顧客の獲得、事業パートナーの獲得、メンバーの採用につなげること」。

これらを達成するために、わたしたちは次のようにプロジェクトを進めていくことにしました。

f:id:takana8:20180508115744p:plain プロジェクト初期に想定してされたプロセス。そう、この時点では制作物のスコープはコーポレートサイトだけでした(伏線)。

ここで、混同されることが多いブランディングとマーケティングの違いについて、簡単にお伝えしておきます。わたしたちは、これらを最初から明確に別ものと考えていました。

その違いを一言で言うと……

f:id:takana8:20180508115800p:plain ブランディングは「自分磨き」、マーケティングは「モテ施策」。

ブランディングは、企業が自らに向き合い、内なる「軸」を明らかにすること。それは「ABEJA」という人格のことであり、そこから所作や語り口などが決まっていきます。
一方のマーケティングは、外に目を向けて、他者からどう思われたいか、どう差別化し選ばれるかを定義して活動することです。

これらの違いを意識しながら、前述の目的を達成するべくブランドの言語化とビジュアライズを進めていきました。

なぜこのタイミングなのか

プロジェクト進行中にも、状況は刻々と変化していきます。

ブランディングプロジェクトの本格始動から数ヶ月後の2017年夏、大規模なマーケティングイベント(=SIX 2018)を翌年2月に開催することが決定。さらにオフィス移転もちょうど同じ時期になることが判明したため、リブランディングのタイミングもそれらに合わせようということになりました。

大規模イベントに、オフィス移転に、リブランディング。

50名規模のまだまだ小さな会社であるABEJAにとって、このいずれもが一大事です。それらすべてをほぼ同時リリースとは、今思い返してもすさまじい決断でした。

しかし別の視点から考えると、サービスラインナップが出揃い、組織が大きくなってきて、さらにイベントやオフィス移転を控えたこの時こそが、リブランディングのベストタイミングであり、最後のチャンスだったのです☠️

さてタイミングが決まったら、あとはそこに向けてやりきるだけ💪

3. ブランディングのプロセス

ここからは、ブランディングチームが実際にやってきたことを当時の資料なども交えながらご紹介します。

ブランドコンセプトの言語化

わたしたちがまず着手したのは、ブランドの軸となるコンセプトを「言葉」に落とし込むこと。具体的には下記のようなことを実施しました。

  • CEO・岡田とのダイアローグ(対話)
  • 競合企業のメッセージングの調査
  • 文献調査
  • チームでのブレスト
  • 以上を踏まえた言語化

ブランディングチームとCEO・岡田とで行われたダイアローグについては、本記事でもぜひご紹介したいのですが……それだけでものすごい文字数になりそうなので、割愛します。気になる方は、こちらの対談記事をぜひご覧ください。

news.mynavi.jp

AI時代における「リベラルアーツ」の重要性を大林さんと岡田が熱く語らうシリーズで、ブランディングプロジェクトについても触れられています(※全文読むには会員登録が必要です)。

f:id:takana8:20180508115823j:plain 言語化の過程で参照した書籍(一部)。こうした外部の知識と併せて、第一章でご紹介した16ページ分の内部資料などもしっかり活用(供養)されました🙏

調査結果から分かったのは、ABEJAが創業間もない時期から語り続けてきた「テクノプレナーシップ」というキーワードや、テクノロジーを推進するAI企業が「リベラルアーツ」に言及していることが、とてもユニークであるという点。
とくに「テクノプレナーシップ」は国内外の企業で見かけないコンセプトであり、これを正しくイメージやメッセージとして伝えることができれば、ブランドの「軸」として十分機能するという結論が得られました。

f:id:takana8:20180508115848p:plain f:id:takana8:20180508115854p:plain ブランディング戦略資料の抜粋。

「テクノプレナーシップ」とは何か

ABEJAが考える「テクノプレナーシップ」は、テクノロジーとリベラルアーツ、そしてアントレプレナーシップという3つの要素から成り立っています。

f:id:takana8:20180508115917p:plain テクノプレナーシップの構造。

テクノロジーは、イノベーションを実現してインパクトのある社会貢献をする姿勢。
リベラルアーツは、自らの行為を問い続ける姿勢。
テクノロジーを正しく使うために、リベラルアーツで問う——この円環を推進する原動力が、アントレプレナーシップです。

わたしたちは、テクノプレナーシップを精神的な基盤とすることで、イノベーションを起こし、そのイノベーションがまた新しい問いを生み出していく、という循環を実現しようとしています。

このようなコンセプトの洗練が、デザインする制作物の礎であると同時に、今回のブランディングプロジェクトの大きな成果のひとつでもありました。

言葉からビジュアルへ:ロゴデザインを例に

続いては、言語化したブランドコンセプトをビジュアルに落とし込むフェーズ。

本プロジェクトでつくった大量の成果物は後の章でドドン!🥁とお見せしますが、ここではロゴデザインを例に、わたしたちがやってきたことを順にご紹介します。

旧ロゴからのデザインアプローチ

f:id:takana8:20180508115948p:plain 新旧ロゴの比較。

ご覧いただくと分かる通り、リニューアル前はコーポレートロゴとサービスロゴ(ABEJA Platformロゴ)が、ほとんど別物でした。

一方、リニューアル後のロゴは構造的に一貫性を保ちながら、展開によって変化が生み出されるデザインとなっています。これらの新ロゴは、旧ABEJA Platformロゴのコンセプトを活かしつつ、先ほどの新しいブランドコンセプトを表現するためにリデザインしたものでした。

f:id:takana8:20180508120003p:plain

右下の小脳を表す領域は頂点が3つ、その左隣の脳幹部分は4つ、 というように各領域の頂点を1つずつ増やしながら、六角形を分割して切り出しています。

このような、ある規則にもとづいた領域分割という仕掛けで、「アルゴリズム」や「合理性」、「論理性」といった特性を表現しました。

—— 「らしさ」が伝わるロゴをつくる。ABEJAデザイナーの試行錯誤

旧ABEJA Platformロゴは、ABEJAがスペイン語のミツバチの意味を持つことから、「六角形」を展開したハニカム状のグリッドに沿っています。さらに造形の自由度を高めるため、そこに格子状のグリッドを重ねていました。

今回整理したブランドコンセプトを念頭に置いて、旧ロゴのデザインを振り返ってみると……
「規則性」から「意味」が生まれ、そこに「美」を見出すというアプローチが、「テクノロジー」と「リベラルアーツ」を両輪とするABEJAの新しいブランドコンセプトに合致したのです。

そこで新ロゴは、旧ロゴのルールも活かしつつ、まずはABEJA Platformロゴをリファイン。これを他のロゴへと展開していくために必要となる、新しいルールを定義していきました。

グリッド(ABEJA Grid)の再発明

今回は試行錯誤の末、格子状のガイドをなくして、「6」という数字をさらに際立たせながら、頂点の強度を上げていきました。 こうして生まれたのが「ABEJA Grid」です🎉

f:id:takana8:20180508120023p:plain ABEJA Grid。

新しいロゴマークはすべてこのグリッドを使い、下記の3つのルールに従いながら作成していきました。

  1. 6つの領域が存在する
  2. 各領域の頂点はグリッドの交点と一致する(グリッドのラインとは必ずしも一致しなくとも良い)
  3. 6つの領域は、最小頂点数の3から1つずつ増え、4、5、6、7、8とすべて異なる頂点数および辺数を持つ

これらのルールは、今回のコンセプトを体現するために設定されたものでもあります。それぞれ、シンプルなグリッドによる強い制限は「テクノロジー」による均質性を、頂点を行き来できる自由さは「リベラルアーツ」による作為性を表しています。つまり、これはABEJAらしい造形が生み出される仕組みなのです。

リブランディング後の各ロゴは、このルールによってイメージの一貫性を担保しています。ロゴカラーは基調色を大きく変えつつも、トーンの幅には統一感が維持されるようにしました。

f:id:takana8:20180508120048p:plain 一貫性と統一感を持った3つの新しいロゴ。

コーポレート書体(ABEJA Sans)の作成

ロゴタイプの制作にあたっては、プラットフォームサービスの全体像を体現するロゴに適した、現代的かつ先進的な印象のサンセリフ書体を中心にピックアップし、検証を重ねました。

どのような雰囲気の書体にするか、大文字か小文字か、シンボルとの組み合わせはどうか。これらを様々な組み合わせでテストし、最終的に「DIN」をベースにすべて大文字のロゴタイプを制作することとしました。

—— 「らしさ」が伝わるロゴをつくる。ABEJAデザイナーの試行錯誤

旧ロゴで使われていた書体DINは、オーソドックスでタイトな雰囲気があり「信頼感」を伝えられる素敵な書体でしたが、下記のような課題がありました。

  • 工業規格の書体のため合理主義的で、定規やコンパスで書けるように設計されているため、「テクノロジー」を表現するのには向いているが、「リベラルアーツ」の印象は薄く、ABEJAのブランドコンセプトを体現しきれていない
  • 大文字で組んだ時に、レタースペースのばらつきが大きい(とくにABEJAの「EJ」やPLATFORMの「LA」部分)
  • 有名で人気のある書体のため、既に様々なブランドで使用されており、ユニークさに欠ける

こうした課題をクリアするために、今回のリブランディングではABEJAのブランドを象徴するカスタム書体「ABEJA Sans」を開発することが決定🎉

コーポレート書体の開発は、IBMSonyのような大企業だけでなく、近年はスタートアップ企業でも事例が増えてきました。DropboxNetflixなど、とくに海外ではその動きが活発です。

ABEJAでも、待ち受ける海外事業展開を見据えて、まずは欧文書体の開発からスタートすることになりました。

f:id:takana8:20180508120110p:plain 完成した「ABEJA Sans」。

「ABEJA Sans」は、均整の取れた「テクノロジー」の印象に加えて、「リベラルアーツ」を感じさせるヒューマニスティックな要素も併せ持つ書体として開発されました。
ウェイト展開はLight、Regular、Medium、Boldに、ロゴタイプ専用のWide Boldを加えた計5種類。
この書体を使用することで、印刷物からWebサイトまで、様々な媒体で一貫した「ABEJAらしさ」を印象づけることができるようになりました。

提案、そしてフィードフォワード

かくして3種類の新ロゴは、旧ロゴのアプローチを継承しつつグラフィックとして洗練され、新しいブランドコンセプトによってストーリー性を付加された仕上がりになりました。

f:id:takana8:20180508120148p:plain 完成した新ロゴ。

これらをもって、ABEJAのファウンダーでありCEOの岡田に、ロゴの提案を行いました。ここまで積み重ねてきたプロセスやデザインの根拠、そして何よりもチームで共有しているフィーリングを伝えると、岡田からは「いいっすねー!」の一言で、すんなりGoが🎉

デザインのパターン出しやロジカルな説明を求められることもなく、提案したものがほぼそのまま採用され、その後も話が盛りあがり、岡田から「新しいコーポレートロゴを3D化してみたい」というアイデアがどんどん湧いてくるほどでした。(※3Dロゴは実際に作ったので、後の章でご紹介します)

つまり、期待していたフィードバックではなく、期待以上のフィードフォワードをもらって、ともに前へ進む原動力をもらったのでした。

4. チームとその意志

さて、経営者へのデザイン提案が、拍子抜けするほどすんなり通り、それどころかフィードフォワードでさらに発展的な話ができたのはなぜでしょうか。

私はその理由を「ブランディングチームが、会社のヴィジョンや経営者の感性を汲み取りつつ、しっかりコンセプトとして言語化できており、ビジュアル化することができたから」だと考えています。

また「経営者の意図を発展的に汲み取れるメンバーだけでチームが構成されていた」ことも重要な要素でした。これによって、回り道することなく常にスピーディーで建設的な議論を行うことができ、多数決などの打算的な意志決定はまったく発生しませんでした。

言い換えると、チームがこうした強い「意志」を持っていたからこそ、岡田はそこで紡がれたストーリーを信頼し、ノッてくることができたのだと思います。
そして、チームと経営とのつながりを保つことができたから、多くの提案をする必要もなく、結果的にブランディングチームの権限を広げていけたのです。

5. アウトプット、アウトプット、アウトプット

この章では、ブランディングチームがこの1年で手がけた様々な成果物を、ビジュアルでドドン!🥁とご紹介します。

ブランドガイドライン

f:id:takana8:20180508135558j:plain

CI(コーポレートアイデンティティ)

f:id:takana8:20180508120148p:plain 完成した3つの新ロゴ。

f:id:takana8:20180508120241p:plain f:id:takana8:20180508120254j:plain 各ロゴのアイデアスケッチ。印刷したABEJA Gridの上にひたすら線を描いて、ルールに適合する形を模索していきました。

f:id:takana8:20180508120308p:plain ABEJA Platformロゴのシンボルの新旧比較。

f:id:takana8:20180508120339j:plain f:id:takana8:20180508120400g:plain ABEJA Sans。

f:id:takana8:20180508120432j:plain CEOのインスピレーションを受け、コーポレートロゴを3D化。立方体をある視点から見ると六角形に見えることを利用。「まきびしみたい」という声が社内から挙がりました。

f:id:takana8:20180508131557p:plain 経営者への提案資料(一部)。

ステーショナリー、グッズ

f:id:takana8:20180508135637j:plain f:id:takana8:20180508135641j:plain 名刺を光に透かすと、箔押しされたABEJA Gridと背面に印刷されたロゴがきれいに重なる仕掛け。

f:id:takana8:20180508135709j:plain f:id:takana8:20180508135732j:plain f:id:takana8:20180508135801j:plain f:id:takana8:20180508141132j:plain

写真

f:id:takana8:20180508140012p:plain f:id:takana8:20180508135943j:plain イメージボード。抽象的な自然物で、左からコーポレート、ABEJA Platform、ABEJA Insightを想起させるような画像を選出。テック企業でよく使用される身体や意識の「拡張」っぽいイメージ(光や走査線など)は、それ自体が使い古されたものなので、ここではすでに「到来」しているというイメージの観点から選定していきました。

f:id:takana8:20180508140052j:plain f:id:takana8:20180508140056j:plain コーポレートサイトや登壇プロフィール用に使用する写真もしっかり予算を取って制作。フォトグラファー・本浪隆弘さんに撮影いただきました。

アイコン、イラストレーション

f:id:takana8:20180508140114p:plain f:id:takana8:20180508140121p:plain f:id:takana8:20180508140129p:plain

イベント

f:id:takana8:20180508140232j:plain f:id:takana8:20180508140236j:plain f:id:takana8:20180508140241j:plain 「SIX 2018」エグゼクティブ向けパーティーの招待状。新CIやSIXロゴの幾何学的なアプローチを、本状を包装する紙の「折り」で表現。本状の紙は、鮮やかな青の発色がSIXロゴの印象とよく合う「キュリアスマター」を使用し、印刷ではなく箔押しで本文およびイベントロゴを印字しています。

f:id:takana8:20180508140153j:plain 「SIX 2018」イベント当日の様子。

オフィスデザイン

f:id:takana8:20180508141022p:plain オフィスサイン計画。

f:id:takana8:20180607144217j:plain f:id:takana8:20180607144240j:plain f:id:takana8:20180607144257j:plain 完成したオフィス内装。

ブランド動画

ABEJAの目指す世界観を表現したブランド動画。企画やディレクションをブランディングチームが担当しました。

コーポレートサイト

f:id:takana8:20180508141258p:plain f:id:takana8:20180508141304p:plain f:id:takana8:20180508141310p:plain f:id:takana8:20180508141318p:plain 先述のイメージボードや、ブランドガイドラインで規定したカラースキームを活用したコーポレートサイトのデザイン。

6. リリースを終えて

ブランディングプロジェクトの1年を振り返って

ブランディングプロジェクトに携わったこの1年を総括して、とくに印象深かったのは以下の3つの点です。

1つめは、コンセプトからビジュアルまで、点を線でつないでいった「プロセス」です。
はじめに経営者とのダイアローグを通してABEJAのアイデンティティのかけらを掘り起こし、ブランドコンセプトとして組み上げたこと。次にそのコンセプトを土台にして、ストーリーやビジュアルを作り込んでいったこと。
こうした「プロセス」を経たことで、表層を整えるだけではない、より本質的なブランディングができたと考えています。

2つめは、経営者に信頼される強い「意志」を持ったチームであったことです。
そんなチームになれたのは決して偶然ではなく、早い段階から「感覚」が合うことを重視するチームづくりをしてきた結果でした。
経営者の思いを汲み取る「プロセス」を通して、メンバー個々人が「感覚」をチューニングしながら、チームとしての「意志」を磨く。そうして紡がれたストーリーを、経営者は信頼し判断を委ねていく——。
このようなプロセスがあったからこそ、闇雲に可能性を潰すような提案をする必要もなく、思惑通りに意志決定をしていくことができたのでした。

3つめは、アウトプットの「量と質」です。
前章の通り、ブランディングチームの最終的なアウトプットはなんともすごい量になりました。わたしたちがここまでやり切れたのは、そもそも経営者に「クリエイティブへ投資しよう」という意欲があったからだと考えています。
ブランディングチームがやれるところをすべて任せた上で「投資」し、チームは「意志」を持ってその期待に応える。このシンプルで力強い関係が実現できたからこそ、これだけの物量があっても細部までABEJAブランドを行き届かせることができたのではないかと思います。

ブランディングチームのこれから

以上、わたしたちがリブランディングに際して考えてきたことを、ありったけの思いを込めてご紹介してきました。

しかし、ABEJAのブランドにとっては「いま」がスタートです。

ロゴやガイドラインを作って終わり、ではなく、継続的にブランドを保っていくための土壌づくりや、グローバル展開を見据えたブランドのガバナンス体制など、まだまだ考えなければいけないことはたくさん🌈✨

というわけで、わたしたちブランディングチームはいま、ABEJAのブランドを世界に発信するために一緒に考えていけるメンバーを募集しております。 「経営とブランディングのつながり」や「意志をもったチーム」といったキーワードにビビッときた方はぜひ、下記ページにて「話を聞きに行きたい」ボタンを押してみてください。

www.wantedly.com www.wantedly.com

最後までご覧いただき、ありがとうございました!