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
45
よりアプリらしさを出すために
2024年12月13日(金)に主催したイベント『mobile.stmn』での登壇資料です。
おしん
December 13, 2024
Tweet
Share
More Decks by おしん
See All by おしん
Concurrency Warningが 沢山出たから聞いてほしい ~Xcode 16.1 Beta 編~
shincarpediem
1
140
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 Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
260
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
650
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
380
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
160
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
680
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
570
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
200
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
800
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
510
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Side Projects
sachag
452
42k
RailsConf 2023
tenderlove
29
1k
Fireside Chat
paigeccino
34
3.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Done Done
chrislema
182
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
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を一つずつ改善していくことで アプリらしさが増していく
ありがとうございました!