この記事はSketch Advent Calendar 2017 5日目の記事です。
-

こんにちは、デザイナーの沢登（@sawamemo） です。
私はデザインする際にSketchを使う事が多いのですが、以前はSketchの独特なパス操作が苦手でアイコンなどはイラレで作成し、Sketchに移す。というフローでカバーしていました。

しかし、実際のところアイコン程度のシンプルな形状であれば、複雑なパス操作やアンカー操作を行わずとも作成出来ます。（ということに気づいたのが2年ほど前）

また、デザイナーによってもアイコンの作り方もまちまちで、自分の作り方をアウトプットしてみたら、別の作り方も見えてくるのでは？と思い記事を書いています。他にも良い作り方があれば教えて頂けると嬉しいですね🙏

前提

今回作成したアイコンは8つで、主にアプリなどやWebサービスでよく使われる（よく作っている）物をピックアップしてみました。

また、ペンツールなどでベジェ曲線を使わずに、線・円・多角形などのSketchにデフォルトで使えるオブジェクトを利用し、制作者の技術に左右されづらい作り方をしています。

主に使うツール

Scissorsは今回の記事の中でも重要なtoolで、デフォルトのツールバーにも入ってない（はず）のですぐカスタムして追加しておきましょう。

では、アイコン制作に入りましょう。

➕

1.Lineで縦線を引く
2.Lineで横線を引く
3.完成

❌

1.Lineで縦線を引く
2.Lineで横線を引く
3.Rotateで45度回転
4.完成

➡️

1.Rectangleで四角を作成
2.Rotateで回転
3.左右どちらかのパス2辺をScissorsで切り取り
4.完成

🔍

1.Ovalで円を作成
2.Lineで線を追加
3.Rotateで回転
4.完成

👱

1.Ovalで円を2つ作成
2.下の円の下部2辺をScissorsで切り取り
3.完成

🏠

1.Rectangleで四角を作成
2.作成した四角を複製
3.複製した四角をRotateで45度回転
4.最初に作った四角の高さを調整
5.2つの四角から2辺と1辺をScissorsで削除
6.もろもろ線を追加して完成

🔔

1.Rectangleで四角を作成
2.上部の角をRadiusで角丸
3.Ovalで円を追加
4.円の上部をScissorsで切り取り
5.もろもろ線を追加して完成

🖋

1.Rectangleで四角を作成
2.左上のアンカーを選択
3.選択状態でdelete
4.パス削除されて出来た三角計を複製してからFlipで左右反転
5.2つの3角形をUnionで結合してからFlattenでパスの結合
6.下部2点のアンカーを選択しアンカーを上に移動（裏返すイメージ）して矢印の形に
7.高さを調整し
8.Rotateで45度回転
9.もろもろ線を足して完成

ブラッシュアップ

作成したアイコンを並べ、それぞれのアイコンが同じテイスト、同じウェイトになるようにサイズや形を整えて完成です。

まとめ

これらのアイコン制作手法を最適化していくと、物にもよりますがiconjarなどでアイコンを引き出す手間より早く作れたりするので、知っておくと良いかもしれません。

このレベルのエレメントに関するSketch記事はまだまだ少ない印象なので、布教も兼ねて細々と続けていこうと思います。

お読みいただき、ありがとうございました！
本記事のファイルは公開しています。