この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、デザイナーの たなか ゆきこ です。
前回『アイコンの形状と大きさのバランスについて』の記述をしたのですが、今回は作る時のベースの話をしてみようかと思います。
モバイルUIとタイトルにつけているので、アイコンありきでアイコンのグラフィック作成について書いてますが、そもそもアイコンを使うべきなのかという話もデザイナーが考えるべき設計（design）なんじゃないかなーという気持ちもありつつ進めます。
ベースを作ってみよう
アイコンのベースになるものを作成したいと思います。
まずは、基準となるの四角のサイズを決めるために、iOSとAndroidを参考にしてみます。
iOSは黄金比？
iOSのアイコンは黄金比でてきているという話がある。
アイコンを幾つかスクリーンショットとって調べてみたのですが、確かに黄金比っぽいんだけど、最終的になんだかここはどの位置から測ってそうなったの？というようなものもある。
右の図のガイドは黄金比みたいですね。アイコンの図柄によっては、黄金比が全て適用されているわけではなく、最終的に調整していることを意味しているのだろうなと解釈してます。
他に白銀比なども計算できます。日本人は白銀比が好きという話もありますが、綺麗に作成するための有効なツールではあると言えます。
黄金比の計算サイト：MetallicRatio
-
四角を作ってまずは、センターラインを引く。四角形の黄金比で線を引く。Appleのガイドものせてみる。Appleのガイド自体が、アプリ中のアイコン用ではないので、違うとかあっているとかではないです。なんとなくでのせてみました。
-
22x22で作った場合、内側に16x16とちょうどキリの良い数字の9つの正方形ができるじゃないか。これを基準の四角にすると良いのでははないかという一つの仮説がでます。
Androidのガイドは見ながら作ると簡単にできる
次にAndoroidを試しましょう、MaterialDesignがよくできているのがわかります。このまま指示通りに製作すると、本当に純正のアイコンができますw。
48のタッチ領域の中に24。上から今まで出てきた数字を眺めていて、私てきには『2,4,8』という数字が最強に思えます。iOSが22でAndroidが24なら、もう22で作ればいいじゃないかという考えももでてきますが、それはアイコン単体で見た時の話なので、全体を見て考えよう。
Style - Icons
上記を参考にいろいろ考えて自分なりに作ります
iOSとAndroidのアイコンですが、両方同じで作ろうと思わずに別に作成すればいいのですが、時間やアプリの統一感など考え共通で作成できるようにしたいとか色々。
最小の線の細さを1にするという条件付きであったり、2にする場合は、少し基準を考える必要がある。線の太さや、塗りの大きさとか重量感でも調整が入ります。
各条件で、毎回基準線を構築するのもお仕事かなと。
結論としては、『基礎を分析した上で、自分で考える』です
なんか出たら勉強しておくのがいい。
前回の分と合わせる
さて、ここで前回作った、丸とか長方形とか覚えてますでしょうか。 出番です！作った基準の四角形を合わせて貼り付けてます。
なんとなくベースができたような気がします。
自分で考えた基準線でアイコンを作ると綺麗に見える気がするので、自己満足に浸りたい方は、考えてみて作成してはいかがでしょうか。
気が向いたら、また書きます。あとは、斜め線が太くみえるとかその辺のはず。
このあたりも読んでみると良いかな
参考サイト
https://material.google.com/style/icons.html#icons-system-icons
http://voidism.net/metallicratio/
14
