UIのグラフィックスアイコンが生まれるまで

今回はUIデザイン上のグラフィックスやアイコンがどのように生まれているのかを書きます。今回初めてサムネにあるようなアイコンを作ったのでその時の流れをまとめていきます。

普段アイコンのデザイン等はデザインシステムチームに丸投げしていて一切やらないので、専門の方は優しい気持ちで読んでみてください。(はい、完全に言い訳です。保険を張っておきます笑） 初めてアイコンを作ったので個人的にはすごく楽しかったです！

比較的大きい組織に所属していると社内にデザインシステムチームがいて、デザインパターンだけでなくアイコンやグラフィックスを作ってくれます。
また個人の仕事だとGoogle Material Designのアイコンなどをコピーしちゃってもよかったりする(?)と思います。
なので結果的にアイコンを作る機会ってなかなかないのかな〜って思っています。

0. 今回のお題

「クラウド上のリソースを表すアイコン」
今デザインしている製品にクラウド上のリソースを一覧できる表があるのですが(細かい技術的表現は無視してください)、何も登録されていない時に代わりに表示されるアイコンを作ることになりました。

以下はSAPのデザインガイドラインから持ってきたのですが、こちらが表デザインのempty state時に表示するアイコンの一例です。私たちの製品でも表デザインを作ることになり、そこでのEmpty State用のアイコンを作ることになったのです。

1. Google Imageでひたすらサーチ

アイコンやグラフィックスで大事なことはラベルを読まなくともなんとなく意味が分かることです。ユーザーは今までの経験から「こういう形のアイコンならこういう意味だろうな」と予測をします。例えば以下のアイコンを見たとき、IT業界にいる人だと「サーバー関係かな」とすぐに理解することができます。
(ここでユーザーが誰なのか、そして彼らはこれを理解できるのかを確認することが必要です。例えばこのアイコンもITに関係ない人だと予想できないかもしれません。)

このようにユーザーは今までの経験をもとにアイコンの意味を予想するので新しいアイコンを作るときもできるだけ過去の通例に従う方がいいです。

そこでまずは自分の頭の中の偏見をできるだけ捨てて、他の例をひたすら検索します。今回のケースだと
- icon cloud resource
- icon cloud asset
- icon cloud computer
- icon cloud instance
など該当しそうな単語をひたすら検索しました。

2. アイディアのスケッチ

検索を続けて同じパターンが繰り返されるようになってから自分のアイディアをスケッチに起こしました。一旦思いつく限り書いた後ちょっと1日くらい置いてまた追加したりしていました。

すぐにIllustratorやFigmaを開いてアイコン作りを始めたくなりましたが、我慢して色んなアイディアを書き出しました。

3. アイディアをグラフィックスに

スケッチをUXチームに見せて、選ばれた候補をIllustratorで実際の形にしました。

このスクリーンショットを見て分かるように同じデザインでも違うサイズや違う長さにしてどのように印象が変わるかを観察してみました。

そして候補の中で良さそうなアイコンをチームのエンジニアに見せて、「これなんだと思う？」と聞いて、どれだけ予想できるかを観察しました。

4. 候補の選定

そしてエンジニアが比較的納得できるものを最終アイコンとして形にしました。

本当はここでユーザーにも見せて、テストしてみるのが正しかったのかもしれません...アイコンのデザインってどうやってテストしているのか気になるところです...

5. 完成！

実際にそのアイコンを表のUIページに挿入した様子がこちらです。

P.S. このようなEmpty state UIを作るときは必ず「どうすればempty stateから通常状態に移れるのか」を明示しましょう。UIの状態遷移については昔記事を書いたのでぜひ！

まとめ

今回初めてアイコンを作ったので色々と学ぶことが多くて楽しかったです。

要点は
- 他の例を参照する
- 可能な限り多くのデザインパターンを考える
- 候補のデザインの違うバラエティを試す(一部のサイズや長さを変えるなど)

またアイコンをデザインする機会があったら報告させていただきます！