デザイナーと一緒にコラボして仕上げるアニメーション実装とショーケース紹介 @fumiyasac #iosdcrc #a

https://fortee.jp/iosdc-japan-2018/proposal/5a1d14e4-a4f1-4d38-9eb5-29064aab8ac2 社内で新規アプリを開発するぞ、そして今回はシンプルなUIの中にも気持ちの良いアニメーションを盛り込むぞ!という所から始まったプロジェクトにてUI開発を担当した際に、得た知見やデザイナーとの協業の際に留意した点、シンプルな中にも心地よいアクセントをつけるためのポイントになる実装やデザイナーとの協業の際に使用したツール、UI表現をする過程で検討したライブラリ等やその他の点についてもご紹介できればと思います。
2
にわタコ @niwatako

iOSDC 2018 Reject Conference days2 #iosdcrc Live配信URLです! #a youtu.be/u5Yj_sFsKDQ #b youtu.be/Mkk_1Ll1ijg #c youtu.be/mavniHTe_Xw

2018-09-20 19:21:34
拡大
拡大
拡大
Shingo Takagi @zizi4n5

@fumiyasac さんのトーク初めて聞くので楽しみ! #iosdcrc #a

2018-09-20 19:26:32
koooootake @koooootake

デザイナーさんとの良い共同作業 #iosdcrc #a

2018-09-20 19:27:40
でーきち @de_kichi

デザイナーとの感覚的なチェック #iosdcrc #a

2018-09-20 19:30:56
Shion@アプリ実装者(仮) @shion_engineer

「アニメーションやUI の実装は、デザイナーさんとのコミュニケーションが大事!」 話を聞いているとすごく細かな調整が必要なアニメーションだ👀 #iosdcrc #a

2018-09-20 19:32:44
でーきち @de_kichi

アニメーションの話をすると擬音が多くなるわかりみ #iosdcrc #a

2018-09-20 19:34:24
星野恵瑠#今日も1日フレンズ㌠ @lovee

押した瞬間の縮むアニメーションや離した時の戻るアニメーションはよく使う #a #iosdcrc

2018-09-20 19:34:51
Shingo Takagi @zizi4n5

APNG(AnimationPNG)っていうのがあるのか。 GIFよりもいろいろメリットあるみたい。 ファイルサイズとかはどうなんだろう? #iosdcrc #a

2018-09-20 19:38:30
やまだ @m_yamada0617

#iosdcrc #a コーディングだと実装・調整が難しい表現のデザインは素材(APNG)に頼る場合もある。が、デザイナーさんの工数が大きくなることの考慮、かつエンジニア側もアニメーション素材を扱うためのライブラリ選定をしておくとスムーズにことが進む

2018-09-20 19:40:00
Shingo Takagi @zizi4n5

APNGKitっていうライブラリもあるのね! と思ったら見たことあった、このライブラリw github.com/onevcat/APNGKit #iosdcrc #a

2018-09-20 19:40:01
星野恵瑠#今日も1日フレンズ㌠ @lovee

カラーバリエーションは結構しんどいよね #a #iosdcrc

2018-09-20 19:41:09
Shion@アプリ実装者(仮) @shion_engineer

APNG って、下記を使えばAndroid でも使えそう👀 上手くいけばリソースの作り分けしなく楽そう。   github.com/sahasbhop/apng… #iosdcrc #a

2018-09-20 19:43:31
koooootake @koooootake

デザイナーの素敵なデザインや世界をMAXパワーまで引き出すこと! #iosdcrc #a

2018-09-20 19:46:10
Shion@アプリ実装者(仮) @shion_engineer

デザイナーさんの力を最大限に引き出すエンジニア、カッコイイ😆 #iosdcrc #a

2018-09-20 19:46:29
でーきち @de_kichi

Swift4にも対応したUI系のライブラリを活用して面白い動きを入れてみたサンプル実装まとめ qiita.com/fumiyasac@gith… #iosdcrc #a

2018-09-20 19:47:36
shogo.yamada @yshogo87

ざっくりイメージはProtでやってそのあと口頭で微調整するのはいいなー #iosdcrc #a

2018-09-20 19:52:07
やまだ @m_yamada0617

Q.動きのあるアニメーションのイメージは、具体的にツールを使ってデザイナーさんに作ってもらうのか、エンジニアが口頭で聞き取って実際に実装してみて認識を合わせていくのか A.0→1フェーズでは前者、それ以降の微調整は後者でやっていくことが多かった #iosdcrc #a

2018-09-20 19:52:25
Mitsuyoshi @vespid

知らなかったな アニメーションからプロトタイプまでできるのかな proto.io #iosdcrc #a

2018-09-20 19:54:58
fumiyasac@iOSアプリ開発UI実装であると嬉しいレシピブックシリーズ販売中です〜📖 @fumiyasac

久々にものすごい緊張したのでお聞き取り辛い部分もあったかと思いますが、皆様ありがとうございました‼️ #iOSDCRC #a

2018-09-20 19:58:07