この記事はPioneer Advent Calendarの20日目の記事です。

今回はUIデザイナーが、アイコンのデザインについて語ります。

自己紹介

パイオニア株式会社 UIデザイングループでマネージャーをしている原です。カーナビなどのUIデザインが主な業務ですが、近年急速に増加しているスマホアプリのデザインも担当しています。
長年カーナビのUIデザインをしていますが、激烈に方向音痴です。（道がわからない人の気持ちがわかるので、良いカーナビをデザインしますよ！）
デザインツールをAdobe XDからFigmaに移行する記事も書いています。

「クリスマスのアイコンをデザインしてください」

「クリスマスのアイコンをデザインしてください」
と言われたら、デザイナーはガッツポーズです。
 
なぜか？
 
人々の頭の中に、「クリスマスのイメージ」が強くあるからです。
 
例えば、ここで「いらすとや」さんを見てみましょう。

いいですね。
サンタにツリー、トナカイにプレゼント、「クリスマスといえば？」と言われて、誰もがイメージするアイコンのネタがゴロゴロしています。
 
こんなのもありました。

すごい、モノクロでも伝わりますね。いかに、クリスマスモチーフの、「記号的イメージ」が強いかがわかります。これはすなわち、見ている人の多くが「クリスマスといえば」というモチーフを強く刷り込まれている、ということです。

アイコンとは

さて突然ですが、「アイコン」とは何でしょう？
 
さまざまな定義がありますが、「何かを代表するもの、想起するもの」などの言い方があると思います。ポップ・アイコンと言えば、マドンナとかマイケル・ジャクソンとかですね（古い）。
 
この記事で言う「アイコン」とは、UIデザイン、スマホのホーム画面のアイコンなどのことなので、「何かを代表するもの、想起するイメージを、端的に図案で表現するもの」ということになります。

図案としてのアイコンに必要な機能は、「パッと見て、端的に伝わること」といえます。モチーフがクリスマスの場合、サンタのアイコンにすれば優勝です。赤・緑を効果的に使えばなおさらです。助かりますね（ガッツポーズ）。
 
つまり、「端的に伝わる」機能を実現するには、まずユーザーがその対象を（この場合はクリスマスを）「すでに、知っていること」が条件になります。
 
ところが実際の仕事はそうでもなく、「3分くらいじっくり説明されればまぁわかる…くらいの新機能」を「ズバッとアイコンにしてください」、という案件がよくあります。
 
クリスマスのように、誰もが知っている共通認識が無いわけですから、これは当然難しい。しかも情報量が多いと、すべてを表現することはできません。「ナントカ（名詞）を・どうにかする（動詞）」など、複数の概念が混ざってきたりします。
 
こういう場合は分解して、特に伝えたい部分に絞って表現します。すべてを伝えることはできません。ラベル（文字）も非常に重要になります。共通認識が無い概念を、アイコンだけで伝えきることは不可能です。
 
ここは誤解というか、デザイン表現に対して過度な期待を持たれるところなのですが、「文字無しで、アイコンだけで表現してください」と言われることがあります。
残念ながら、「認知が無いところに、図案だけで何かを伝えきる」ということはできません。知らないアイコンは、ラベル（文字）とのセットで学習し刷り込まれてゆくので、必ず文字との併用を強く推奨しています。

未知のアイコン

さらに難しいものになると、「端的なイメージを付与すること自体が難しい」ケースです。たとえばこれ。

（うわ～～WEBブラウザアイコンのデザインとか絶対イヤ～～、機能が無限すぎて何のモチーフもイメージも沸かない～～）

この中で、強いて言うとSafariはコンパスなので、「無限のネットの海を泳ぐ羅針盤…」的な意味を読み取ることができます。

しかしWEBブラウザのデザインをするのに「無限のネットの海を泳ぐ羅針盤で…コンパスのモチーフを…」とプレゼンしても「うーん、意味は分かるんですけど、他の案も見てみたいですー」と言われるのが目に見えています。つらい。共通のイメージが無いので、無限に何とでも言えてしまうんですね。
 
こういうケースはコンセプト、ストーリーをしっかり立てて、コンセプトを体現する象徴的なイメージを構築します。認知は無いので腹をくくって「これが我々の作った新機能です！」と胸を張ってプロモーションして、時間をかけて認知を促す。
 
結果的にこれらの「何を示しているかは不明のアイコン」は、全て「WEBブラウザ」である、という認知を我々ユーザーは後天的に刷り込まれ、学習したのです。
 
この、
 
１）誰でも知っているモチーフを落とし込む
２）説明されれば分かる内容を部分的に表現しラベルも組み合わせて補足する
３）コンセプトを元に言いきって地道にプロモートする
 
という大きなレベル感の違いがあり、これらのレベル感が混ざってしまうことも多く、アイコンデザインでモメる要因となります。
特に実務で多い２）は、１）のような機能を期待されますが、実際には３）に近く、言い切って周知して、認知されて機能する場合が多いと思います。

未知なるものの認知

最後に、未知なるものの認知について、私の好きなあるSF映画の表現を引用します。ネタバレになるので何の映画かは伏せますが、複数のSF映画で繰り返し使われている演出です。

『ヒトが未知の超存在……地球外知的生命体とか……に遭遇するとき、本当に未知の次元の存在というのはヒトの理解を超えてしまうので、ヒトには認知ができない。
そこで超存在は、あえて「ヒトが知っている存在」や「ヒトが知っている世界」の姿を借りて、接触してくる……』
 
というものです。
始めてこの演出を映画で観たとき、「うまいな～～」と感動しました。
 
本当に斬新なもの、新しいものは認知ができません。知っているものと知らないものの狭間で、デザイナーは今日もデザインをしています。メリークリスマス。

最後に

パイオニアのデザインチームでは一緒に働く仲間を募集しています。ご興味があればお気軽にエントリーください！

Pioneer Advent Calendar 2022 の21日目は、SaaS Technology Center データインテリジェンス部 雪下さんの「【海外、転職、リーダー】背景違う３人の企画担当にインタビュー」です。
お楽しみに！