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

by akihiro kamijo

Posted on 10-09-2019

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

ソニャ・ヘルナンデスのブランドシステムの記事やアニー・チェンのファイルアイコンのケーススタディーに紹介されているように、アドビ製品に関わるすべてを考慮するにはとても多くの事柄を検討しなければなりません。アドビは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. 人間の形
  2. テクスチャ
  3. シェイプ

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

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. 色

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

視覚言語の定義

私は、上で紹介した4つの要素を組み合わせて、ストーリーを語るための適切な視覚言語を見つけようと試みました。以下、初期の取り組みから、いくつか具体的な例を紹介します。

1. ストーリーテリングと抽象化レベルの関係

最小限の要素を使用してストーリーをできる限り表現するというシンプルなアイデア

私は、イラストの中で使用する図形の数を減らそうと試みました。アイデアは単純で、最小限の要素を使用して、ストーリーの多くを表現するというものでした。上図の下段に並ぶ2つのイラストは、形の本質だけを抜き出すことで、コンセプトを明確に伝えようとしたものです。

2. テクスチャと線のバランス

この段階で、私はそれぞれのイラストの中から、視覚的に十分に興味深く、しかも目にバランスのとれた印象を与える、線、質感、形の組み合わせの最適なバランスを見つけようとしていました。

その目的は、前景と背景、重なりと奥行の間に明確な定義を設けること。および、メッセージを補強するような線とシェイプの配置により、なにか予期せぬ興味深い相互作用を作成することでした。

線を用いた形状の探求

ショーケース

それでは、この新しいシステムに基づいて私が作成したイラストをいくつかご紹介します。Document Cloud(Acrobat)やCreative Cloudのアプリで使われていることに気がつくでしょうか。今後もお気に入りのアドビ製品のリリースの際にはイラストに注目してください!

Adobe Document Cloudで使われている、初めてのユーザー向けのイラストレーション

Adobe Document Cloudで使われている様々なイラストレーション

Adobe Creative Cloudのモバイル画面用の初めてのユーザー向けのカード

Adobe XDのプラグインを扱うサイトAdobe I/Oの登録画面

Adobe I/OにXDのプラグインを提出した時の画面

Adobe Illustrator CC 2019を最初に起動したときの画面

この記事はDesigning Adobe’s Brand Illustration Style(著者:Emma Zhang)の抄訳です

Topics: クリエイティブ, デザイン, グラフィックデザイン

Products: