複数サイズのiOSアイコンを簡単に作成する

[アプリ道場 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/app-dojo)の13日目は@hideyukitoneです。
Sketchを使って複数サイズのアイコンを簡単に作成する方法を紹介します。
# なぜ複数サイズのアイコンが必要なのか
iPhone、iPadには複数の画面サイズが存在するためです。
そのためiOSアプリを作るためには複数サイズのアイコンを用意してやる必要があります。

ちなみに私がリリースしております[アプリ](https://itunes.apple.com/jp/app/safari-shangno-guang-gaowoburokkusuru/id1042279527?mt=8)ではこれだけのアイコンを用意しています。
<img width="1036" alt="スクリーンショット 2015-12-12 10.09.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/39241cd5-fc6a-e6dc-4b69-29febf2906ad.png">

最近ではiPad Proが発売され必要なアイコンのサイズが1つ追加されました。
これを見てやる気がなくなった方もおられるかもしれませんが、大丈夫です。
今回紹介する方法で簡単に作成できます！

# 用意するもの
- Sketch
- アイコンのアイディア

これだけです。

## Sketchとは
ベクター形式で絵を描くMac用アプリです。
海外のUIデザイナーの間で爆発的に広がっているそうです。
イラストレーターやフォトショップと比べて情報が少ないですが、使い方は簡単です。
<img width="148" alt="スクリーンショット 2015-12-12 9.20.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/1030da05-5890-6f08-ba3b-7c7cf89057e5.png">


少し前まではMac App Storeからも購入できたのですが、現在は[こちら](https://www.sketchapp.com)から購入する必要があります。

# 複数サイズの設定方法
Artboardを作成します。
※サイズはAppStore公開用のアイコンサイズ1024×1024にしています。
<img width="964" alt="スクリーンショット 2015-12-12 9.30.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/1177d186-f867-c8f0-ec5e-e20527e18527.png">

右下の＋より出力時のサイズを設定します。
![Artboard 1_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/8769b73c-8cb5-4398-030b-267fe801780c.png)

あとは絵を描いて出力するだけです。
Sketchの良いところは作ったものをテンプレート化して再利用することができます。
iOSアイコン作成用のテンプレートを用意しておけば、一瞬で複数サイズのアイコンができるわけです。
やり方についてはあとで説明します。

## 出力時のサイズの設定方法
○xとするとArtboardのサイズ×○のサイズで出力します。
○wとするとArtboardのサイズに関係なく横幅が○になります。
高さは指定した横幅との比率で決まります。 ※高さ = (Artboardの横幅 / ○) * Artboardの高さ

ex)Artboard 100(横)×200(高さ)の場合

- 1x → 100×200で出力
- 2x → 200×400で出力
- 50w → 50×100で出力

## iOS8からiOS9.2を対象にする場合の必要なサイズ
下記サイズを設定しておけば十分です。
複数のサイズを設定したSketchファイルを[GitHub](https://github.com/hideyukitone/SketchTemplate_iOSAppIcon)に置いています。
![Artboard 9.png](https://qiita-image-store.s3.amazonaws.com/0/89206/4d47e524-e3f6-906c-4160-2f9ec12c65e8.png)


# 出力する
例としてお団子の絵を描いてみました。

右下のExport ○○○を押します。
![Artboard 3_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/d20f6c58-c904-246f-6967-92a4baadd22c.png)

出力先を選んで右下のExportを押します。
![Artboard 4_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/e90204a7-5fb2-1d81-08c4-651f2c9d4963.png)

複数サイズのアイコンが出力されました。
<img width="631" alt="スクリーンショット 2015-12-12 10.52.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/7ff4e3e1-aa05-708e-e2a5-65cc83595b5e.png">
dango-29XXX.png：iOSアイコン用(Assets.xcassetsに入れてください)
dango-40XXX.png：iOSアイコン用(Assets.xcassetsに入れてください)
dango-60XXX.png：iOSアイコン用(Assets.xcassetsに入れてください)
dango-76XXX.png：iOSアイコン用(Assets.xcassetsに入れてください)
dango-83.5XXX.png：iOSアイコン用(Assets.xcassetsに入れてください)

dango-1024.png：ブログなどで使用
dango-1024.jpg：AppStore公開用アイコン
　　　　　　　　※なぜjpgかはAppStore公開用アイコンについてに記載しています

# AppStore公開用アイコンについて
AppStore公開用のアイコンはアルファチャンネル(透明度)を削除する必要があります。
pngで出力してアルファチャンネルを削除する必要があるのですが、めんどくさいです。
これを解決するためにjpgで出力する方法があります。
jpgにはアルファチャンネルが含まれないため、手順を1つ省くことができます。
そのため、先ほど出力したdango-1024.jpgはjpgとしています。

# テンプレートを登録する
FileのSave as Template...を選びます。
![Artboard 5_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/ba0f09e4-c583-4e2c-7741-20235dc0bddd.png)

名前をつけてOKを押します。
これで完了です。
![Artboard 6_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/0809e97c-3856-32fd-c772-8a5b74f520ce.png)

さきほど追加したiOS App Icon +が追加されました。
<img width="395" alt="スクリーンショット 2015-12-12 16.28.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/2d77bc90-f18a-5cc1-d555-b2be8dcc6f01.png">

## テンプレートを使用する
さきほど追加したiOS App Icon +を選択します。
![Artboard 7__.png](https://qiita-image-store.s3.amazonaws.com/0/89206/02deaec1-f9c8-a574-b58f-e8aada936dbf.png)

するとテンプレートから引用されました。
<img width="1223" alt="スクリーンショット 2015-12-12 16.46.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/b9638538-bcc0-06bb-97ad-93399d95dddf.png">

## 追加したテンプレートを編集するには
Reveal in Finderを選択して追加したテンプレートの保存先を表示します。
![Artboard 7_.png](https://qiita-image-store.s3.amazonaws.com/0/89206/685f2738-89dc-f490-5831-2b5fd9b08c48.png)

ここのsketchファイルを編集することでテンプレートを編集できます。
<img width="617" alt="スクリーンショット 2015-12-12 16.36.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/89206/2364cdf8-8ebe-6291-2eb4-fcb197efcb8b.png">

## 最後に
他にもアプリ内で使うアイコン、AppStore公開用のスクリーンショットなどをテンプレート化しておくと便利かと思います。
上でも記載しましたが今回紹介したiOSアイコン用のテンプレートを[GitHub](https://github.com/hideyukitone/SketchTemplate_iOSAppIcon)に置いています。
みなさまの作業効率化のためにご自由にお使いください。

## 追記(2017/7/26)
GitHubに置いていたテンプレートを更新しました。