アイコンの話

中高生向けにIT・プログラミング教育サービスを提供している、ライフイズテック株式会社でデザイナーをしているおんちゃんです。
ついにゴールドシップ（ウマ娘）で凱旋門賞を勝ちました！ありがとうございます！

以前、こちらの記事でライフイズテックのAIクリエーターコース用に脳みそマークを作った時のお話をしました。その時にアイコンについて色々考えたので記録しておこうと思います。

脳みそマークのAIクリエーターコース

アイコンとマークについて

Webサービスのデザインをしているとアイコンを使用する機会がとても多いです。パソコンとスマホで表示される画面が違ったり、小さい画面に色々な情報を盛り込まなくてはいけない場合にアイコンは大活躍してくれます。
アイコンを作成する時は形をすっっっごく単純にして色情報も持たせません。表示サイズや色が変わっても認識できる、記号のように利用できるものを目指します。

AIクリエーターコース用に作った脳みそマークはそのコースを象徴するシンボルなので、必ずしもシンプルな形状でなくてもよいかと思いますが、色々なところに広めていきたいと思ったらシンプルにしてアイコン的な使い方ができるほうが、旨みがありそうですよね。

今回作成した脳みそマークもシンプル形状なので、アイコンとしても使えそうです。

アイコンだけだとちょっと不安

アイコンはそれだけで使用されることはほとんどなく、言葉での説明と一緒に使われます。
アイコンは単純でシンプルにデザインされると抽象度が上がり、それが表す解釈に幅がでてしまいます。脳みそアイコンもそれだけでは「脳みそという単純なイラスト」以上でも以下でもなくどうとでも解釈できるので、それをどう解釈してもらいたいか、言葉で規定してあげる必要があるんです。
言葉で説明がされていたらその後アイコンだけを見ても「このサービス内では、このアイコンはこういう意味ね」ってことを認識してくれます。

脳みそアイコンと一緒に並ぶ言葉によって色々なことを指し示せます。

「質問」という言葉がきたら、AIが質問に答えてくれそうな、Chat bot的なものが想像できます。
「画像」がきたらきっと画像生成ツールなんだろうな、と。
「コーディネート」は洋服のコーディネートをしてくれるのかな？とか。
「ともだち」は、、意味深ですね、、
「AIクリエーター」もCAMP Courseというタイトルがないなら、AIを作るツール？それとも、AIが何か作ってくれるツールなのかな？と思うかもしれません。

言葉だけではなくどこで使用されるかによっても解釈を定義できます。
ハンバーガーメニュー（ 三 ）などはとても抽象度が高いアイコンですが、Webページの片隅にあれば「ここ開くな」ってことが分かります。

言葉での説明がなくても分かるアイコン達

大勢の人の認知がどんどん高まってくると、文字の説明をつけなくても大丈夫なアイコンがでてきます。アイコン界のエースです。

上図のアイコンは説明がなくても何を表しているか、なんとなく分かる人は多いかと思います。

いまさらこれを「りんご！」って言われても、なかなかそうは見えないです。ちょっと見えてきたけど、、

ゴーヤ（設定）は歯車で、バームクーヘン（wifi）は電波的な何かかな？とは思いますが、りんご（電源）アイコンの形の由来ってなんなんでしょう？
OUTとINの頭文字だって話を聞いたことあります。パソコンの出入り口的な意味でしょうか。とっても象徴的でかっこいいですね。

Webサイトのアイコンデザインがちょっと凝ってたりすると、細部にまで手が行き届いてるな〜って感じがしてとっても信頼できます。
そんな、小さいけれど存在感のあるアイコンとうまく付き合ってデザインできるといいですね。

お知らせ

ライフイズテック サービス開発部では、月毎に気軽にご参加いただけるカジュアルなイベントを実施しています。開催予定のイベントは、 connpass のグループからご確認ください。興味のあるイベントがあったらぜひ参加登録をお願いいたします。皆さんのご参加をお待ちしています！