誰も教えてくれないフラットアイコンの作り方

複雑なデザインが可能になったいま、グラデーションなどの装飾を廃したシンプルなデザインの価値が見直されています。アイコンについても、シンプルでフラットなアイコンをあちこちで目にするようになりました。

今回はそんなフラットアイコンをモノクロで作成するために必要な知識を、ひとつの記事にぎゅっと凝縮してお伝えします。

 1. オプティカルグリッドを使ってみよう

オプティカルグリッドとは、円・四角などの幾何学形を組み合わせたグリッド線のこと。

多くのアイコンは、長方形、正方形、円形、三角形などのベーシックなかたちにあてはめることができます。これらの図形をぼかしてみると、形状の違いはあれど、すべての図形が同じくらいのウエイトを持っていることがわかります。

これらの図形を、形状に応じてオプティカルグリッドにあてはめてみましょう。たとえば、四角形のアイコンは三角形や長方形のアイコンよりもコンパクトになることがわかります。

アイコンがコンパクトであればあるほど、必要なスペースは少なくなります。これに対して、下図からもわかるように、繊細でシャープなアイコンにはアートボードのスペースが必要です。

アイコンを作成するにあたって、グリッドにこだわりすぎないように注意しましょう。グリッドはアイコン作成の手助けとして利用するものであって、作成を制限をするものではありません。もしグリッドからはみ出してしまっても、デザインとして優れていると感じたらそまま進めましょう。

2. ピクセルグリッドを活用しよう

ピクセルグリッドとは、1ピクセル四方のグリッドのこと。

Retina以外のディスプレイにおいてもアイコンをシャープに見せるために、ピクセルグリッドを活用してみましょう。引きたい線を中心に1ピクセルずつ厚みをもたせることによって、厚みと鮮明なシルエットを両立させることができます。

もし線を1ピクセルにしたい場合は、引きたい線の内側または外側に1ピクセルの厚みをもたせるようにしましょう。

引きたい線の両側に0.5ピクセルずつ厚みをつけると、拡大したときにはシャープに見えますが100％の大きさで見るとぼやけてしまいます。

ピクセルグリッドに従って、斜線の始点と終点を設定します。30°、45°または60°の斜線は、13.7°や81°のような中途半端な角度よりも鮮明に見えます。

3. ディテールを一定レベルに揃えよう

フラットアイコンをセットで作成するときには、一番複雑なものから取り組むようにしましょう。こうすることによって、どれくらいのディテールのデザインにするのかという基準を設けることができ、ビジュアルウエイトを揃えるのに役立ちます。

4. 空白の大きさを揃えよう

隣接した線のあいだの空白が、アイコンによって大きすぎたり小さすぎたりしないように注意しましょう。空白の最小値を設定することによって、こうした基本的なミスを防ぐことができます。

線画アイコンの場合は、空白の最小値を線の太さと同じにするのがおすすめです。「線が繋がっているかいないかわからない」という状況を防ぐために、空白は明確にしましょう。

5. 情報はシンプルに

フラットアイコンを作成するうえで気をつけなければいけないのが、リピートを省くこと。グラフィックノイズが少なければ少ないほど、ユーザーはより正確に情報を理解することができます。下図の分数のように、情報はシンプルにまとめましょう。

ユーザーがすでに理解している情報を繰り返す必要はありません。たとえば、下図のような場合にはメールアプリから封筒の要素を省いても問題ないでしょう。

このルールは背景やフレームにもあてはめられます。背景やフレームの情報によって、アイコンがわかりにくくならないように気をつけましょう。

6. スタイルを揃えよう

ひとつのフラットアイコンセットに、奥行きのあるアイコンとそうでないアイコンを混在させるのは避けましょう。それぞれのアイコンが同じステータスや重要性を持っているということをユーザーに認識させるためには、スタイルに一貫性がなければいけません。

線画アイコンと塗りつぶしアイコンについても同じことがいえます。これらを混在させてしまうと、ユーザーはそれぞれのステータスや重要性が異なると捉えてしまうかもしれません。

こうした認識を利用して、線画アイコンは通常状態、塗りつぶしアイコンは選択されている状態、といったように意図的に違うステータスを割り振ってみてもいいかもしれません。

7. スタンダードなサイズを把握しておこう

多くのインターフェースは10進数ベースではなく、より柔軟な8ピクセルグリッドと12カラムのレイアウトで成り立っています。12は2、3、4、6で割ることができるので、24ピクセルまたは48ピクセルのアイコンエリアがスタンダードになりました。より大きなアイコンが必要な場合は、これらをスケールすることによって対応することができます。

8. シルエットはきっちりと正確に

常に完璧主義である必要はありませんが、フラットアイコンを歪ませないためには正確な線を引く必要があります。アンカーポイントは最小限に抑え、かつ隣接するエレメント間にギャップができないように気をつけましょう。

「8.999ピクセル」や「1000.001ピクセル」にも同じことがいえます。アンカーポイントが正確に配置されていると、アイコンのエッジがシャープに見えるだけでなく、シェイプをマージする際にギャップが生じるリスクをなくすことができます。

9. ムダなデータを捨てよう

Sketchなどのエディタの多くは、エディタ上では下図のように完璧に見えますが、実はレイヤーやクリッピングマスクなどの不必要なデータを生成してしまいます。

このSVGをIllustratorなどの別のエディタで開いてみましょう。すると、からっぽのレイヤー、不要なグループ、クリッピングマスクなどがあることに気がつくはずです。フロントエンドのエンジニアがこのようなアイコンをアイコンフォントにしたり、Webページ上でSVGを使用したりすると、不具合が生じてしまう可能性があります。

不必要な情報は破棄しましょう。

Sketchで作成したSVG（picture.svg）とIllustratorで編集したSVG（picture_new.svg）の違いはプレビューでも一目瞭然です。

おわりに

フラットアイコンはシンプルだからこそ奥深く、ディテールに気をくばることでその魅力が発揮されます。今回紹介したような点に気を配りながら作成すれば、きっと魅力的なアイコンセットができるはずです。自分ならではのアイコンセットを作成して、Webページで活用してみましょう。

（翻訳：Asuka Nakajima）