コンピュータがジェネレートしたイメージを企業のCI・VI(ロゴ)にすることは可能なのか? 今年、新体制になった電通テックは、1000人弱の全社員の名刺をまったく違うパターンで作ってしまった。ジェネレーティブなイメージを表現として成立させるために、電通テックが挑んだ方法とは。

社員一人ひとりが持つ専門性の象徴

メインのロゴの円環は、電通テックが提供する「顧客と生活者をつなぐエンゲージメント」を表す。この円環はデザイナーが手でデザインしたものではなく、プログラムによってジェネレートされたものだ。

ロゴに使用される円環は、ジェネレーターによって制作され、無限のバリエーションが存在する。

電通テック1000人弱の社員それぞれに、名前、部門、事業部などの要素をもとにして、一人ひとり個別の形状の円環が生成される。社員一人ひとりが持つ唯一無二の専門性の象徴であり、組織・クライアント・社会とのエンゲージメントを表している。

社員ひとりひとりのステータスから個別のデザインが生成される。

ブランドのイメージを保ちながら、フレキシブルにロゴやシンボルマークのイメージを変える「ダイナミック・アイデンティティ」。Googleのホリデーロゴこと「doodles」やMITメディアラボ、メルボルン市などで取り入れられている。

ジェネレーティブによって生成されるイメージは無限大。それを社員一人ひとりに適応するのがユニークなところだ。

4つの部署ごとに与えられた異なるパターン

1.ロゴは4つの部署それぞれに異なるパターンが当てはめられている。同心円、LINE、SPIRAL、WAVE。それぞれが、事業部ごとの役割によって選ばれた。

ARC:同心円をベースとしたグリッド
社の背骨的位置づけ。
直轄部門、コーポレート部門、監査部、経営企画室などを含む。

LINE:格子状のグリッド
フィー・デジタルによる新しい仕事の創出する位置づけ。
パフォーマンス&エンゲージメント部門。

SPIRAL:螺旋状のグリッド
イメージを具現化する(つくる)位置づけ。
プロダクト&ディベロップメント部門、デジタルファーム部門。

WAVE: 波のようなグリッド
機会を創出する位置づけ。
アカウントプランニング部門、総合プロモーションプロデュース部門。

 
  • 1. 円環はまず4種に分けられる。
  • 2. いずれかのパターンを適用。
  • 3. 社員ひとりひとりのステータスに基づき、ドットの大小を表現。
  • 4. ジェネレートされた円環の一部。出来上がった円環は名刺の表面に印刷される。
 

ジェネレーターに情報を入力すると固有のパターンが生成される

2.これらのパターンは、ジェネレーターに名前、部門、事業部などの要素を入力することで生成される。グリッド上に配置されるドットは、社員一人ひとりのステータスに基づき、2つの線の交点もしくは1つの線分を等分割した延長線上に配置されていく。

3.ドットのパターンを部署ごとに適応し、名前のイニシャルをバイナリデータにして、大きいドットと小さいドットで表現。そのドットのパターンのグリッドが、事業部など所属によって変わる。同じイニシャルの社員であっても、パラメータが変わるので同じ円環になることはない。

目新しさに惑わされない表現を

世界的にも例がない、このロゴプロジェクトを可能にしたのは、電通テックチームと茂出木龍太氏率いるデザインスタジオ「TWOTONE」、テクノロジーカンパニーの「Qosmo」。今回、中心となった開発メンバーに話を聞いた。

[左から]
電通テック: Producer 徳久正樹 / Creative Director 隈部浩 / Art Director 川原田俊
TWOTONE:Art Director・Designer西田悠亮さん / Art Director茂出木龍太さん / Designer広瀬健さん
Qosmo : Technical Director 浦川通さん / Programmer 堂園翔矢さん

フェーズ1:チームを作る

まずこのプロジェクトが始まったきっかけは、隈部が、大学の同期である茂出木氏に相談を持ちかけたことだった。

隈部 最初に茂出木さんにご連絡したのは9月半ばぐらいでしょうか。コンセプトが決まった段階で、社内外のデジタルに強いメンバーに相談していたんです。その中でただひとり、「出来ますよ」と即答してくれたのが茂出木さんでした。
茂出木 既に翌年1月のリリースまで4ヶ月を切っている状況でした。社内からはデジタルに強いデザイナーの西田と、モーションの廣瀬をアサインしました。僕らがプロデュースとデジタル面でのアートディレクションで関わるとして、問題は、誰がシステムを作ってくれるのか。相談の電話を聞きながら、もう頭の中にはQosmoの浦川くんがいたんです。

僕らの役割は、最初のイメージ作りのところで、いろいろなスタディをビジュアルに落とし込んでいくなど、デジタルの発想でどう落とし込んだらいいか、をいろいろ検証することから始まりました。VI自体が動きを感じるので、モーションのデザインのスタディを作ったり。西田がプロトタイプというかモックアップ(※1)なものを作って検証していました。

システムを担当したのは、Qosmo浦川氏・堂園氏。社員一人ひとりの情報から図柄を作るジェネレータを作り上げた。浦川氏が情報から図柄を作るためのパラメーターを設計し、ビジュアルの精製やアルゴリズムを使ったデザインに精通する堂園氏がデザイン面を担当した。

