Slide 1

Slide 1 text

デザイナーから見た モバイルアプリ開発
 2023/7/28
 isoda
 1

Slide 2

Slide 2 text

2 自己紹介 isoda ● 2021年8月入社 ● Delivery部デザインチーム デザイナー ● ウェブアプリ、モバイルアプリ ● 前々職は菓子屋でデザイン含め色々(長い) 前職は少しだけWebデザイン

Slide 3

Slide 3 text

3 この登壇内容の趣旨 デザイナーがモバイルアプリ開発について語る ふわっとした社内体験談

Slide 4

Slide 4 text

4 今回の登壇内容 ● クラメソで関わった案件と現状 ● デザイナーとして大切だと思うこと ● モバイルアプリデザインで使うツールについて ● アジャイル開発に参加してみた

Slide 5

Slide 5 text

5   クラメソで関わった案件と現状

Slide 6

Slide 6 text

6 クラメソで関わったモバイル案件 クラメソで関わった案件 ● オンラインストア プリセ1件 ● モバイルアプリ プリセ1件 ● モバイルアプリ 継続開発1件 ● モバイルアプリ 新規開発PoC 2件 (他、ウェブアプリ開発案件2件) 現在:モバイルアプリ継続開発1件と新規開発PoC1件

Slide 7

Slide 7 text

7 クラメソに来るデザイン案件の傾向 数年前:ガッツリモバイルアプリ開発案件が大半 現在:ガッツリ開発案件とPoC すでにメインサービスのアプリは稼働中、社内新規事業や研究開発の 目的でアプリを作る話が多い印象 ↓ ただ作るだけの案件から一緒にサービスを考える案件へ 🔨 から 🤝

Slide 8

Slide 8 text

8   デザイナーとして大切だと思うこと

Slide 9

Slide 9 text

9 デザイナーとして大切にしてること 昔からデザイナーは 自分がいいと思うものを たくさん見るように言われてきた 👓

Slide 10

Slide 10 text

10 デザイナーとして大切にしてること デザイナーは 現場を知るべし 󰳏󰳗󰳎

Slide 11

Slide 11 text

11 現場を知るべし ● 開発中のアプリを触る ○ 実際にユーザーになって利用する ○ 実店舗に赴く ○ 企業の情報を調べる ● 開発中のアプリを使う人を観察 ● 他社アプリも触る

Slide 12

Slide 12 text

12 現場を知ることで… デザイナーは ユーザーを意識する 🧑

Slide 13

Slide 13 text

13 ユーザーを意識する ● 今のプロダクトとユーザー像は合致しているか ○ 継続開発だとアプリの役割もペルソナも変わる ● プロトペルソナ ○ 口コミや来店顧客、立地から ユーザ調査ができず取得可能なデータが無く、本来のペルソナが作れない場合の簡易的なペルソナで あり、スタートアップなどで利用されることが多い。ペルソナ作成のために必要な調査・費用や時間が無 い場合に利用するための代替手段ではなく、あくまで情報源となる既存のユーザが存在していない場合 に、ペルソナの効果を活用するために作成し、基本は本来のペルソナを利用すべきである。 https://uxdaystokyo.com/articles/glossary/proto-persona/

Slide 14

Slide 14 text

14 ユーザーを意識する ユーザーを意識した上で アイコンのテイスト、色、文字サイズ、文言 etc… テイストを考慮→デザイン作成 📱

Slide 15

Slide 15 text

15 とはいえモバイルアプリUIの基本は Human Interface Guidelines Material Design いつもエンジニアさんに 助けられています ❤

Slide 16

Slide 16 text

16   モバイルアプリデザインで使う ツールについて

Slide 17

Slide 17 text

17 使うツール類

Slide 18

Slide 18 text

18 Figmaっていいよね これからのFigmaはますます便利に… 開発モードBeta版のアップデート (vsコードとの連携) Adobe社の買収

Slide 19

Slide 19 text

19 Figmaで重宝している機能1 ライブ修正が可能 お客様との会議中に 画面共有しながら修正可能 ブラウザでの操作が可能 アプリとブラウザで 使用感に差が少ない

Slide 20

Slide 20 text

20 Figmaで重宝している機能2 セクション機能 ● フレームを囲んでグルー ピングが可能 ● データ整理に役立つ

Slide 21

Slide 21 text

21 Figmaで重宝している機能3 オートレイアウト コンポーネント  プロパティ神

Slide 22

Slide 22 text

22   アジャイル開発に参加してみた

Slide 23

Slide 23 text

23 実際の開発の話 ウォーターフォール アジャイル 両案件を兼務中 👭

Slide 24

Slide 24 text

24 実際の開発の話 アジャイルは未経験 イメージは 「忙しい」 「一気に画面を作らなくてはいけない」 「しんどい」

Slide 25

Slide 25 text

25 デザイナーのアジャイル開発体験談 アジャイル + オフショア スピードが早い 開発着手前にデザインFixを目指す 1週間スプリントなので結構大変…

Slide 26

Slide 26 text

26 デザイナーのアジャイル開発体験談 Figmaだと即反映ができるので 意外と対応できる ミーティングの場で修正、Fixもあり コンポーネントは神

Slide 27

Slide 27 text

27 デザイナーから見たアジャイル開発困りごと 開発着手中の画面と デザイン作成中の画面が頻繁に混在する コンポーネント管理が難しい

Slide 28

Slide 28 text

28 アジャイル開発の個人的な感想 開発工数のためにデザインすることも しかし開発時の一員感は強い チーム相談の機会も多く チームで働いている感がある

Slide 29

Slide 29 text

29 実際の開発の話 アジャイルに鍛えられる毎日

Slide 30

Slide 30 text

30 今後のUI/UXデザイナーに求められそう ビジネス理解 サービスや事業を一緒に考える 素早いアウトプット 世の中の流れの速さ コミュニケーション ユーザーインタビューやファシリテーション 💬

Slide 31

Slide 31 text

31 終わり ご清聴ありがとうございました