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
110
よりアプリらしさを出すために
2024年12月13日(金)に主催したイベント『mobile.stmn』での登壇資料です。
おしん
December 13, 2024
Tweet
Share
More Decks by おしん
See All by おしん
モバイルアプリへのRemoteConfigの恩恵
shincarpediem
2
100
Swift UI デフォルト引数クイズ
shincarpediem
1
110
Concurrency Warningが 沢山出たから聞いてほしい ~Xcode 16.1 Beta 編~
shincarpediem
1
210
iOSのPhoto Libraryアクセス権限を見直してみよう
shincarpediem
1
210
SwiftUI登場前のVIPERアプリでもSwiftUIをスムーズに導入できた話
shincarpediem
3
1.7k
VIPERアプリにSwiftUIを導入してみた
shincarpediem
1
410
Other Decks in Technology
See All in Technology
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
370
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
180
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
React19.2のuseEffectEventを追う
maguroalternative
2
590
Introdução a Service Mesh usando o Istio
aeciopires
1
280
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
1
130
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
190
AI時代、“平均値”ではいられない
uhyo
8
2.1k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
380
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
310
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Being A Developer After 40
akosma
91
590k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
The Invisible Side of Design
smashingmag
302
51k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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を一つずつ改善していくことで アプリらしさが増していく
ありがとうございました!