アドビ製品のイラスト制作秘話。ブランディングのための統一スタイルができるまで。

イラストレーションはユーザー体験の重要な一部として注目されています。製品にブランドを直接表現するのに有効な手段として認識されるようになったためです。アドビでは、ブランディングのための統一されたイラストレーションのスタイルの必要性について、多くの議論が行われてきました。製品の進化と共にブランド認知度を高め、ユーザーと製品の間により深いつながりを構築したいという願いからです。

ソニャ・ヘルナンデスのブランドシステムの記事やアニー・チェンのファイルアイコンのケーススタディーに紹介されているように、アドビ製品に関わるすべてを考慮するにはとても多くの事柄を検討しなければなりません。アドビは100以上の製品、サービス、さらにコミュニティを提供しています。製品には、クリエイティブツール以外にもコミュニケーションツールやマーケティングツールが含まれています。このような規模のラインアップに合わせて展開できる、クリエイティブで遊び心のあるイラストスタイルを提供するにはどうすればよいでしょうか？

アドビ製品で使用されてきたイラストレーションの簡単な履歴

今回の色塗りのイラストレーションの取り組みに着手する以前、2016年にアドビのアイコンチームはより線画に近いイラストレーションスタイルを確立しました。これは現在もアドビ製品で幅広く使用されています。こうした線画的なイラストは、初めてのユーザーに初期状態や次のステップを知らせるなど、情報を重視したコンテキストで使用されています。

マルコ・ミューラーによるアセット “Welcome to CC”

最初、私たちが目指した方向性は、アイコンデザイナーのマルコ・ミューラーが作成した上図のような線画スタイルに、新しいイラストレーションスタイルを統合して、2つのスタイル間の移行をできるだけ滑らかにすることでした。私は、線形要素と図形を組み合わせてストーリーを作成しようと試みました。その際に使用した図形スタイルは、2001年にAcrobat 5.0のパッケージに使用されていたイラストレーションからヒントを得たものです。

初期のイラストレーションスタイルの実験（左）とAdobe Acrobat 5.0のパッケージのイラストレーション（右）

Adobe Captureの最初の起動時に表示されるイラストレーション

CCライブラリのイラストレーション

イラストレーションスタイルの再検討

この最初のスタイルを公開した後、社内で数回にわたる議論が行われました。アドビのプリンシパルデザイナーであるコイ・ヴィンは、ビジュアルアイデンティティに関していくつかの懸念を示しました。その一つは、歴史的な起源を持つとしても、線形のイラストレーションと人間の姿の組み合わせはテクノロジー業界で広く使用されているという指摘です。そこで、私たちはこのプロジェクトを見直して、他の方向性を探ることにしました。

「しかし、一歩下がって製品にイラストレーションがどのように使用されているかを調べ、なぜこのアプローチを採用することにしたのかを理解しようと試みるのは価値ある行為です」 — Two Very Different Kinds of Illustration コイ・ヴィン

そのプロジェクトのおかげで、アドビの素晴らしいイラストレーターでアーティストでもあるカイル・ウェブスターと共同作業をする機会を得られました。今回は、イラストレーションのスタイルにいくつか明確な目標を設定しました。創造性と遊び心を通して、世界に通用するデザインへのアドビの取り組みを示したかったのです。イラストレーションのスタイルには、伝える言葉の多様性を許容できることが求められました。製品システム全体に順次拡張できて、他のイラストレータが関与することも可能にするためです。また、他社には「所有」されていない、アドビ独自のフィールをつくり出したいと思っていました。

最初にカイルが試みていたのは、ビジュアル要素を追加して、既存のイラストレーションスタイルを拡張しようというアイデアです。下図のように、肌の色や衣装の細部、陰影などを追加して、人物に奥行きを持たせています。

「オリジナルの素材を基に、伝統的な人の形を残しながら、どれだけスタイルを押し進めることができるかを確かめるのは楽しい作業でしたが、次第に、この方向は私たちが望むほど柔軟ではなく、あまり遊んだり実験する余地のないことが明らかになりました。私たちは方向を変えることを決め、エマが素晴らしい徹底的な探求を行ったおかげで、ユニークかつ順応性のある視覚的な語彙の基礎になる正しい道に進むことがでたのは喜ばしいことでした」カイル・ウェブスター

カイルが述べているように、作業を開始した頃はまだ最初に公開したものにかなり近いスタイルを試していましたが、数回のブレインストーミングを繰り返した後に、標準的な人の姿から離れて、より抽象的な視覚語彙を探ることを決めました。

