[モバイルUIデザイン]アイコン作成を真剣に考える vol.1

デザイナーの たなか ゆきこ です。

アイコンサイズについては、記載したので、モバイルの中に使用するアイコン作成について考えたことを書いていきます。わたしが考えただけのものですが、参考になればいいんじゃないでしょうか。

基本

以下が基本かなと思っています。

• 丸、四角などはある程度決まった形状
• 線の太さが同じ。または同じに見える
• カクカクなのか丸みを帯びているのか
• 線のアイコンなのか、塗りのアイコンなのか
• オブジェクト同士の余白が一定になっている、もしくは一定に見える
• 並べて配置してみて違和感がない

昔ながらのアイコンの意味

一般的なものはしっておくのがベストではないでしょうか。

禁止

「NO」の図案化。そう意味を捉えると、右上から左下の斜め線が不思議な気がしてきませんか。検索するとどちらもあるので、なんとも言えないのですが、わたしは特に理由がなければNoを選択します。

https://thenounproject.com/

保存

フロッピーディスク。未だにフロッピー。
昔は、保存するのにフロッピーに保存していた。確かフォントとか買ったらフロッピー届いてた。それが当時、メタファー（物事のある側面をより具体的なイメージで表現するもの）に変わって、それぞれのソフトがアイコンとして取り入れ、それをそのまま踏襲している状態ですね。

他にも探せば色々出てきます。

アイコンの形状と大きさ

基本はいいとして、『何を考えるのか』ですが、まずは大きさのバランスをみようと思います。同じアプリ内で使っているアイコンの印象はまず大きさが目につくのではないでしょうか。

同じ大きさなのに『違う大きさ』に見える

目の錯覚ですが、幾何学的形態の面積を一定にし、大きさの見えについて比較を行った場合、三角形、逆三角形、菱形、六角形、円、正方形の順に大きく見える。以下の図の面積は四角と同じか、もしくは限りなく近い面積になってます。どう見えるでしょうか。

 

頑張ってみよう

これを同じに見えるように調整する必要がある。
以下の図は、見た目がなるべく同じに見えるように調整したもの。三角形は結構小さくなってます。やや小さすぎた気がしますが、こんなイメージです。

 

 

ここで、その形状にあたるアイコンを選定します。
下記のようにフォントの字詰め行う時に形状で当てはめるようなイメージです。印刷とかの場合は、文字詰めをこんな感じで捉えるとやりやすいと思ってます。アイコンにも適応できるはずです。

 

まとめ

日々上記のようなことを考えグラフィック作成をしてます。アイコンについては、上記だけではまだ足りない部分があるので、続きもまとめていきます。