アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App

by matsuji

Embed

Start on current slide

Slide 1

Slide 1 text

アプリをもっと "iOSアプリっぽく" する小さな工夫まつじ

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

コマ送り

Slide 6

Slide 6 text

コマ送り

Slide 7

Slide 7 text

コマ送り

Slide 8

Slide 8 text

コマ送り

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

行きすぎている

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

「iOSアプリっぽく」する必要はあるのか？

Slide 14

Slide 14 text

ユーザーは複数のアプリを絶え間なく使用する

Slide 15

Slide 15 text

天気アプリで天気を確認 SNSを確認メッセージを送信タイマーをつける電車の運行情報を確認漫画アプリで漫画を読む

Slide 16

Slide 16 text

天気アプリで天気を確認 SNSを確認メッセージを送信タイマーをつける電車の運行情報を確認漫画アプリで漫画を読む

Slide 17

Slide 17 text

Liquid Glass Toolbars Interactions

Slide 18

Slide 18 text

Liquid Glass Toolbars Interactions

Slide 19

Slide 19 text

Liquid Glassをここでは使わない Liquid Glassはここで使う https://developer.apple.com/videos/play/wwdc2026/251

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

インタラクティブではない要素にLiquid Glassは使わない

Slide 23

Slide 23 text

Liquid Glass Liquid Glass Blur これだけインタラクティブはない

Slide 24

Slide 24 text

Liquid Glass Toolbars Interactions

Slide 25

Slide 25 text

テキスト vs アイコンテキストアイコン

Slide 26

Slide 26 text

シンボルではうまく表すことができない編集のようなアクションを除き、テキストよりもシンプルで認識しやすいシンボルを優先して使用してください。ツールバー | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/toolbars

Slide 27

Slide 27 text

! " ツールバー | Apple Developer Documentation https://developer.apple.com/jp/design/human-interface-guidelines/toolbars

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Slide 30

Slide 30 text

テキストとアイコンはグループを分ける 1つのボタンに見えるテキストのボタンとシンボルのボタンは分ける

Slide 31

Slide 31 text

ツールバーの識別子 let barButtonItem = UIBarButtonItem(...) barButtonItem.identifier = "plus"

Slide 32

Slide 32 text

識別子を設定していない場合不要なアニメーションがある

Slide 33

Slide 33 text

識別子を設定した場合アニメーションがない

Slide 34

Slide 34 text

iOS 26 グループ全体にアニメーションがある

Slide 35

Slide 35 text

iOS 27

Slide 36

Slide 36 text

Liquid Glass Toolbars Interactions

Slide 37

Slide 37 text

直感的？

Slide 38

Slide 38 text

物理法則に基づいたインタラクション「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない

Slide 39

Slide 39 text

物理法則に基づいたインタラクション「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない日常生活をするうえで学んできた経験に基づいて次の予測が立てられるUI

Slide 40

Slide 40 text

物理法則に基づいたインタラクション「直感的なUI」は決して何もしなくても使い方がわかる魔法ではない日常生活をするうえで学んできた経験に基づいて次の予測が立てられるUI Appleは学習済み経験として物理法則に基づくインタラクションが多い

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

漕ぐのをやめる自転車を漕ぐ 8 km/h 自転車を漕がない 8 km/h 13 km/h 漕ぐのをやめた瞬間逆に早くなるのはありえない

Slide 44

Slide 44 text

漕ぐのをやめる自転車を漕ぐ 13 km/h 自転車を漕がない 13 km/h 5 km/h 漕ぐのをやめた瞬間突然遅くなるのも不自然

Slide 45

Slide 45 text

ユーザーのジェスチャーの初速を正しく引き継ぐ

Slide 46

Slide 46 text

ユーザーのジェスチャーの初速を正しく引き継ぐシートのdismiss ピクチャーインピクチャー

Slide 47

Slide 47 text

タップによるリサイズ

Slide 48

Slide 48 text

グラバータップによるリサイズ

Slide 49

Slide 49 text

パンジェスチャーによるリサイズ

Slide 50

Slide 50 text

iOSのインタラクションの原則基本：バウンス / オーバーシュートなし例外：パンジェスチャーなど推進力のあるジェスチャーにはバウンス / オーバーシュートをつける

Slide 51

Slide 51 text

力 UI 進行方向の力がない時にピッタリ止まる画面タップなど推進力のないジェスチャーによるアニメーション UI 進行方向の力がある分余分に進む力画面推進力のあるジェスチャーによるアニメーション

Slide 52

Slide 52 text

力 UI 進行方向の力がない時にピッタリ止まる画面タップなど推進力のないジェスチャーによるアニメーション UI バウンスして戻る力画面推進力のあるジェスチャーによるアニメーション

Slide 53

Slide 53 text

バウンスなし推進力のないタップバウンスあり推進力のあるジェスチャー

Slide 54

Slide 54 text

バウンスなしバウンスあり推進力のないタップ推進力のあるジェスチャー

Slide 55

Slide 55 text

ラバーバンド効果限界値を示すための効果限界値を超えると反発して戻る力が加わるユーザーの入力は正しく受けつけていることを伝える側面もある

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

横に引き伸ばされて縦に短くなる限界を超えて進む

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

WWDC18 | Designing Fluid Interfaces https://developer.apple.com/la/videos/play/wwdc2018/803/

Slide 62

Slide 62 text

Liquid Glass Toolbars Interactions

Slide 63

Slide 63 text

できていないとダメという話ではない 90点を91点や92点に押し上げる話

Slide 64

Slide 64 text

把握できていないのは良くないかも？問題に気付いている / 気付いていないとでは大きな違い

Slide 65

Slide 65 text

把握できていれば AI で素早く対応できる問題に気づく審美眼 / それを言語化する能力が必要

Slide 66

Slide 66 text

まとめ • Liquid Glass / Toolbar / Interactionsを中心に iOSらしくする工夫を紹介しました。 • AIのおかげで実装のコストはかなり減りました気付けるか / こだわれるかが差になる時代です。 • まだまだ紹介できていない工夫は多数あります。是非Ask the Speakerで尋ねてください！