blog
Hello Sketch 3 シリーズSketch 3でマテリアルデザインベースのオレオレアイコンデザインテンプレートを作ってみた
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
はじめに
自社の事業毎にアイコンを作ろうと思うと長期的な運用に備えて統一感を持たせるのがけっこうしんどい。専業のデザイナーがいれば良いけれど、うちのような社内で済ませようとしているような企業の場合、全部1人でということもある。一からルールをつくるのもつらいし色々と調べていたところ、Googleが提供しているマテリアルデザインのアイコンデザインガイドが参考になった。
これをベースにSketch 3のオレオレテンプレートを作ってみることにした。今回はグリッドのみを作っただけだけれどこれをベースによりしっかりとしたルールを作っていこうなんて妄想が広がるが、光源による反射やシャドウ、色味、丸みの角丸、ラインの太さなど要点がまだまだある。
ダウンロード（フリー）
Sketch 3 Icon Design Template v1.0.0
基準となるガイド
1024pxのアートボードを8 * 8で分割し1つのブロックを128px * 128pxとする。このブロックをユニットの単位として
Sketch3でこのようなグリッドを作るにはGrid Settingsを下記のように設定する。
| 項目 | 値 |
|---|---|
| Grid block size | 16px |
| Thick lines every | 8 blocks |
タイプ
squareとcircleの２つのタイプを作った。同じグリッドを基準に外周の余白が共通のサイズになるようにしている。
角の丸み
角の丸みは最大で64pxとして64px毎に16px小さくしている。ただ、これはあくまで外周とした場合の丸みで線幅で見た場合、丸み部分の線の太さが直線時より太くなってしまうため、半径を1/2した方が良い気がしている。
適当に作ってみる
適当にiPod風のアイコンを作ってみたが、同じルールで作ることでバリバリのデザイナーでなくともアイコンの統一感は出せそうだ。
とりあえず今回はここまで。 中途半端なものだけど、誰かの参考になればと改良したらまた紹介しようと思います。
シリーズ
- Hello Sketch
- Sketch 3を使いこなすためリンクやメモ
- 複数のHexからカラーパレットを自動生成するSketch 3プラグイン「Swatches」
- Sketch 3でマテリアルデザインベースのオレオレアイコンデザインテンプレートを作ってみた
- Sketch 3でピクセルスナップ（Round）を制御する
- iOSデバイスでデザインをチェックできるSketch MirrorやSkala Previewとか
- Modular ScaleとVertical Rhythmを使ったタイポグラフィとレイアウト
- Sketch 3.3 でできるようになったこと
- Sketch 3のページ・レイヤーを自在に操るショートカット