ジェネレーターに秘められた可能性、新ロゴデザインの開発（第1回）

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

1. 第０回　 VIリニューアル。その時社内で何が起こったか。
2. 第一回　プログラマとデザイナーの協業による新しいデザイン
3. 第二回　 理想のパターンを見つけ出す数々の試行錯誤
4. 第三回　 人間のデザインと機械のデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フェーズ１：チームを作る

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

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

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

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

フェーズ２：モックを作る

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

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

浦川	これはただ音のデータを変換したものです。当初はイメージがアニメーションする状態も想定していました。
堂園	最初に持っていったイメージは、フィボナッチ関数（※２）を使ったシミュレーションや、モアレ（※３）のパターンを使うというものでした。他には、アカウントの情報を数字にしたものを顔にしたり、遺伝的アルゴリズムでタイルのように敷き詰めたり…手法としては５つほど提出したんです。

茂出木	どの手法も面白かったんですが、デザインに耐えうるビジュアルに昇華させなければならない。電通テックはビジュアルとして成立するところ、Qosmo はジェネレートしたときの楽しさを優先させるところ…という両者のせめぎあいで詰めていきました。
西田	この段階では円環のデータを撮影するカメラの位置を人によって違う角度にする、レイアウトのパターンを複数用意する、などのアイデアもあったんです。約1000人もの社員にまったく異なるビジュアルを準備するというハードルは高かった。そこを超えるために、いろいろアイデアを盛っていた段階ですね。
隈部	社員に100種類100枚全種類違うデザインを渡す、Web上でジェネレートの様子が見られる、などのアイデアもありました。
徳久	100種類違うものを作るのは不可能ではなかったんですが、やはり納期などの制約もありましたし…。
浦川	落としどころについては、全員でディスカッションを重ねていったんですが、議論していたのは「ここ（ジェネレーティブした絵）を信じきれるか」ということです。円環だけで全員分差別化に見えるのか、名刺にしたときにデザインとしてもつのか。
徳久	また、新体制にあたって、部署の編成も変わったので、「組織自体が変わった」ことも表現したかった。一人ひとりの違いだけではなく、もう一つ上の階層というか部署ごとにも変えたいという思いをどう取り込んでいくかが課題でした。
西田	全員のGOが出たのは、ジェネレーターで実際のデータを使い、何百パターンも出したときですね。見た瞬間、全員が「これでいける！」となりました。

当時のことを思い出しながら盛り上がる茂出木さん（左）、西田さん（中）、広瀬さん（右）。

茂出木	大きめの机にバーっと並べて見たときのことは忘れられません。みんなが「いけるんじゃないか」と思った。円環だけに特化することが信じられたタイミングでした。

 

※１モックアップ：試作品　　※２フィボナッチ関数：黄金比にも使われる「フィボナッチ数列」に基づいた関数
※３モアレ：規則正しい模様のずれにより視覚的に発生する縞模様