Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
よりアプリらしさを出すために
Search
おしん
December 13, 2024
Technology
1
90
よりアプリらしさを出すために
2024年12月13日(金)に主催したイベント『mobile.stmn』での登壇資料です。
おしん
December 13, 2024
Tweet
Share
More Decks by おしん
See All by おしん
Swift UI デフォルト引数クイズ
shincarpediem
1
100
Concurrency Warningが 沢山出たから聞いてほしい ~Xcode 16.1 Beta 編~
shincarpediem
1
200
iOSのPhoto Libraryアクセス権限を見直してみよう
shincarpediem
1
200
SwiftUI登場前のVIPERアプリでもSwiftUIをスムーズに導入できた話
shincarpediem
2
1.6k
VIPERアプリにSwiftUIを導入してみた
shincarpediem
1
400
Other Decks in Technology
See All in Technology
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.5k
robocopy の怖い話/scary-story-about-robocopy
emiki
0
330
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
130
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
520
地図と生成AI
nakasho
0
800
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
140
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.1k
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
250
スプリントレビューを効果的にするために
miholovesq
9
1.7k
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
1
170
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
400
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
300
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
500
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
GitHub's CSS Performance
jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Building Applications with DynamoDB
mza
95
6.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Transcript
「このアプリ、アプリっぽい!!!」 よりアプリらしさを出すために おしん(@38Punkd)
前提 01
前提 これから話すことは、あくまでモバイルアプリというハードウェアと その利用用途から考えた時に最適ではないUIUXがあるという話であって、 モバイルの方がWebよりも優れているという話ではないです モバイルもWebも、それぞれに長所短所があります モバイルアプリの長所を最大限活かす上で 「もっと改善できる」点を話していきます
『このアプリ、使いにくいな』 と思ったことはありませんか? 『このアプリ、 Webっぽいな』
理由があるんです
・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
・網羅性 ・閲覧性 ・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
・簡便性 ・即効性 ・網羅性 ・閲覧性 ・画面が大きい ・座って操作 パソコン スマホ ・画面が小さい ・移動時に操作
モバイルアプリケーション Webアプリケーション
・簡便性 ・即効性 ・網羅性 ・閲覧性 ・画面が大きい ・座って操作 モバイルアプリケーション Webアプリケーション パソコン スマホ
・画面が小さい ・移動時に操作
・簡便性 ・即効性 モバイルアプリケーション スマホ ・画面が小さい ・移動時に操作 モバイルアプリの 「体験」には 繰り返し行う行為 (=Task)を
素早く楽に操作できることが 求められる
『このアプリ、使いにくいな』 と思ったことはありませんか? 『このアプリ、 Webっぽいな』
『このアプリ、使いにくいな』 と思ったことはありませんか? 『このアプリ、 Webっぽいな』 繰り返し行う行為 (=Task)を 素早く楽に操作でき ...ない!!!
素早く楽な操作を 実現するための方法 ・アクセシビリティ ・ユーザビリティ https://developer.apple.com/design/human-interface-guidelines/accessibility
・アクセシビリティ ・Interactions ・Gesture ・Buttons and controls ・... ・VoiceOver ・... ・Text
Display ・Color an effects 素早く楽な操作を 実現するための方法 https://developer.apple.com/design/human-interface-guidelines/accessibility
素早く楽に操作を実現するための 『画面遷移』 02
画面遷移
画面遷移
画面遷移
画面遷移 ・スワイプバック ・戻るボタン
画面遷移 投稿の一覧 (≒タイムライン ) →投稿の詳細 という階層が存在
画面遷移 投稿の一覧 (≒タイムライン ) →投稿の詳細 という階層が存在 ユーザーはこの操作を 繰り返し行っている ユーザーにとって自然な流れは 一覧→詳細の前後関係が
存在していること
Before
Before
Before
Before
Before ???
After
After
After
After
After
🥳
素早く楽に操作を実現するための 『タブバー』 03
Before
Before
Before
After
After
After
After
最後に 04
「アプリっぽい」 「アプリっぽくない」 と感じる嗅覚はだいじ メッセージ 原因になっているUIUXを一つずつ改善していくことで アプリらしさが増していく
ありがとうございました!