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
Isoda
July 31, 2023
Design
0
200
デザイナーから見たモバイルアプリ開発
先日、クラスメソッド大阪オフィスにて行ったモバイルアプリ開発で発表させていただいた資料です。
Isoda
July 31, 2023
Tweet
Share
More Decks by Isoda
See All by Isoda
受託案件でクライアントと体験を作った話
iso
0
860
Other Decks in Design
See All in Design
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.7k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
830
mento Design Team Portfolio
mento0fficial
0
570
minpaku-community-scrum-patterns
norinity1103
1
240
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
620
AIで加速するアクセシビリティのこれから
magi1125
3
650
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
Saudade typeface
tiagoporto
0
340
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
540
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
1
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Designing for humans not robots
tammielis
253
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Done Done
chrislema
185
16k
Building Adaptive Systems
keathley
43
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Transcript
デザイナーから見た モバイルアプリ開発 2023/7/28 isoda 1
2 自己紹介 isoda • 2021年8月入社 • Delivery部デザインチーム デザイナー • ウェブアプリ、モバイルアプリ
• 前々職は菓子屋でデザイン含め色々(長い) 前職は少しだけWebデザイン
3 この登壇内容の趣旨 デザイナーがモバイルアプリ開発について語る ふわっとした社内体験談
4 今回の登壇内容 • クラメソで関わった案件と現状 • デザイナーとして大切だと思うこと • モバイルアプリデザインで使うツールについて • アジャイル開発に参加してみた
5 クラメソで関わった案件と現状
6 クラメソで関わったモバイル案件 クラメソで関わった案件 • オンラインストア プリセ1件 • モバイルアプリ プリセ1件 •
モバイルアプリ 継続開発1件 • モバイルアプリ 新規開発PoC 2件 (他、ウェブアプリ開発案件2件) 現在:モバイルアプリ継続開発1件と新規開発PoC1件
7 クラメソに来るデザイン案件の傾向 数年前:ガッツリモバイルアプリ開発案件が大半 現在:ガッツリ開発案件とPoC すでにメインサービスのアプリは稼働中、社内新規事業や研究開発の 目的でアプリを作る話が多い印象 ↓ ただ作るだけの案件から一緒にサービスを考える案件へ 🔨 から 🤝
8 デザイナーとして大切だと思うこと
9 デザイナーとして大切にしてること 昔からデザイナーは 自分がいいと思うものを たくさん見るように言われてきた 👓
10 デザイナーとして大切にしてること デザイナーは 現場を知るべし
11 現場を知るべし • 開発中のアプリを触る ◦ 実際にユーザーになって利用する ◦ 実店舗に赴く ◦ 企業の情報を調べる
• 開発中のアプリを使う人を観察 • 他社アプリも触る
12 現場を知ることで… デザイナーは ユーザーを意識する 🧑
13 ユーザーを意識する • 今のプロダクトとユーザー像は合致しているか ◦ 継続開発だとアプリの役割もペルソナも変わる • プロトペルソナ ◦ 口コミや来店顧客、立地から
ユーザ調査ができず取得可能なデータが無く、本来のペルソナが作れない場合の簡易的なペルソナで あり、スタートアップなどで利用されることが多い。ペルソナ作成のために必要な調査・費用や時間が無 い場合に利用するための代替手段ではなく、あくまで情報源となる既存のユーザが存在していない場合 に、ペルソナの効果を活用するために作成し、基本は本来のペルソナを利用すべきである。 https://uxdaystokyo.com/articles/glossary/proto-persona/
14 ユーザーを意識する ユーザーを意識した上で アイコンのテイスト、色、文字サイズ、文言 etc… テイストを考慮→デザイン作成 📱
15 とはいえモバイルアプリUIの基本は Human Interface Guidelines Material Design いつもエンジニアさんに 助けられています ❤
16 モバイルアプリデザインで使う ツールについて
17 使うツール類
18 Figmaっていいよね これからのFigmaはますます便利に… 開発モードBeta版のアップデート (vsコードとの連携) Adobe社の買収
19 Figmaで重宝している機能1 ライブ修正が可能 お客様との会議中に 画面共有しながら修正可能 ブラウザでの操作が可能 アプリとブラウザで 使用感に差が少ない
20 Figmaで重宝している機能2 セクション機能 • フレームを囲んでグルー ピングが可能 • データ整理に役立つ
21 Figmaで重宝している機能3 オートレイアウト コンポーネント プロパティ神
22 アジャイル開発に参加してみた
23 実際の開発の話 ウォーターフォール アジャイル 両案件を兼務中 👭
24 実際の開発の話 アジャイルは未経験 イメージは 「忙しい」 「一気に画面を作らなくてはいけない」 「しんどい」
25 デザイナーのアジャイル開発体験談 アジャイル + オフショア スピードが早い 開発着手前にデザインFixを目指す 1週間スプリントなので結構大変…
26 デザイナーのアジャイル開発体験談 Figmaだと即反映ができるので 意外と対応できる ミーティングの場で修正、Fixもあり コンポーネントは神
27 デザイナーから見たアジャイル開発困りごと 開発着手中の画面と デザイン作成中の画面が頻繁に混在する コンポーネント管理が難しい
28 アジャイル開発の個人的な感想 開発工数のためにデザインすることも しかし開発時の一員感は強い チーム相談の機会も多く チームで働いている感がある
29 実際の開発の話 アジャイルに鍛えられる毎日
30 今後のUI/UXデザイナーに求められそう ビジネス理解 サービスや事業を一緒に考える 素早いアウトプット 世の中の流れの速さ コミュニケーション ユーザーインタビューやファシリテーション 💬
31 終わり ご清聴ありがとうございました