アイコンデザインシステム
「繋がり」を描くデザイン

カメラなどのデバイスと連携し、多彩な価値を生み出すアプリケーション・サービス。その起点であり、ユーザーが気づいて認知し、触れるものがアイコンです。キヤノンでは、ユーザーの創造性や可能性を広げるサービスへと導くアプリケーションアイコンのデザイン刷新を進めてきました。
アイコンはアプリケーション・サービスを象徴し、スマートフォン(以下、スマホ)、PC、ウェブページ、印刷物などさまざまな媒体で使用されます。進化と拡張を続けるサービスの将来を見据え、「その先」へ繋がるビジュアルコミュニケーションを構築したい。そんな「想い」を小さなアイコンに込め、継続して使用可能なデザインシステムの設計に取り組みました。
「箱」が象徴するもの
初めに取り掛かったのは、多様なサービスへ接続するデバイスと環流していくデータ、それらを支えるアプリケーションの姿はどのようなものかをイメージしながら、アイコンの設計思想を整理することでした。
アプリケーションの役割・機能を直感的に判別できる印象的なグラフィック。自社他社を問わず、種々のデバイスからサービスへの連携や、クラウドによる共存との親和性。現行のイメージング製品のみならず将来の新機能やサービスにも対応できる柔軟性。そして、異なる個のアプリケーションやサービスが集まったときに「群」としての世界観が成り立つこと。小さなスペースの中にアグレッシブな構想を展開する試みが始まりました。
多種多様なアプリケーションの集合が「群」として認識されるためには、同じ仲間であることがわかる共通のシンボルが必要です。そこで、アプリケーションは機能をパッケージしたものであることから「箱」をモチーフとして設定、中の機能が頭を覗かせている模式図をアイコンの基本的な形としました。V字のビジュアルは「箱」を斜め上の視点から大胆にトリミングしたもので、右上がりのラインと明確に分割された色面が創造を支援する活力や英気を表しています。
この形は、新しさのなかに宿る「キヤノンらしさ」を意識しながら細部を模索しました。シンプルな直線と曲線は精緻さ、力強さ、道具としての美しさを象徴し、キヤノンロゴにも通じる強い印象と個性をアイコンに与えます。また、この形はPCやスマホなどのデバイスを超える共通の表現であり、ユーザーがスマホでアイコン外形をカスタマイズした際などにも意味を失わず、構図のバランスも損なわれない工夫を施しています。

「モノ・コト」を想起させるピクトグラム
これまでイメージングソフトウェアのアイコン表現は、機能やサービスを示す「モノ」とそれによって得られるユーザー体験を示す「コト」をイラストや記号に変換し、漢字の「へん」と「つくり」のように組み合わせて描いてきましたが、製品や機能、サービスの多様化に伴って表現は複雑化していき、一目で意味を伝えることが難しくなっていました。
そこでグラフィックの要素を思い切って絞り込み、機能を象徴的に示すピクトグラムを箱のシンボルにパッケージングしました。モノ・コトを実直に描くのではなく、よりシンプルな図記号によってモノ・コトを想起させ、個々のアプリケーションの機能を端的に伝えるようにしたのです。ピクトグラムにはキヤノン製品のGUIで使用しているアイコンのテイストを継承し、ハードとソフトが緩やかに繋がる世界観を表現しました。「何を・どれくらい・どのように」見せるのか、オブジェクトの形状、数、サイズ、角度など試行錯誤を重ねました。

「見せる文字」の表現
デバイス上では、アプリケーションの名称がアイコン下部に表示されます。新アイコンではその名も視覚的に印象づけたいという想いから、アルファベットで構成される省略表現をデザインに組み込みました。
読ませるものではなく、「見せる」文字列です。V字のホワイトスペースに色文字という強いコントラスト、周囲の白地とのバランスを保つことで生まれる独立性、誘目性、視認性。意識せずとも目に飛び込んでくるのがこの文字列であり、次の瞬間、視線が対角線上のピクトグラムへ移動すると、アルファベット+ピクトグラムという異なる表現が結合し、アイコンとしてのインパクトやアイコン本来の機能性がさらに強調されると考えました。
最初に視認されるのが文字であれば、その形、数、並びはアイコンの第一印象を大きく左右します。したがって文字の配置は機械的ではなく、「どのように見えるか」を重視して調整を繰り返し、ピクトグラムと組み合わさったとき最も印象に残る構成を追究しました。

ワークフローを繋ぐ「色相」
色彩設計では、撮影画像をデバイスに取り込み、編集し、配信するといったユーザーのワークフローに着目し、色に意味を持たせるスキームを設定しました。
ワークフローのカテゴリ別に色を分けて違いを明確にするとともに、赤や青などの色みである「色相」をグラデーションにして用いることで、ワークフローの繋がりを表現しています。
グラデーションは、機器の接続・制御、データの編集、そして活用というフローを暖色から寒色へと緩やかに示しています。「近しくも違いがわかる色」であるゆえ機能・手順の連続性やサービスの関係性が違和感なく認知でき、アイコンが並んだときには「群」としての強い個性と美しい階調、独特のリズムを生み出します。
この配色は、将来、異なるカテゴリ間を接続・横断するようなアプリケーションが加わる可能性や、ワークフローのさらなる拡張にも対応できるルールとして決めました。

「感性」に適(かな)うデザイン
正確に中央に置いた図形が偏って見える、数値上は変わらないのに大きく見えたり小さく見えたりする……。人間の目は、視覚対象の図形に周囲の要素(図形や色)が影響することによって、時に目の錯覚、「錯視」を起こします。数値による整列や均一化でこれを直すことはできません。デザインの意図が正しくアイコンに反映されるためには、敢えてずらす、密度や色を変える、文字の間隔を微細に詰める、縦横比を変形するなど個別の最適化が必要です。
すべてのアイコンの全要素のバランスが釣り合うまで、複数のサンプルを作り検討を重ねました。レイアウトが決まった後も、デバイスによってはサイズが縮小され、見た目が変わることから、実際の見え方に合わせてピクトグラムや文字のエッジ処理などにピクセル単位の調整を施しました。
アイコンを実際に見て、認知し、触れるのは人です。アイコンを使い手の感性に適ったものにするために、デザイナーもまた感性を研ぎ澄まし、一つひとつのアイコンと真摯に向き合わなければならない。感性による細やかなバランス調整こそが、キヤノンらしいビジュアルデザインを完成させる最後のピースになると考え、大切に取り組んでいます。
アプリケーションアイコンは、アプリを見分ける標識、アプリを起動するスイッチとしての役割から、アプリの印象を伝え、ブランドイメージを構築する幅広い役割を担う存在となりつつあります。創造を後押しするビジュアルコミュニケーションの新しい姿であり、キヤノンらしさの遺伝子を受け継ぐ「顔」として、多くの人に親しまれることを願っています。

参考情報

答えに至るストーリーを大切に
入社時は映像機器に始まり、現在は医療機器のGUIデザインを担当しています。デザインとは「なぜこの形・色・配置でなければならないのか」という問いを積み重ねて生まれるものであり、その答えに至るエモーショナルなストーリーも大事にしています。
総合デザインセンター 吉野 彰
アートディレクション 後藤啓志/撮影 早川圭
(総合デザインセンター)