トレンドから離れて…

Adobe Spectrumインクルーシブデザインのモバイル用バナー

ソフトウェアの世界で使われるイラストレーションは、より統一感のある、ありていに言うならより一般化されたものになっています。多くの場合に、イラストレーターは多様性を捉えるため、作成するイラストレーションから個人的で創造的な特徴を取り除いています。そこでは形状が重視されており、抽象的にアイデアを表現する方法についてはあまり試みられていません。

メグ・ロビショーは、触発的な記事You Can’t Just Draw Purple People and Call it Diversityの中で、製品内で用いるイラストレーションにインクルーシブを意識することで起きる問題を論じています。私は、あらゆるイラストレーションで人間の多様性を表現しようとする試みからは距離を置こうと考えました。同じ概念を抽象的な形状を使って表現することで、異なる可能性を開きたいと思ったのです。

原則の探求と確立

イラストレーションは直感的で主観的な芸術形式です。そのため、複数のプラットフォームや製品にわたって機能する体系的な言語をイラストレーションで構築するのは容易ではありません。

新しいスタイルを試して確立するために、私は4つの面における探求に作業を絞ることにしました。

人間の形
テクスチャ
シェイプ
色

それでは、それぞれについて行ったことを、いくつかの具体的な例と共に紹介しましょう。

1. 人間の形

人型の図形を含めると、ユーザーとの直接的な関係を構築しやすくなります。では、どのレベルまで形を抽象化してもつながりを持てるのでしょうか？常に具体的な形状が必要とされるのでしょうか？影や奥行などの視点に関わる詳細をイラストレーションに含める必要性についてはどうでしょう？

フネフェルのパピルスより。「開口」の儀式において、アヌビスはフネフェルの心臓の重さを量る。この儀式はハトシェプストとトトメス3世の時代から知られていた。紀元前1475年出典： Beyond Hieroglyphs: The Art and Architecture of Ancient

横向きの人物像の探求

頭が横向きに書かれ影がほとんどあるいはまったく無い古代エジプト美術のスタイルに触発されて、私は、人物の側面の輪郭と腕と手の組み合わせによる様々なストーリーを伝えるための構成を試しました。

2. テクスチャ

カイルによるテクスチャの探求

テクスチャは、形状を生き生きとしたものにして、個性と独特なスタイルによる人間的なタッチを加えます。カイルは、イラストの中で微妙ながら興味深い質感を生み出すことができる一連のブラシをつくり上げました。そして、上図の例のように、さまざまなテクスチャスタイルと構成の組み合わせによる試行を重ねました。最終的には、構成の面からはオプションAの開放性と風通しの良い外観を、ブラシストローク効果と形状との統合の様子からオプションEが、私たちのお気に入りになりました。そこから、その2つのスタイルを組み合わせてさらに探究を続けることにしました。

3. シェイプ

アレクサンドル・ロトチェンコとバーバラ・ステパーノヴァの有名なポスター「Books!」（1924）は、労働者教育のためのキャンペーンを促進するために、フラットな色と単純な幾何学の厳格な文法を採用している出典； The easy guide to design movements: Constructivism

シェイプは、私たちのデザインにおける主要な要素で、新しいスタイルを、以前つくられたより情報に富むイラストレーションと結び付ける役割を担っています。グラフィック・デザイン出身の私は、幾何学的な要素を私たちのスタイルと混ぜ合わせて、ミニマルで現代的な見た目をつくる試みに興味がありました。グラフィックデザインにおける2つの重要な芸術運動と哲学であるシュプレマティスムとロシア構成主義に、私は常に刺激されてきました。どちらのアートムーブメントも、基本的な幾何学的形状の使用と、インパクトのあるビジュアルデザインを作成するための構成の重要性に重点を置いています。

イラストレーションで私が使用したシェイプ

4. 色

色はイラストと製品とのつながりを強める力を持っています。そこで、私たちは製品のブランドカラーに基づいてカラーパレットを作成し、主要な色を補完するいくつかの色を追加しました。色の組み合わせに柔軟性を持たせるため、追加の色は自由に選べ、イラストごとに最も意味のある色を使えるというルールにしました。他に色に関するガイドラインとして提供しているのは、重ね方についてだけで、最も暗い色は線と形状の表現にのみ使用されます。中間色と明るい色は、無地のシェイプと背景用です。