Adobe XDでiOSアプリのスプラッシュ画像を一括書き出しする

# Adobe XDとは
<img width="1328" alt="スクリーンショット 2019-04-11 15.34.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/c1c1df2b-400b-901b-be9d-0678b8de29a5.png">

Adobe XDはAdobeからリリースされているプロトタイピングツールです。
Adobeアカウントを作成(無料)すれば誰でも使うことができます。（無料！！！)
登録は[こちら](https://www.adobe.com/jp/products/xd.html)から。

以前は[Skecth](https://www.sketch.com/)を使用してワイヤフレームの作成などをしていましたが、買い切り型からサブスクリプション型に移行されてしまい、出費も気になっていたところ、試しに使ってみたらすごく使いやすかったので、こっちに乗り換えました。

デザイナーでなくても直感的にワイヤフレームを作成できるので、エンジニアにもおすすめです。
自分は職種上プロジェクトマネジャーになりますが、お客さんの要望からXDでワイヤフレームを作成し、要件に落とし込んでからデザイナーへXDのファイルをそのまま共有しているので、要件定義からデザイン作成の工程がスムーズに出来ます。実装指示書や設計書への落とし込みも楽チンです。

# 今回やること
XDはプロトタイピングツールとして非常に優秀ですが、ちょっとした画像の作成なども簡単に出来てしまうので、今回は用意するのが以外に面倒なアプリのスプラッシュ画像(起動画像)の作成をXDでやってみたいと思います。

最近ではStory boardでスプラッシュ画像を設定するプロジェクトもありますが、まだImages.xcassetsでデバイス毎に画像を設定しているプロジェクトもあるかと思いますので、今回は後者向けの内容の記事になります。

# 必要なスプラッシュ画像
|デバイス|サイズ|倍率|
|----|----|----|
|iPhone Xs Max|1242 x 2688px|3x|
|iPhone Xr|828 x 1792px|2x|
|iPhone X/iPhone Xs|1125 x 2436px|3x|
|iPhone 6/7/8 Plus|1242 x 2208px|3x|
|iPhone 6/7/8|750 x 1334px|2x|
|iPhone 5/SE|640 x 1136px|2x|
|iPhone 4/4S|640 x 960px|2x|

# プロジェクトの作成
まずはXDをインストールして、XDアプリを起動し、新規プロジェクトを作成します。
適当に上メニューの`iPhone X/XS`を選択します。
<img width="1136" alt="スクリーンショット 2019-04-11 15.59.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/fb1f9e26-dfe3-1755-67bb-8af0d81ece50.png">

新規プロジェクトが作成され、iPhone X/XSと書かれたアートボードが表示されたと思います。
<img width="1340" alt="スクリーンショット 2019-04-11 16.00.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/a106b9b1-a0ec-9540-504c-c7daf59a4359.png">

# スプラッシュを作成
作成されたアートボードに適当にオブジェクトを配置して画面を作成していきます。(適当に配置しました)
<img width="1340" alt="スクリーンショット 2019-04-11 16.08.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/90c130e6-76b8-8908-9bd2-ee3923719982.png">

# デバイスサイズ毎にアートボードを作成
iPhone X/XSのスプラッシュ画像が出来たので、他のディスプレイサイズのアートボードも作成して、スプラッシュ画像を作成します。
<img width="1340" alt="スクリーンショット 2019-04-11 16.15.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/dd4e2aff-1494-1c6c-8456-fa007fcaceb0.png">

残念ながら、iPhone 4/4S用のスクリーンはXDには用意されていないので、適用なアートボードを追加して、サイズを変更します。
<img width="1340" alt="スクリーンショット 2019-04-11 16.18.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/e38699c9-c563-1f46-3179-0e09669dbcde.png">

アートボードの名前はダブルクリックで変更可能です。

追加したアートボードにも同様にオブジェクトを配置していきます。
コピペなどでもいけますが、シンボル化などを行うとより効率的に配置することが出来ます。(今回は説明を割愛します。)
オブジェクトのサイズなどはデバイス毎に見やすいように調整してください。
<img width="1340" alt="スクリーンショット 2019-04-11 16.24.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/e7095e8e-2060-f0ed-8870-38f8383d2f3a.png">

# 画像を書き出す
スプラッシュの作成が終わったら、画像を書き出します。
メニューから`ファイル > 書き出し > すべてのアートボード`を選択
<img width="499" alt="スクリーンショット 2019-04-11 16.26.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/089812ec-d30b-2a24-04fc-4f17230c6ffc.png">

<img width="1340" alt="スクリーンショット 2019-04-11 16.28.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/ccb738c9-35fd-b2ec-3ca7-8a76003af227.png">

保存先は適当に選択してください。
書き出し先に`iOS`を選択し、デザイン倍率は`1x`を選択してください。
設定が終わったら`すべてのアードボードを書き出し`を選択してください。

<img width="882" alt="スクリーンショット 2019-04-11 16.30.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/31823/9b3036c4-009b-9afa-b699-cae355d7f1e8.png">
指定したフォルダにすべてのアートボードの1x~3xサイズの画像が書き出されました。
あとはXcodeに設定するなりなんなりすればOKです！

# おわりに
本来のXDの使い方とは異なりますが、こんなことも簡単に出来てしまうくらいXDは使いやすいです。
こういう形で管理できれば新しいデバイスが登場した際や、デザインを変更したいときに書き出す手間などが少なくできるのでいいのではないかなと思いました。

XDはプロトタイプの作成にとても優れているので、興味を持った方はぜひ使ってみていただければと思います。
職場でパワーポイントなどで一所懸命ワイヤーを作ってる人を見かけたらXDを勧めていますw

# 参考資料
* [Adobe XD](https://www.adobe.com/jp/products/xd.html)