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
46
よりアプリらしさを出すために
2024年12月13日(金)に主催したイベント『mobile.stmn』での登壇資料です。
おしん
December 13, 2024
Tweet
Share
More Decks by おしん
See All by おしん
Concurrency Warningが 沢山出たから聞いてほしい ~Xcode 16.1 Beta 編~
shincarpediem
1
150
iOSのPhoto Libraryアクセス権限を見直してみよう
shincarpediem
1
170
SwiftUI登場前のVIPERアプリでもSwiftUIをスムーズに導入できた話
shincarpediem
2
1.4k
VIPERアプリにSwiftUIを導入してみた
shincarpediem
1
370
Other Decks in Technology
See All in Technology
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
410
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
120
OpenID BizDay#17 みんなの銀行による身元確認結果の活用 / 20250219-BizDay17-KYC-minna-no-ginko
oidfj
0
170
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
3
810
深層学習と古典的画像アルゴリズムを組み合わせた類似画像検索内製化
shutotakahashi
1
280
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
140
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
140
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
230
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
240
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
100
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building an army of robots
kneath
303
45k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing for Performance
lara
604
68k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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を一つずつ改善していくことで アプリらしさが増していく
ありがとうございました!