Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
何故に私達(特に私)はアプリのアニメーションや

UI表現に魅了されるのか?

そして共存と向き合いを考える
iOSDC	Reject	Conference	Day1	@	DeNA
2019/09/17
Fumiya	Sakai
自己紹介
・Fumiya	Sakai
・Freelance	iOS	Engineer
アカウント:
・Twitter:	https://twitter.com/fumiyasac

・Facebook:	https://www.facebook...
技術書典7でiOSのUI実装本の続編を頒布します
少しの工夫で実現できるTIPS集 ライブラリ表現の活用集
様々なUIライブラリを利用したサンプル解説の書籍になります 場所は 【あ11C】 です
今回のアジェンダ
1.	iOSアプリ開発におけるアニメーションやUI表現はなぜ必要なのか?
アプリのUI実装に関連する表現での「僕が感じる魅力」の観点から
2.	アプリの見え方や使用感	/	触り心地という観点でのもたらす効果は?
3.	実装に至...
アニメーションやUI表現の必要性
例1.	画面遷移時に写真が浮き上がる	&	スクロール時のタイトル表示のアニメーション
画面遷移や切り替わりが完了したことを連続的に伝える
※UI実装であると嬉しいレシピブックに収録しているサンプルより引用してい...
アニメーションやUI表現の必要性
例2.	GlobalTabBar側の切り替えアニメーション
画面遷移や切り替わりが完了したことを連続的に伝える
※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用しています。
類似表現...
アニメーションやUI表現の必要性
例1.	入力フォームから紐解く機能としてのアニメーション
どこが変化したか	or	何が変化したかをより強く伝える役割
※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。
ユーザーが実...
アニメーションやUI表現の必要性
例1.	アニメーションでの工夫の余地がありそうな部分
どこが変化したか	or	何が変化したかをより強く伝える役割
※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。
CoreAnim...
アニメーションやUI表現の必要性
例2.	同じ画面内で中身の表示を切り替える処理をする場合のアニメーション
どこが変化したか	or	何が変化したかをより強く伝える役割
※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用...
アニメーションやUI表現の必要性
例2.	アニメーションでの工夫の余地がありそうな部分
どこが変化したか	or	何が変化したかをより強く伝える役割
※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用しています。
BTN...
普段使いのアプリの中に隠されているアニメーション
Appleが提供しているデフォルトのアプリにも多くのヒントがある
美しい表現の中にも「注意喚起」や「強調」の意図、前後画面との関係性や連続性を上手に伝える効果
見え方や使用感	/	触り心地という観点でのもたらす効果
アニメーションと触り心地を上手に利用したUIから紐解く
例1.	Tinder風なUI実装から見る動き
※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。
左右へ...
見え方や使用感	/	触り心地という観点でのもたらす効果
どのような意図でTinderのUIは生まれたのかを考察する
ユーザーがすぐに決めるために最適化されたUIという問いへの回答の1つ
https://cont-hub.com/blog/new...
見え方や使用感	/	触り心地という観点でのもたらす効果
小さなアニメーションを利用して機能と操作感を調和する
例2.	アプリ起動時のパスコードロック画面におけるUI実装から見る動き
https://qiita.com/fumiyasac@git...
見え方や使用感	/	触り心地という観点でのもたらす効果
パスコードロック画面を実装する際のポイントになり得る部分を考察する
あまり見られたくない情報を隠すための機能とさっと入力できるような体感を実現する
https://blog.ohako-i...
見え方や使用感	/	触り心地という観点でのもたらす効果
表示画面のスクロールと連動する形で多くのものを綺麗に見せる
例3.	メディアアプリの無限スクロール型タブから見る動き
https://qiita.com/fumiyasac@github/...
見え方や使用感	/	触り心地という観点でのもたらす効果
なぜ無限スクロール型タブ表示に憧れを抱くのかを考察する
限られたスペースの範囲内で効率よく情報を見せつつアニメーションで現在位置を演出する
https://app.codegrid.net...
実装に至るまでに考慮しておくべき点はどの部分か?
思い描くアニメーションのイメージを言葉にすると…
😣 	理解したいけど…どうしたらよいのだ… 😄 	なるほど!そういう感じですね!
言葉だけでは細部が伝わりにくい どのアプリの表現からヒントを得...
実装に至るまでに考慮しておくべき点はどの部分か?
Githubのリポジトリで気になる表現をクローンしているものを探る
例1.	AppStore
気になる表現を近いところまで実現している実際のサンプルを調べてみる
例2.	Safari
https...
実装に至るまでに考慮しておくべき点はどの部分か?
ベースとなる部分の挙動を再現する上で難しい部分を知っておく
例1.	AppStoreの動きをクローンしたサンプルを紐解いて見えた部分の紹介
extension StatusBarAnimatab...
extension EssayViewController: UICollectionViewDelegate, UICollectionViewDataSource {
・・・(途中省略)・・・
func collectionView(_ c...
実装に至るまでに考慮しておくべき点はどの部分か?
UI実装例を紹介している記事を参考に写経してみる
例.	海外サンプルで展開されているコードから理解を深めていく
様々なアプリ開発の実装事例や動かす上でのポイントが丁寧に解説されています
コードに落とし込む際にポイントとなるのはどこか?
サンプルコードを再実装しながら読み解いていく場合
例1.	コードや動きを検証	→	コメントを入れながらリファクタリングや再実装
リファクタリングの観点:
⭐ 	適切な命名の付け直し
⭐ 	メソッ...
コードに落とし込む際にポイントとなるのはどこか?
思い描いていたアプローチ方針と少しだけ異なっていた場合
例2.	UITableViewCell内のサムネイル位置をParallax表示する場合の実装例
セル側のメソッド:
⭐ 	AutoLayo...
コードに落とし込む際にポイントとなるのはどこか?
UI構築およびアニメーション表現の前段となる材料の整理
例3.	動きを構成するための画面展開図を書いてみる
StoryboardにおけるUI構造:
①	UINavigationBar
②	Ani...
コードに落とし込む際にポイントとなるのはどこか?
自分が編み出した以外の手法や知見にも目を向ける
例4.	類似した実装やより洗練された先人の方法との比較検討
https://blog.kishikawakatsumi.com/entry/201...
アプリにおける「触り心地」と「機能」との両立への心がけ
綺麗で目を惹きつける動きや機能をにも「盛り加減」に配慮する
一般的には「上品な食べ物」のイメージがあるものが、加減のミスでイメージを損なってしまう
例.	うな重をイメージしてみて下さい
盛...
本日のスライドで紹介した自作リポジトリ
こちらのリポジトリは随時更新と運用を定期的に行っております。
https://github.com/fumiyasac/ios_ui_recipe_showcase
リポジトリ: 少しの工夫で実現できるU...
参考資料集:	その1
実装ではなくUI/UX観点から「なぜそうする?」を考える際の参考資料
http://photoshopvip.net/107725
サイトやアプリの使い心地を改善!UIアニメーションを良くする実践テクニック、小技7個まとめ...
参考資料集:	その2
アプリの実例から紐解いたアニメーションやUI事例に関する参考資料
https://note.mu/marina1017/n/n7cbacc65b839
Appleのアニメーションはなぜ美しいか考える
https://bit...
タイトルの問いとまとめ
1.	機能と体感が調和できた体験は強く残る。	→	参考にしたい	/	真似したいに感情にもつながる。
僕はiOSアプリ開発で「なぜに僕はUI表現」が好きなんだろう…???
2.	体験や感情に響く表現を見出すための思考錯誤。...
Thank	you	for	listening	!
紹介しきれなかった実装の詳細については、是非ともコード等をご覧頂けましたら幸いです😆
おすすめのライブラリや面白い表現を実現したコードがあったら是非教えてください🎤
Upcoming SlideShare
Loading in …5
×

何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える

451 views

Published on

iOSDC Reject Conference Day1の登壇資料になります。

私達が普段からよく利用しているアプリや平素での開発を通じて、アニメーションやユーザーインタラクションを利用した表現やUI実装に向き合う機会は、どのような局面においてもあるかと思います。

今回の発表では下記5つのトピック

1. iOSアプリ開発におけるアニメーションやUI表現はなぜ必要なのか?
2. アプリの見え方や使用感 / 触り心地という観点でのもたらす効果は?
3. 実装に至るまでに考慮しておくべき点はどの部分か?
4. コードに落とし込む際にポイントとなるのはどこか?
5. アプリにおける「触り心地」と「機能」との両立をいかにバランスを取るか?

という着眼点から、サンプルコードやアプリ事例から考察したものや考えを、お話倒していければと思います。

そして皆様の平素の開発において、豊かなUI表現を実装していくためのアイデアやヒントにほんの少しでもなれば嬉しく思います。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える

  1. 1. 何故に私達(特に私)はアプリのアニメーションや UI表現に魅了されるのか? そして共存と向き合いを考える iOSDC Reject Conference Day1 @ DeNA 2019/09/17 Fumiya Sakai
  2. 2. 自己紹介 ・Fumiya Sakai ・Freelance iOS Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now
  3. 3. 技術書典7でiOSのUI実装本の続編を頒布します 少しの工夫で実現できるTIPS集 ライブラリ表現の活用集 様々なUIライブラリを利用したサンプル解説の書籍になります 場所は 【あ11C】 です
  4. 4. 今回のアジェンダ 1. iOSアプリ開発におけるアニメーションやUI表現はなぜ必要なのか? アプリのUI実装に関連する表現での「僕が感じる魅力」の観点から 2. アプリの見え方や使用感 / 触り心地という観点でのもたらす効果は? 3. 実装に至るまでに考慮しておくべき点はどの部分か? 4. コードに落とし込む際にポイントとなるのはどこか? 5. アプリにおける「触り心地」と「機能」との両立への心がけ 注意:�上記のアジェンダについては僕自身の見解による部分も多分に含むかもしれません。
  5. 5. アニメーションやUI表現の必要性 例1. 画面遷移時に写真が浮き上がる & スクロール時のタイトル表示のアニメーション 画面遷移や切り替わりが完了したことを連続的に伝える ※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。 類似表現を行なっている例: ① Appleの写真アプリ ② Pinterest 写真一覧から詳細への画面遷移で 写真を表示する必要があるアプリ やライブラリには、このような表 現が用いられることが多い 写真一覧から詳細への画面遷移は 画面全体が拡大される動き アニメーション時間軸
  6. 6. アニメーションやUI表現の必要性 例2. GlobalTabBar側の切り替えアニメーション 画面遷移や切り替わりが完了したことを連続的に伝える ※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用しています。 類似表現を行なっている例: ① Facebook ② Wantedly タブ表示の切り替えの中でも動き を加えることで今切り替わったこ とがより強く伝わる こちらはフェードインとスライド を組み合わせた形の表現 アニメーション時間軸
  7. 7. アニメーションやUI表現の必要性 例1. 入力フォームから紐解く機能としてのアニメーション どこが変化したか or 何が変化したかをより強く伝える役割 ※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。 ユーザーが実行する操作: ② 個数を選択する ③ 次への画面へ進む ④ 一番下のテキストフィールド   を選択する ① 画面を表示する 細かなアニメーションによって ユーザーに親切な形にする アニメーション時間軸
  8. 8. アニメーションやUI表現の必要性 例1. アニメーションでの工夫の余地がありそうな部分 どこが変化したか or 何が変化したかをより強く伝える役割 ※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。 CoreAnimationを使った個数選択 個数選択時の入力の自作: 現在位置を認識できるバー表示 UIPageViewControllerでの画面管理: 画面全体をUIScrollView等でラッピン グしておき、キーボードと連動させる キーボードで現在入力位置を隠さない:
  9. 9. アニメーションやUI表現の必要性 例2. 同じ画面内で中身の表示を切り替える処理をする場合のアニメーション どこが変化したか or 何が変化したかをより強く伝える役割 ※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用しています。 ユーザーが実行する操作: ② タイトルをクリックする ③ ドロップダウンメニューで   項目一覧が表示される ④ 表示が元に戻ってインジケ   ータが表示される ① 画面を表示する 中身で表示する内容を変更する アニメーション時間軸
  10. 10. アニメーションやUI表現の必要性 例2. アニメーションでの工夫の余地がありそうな部分 どこが変化したか or 何が変化したかをより強く伝える役割 ※UI実装であると嬉しいレシピブックVol.2に収録しているサンプルより引用しています。 BTNavigationDropdownMenu �利用しているライブラリ: https://github.com/PhamBaTho/ BTNavigationDropdownMenu ライブラリが持つ挙動を生かしたUI: 表示コンテンツを切り替えるための非 同期通信中の状態にあることをより強 調して伝える 読み込み中を示すためのインジケータ: SVProgressHUD �利用しているライブラリ: https://github.com/SVProgressHUD/ SVProgressHUD ナビゲーションが出現するタイミング で背景色がブラックアウトしてタイト ル右の矢印アイコンが回転する
  11. 11. 普段使いのアプリの中に隠されているアニメーション Appleが提供しているデフォルトのアプリにも多くのヒントがある 美しい表現の中にも「注意喚起」や「強調」の意図、前後画面との関係性や連続性を上手に伝える効果
  12. 12. 見え方や使用感 / 触り心地という観点でのもたらす効果 アニメーションと触り心地を上手に利用したUIから紐解く 例1. Tinder風なUI実装から見る動き ※UI実装であると嬉しいレシピブックに収録しているサンプルより引用しています。 左右へのスワイプ操作 画面外へ消える 指の動きとの連動処理: 左右にカード状の要素Viewを動かす処 理の起点はUIPanGestureRecognizer 画面外にスワイプする際の予測値は Velocity(速度)を元に算出 ⭐ 指が触れて生じる処理 ⭐ 指を離して画面外へ消す
  13. 13. 見え方や使用感 / 触り心地という観点でのもたらす効果 どのような意図でTinderのUIは生まれたのかを考察する ユーザーがすぐに決めるために最適化されたUIという問いへの回答の1つ https://cont-hub.com/blog/news/1364/ 参考資料: Tinder風UIがUXを高める4つの行動心理学的理由 このUIを利用している事例: ⭐ 各種マッチング ⭐ 転職・アルバイト ⭐ Eコマース 例. Mallzee (Eコマース) UI表現のおけるポイントとなる部分: ① 目的達成までの道のりのシンプル化 ② 親指と片手だけのスワイプ動作で選択が完了できる ③ ゲーミフィケーション
  14. 14. 見え方や使用感 / 触り心地という観点でのもたらす効果 小さなアニメーションを利用して機能と操作感を調和する 例2. アプリ起動時のパスコードロック画面におけるUI実装から見る動き https://qiita.com/fumiyasac@github/items/6124f9b272f5ee6ebb40 参考資料: 画面のパスコードロック機能を構築する際における実装例とポイントまとめ 素早いタップ操作にも対応した動き FaceID発火 指の動きとの連動処理: ボタン用View部分のアニメーション に.allowUserInteractionを入れる ボタンやパスコード入力用ボタンに HapticFeedbackを利用した表現 ⭐ 早いタップとの共存 ⭐ 画面の動きと体感を補う
  15. 15. 見え方や使用感 / 触り心地という観点でのもたらす効果 パスコードロック画面を実装する際のポイントになり得る部分を考察する あまり見られたくない情報を隠すための機能とさっと入力できるような体感を実現する https://blog.ohako-inc.jp/posts/ui-design-as-a-media/ 参考資料: 来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え方 このUIを利用している事例: ⭐ ヘルスケア・体調管理 ⭐ 金融関連取引 ⭐ コミュニケーション 例. michiru (ヘルスケア) UI表現のおけるポイントとなる部分: ① 他のアプリから戻る or 起動時に画面が隠れる安心感 ② 視覚的にどこまで入力したかが理解できるエフェクト ③ タップ操作 + アニメーション + 触覚フィードバック
  16. 16. 見え方や使用感 / 触り心地という観点でのもたらす効果 表示画面のスクロールと連動する形で多くのものを綺麗に見せる 例3. メディアアプリの無限スクロール型タブから見る動き https://qiita.com/fumiyasac@github/items/af4fed8ea4d0b94e6bc4 参考資料: ライブラリなしでメディアアプリでよく見る無限スクロールするタブの動きを実装したUIサンプルの紹介 UIPageViewControllerのスワイプ UICollectionViewの無限スクロール 指の動きとの連動処理: スクロール位置を更新する処理を利用 してつなぎ目を意識した無限循環 UIPageViewControllerの動きとタブ 部分の処理を結合する処理 ⭐ UIScrollViewの性質を利用 ⭐ 2つの独立したViewの連動
  17. 17. 見え方や使用感 / 触り心地という観点でのもたらす効果 なぜ無限スクロール型タブ表示に憧れを抱くのかを考察する 限られたスペースの範囲内で効率よく情報を見せつつアニメーションで現在位置を演出する https://app.codegrid.net/entry/2017-mastering-ui-1 参考資料: きちんと学ぶユーザーインターフェース 第1回 タブUI: 効果と副作用 (有料コンテンツ) このUIを利用している事例: ⭐ ニュース・新聞 ⭐ 動画コンテンツ ⭐ Eコマース 例. Trill (ファッション) UI表現のおけるポイントとなる部分: ① 画面内におけるコンテンツ表示スペースの確保 ② 表示コンテンツが切り替わる前後の表現 ③ 情報を集約化&並列化した形でまとめる
  18. 18. 実装に至るまでに考慮しておくべき点はどの部分か? 思い描くアニメーションのイメージを言葉にすると… 😣 理解したいけど…どうしたらよいのだ… 😄 なるほど!そういう感じですね! 言葉だけでは細部が伝わりにくい どのアプリの表現からヒントを得たかを探る 🤖 こう奥から「グッ!」っと来る感じ! 🤖 このへんで「ポヨヨン」って跳ねる動き! 🤖 全体的に「バーン!!」と表示する感じ! 🤖 このボタンに「キラン!」となる動きが欲しい! 🤖 現れる時の「シュイ〜ン!」をつけて! 細部の表現を上手に生かすヒントになる
  19. 19. 実装に至るまでに考慮しておくべき点はどの部分か? Githubのリポジトリで気になる表現をクローンしているものを探る 例1. AppStore 気になる表現を近いところまで実現している実際のサンプルを調べてみる 例2. Safari https://github.com/aunnnn/ AppStoreiOS11InteractiveTransition https://github.com/AfrozZaheer/ AZSafariCollectionViewLayout
  20. 20. 実装に至るまでに考慮しておくべき点はどの部分か? ベースとなる部分の挙動を再現する上で難しい部分を知っておく 例1. AppStoreの動きをクローンしたサンプルを紐解いて見えた部分の紹介 extension StatusBarAnimatable { var shouldHideStatusBar: Bool { get { return (objc_getAssociatedObject(self, &key) as? Bool) ?? UIApplication.shared.isStatusBarHidden } set { objc_setAssociatedObject(self, &key, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC) } } ����・・・(途中省略)・・・ 実は気になっていたStatusBarまわりの動き基本方針はカスタムトランジションの利用: ⭐ UIPresentationController ⭐ UIViewControllerAnimatedTransitioning ⭐ UIViewControllerTransitioningDelegate メソッドを書き換える黒魔法の予感😅 ベース部分はUICollectionViewで実装でき る部分ではあるが、動きを再現するための 調整に関するコードが結構重たい感じ。
  21. 21. extension EssayViewController: UICollectionViewDelegate, UICollectionViewDataSource { ・・・(途中省略)・・・ func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { let cell = collectionView.cellForItem(at: indexPath) as! EssayCollectionViewCell DispatchQueue.main.async { // MEMO: タップした対象のセルをデザインを切り替える cell.setDecoration(shouldDisplayBorder: self.shouldExpandCell) // MEMO: 変数shouldExpandCellの状態に応じてスクロール可否を適用し直す collectionView.isScrollEnabled = self.shouldExpandCell // MEMO: 変数shouldExpandCellの状態に応じてレイアウトを適用し直す let targetLayout: UICollectionViewLayout = self.shouldExpandCell ? self.indexFileBinderLayout : self.expandedFileBinderLayout collectionView.setCollectionViewLayout(targetLayout, animated: true) // MEMO: 表示状態を管理する変数を更新する self.shouldExpandCell = !self.shouldExpandCell } } } 実装に至るまでに考慮しておくべき点はどの部分か? 思い描いていたアプローチ方針と少しだけ異なっていた場合 例2. Safariの動きをクローンしたサンプルを紐解いて見えた部分の紹介 // バインダー型のUICollectionViewCellを開いた状態にするレイアウト属性クラス private let expandedFileBinderLayout = ExpandedFileBinderCollectionViewLayout() // バインダー型のUICollectionViewCellを閉じた状態にするレイアウト属性クラス private let indexFileBinderLayout = IndexFileBinderCollectionViewLayout() 実はUICollectionViewLayoutを利用: ⭐ セルのタップでレイアウトを切り替える ⭐ 開閉状態それぞれ2つのクラスがある アプローチの方針は1通りではない
  22. 22. 実装に至るまでに考慮しておくべき点はどの部分か? UI実装例を紹介している記事を参考に写経してみる 例. 海外サンプルで展開されているコードから理解を深めていく 様々なアプリ開発の実装事例や動かす上でのポイントが丁寧に解説されています
  23. 23. コードに落とし込む際にポイントとなるのはどこか? サンプルコードを再実装しながら読み解いていく場合 例1. コードや動きを検証 → コメントを入れながらリファクタリングや再実装 リファクタリングの観点: ⭐ 適切な命名の付け直し ⭐ メソッド粒度の切り分け コメントを付け加える: ⭐ あえて日本語に再度直す ⭐ 参考記事を追記する ⭐ 共通化や汎用化 ScrollViewDidScrollを利用
  24. 24. コードに落とし込む際にポイントとなるのはどこか? 思い描いていたアプローチ方針と少しだけ異なっていた場合 例2. UITableViewCell内のサムネイル位置をParallax表示する場合の実装例 セル側のメソッド: ⭐ AutoLayout更新 画面側の処理(UITableViewDelegate): ⭐ 視差効果処理とフェードイン処理 フェードイン処理時の注意点 UIView.animate()が利用不可 → CoreAnimationを利用する
  25. 25. コードに落とし込む際にポイントとなるのはどこか? UI構築およびアニメーション表現の前段となる材料の整理 例3. 動きを構成するための画面展開図を書いてみる StoryboardにおけるUI構造: ① UINavigationBar ② AnimationHeaderView ③ UIScrollView + UIStackView 読み物コンテンツのParallax表現 ④ UIImageView (for CustomTransition) ※ ② タイトル表示部分のViewクラス UIScrollViewDelegateを利用: ⭐ ②,④の制約を更新した   アニメーション効果
  26. 26. コードに落とし込む際にポイントとなるのはどこか? 自分が編み出した以外の手法や知見にも目を向ける 例4. 類似した実装やより洗練された先人の方法との比較検討 https://blog.kishikawakatsumi.com/entry/2018/11/05/044228 Auto Layoutの性質を活用してヘッダービューの伸縮を利用した事例: ⭐ 自分で実装した際よりも圧倒的に洗練された事例でした! https://tech.recruit-mp.co.jp/mobile/post-18199/ MXParallaxHeaderを利用してサムネイル伸縮を実現した事例: ⭐ 有名なライブラリを利用してTwitterライクな表示部分を実現! 正解は常に1通りとは限らない。様々な事例にも対処できるように備えておきたい。
  27. 27. アプリにおける「触り心地」と「機能」との両立への心がけ 綺麗で目を惹きつける動きや機能をにも「盛り加減」に配慮する 一般的には「上品な食べ物」のイメージがあるものが、加減のミスでイメージを損なってしまう 例. うな重をイメージしてみて下さい 盛り加減を変えてみましょう うなぎの量を10枚追加 ???ご飯の量をどんぶり5杯追加 引用元:写真AC様
  28. 28. 本日のスライドで紹介した自作リポジトリ こちらのリポジトリは随時更新と運用を定期的に行っております。 https://github.com/fumiyasac/ios_ui_recipe_showcase リポジトリ: 少しの工夫で実現できるUI表現集 https://github.com/fumiyasac/2nd_ios_ui_recipe_showcase リポジトリ: OSSのライブラリを活用したUI表現集 https://github.com/fumiyasac/ScrollAnimationShowcase リポジトリ: メディアアプリでよく見る無限スクロールするタブの動きを実装したUIサンプル https://github.com/fumiyasac/TouchIDExample リポジトリ: パスコードロックを利用した画面保護機能のあるUIサンプル with FaceID & TouchID 他のアプリでの機能開発時に応用ができやすいように、なるべく小さな単位で試したものをストックする
  29. 29. 参考資料集: その1 実装ではなくUI/UX観点から「なぜそうする?」を考える際の参考資料 http://photoshopvip.net/107725 サイトやアプリの使い心地を改善!UIアニメーションを良くする実践テクニック、小技7個まとめ https://blogs.adobe.com/japan/cc-web-animation-ux-how-animation-adds-meaning-ui/ 事例から学ぶ、UIに意味を付加するアニメーション https://uxmilk.jp/75706 飾りだけではない、体験のためのアニメーションの活用法 https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7 Animated Transitions in Mobile Apps アニメーションを実装する場合において「Why?」の部分を明らかにすることで意図がより明確になる
  30. 30. 参考資料集: その2 アプリの実例から紐解いたアニメーションやUI事例に関する参考資料 https://note.mu/marina1017/n/n7cbacc65b839 Appleのアニメーションはなぜ美しいか考える https://bit.ly/2TI0ydD UIにおけるアニメーションとは、コンテクストの強化 https://note.tsumikiinc.com/n/nbb1b44e1004b Instagramのマイクロインタラクション https://bit.ly/2kJgIYM 触り心地の良い Interactive Transitionをマスターしよう 一見違う業種のアプリであっても、UI実装やアニメーションのエッセンスが調和できる場合はある
  31. 31. タイトルの問いとまとめ 1. 機能と体感が調和できた体験は強く残る。 → 参考にしたい / 真似したいに感情にもつながる。 僕はiOSアプリ開発で「なぜに僕はUI表現」が好きなんだろう…??? 2. 体験や感情に響く表現を見出すための思考錯誤。 → 綺麗にはまった時の気持ち良さ最高! 本発表のまとめ 1. 動きやUIに対してWhy?を考えると機能と共存を図る上でのヒントが見えることがある。 2. 自分が気になったという感覚を頭に置いて実装を紐解いていくアプローチ。 人間の感覚や感性に響く表現という答えを導きづらい世界の中で楽しく足掻く
  32. 32. Thank you for listening ! 紹介しきれなかった実装の詳細については、是非ともコード等をご覧頂けましたら幸いです😆 おすすめのライブラリや面白い表現を実現したコードがあったら是非教えてください🎤

×