こんにちは、東芝のUIデザイン担当の池田Rです。

PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。
この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。

１．まずは手書きで

「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要があるので、モチーフには年代や国籍問わず誰もが知っている一般的なモノや記号を選んであげるのが望ましいですね。
モチーフを決めたら次は形状の検討です。ここで私が使うツールは自作の“Icon sheet”と0.8mmの「ぺんてるサインペン」です。

デジタル上で使用されるアイコンたちですが、私はあえてアナログの紙と太めのサインペンで手書きでのデザイン検討を行います。その理由は、細かい書き込みができないサインペンで描くことで、アイコンの構成要素を極限までシンプルに削ぎ落とすことができるためです。社会インフラを支えるサービスに使われるアイコンは、瞬時に正しく認識してもらうのが第一だと考えています。「その企業らしさ」を伝えるために、特徴的な描画を行うという考え方もありますが東芝はあえてド直球。ノイズを極力そぎ落としたシンプルなアイコンを提供することで、絶対に止められない社会を支えるシステムを扱うユーザーの負荷軽減や作業効率アップ、思わぬエラーの防止に寄与できると考えているからです。Icon sheetを机いっぱいに広げて、同じモチーフを何度も何度も描いて、シンプルでありながら「それ！」と伝わる絶妙なラインを探っていきます。

形状が決まったら作業場をデジタルに移し、形を整えていきます。

２. グリッドシステムという基本

画面上でアイコンを成型するフェーズでは、システムアイコン専用のグリッドを下敷きにして作業します。
このグリッドに沿って整形することで、背の高さや角の丸み、余白スペースが統一でき、画面上に並べたときに整然とした印象を与えることができます。
システムアイコンは複数個を並べて使用するケースが多いものです。そのためグリッドの中に余白も組み込んでデザインすることで、たくさんアイコンが並んでいてもユーザーがひとつひとつの形状にフォーカスでき、識別しやすいものに仕上がります。

特に気をつかって整えたいのは外形線。グリッドには「丸」「正方形」「縦長方形」「横長方形」など形状ごとの基準線が用意されており、そこに合わせて最適な外形線を決めていきます。これによりアイコンが持つ面積が均一化し、視覚的なバラつきを抑えるとができます。

３.「そろえる」ところと「ずらす」ところ

ひとつのアプリケーションを開発するために、たくさんのアイコンを制作します。そこで重要になるのがトーンとマナーをそろえる事。同じシステムの中にあるのに、あるアイコンだけ悪目立ちしたり目立たなかったりすると、使用者がやりたいことにフォーカスしにくくなってしまいます。
それを避けるため、角の丸み、線の太さ、くり抜き部分の大きさなど、あらゆるディティールをそろえていきます。例えば「プリントアウト」や「ビデオ」のアイコンの中にある隙間の間隔、「非表示」と「ミュート」を表す斜線表現など、細かなマナーを統一していきます。

一方、近しいアイコン同士は識別性を考えて、あえてずらして違いを作ることもあります。封筒の「未読」アイコンは封筒が届いたばかりの未開封であることが伝わるよう、くり抜き部分を太く、「既読」アイコンは開封して開け口が上を向いている様が伝わりやすいよう、切り抜き部分を細くしています。

４. たくさんの目でたしかめる

このようにして出来上がったたくさんのアイコンたち。これらが利用者の環境で、狙い通りに瞬時に認識できるものに仕上がっているのか、スマートフォン・PCなど、想定される使用環境で確認します。また、使用環境として可能性の低いモノクロのドット液晶デバイスなどでも、間違いなく認識ができるかを確認します。
さらにオフィスの壁一面にプリントアウトを張り出し、わかりにくいものが無いか、ほかに必要なバリエーションは無いか、様々なデザイナーに意見を求め、ブラッシュアップしていきます。

また多様な業務に関わるデザイナーやプログラマのリクエストに応えて、インフラメーカーならではの「Robot Arm」や「MRI」「CCTV」「Brain」など、ちょっとニッチなアイコンも作りました。

５. まとめ

昨今、システムアイコンは様々な企業が提供していて、Awesome Fontなど種類が豊富で使いやすいものもたくさんありますね。
しかし、社会基盤を支える企業だからこそ、きちんと機能させることに責任を持って、アイコンのような細かなパーツまでデザイナーの手でひとつずつ、こだわり抜いて作っています。基本に忠実に、細部までこだわり抜いたものを提供することが、社会に貢献できるたった一つの方法だと信じています。

今回ご紹介したシステムアイコンたちは、東芝が提供するインダストリアルIoTサービス“TOSHIBA SPINEX”のデザインシステムに組み込まれ、様々な場面で活用されています。インフラ関連の業務に関わる方でしたら、もしかしたらどこかで目に触れる事があるかもしれませんね。

最後まで読んでいただき、ありがとうございました。