浦川 僕らが相談を受けた時点で、企画はもうまとまっていました。エンゲージメントを表す円環その部分を、プログラムでビジュアライズしていくという構想ですね。課題は、そもそもそのアイデアが可能なのか、何をパラメータにしていくか、どういう図形の描き方があるのか、ということでした。

フェーズ2:モックを作る

Qosmo によって制作された、開発段階のジェネレーター。
左のゲージを調整することで、ドットの密度や大きさなどを検証することができる。

果たしてこの企画は実現可能なのか? これがQosmoが提出したモックだ。既に基本的なシステムは出来ている。社員の名前の音のデータを変換したビジュアライザー的なシステムである。

浦川 これはただ音のデータを変換したものです。当初はイメージがアニメーションする状態も想定していました。
堂園 最初に持っていったイメージは、フィボナッチ関数(※2)を使ったシミュレーションや、モアレ(※3)のパターンを使うというものでした。他には、アカウントの情報を数字にしたものを顔にしたり、遺伝的アルゴリズムでタイルのように敷き詰めたり…手法としては5つほど提出したんです。
茂出木 どの手法も面白かったんですが、デザインに耐えうるビジュアルに昇華させなければならない。電通テックはビジュアルとして成立するところ、Qosmo はジェネレートしたときの楽しさを優先させるところ…という両者のせめぎあいで詰めていきました。
西田 この段階では円環のデータを撮影するカメラの位置を人によって違う角度にする、レイアウトのパターンを複数用意する、などのアイデアもあったんです。約1000人もの社員にまったく異なるビジュアルを準備するというハードルは高かった。そこを超えるために、いろいろアイデアを盛っていた段階ですね。
隈部 社員に100種類100枚全種類違うデザインを渡す、Web上でジェネレートの様子が見られる、などのアイデアもありました。
徳久 100種類違うものを作るのは不可能ではなかったんですが、やはり納期などの制約もありましたし…。
浦川 落としどころについては、全員でディスカッションを重ねていったんですが、議論していたのは「ここ(ジェネレーティブした絵)を信じきれるか」ということです。円環だけで全員分差別化に見えるのか、名刺にしたときにデザインとしてもつのか。
徳久 また、新体制にあたって、部署の編成も変わったので、「組織自体が変わった」ことも表現したかった。一人ひとりの違いだけではなく、もう一つ上の階層というか部署ごとにも変えたいという思いをどう取り込んでいくかが課題でした。
西田 全員のGOが出たのは、ジェネレーターで実際のデータを使い、何百パターンも出したときですね。見た瞬間、全員が「これでいける!」となりました。
当時のことを思い出しながら盛り上がる茂出木さん(左)、西田さん(中)、広瀬さん(右)。
茂出木 大きめの机にバーっと並べて見たときのことは忘れられません。みんなが「いけるんじゃないか」と思った。円環だけに特化することが信じられたタイミングでした。
第 2 回につづく

 

※1モックアップ:試作品  ※2フィボナッチ関数:黄金比にも使われる「フィボナッチ数列」に基づいた関数
※3モアレ:規則正しい模様のずれにより視覚的に発生する縞模様
TWOTONE
株式会社ツートンhttp://www.twotone.jp/
デジタル領域を軸とした、コミュニケーションデザインを構築するデザインスタジオ。 ウェブ、アプリ、映像、グラフィックなどの分野で、企画・設計・アートディレクション・デザインを守備範囲とする。 国内外の広告賞/デザイン賞多数受賞。
茂出木 龍太アートディレクター / 代表取締役
2010 年TWOTONE INC. 設立。インタラクティブコンテンツのディレクションや、映像の企画演出を手がける。
西田 悠亮アートディレクター/ デザイナー
2011 年TWOTONE 入社。ウェブUI、アプリUI デザインを中心に、企画、映像編集、撮影なども行う。
廣瀬 健デザイナー
2015 年4月TWOTONEに入社。モーショングラフィクスや3DCG 制作を得意とする。
株式会社 コズモhttp://qosmo.jp/
2009 年設立。創作の過程にアルゴリズムを介在させることで、新しい気づきや視点をもたらす表現を実践する。 近年はComputational Creativity and Beyond をモットーに、AI を用いた作品制作、アルゴリズミックデザインなどを手がける。
浦川 通テクニカルディレクター
2013年早稲田大学大学院修了。基幹理工学研究科・数学応用数理専攻。
堂園 翔矢プログラマー
2016 年Qosmo 参加。高次元空間のビジュアライゼーション等、プログラマーとしても活動。
株式会社 電通テックhttps://www.dentsutec.co.jp
プロモーション×デジタル、最先端の専門性で、顧客企業の多様な課題に応じた最適なソリューションを企画から実施までワンストップでご提供。
隈部 浩クリエーティブディレクター / アートディレクター
ロゴを中心としたコミュニケーション全般を担当。
徳久 正樹プロデューサー
今回のVIリニューアルプロジェクトのプロデューサーを担当
川原田 俊アートディレクター/ デザイナー
クリエーティブセンター所属。広告制作、商品開発、キャンペーン企画、グッズ制作などを担当。