iOS 7 にもフラットデザインの波がやってきましたね…！
フラットデザインには欠かせない、ピクトグラム的アイコンはリッチデザインなアイコンと比較して簡単に作れそう！作ってみよう！という方もいるのではないでしょうか。
ちなみにピクトグラムというのは記号や絵文字を指し、共通言語としての役割を持っています。
見かけは簡単そうですが奥は深いのです、、ただ、技術面での高度さはあまり必要ないと思います。表現方法が限られる分難しい部分も多いですが…
今回は興味があるけどどこから手を付ければいいの？という方向けにピクトグラム的アイコンの作り方を紹介したいと思います。
アイコンのモチーフを決める
アイコン案はこんな感じで出しています。
例として「医療」アイコンで考えてみました。こういった図にして 考えると道筋が立てやすく、後で迷った際に復帰しやすいです。
その場で図が浮かぶ物は描き足しておきます。
決める基準
・わかりやすい、万人がピンとくる
・他の意味に取られる可能性はないか
・他に似た形のものはないか
・できるだけ単一の要素で表現できるもの。複数の要素が組合わさらないように、削れる要素は削る
アイコンは矢印やバツマークなどと組み合わせることが多いです。モチーフの段階で複数要素にならないようにすると後々で役立ちます。
アイコンを描く
・最小限の線（面）で構成する、細かくしすぎない
表現したいデザインにもよりますがピクトグラム的なアイコンに写実的な表現は不要です。誇張すべきところは誇張し簡素に表現しましょう
・線の太さ、角の丸みなど、形を統一する
一つのアイコンの中で太さの違う線や、カーブの異なる丸みがいくつもあると統一感が得られません。せいぜい2パターン程度に留めると良いと思います。
線の太さの目安ですがアイコンのサイズの1/20程度の太さが適しているそうです。64×64pxのアイコンであれば3〜4px 程度ですね
・他のアイコンと大きさを揃える
キャンパスいっぱいにアイコンを描いたとして、四角と丸だと埋まる面積が違うので大きさが違って見えます。
こんなガイドを引くと分かりやすいです。
フリーのアイコンがあふれた便利な世の中ですが、目的に合致したアイコンを探し出して揃えるのは中々大変です。
興味を持った方はぜひチャレンジしてみてくださいね。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
