Slide 1
Slide 1 text
Adobe XD・Zeplin・Xcode連携で、
iOSアプリのデザイン実装フロー効率化
2019/02/25
仙台 Adobe XD Meeting #3
Akira Shimizu / asmz
Slide 2
Slide 2 text
2
誰なのか？
● Akira Shimizu / asmz (@_asmz)
● https://asmz.beer/
● 株式会社ビデオマーケット 仙台オフィス
● iOSエンジニア
● 個人開発：IT勉強会検索アプリ「EVENTech」
○ https://eventech.asmz.beer/
Slide 3
Slide 3 text
今日話すこと
Slide 4
Slide 4 text
アプリ開発におけるデザイン実装フロー
デザイン設計 デザイン共有 デザイン実装
● デザイナーさんにてデザイン設計、そのデザインをエ
ンジニアへ共有し、エンジニアが実装
主にAdobe XDが活躍 本日お話しする範囲
Slide 5
Slide 5 text
デザイナー・エンジニア間の
アプリデザイン共有
Slide 6
Slide 6 text
デザインの共有・連携方法
● ちょっと前までは...
○ デザイン全体のイメージ画像・カンプ（PDFとかPNGとかJPGとか）
○ 各パーツ画像切り出し（PNGとかJPGとか）
○ カラーガイド・スタイルガイド（別ドキュメントで）
よろ〜 あいよ
SPEC
Slide 7
Slide 7 text
デザインの共有・連携方法
● 発生しうる問題
MarginとかFont
weightとか色味
とか...
思ってたんと
違う...
MarginとかFont
weightとか色味
とか...
なるほど、
わからん
Slide 8
Slide 8 text
デザインの共有・連携方法
● なぜなのか？
○ バラバラに共有された情報を組み合わせるコスト
○ レイアウトと各リソースの対応づけ見誤り
○ そもそもデザイン指示に漏れ
○ ：
→足りない部分は都合がいい方法で実装しがち
→結果、手戻り
Slide 9
Slide 9 text
Adobe XDの
デザインスペック
Slide 10
Slide 10 text
Adobe XDのデザインスペック
● XDで作成したデザイン
がそのまま指示書に！
デザイン・スタイル指示の箇所とその指示内容
が一目でわかる！
Slide 11
Slide 11 text
Adobe XDのデザインスペック
● スペックから直接画像
の書き出しが出来る！
その箇所に対応する画像ファイルを別途探す必
要がない！
Slide 12
Slide 12 text
Adobe XDのデザインスペック
● その他メリット
○ デザイン変更によるファイル差し替え不要
■ デザインスペックの更新だけで済む
○ 不明な点はデザインスペック上でコメント可
■ 不毛なメールのやりとりが不要
これだけでも充分な機能だが…
Slide 13
Slide 13 text
Adobe XD・Zeplin・Xcode
連携
Slide 14
Slide 14 text
Zeplinとは
● https://zeplin.io/
● デザインファイル共有ツール
○ XDのデザインスペック機能に特化したようなツール
● Web / デスクトップアプリで動作
● 各種デザイン作成ツールに対応
○ Sketch, Adobe XD CC, Figma, Adobe Photoshop CC
Slide 15
Slide 15 text
Xcodeとは
● Apple公式iPhone/iPadアプリ開発ツール
Slide 16
Slide 16 text
Xcodeとは
● グラフィカルに画面レイ
アウトを作成できる
「Inteface Builder」を内
包
Slide 17
Slide 17 text
連携方法（Adobe XD→Zeplin）
● デスクトップアプリをインストールするだけ！
これが増える
Slide 18
Slide 18 text
連携方法（Zeplin→Xcode）
● Zeplin Extension追加
○ https://extensions.zeplin.io/
Slide 19
Slide 19 text
デザイン指示書
● 概ねXDと同レベル
○ 画像書き出し
○ コメント機能
Slide 20
Slide 20 text
スタイルガイド作成
● 画面から必要なカラーやスタ
イルを追加することでスタイ
ルガイドが作れる
Slide 21
Slide 21 text
画像リソース連携
● Zeplinの画像リソースをそのままXcodeプロジェクトへ！
Slide 22
Slide 22 text
画像リソース連携
ファイルをダウンロード→zip解凍→Xcodeプロジェクトへコピー、
みたいな作業が不要！
Slide 23
Slide 23 text
カラーパレット連携
● カラーパレットもそのままXcodeプロジェクトへ！
Slide 24
Slide 24 text
カラーパレット連携
Slide 25
Slide 25 text
コード生成
● Swiftソースコードも自動的生成
Slide 26
Slide 26 text
POINT・TIPS
● アセット命名
○ カラー名やスタイル名はソースコードとしてそのまま利用されるため
「lowerCamelCase」で
○ 画像やカラーが何を意味しているのかを命名
■ ❌ 色：white, black 画像：leftTriangle, redCircle
■ ⭕ 色：primary, accent 画像：playButton, recordingButton
● iOSのベクター画像の扱い
○ PDF形式が利用可能
○ Retina用の@2x、@3xファイルが不要になる
Slide 27
Slide 27 text
デザイン実装フローが
どう変わるか
Slide 28
Slide 28 text
ちょっと前まで
画像差し替え
です〜
あいよ
・画像差し替え
→画像ファイル書き出し
→リネーム
→zip圧縮
→メール添付
→メール送信
・画像ダウンロード
→zip解凍
→Xcodeアセットに追加
Slide 29
Slide 29 text
XDデザインスペック共有
画像差し替え
です〜
あいよ
・画像ダウンロード
→zip解凍
→Xcodeアセットに追加
・アートボード更新
Slide 30
Slide 30 text
XD・Zeplin・Xcode連携
画像差し替え
です〜
あいよ
・アートボード更新 ・画像取り込み（半自動）
手作業がほとんど入らない
Slide 31
Slide 31 text
まとめ
Slide 32
Slide 32 text
デザイン共有の重要性
「漏れなく、ムダなく」の意識
● 「デザイナー」「エンジニア」という職種の異なる人同士の
やりとり
○ 技術・文化などの違いがあるので、漏れなく
● 手作業を極力減らし「仕組み化」
○ 人間誰しも間違えることはある
○ ここのコストはあまり工数換算されないのでムダなく
Slide 33
Slide 33 text
2019/02/25
仙台 Adobe XD Meeting #3
Akira Shimizu / asmz
Enjoy Creating！
Slide 34
Slide 34 text
34
[PR] 個人開発アプリのご紹介
● ITイベント・勉強会検索アプリ「EVENTech」
○ 実際のところはconnpassクライアント
○ https://eventech.asmz.beer/