iOSDC Reject Conference Day2での登壇資料になります。 https://iosdc-reject-conference.connpass.com/event/93315/ 以下、iOSDCで提出したCfPの本文になります。 社内で新規アプリを開発するぞ、そして今回はシンプルなUIの中にも気持ちの良いアニメーションを盛り込むぞ！という所から始まったプロジェクトにてUI開発を担当した際に、得た知見やデザイナーとの協業の際に留意した点、シンプルな中にも心地よいアクセントをつけるためのポイントになる実装やデザイナーとの協業の際に使用したツール、UI表現をする過程で検討したライブラリ等やその他の点についてもご紹介できればと思います。

1. デザイナーと一緒にコラボして仕上げる
アニメーション実装とショーケース紹介
iOS Reject Conference Day2 @ DeNA様
2018 / 09 / 20
Fumiya Sakai

2. 自己紹介
・酒井 文也 （Fumiya Sakai）
・ever sense. inc エンジニア
・Designer → ServerSide Engineer → AppDeveloper
Accounts
・Facebook: https://www.facebook.com/fumiya.sakai.37
・Twitter: https://twitter.com/fumiyasac
・Github: https://github.com/fumiyasac
・Qiita: https://qiita.com/fumiyasac@github
Who are you?
Library (Personal)
Products (ever sense. inc)
New！
現在はVer0.2.0
上記新規アプリの開発や他アプリの運用全般など
Defense !

3. このトピックスを選んだ理由
良いプロダクトを作っていくにはデザイナーとの「良い共同作業」が不可欠
動機1. 自分がデザイナーであった時代に苦労した経験
動機2. アニメーションや手触り感の検証や照査の協力
動機3. 共同作業をしやすくするポイントはどこにあるか
共同作業やコラボレーションをして良いものを作るための大切(と思われる)考え方
・この視点が大事なんだ！と思えた記事
http://www.t1park.com/enjoy-20154382912339865281/8
エンジニアは設計・実装部分がメインの仕
事ではあるものの、検証時のずれや違和感
をフィードバックで頂く場合がある。その部
分の原因究明や微調整が不可欠に！
「良いものを作りたい」を叶えるために：
※ 技術系の記事ではないけど感銘を受けた記事（剣道の記事）
画面UI・遷移・アニメーション・操作した際
の手触り感に関するチェックに関してはデ
ザイナーの協力の有無がポイントになる。

4. 今回の事例としてご紹介するアプリ「michiru」について
2018年3月1日にver1.0公開から早いもので半年が経ちました！（現在はver1.16）
女性のための健康管理アプリになります！
https://eversense.co.jp/product/michiru
※ 現在はiOS版のみになります。
このアプリに関する詳しい説明はこちら（ぜひDLを😘 ）
1. シンプルに使うことができるUI
2. シンプルな中にも気持ち良い表現・演出
3. 入力に関する部分へ細かな配慮
4. 機能とUIの調和とバランス
アプリ内でのこだわりポイント
特にアニメーションやUI実装の部分は、デザイ
ナーとのイメージ合わせが大切になる部分。
エンジニアだけでは詰め切れない部分
仕様通りに動くことはもちろんだけど、イメージと
の漏れやずれというも感覚的なチェックも必要。

5. 今回お話することのアジェンダ
今回はコードに関する説明よりも一緒に作業する上でのポイントを中心にお話します
Chapter1：�UI表現の実装部分におけるポイントとデザイナーとの細部の調整
Chapter2：�画面デザインから読み解く情報を元に実装を組み立てていく
Chapter3：�より良く仕事ができるようにするための個人的な心がけ
デザイナー エンジニア
× =
この場をお借りしまして：
社内そしてご協力して頂きました皆様
本当にありがとうございました😊

6. // 体調入力画面で体調情報を入力するボタン用のViewへ拡大縮小アニメーションを付与する
static func bounceButtonBackgroundViewForInputHealthConditions(targetView: UIView, duration: TimeInterval) {
// 縮小するパーセントと開始を遅延する秒数
let shrinkingScale: CGFloat = 0.96
let delayTime: TimeInterval = 0.00
// ボタン用のViewが縮むようにバウンドするアニメーションを付与する
UIView.animateKeyframes(withDuration: duration, delay: delayTime, options: [.autoreverse], animations: {
UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 1.0, animations: {
targetView.transform = CGAffineTransform(scaleX: shrinkingScale, y: shrinkingScale)
})
UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 1.0, animations: {
targetView.transform = CGAffineTransform.identity
})
})
}
UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル1: UIView.animateKeyframes()の活用例
ボタンの動き: 「押下時バウンド + 背景色クロスフェード」
①
②
① ②ボタン縮小 元に戻る
異なるアニメーションを連鎖した形に実行する
ボタンの大きさや配色はもちろんアニメーションのイメージやボタン押下時の体感はデザイナーと一緒に検証する。
ボタンを押下した瞬間にほのかなバウンドと文字と背景色の変化を柔らかく表現

7. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル2: 音楽再生アプリ「Spotify」にあるシャッフルプレイボタンの様な動き
アニメーションを前提とする部分のUI実装に関しては、部品となる要素の構造や処理との関連性に気をつけること。
押下時 平常時
参考アプリ: Spotify
透明なUIButton
背景付UIView
// ボタン用の初期設定（buttonWrappedViewの中にbuttonを上下左右0の制約で配置）
@IBOutlet weak private var buttonWrappedView: UIView!
@IBOutlet weak private var button: UIButton!
// 画像についてはUIViewの背景として設定すると微調整がしやすいと思います。
buttonWrappedView.backgroundColor = UIColor(patternImage: UIImage(named: "xxx")!)
CGAffineTransform + UIView.animate()の組み合わせ
（ボタン押下時にバウンド）
下準備で行うこと：
ボタンの動き: 「押したら縮む + 離すと戻る」
① ボタン矩形用のViewを用意する
② その中にデザイン要素を当てる

8. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル2: 音楽再生アプリ「Spotify」にあるシャッフルプレイボタンの様な動き
アニメーションにおいては秒数の微調整に加え、withDuration・option・拡大縮小比にも気を配りながら実装する。
// ボタンの初期化処理�TouchUp・TouchDownの時のイベントを設定する（完了時の処理はTouchUp側）
private func setupButton() {
// TouchUp・TouchDownの時のイベントを設定する（完了時の具体的な処理はTouchUp側で設定すること）
button.addTarget(self, action: #selector(self.onDownButton(sender:)), for: .touchDown)
button.addTarget(self, action: #selector(self.onUpButton(sender:)), for: [.touchUpInside, .touchUpOutside])
}
// 画像の伸縮アニメーションはアファイン変換を使って行う
@objc private func onDownButton(sender: UIButton) {
UIView.animate(withDuration: 0.05, animations: {
self.buttonWrappedView.transform = CGAffineTransform(scaleX: 0.96, y: 0.96)
}, completion: nil)
}
@objc private func onUpButton(sender: UIButton) {
UIView.animate(withDuration: 0.05, animations: {
self.buttonWrappedView.transform = CGAffineTransform(scaleX: 1, y: 1)
}, completion: { finished in /* TODO: ボタンタップ時の実行処理(データ登録等はこのタイミングで実装する) */�})
}
ボタンそのものではなく、ボタン要素を覆ってい
るUIViewに対してアニメーションを適用する。
この実装におけるポイント :
ボタン押下時のアクションを、①ボタン
を押した / ②ボタンを離したに分離。
この実装におけるポイント :

9. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル3: 進む・戻る部分の動きをCoreAnimationで実現する
表示データが変化するような部分に対して意図的にアニメーションを差し込むことによって動きをわかりやすくする
動きを出すために表示変化のタイミングでCoreAnimationを利用して見かけ上の動きを作成
記録データ表示用部品を配置したView
データ表示用部品の親View（マスク）
戻る & 進むボタン
日付表示ラベル & 進む・戻るボタン
入力用ポップアップ表示部分の簡易図解
スクロールなしのページ送りで日付や入力項目の戻る・進む動きを表現する

10. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル3: 進む・戻る部分の動きをCoreAnimationで実現する
Viewの階層構造とCoreAnimationを組み合わせた形のUI表現を切り替えのポイントの部分で上手に差し込む
@IBAction func previousDateButtonTapped(_ sender: Any) {
setSelectedDate()
setWeightTextField()
animateWeightView(isPrevious: true)
}
@IBAction func nextDateButtonTapped(_ sender: Any) {
� setSelectedDate()
setWeightTextField()
animateWeightView(isPrevious: false)
}
private func animateWeightView(isPrevious: Bool = true) {
// アニメーション対象のViewの親にあたるViewをマスクにする
inputWeightView.superview?.layer.masksToBounds = true
// アニメーションの設定を行う
let transition = CATransition()
transition.type = kCATransitionPush
transition.duration = 0.16
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
var key: String
if isPrevious {
transition.subtype = kCATransitionFromLeft
key = "previous"
} else {
transition.subtype = kCATransitionFromRight
key = "next"
}
inputWeightView.layer.removeAllAnimations()
inputWeightView.layer.add(transition, forKey: key)
}
CoreAnimation対象要素の親Viewを
マスクにするのでView階層を意識する。
この実装におけるポイント :
ボタン押下時の表示データと日付変更処理のタイ
ミングでCoreAnimationを実行する。
この実装におけるポイント :
(例) ボタンを押下して表示を変更する部分

11. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル4: デザイン素材を利用したアニメーション表現の実装
コードのみで実装することがどうしても難しい場合についてはデザイン素材のアニメーションを利用して解決を図る
入力前の状態
入力後の状態
参考資料：
その他アニメーションのアイデア集
Lottie Animation GIF
.animationImages
用途と実装に
合わせて選ぶ
AnimationGIF形式に取って代わる次世
代の新しい画像形式（Mozillaが提唱）
今回ではAPNG形式を採用
適用するデザイン素材自体がアニメー
ションする場合は、リピートの有無や開
始タイミングの処理との調和がポイント
今回AnimationPNGを使った理由:
① AnimationGIFのジャギー問題
② AnimationGIFの色数制限
③ AnimationGIFのシャドウ問題

12. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル4: デザイン素材を利用したアニメーション表現
このような実装の場合は、特にお互いのコラボレーションが重要なのでデザイナーの仕事や作成プロセスの理解を
デザイナー エンジニア
役割：
APNGファイル作成＆レイアウト
使用するツール類
AfterEffect・Protto.io・XD等
役割：
デザインの適用とアニメーション実装
APNGに関する部分はAPNGKitを活用
https://github.com/onevcat/APNGKit
デザイン素材を利用したアニメーションの場合はデザイナーの工数負担が大きくなりやすいのでその点を考慮したスケジュールを。
この実装におけるポイント :
エンジニア側ではアニメーション素材を利用するための技術調査や取り扱うためのライブラリ選択を事前にしておくことを忘れずに。
実際の工数把握のために、アニメーション素材を作成する手順をヒアリングしたり自分自身でも肌感を掴んでおくようにする。

13. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル5: アプリ実装における負荷や体感部分のチェック
機能の実現に加えてアプリの体感や操作感を含めたUI/UX部分に関するフィードバックと改善はこまめにお互いに
1画面でのデータ表示に必要なデータが
多くなりやすい部分かつ、画面に表示する
ためのView要素が多くなりやすい。
グラフやカレンダーは特に重要
※ このような素敵な画面を作成するにあたり協力して頂いた方に感謝です😍
実際にユーザーの登録データとつなぎ
合わせた際にデータとの連動部分に起
因してパフォーマンスが低下した…。
全体的なパフォーマンスは画面構
築時になかなか気づきにくい部分
デザイナー
エンジニア
Checkする部分
・全体的なUI / UX
・体感や操作感
Fixする部分
・微調整や漏れ対応
・パフォーマンス調整
検証サイクルを早めに回す

14. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル6: デザイナー発でアプリ内に導入した機能例�※アニメーション以外の部分
5色のカラーバリエーション選択についても、部品数が多く適用漏れや実装漏れ防止の面で協力が不可欠な部分
カラーバリエーション定義に関するプロトコルを作成し、現在選択中のカラーバリ
エーションによってそれぞれの画面で利用可能な形にすることで、使用する画
像名の管理とそれぞれの部品の配色を適用できるようにした。
そのまま愚直に5パターン分の実装を実現しようとすると
後々の管理や画面が増えてしまうと把握が難しくなる部分
可愛らしい5色のカラーバリエーション選択
アプリを自分の好きな配色に変更できる機能（一番人気はピンク）
このアプリのデザインにおける基本構成はシンプルではあるが、カラーバリエー
ションの変更によって配色変更が必要になる部分がそれぞれの画面にある

15. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
サンプル7: リアルでも利用できる機能例�※アニメーション以外の部分
細かな線の太さやグラフや罫線部分等の視認性をチェックが必要になる部分。実現を早くして検証の時間を確保
既存の実装を応用して、A4でどの端末で
もだいたい同じ形になるように実際に印刷
したものをデザイナーと一緒に調整する。
アプリから紙へ印刷する部分なので
機能だけでなく実物の完成度も重要
基礎体温表の印刷機能
白黒・カラー印刷時それぞれの配慮
紙に印刷したグラフに氏名や備考を記
入して病院に提出できる形式にする。

16. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
補足: アニメーション実装において参考としたリンク等(1)
・Core Animationの基礎的なところ:
http://obc-fight.blogspot.jp/2012/10/Core-Animation-fundamental.html
・iOSアプリ開発でアニメーションするなら押さえておきたい基礎
https://qiita.com/hachinobu/items/57d4c305c907805b4a53
・Swiftでアニメーションの連続実行をしてみる話
https://qiita.com/lovee/items/460cbb02a345e0ff7910
・Swiftでアニメーション[CoreAnimation編]
https://qiita.com/h_nagami/items/0ad8f8ef5bc23de21e1e
・Core Animation 中級編
https://qiita.com/inamiy/items/bdc0eb403852178c4ea7
・心地よいアニメーションを求めて
http://techlife.cookpad.com/entry/2015/10/02/180247

17. UI表現の実装部分におけるポイントとデザイナーとの細部の調整
補足: アニメーション実装において参考としたリンク等(2)
・A look at UIView Animation Curves (Part 1 ~ Part 3)
https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-1-191d9e6de0ab
https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-2-b68412e441bf
https://medium.com/@RobertGummesson/a-look-at-uiview-animation-curves-part-3-edde651b6a7a
Appendix: APNGに関する参考資料
・【つくってみた！】APNGで高解像度アニメーション！
http://www.nowhere.co.jp/blog/archives/20160502-170036.html
・GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう
https://ics.media/entry/2441

18. 画面デザインから読み解く情報を元に実装を組み立てていく
AdobeXDを使ってデザイナー・エンジニア間のコミュニケーションをより円滑に
1. デザイナーがデザイン作成
機能に必要な画面デザイン
3. エンジニア側での開発
画面および機能の開発
2. デザインOKが出たらデザインスペックを共有
画面遷移の関係性や配色・マージンなどの情報
この場合においてはエンジニアとデザイナーの架け橋となる部分はデザインスペック。この情報を元に進めていく

19. 画面デザインから読み解く情報から実装を組み立てていく
AdobeXDとその関連ツールについてはコミュニケーションを促進する機能が多い
ポイントとなる部分：
1. 想定している画面遷移の把握とはじめ〜終わりまでの一連の流れの確認
全体的な画面遷移の構成に加えて、機能とそれに伴う画面との整合性が取れている
かのチェックをお互いにできる形になる。
2. StoryboardとXibベースの開発や画面開発における相性の良さ
3. デザイナー × エンジニア間以外でも伝達が容易
プロダクト開発に携わるチームメンバー全員が、導入する機能についての情報が見
えやすく、かつ画面遷移と一緒なのでイメージを持ちやすい形にできる。×
ただ単に共有するためのツールとしてではなく、この状態から更に良くすることができるかを思案しながら進める
画面の構造だけではなく配色やフォントの級数・パーツ間のマージン等の値が表示さ
れるのでInterfaceBuilderを活用した開発とも相性が良かった。

20. 画面デザインから読み解く情報から実装を組み立てていく
1枚の画面デザインから読み解ける様々なインフォメーションについて
一緒に開発をするエンジニアと共同作業がしや
すい形でViewに関する部品を切り出しておく。
画面の実装はStoryboardを基本は使っていくが、細かすぎず粗すぎずな部品粒度に画面構築時に切り出す考慮
小さい端末への考慮
やキーボードに注意

21. より良く仕事ができるようにするための個人的な心がけ
デザイン業務を（ほんの数年）経験した自分がデザイナーの為にできることは？
ユーザーが抱えている問題をアプリを以って解消したい。その想いは、手段は違うかもしれないが同じ方向にある！
※注意：�こちらの見解はあくまで私（@fumiyasac）の私的な意見になりますので何卒ご容赦ください。
My Misson: デザイナーの素敵なデザインや世界をMAXパワーまで引き出すこと！
ユーザーが喜ぶ為の
アイデアの創出
このアプリで実現する
理想の状態や世界
アプリで実現したい状
態や世界の実現
自分
デザイナー エンジニア ユーザーが喜ぶ為の
機能の開発

22. より良く仕事ができるようにするための個人的な心がけ
画面への本実装を行う前には、自分のノートで考えや実装に関する情報を整理
手法は個々人で異なれどもアイデアや仕様を整理するための時間を捻出しいきなり無計画に実装する状態を防ぐ
この部分での私のこだわり：
① 割と綺麗に書く（人に見せる想定）
② 自分の言葉・図解・ト書き・色分け
新しい画面を作る場合：
大まかなView配置を頂いたデザイ
ンから読み取って設計図を起こす。
内部ロジックを作る場合：
変わりうる値や条件、アプリ内に
データ等の想定を書きだす。
※疎かになっている時は注意

23. より良く仕事ができるようにするための個人的な心がけ
まずはざっくりした感じを把握するために雑に作り、それを元に本実装を行う
実際に開発するアプリへアニメーション表現を適用するため、先にハマりそうな部分や基本機能の概要を予習する
アプリとしての本実装前に「ある程度まとまって動くもの」を作る
画面遷移と最低限のデザイン考慮のみの状態の画面をまずは作
成し、その後デザイン調整や機能との調和性の担保を行う。
まずは
肌感を掴む
まずは実現手段
と画面設計を固める
①画面実装
②遷移実装
③機能実装
④調整対応
特に①~②の工程
を早めにする！

24. （補足）エンジニアのボスにもヒアリングしてみた
職務毎の組織編成やプロダクトにおけるチームのあり方にもポイントがあるのでは？
重きを置くのは、機能別チーム < プロダクト別チーム
※ デザイナーはコードを書かない
デザインに集中して欲しいという思いと負担を減らしたい想い
エンジニア・デザイナー・メディアプロデューサー
組織構造上においては、職種の区分は存在する
より更に大事 Product毎のチーム編成
より重きを置くのはこちら
結果
コンパクトで素早い動きが可能
主体的にプロダクトに向き合う形
エンジニア
デザイナー
メディアプロデューサー
マーケティング
※ 施策とセットになっているデザインレビュー
施策が価値定義とのギャップないかをはじめUXの観点を見る
エンジニアはできる限りのサポートとバックアップ
施策の工数見積
リリース予定の組立
すぐに集まって話す
ための機会設定
コンテキストをメンバー
が理解している状態
技術選定や実現方
針の決定と調査
プロダクト

25. まとめ
お互いに良い仕事ができるようにするための工夫をできるところから少しずつ
参考資料：�その他デザイナーとの作業を円滑にする上で参考になりそうな資料集
・�仕様通りの実装はもちろん「画面UI・遷移・アニメーション・操作感」はデザイナーのフィードバックからの発展を惜しまずに
・ アニメーションや画面を設計/作成時は予習をまず。画面構築時には適度な粒度での部品化等の工夫と追加の余地を。
・デザイナーとエンジニアの垣根を超えたフロントエンド開発
https://speakerdeck.com/711fumi/dezainatoenziniafalseyuan-gen-wochao-etahurontoendokai-fa
・ 頂いたデザインから読み取るものは「実装の道のり」に加えて「デザインの意図」をという視点を持つと良い
・デザイナーとエンジニアを両方経験したわたしが思うこと
https://speakerdeck.com/nanammeon/dezainatoenziniawoliang-fang-jing-yan-sitawatasigasi-ukoto
・デザイナーとうまく協働する方法
https://speakerdeck.com/yhassy/dezainatoumakuxie-dong-surufang-fa
・ AdobeXD等をはじめデザインツールの初歩的な操作やコミュニケーションのための心がけがあると理解が深まる

26. 宣伝�10/8: 技術書典5でUI実装本を出展します。
この本の概要：
「少しの工夫とアイデアでできる表現集」として、これまでサンプル開発や実務の中で
培ったノウハウ等から、UI実装いくつかのまとまったサンプル実装を例にUI構築をする
上で重要な実装ポイントやアイデアを紹介していく形式にしてみました。
本書に掲載しているサンプルのGithubリポジトリ:
また、書籍の販売に先立ちまして関連URLにこの中で解説を行なっているサンプルコー
ドのGithubリポジトリも公開しておりますので、是非実際のコードとご一緒に活用して
頂ければと思います。
https://github.com/fumiyasac/ios_ui_recipe_showcase
当日もしお時間があれば是非ブースにお立ち寄り頂けますと嬉しい限りです😄
※ サンプルコードについては先行公開しております。
場所は 【え14】 です

27. エバーセンスよりメッセージ
ninaruシリーズ・michiru等のサービスは絶賛開発・運用中！
https://eversense.co.jp/
やっていき！