UIデザインと言えば、アイコン。

突然ですが、UIデザインと言えば、何と答えますか？

ボタン、メニュー、色、アイコン、レイアウトなど、いくつも挙げられます。

その中で、アイコンやロゴについて書こうと思います。

身近なアイコン。

皆さんも、普段JRや地下鉄など電車を利用すると思います。

電車に乗ろうと思って、改札を通り、ホームまで向かいます。乗り換えの時も、ホームまで向かう時も、確認するもの、ありませんか？

何線を使うのか、何番ホームか、確認すると思います。何気なく利用するその看板の、端にあるアイコン。「駅ナンバリング」というそうです。

この「JB」と書かれた駅ナンバリングは、何線だと思いますか？

普段はこのアイコンに文字もついているから、理解できて、迷わずに電車に乗れるのに、駅ナンバリングだけだと、いったい何線なのか、私にはわかりませんでした。

「JB」は総武線（Soubu-Line）です。

色もあるから、何となくわかった方もいるかもしれません。
普段文字ばかりに頼っていて、なんとなくでしか見ていなかったんだと思い知らされました。

もし、アイコンだけだったら、もし、全て白黒だったら、迷ってしまう人が今より多いのだと思います。

文字と色が合わさることで、瞬間的にわかるアイコンの役割を果たすと私は考えます。

【豆知識】駅ナンバリングの構成

路線ごとに設定されている色と、2文字のアルファベットで表示される路線記号が「駅ナンバリング」を構成しています。

2文字のアルファベットは、「事業者名の頭文字」+「路線名の頭文字」を基本としてつけられています。
ただし、それだと被りができてしまうので、被ってしまっている場合はその次のアルファベットを使用しているようです。
中には、わかりにくいアルファベットもあったりもします。

例えば、山手線「JY」（「JR」＋「Yamanote-Line」）は、そのまま頭文字をとって「JY」。色も、電車の色と一緒です。
他にも、横須賀線「JO」（「JR」＋「Yokosuka-Line」）は、そのまま頭文字をとってしまうと山手線と一緒になってしまうために、「JO」となったそうです。

色が違うのも、大事。

似ているものとして、Ｘ（旧Twitter）の前のアイコンである青い鳥と、イトーヨカドーの鳩のロゴを挙げます。

青と白のアイコンと、青と白と赤のマーク。
これだけ見ると、赤の有無の違いだけですね。

例えば、赤をなくして両方同じ色だけにした場合、もしくは、白黒にしてしまった場合、形だけでは、少し似ていて、どちらが何を表しているのかすぐには見分けられません。

鳥が向く方向が違う為、同じ色にしたとしても、ちゃんと見れば見分けることは出来ますが、直感的に理解できるデザインではありません。
考える必要があって、少しストレスがたまってしまいます。

似ている鳥のマークでも、色が違うだけで、瞬時に違いを見分けられるこの２つは、UIデザインにおいて、色の重要性を表す例だと思います。

アイコンは、直感的に！

文字と色とアイコン、すべてセットでの使用が一番アイコンを引き立たせると考えていますが、本来、アイコンは文字を使用せずに使う事の出来る「記号」です。

なので、アイコンだけにも触れようと思います。

検索なら「虫眼鏡」、メールなら「封筒」、電話なら「受話器」。

虫眼鏡、封筒、受話器は、普段では使わないのに、アイコンとしてなら誰にでも瞬時に伝わります。

よく考えると不思議な事で、スマートフォンなどの電子機器を使用する若い世代の中で、虫眼鏡、封筒、受話器全てを使ったことのない人の方が大多数でしょう。その中でも直感的な反応が出来るのは、アプリやサービスなど日常の中でユーザーがアイコンを使用し、無意識に理解をしているからと言われています。

直感的に使用が出来るアイコンが今後も増えていくと、文字がいらない、よりシンプルなデザインになっていくと思います。

でも、文字があると嬉しい。

視覚から得る情報は多くなってしまうけれど、アイコンやロゴだけではなくて、文字もあると、理解はしやすいと感じるものもあります。

ユニクロやGUのロゴのように、名前がそのままマークになるものもあれば、キューピーのように、イラストがロゴになるものもあります。

みんながよく使うメッセージアプリでも、吹き出しマークを使うアイコンがほとんどで、色を基準として判断しているのではないでしょうか？

noteのアイコンも「n」になっていて、使用者によっては何のアプリか瞬時に判断できない人もいるかもしれません。

だからこそ、使う人、場所、場面、印象、雰囲気に応じて、最適な文字とアイコンと色の使い方、組み合わせ方をしなければならないし、UIの視点が大事になってくると実感しました。

【豆知識】アイコンとロゴとピクトグラム

ここまで、色々と書いたのですが、アイコンとロゴとピクトグラムの違いって何だろう？とわからなくなってしまったので、まとめてみました。

アイコン：特定の意味を視覚的に簡潔に伝える小さな画像やシンボル。

ロゴ：企業やブランドのアイデンティティを表現するためにデザインされた、文字や図形を組み合わせたシンボル。

ピクトグラム：言葉を使わずに、物や概念を視覚的に示すシンプルな絵や記号。公共の案内や標識でよく使われる。

さいごに。

私たちが普段何気なく使う中にも、良く考えてみるとUIデザインだと思うものがあったり、色や文字が違うだけで似ているデザインのアイコン・ロゴがあったり、無意識に日常を過ごしていたなと思うことが沢山ありました。

ほんの少し、周りを見てみるだけで、今までとは違ったものの見方になったように思います。

結局、何を伝えたいのかというと、無意識に過ごしてきた日常を、意識的に過ごすことで、視野も広がり、良いUIに繋がる手がかりになるという事です！

この記事も、何かの手がかりになればいいなと思います。

最後まで読んで下さり、ありがとうございました！