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
HiroYUKI Seto
April 20, 2018
Programming
0
1.2k
エンジニア的アプリデザイン思考法
2018/4/20
Kyoto.LT 第20回 「エンジニアによるデザイン」
HiroYUKI Seto
April 20, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
390
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
190
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
980
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
9
3.1k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
11
7.1k
リッチエディターを安全に開発・運用するために
unachang113
1
240
テスト駆動Kaggle
isax1015
1
880
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
350
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
テスト環境にCDを導入してみた
yasaigaoisi
0
100
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Navigating Team Friction
lara
187
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Invisible Side of Design
smashingmag
301
51k
Transcript
エンジニア的 アプリデザイン 思考法 Kyoto.LT 第20回 株式会社ノハナ 瀬戸優之 @seto_hi
自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア & アプリデザイン
• 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける ◦ 絶賛採用中(東京勤務) • Material Design大好き • 好きなAPIはCanvas#saveとViewGroup#layout
エンジニア的 アプリデザイン 思考法
最低限の、 外れでない アプリデザインの 思考法
前準備 アプリの構成を考える
アプリの構成 • (ここはあまりエンジニア的でない) • アプリでやりたいことを書き出す • やりたいこと毎に画面を作る ◦ 各画面でやりたいことは1つだけ ◦
次以降のステップでそれを実現する画面を作る • 破綻するようなら使いやすい方に振っていく
レベル 1 パターンマッチング
パターンマッチング • 初手 • 初心者もやりやすい • 「やりたいこと」が近いデザインを参考にする • 間違っていることもあるが、初手としては十分 ◦
後で変えていけばいい
参考データ • 素のAndroidの設定画面 ◦ 新しいOSが正 • Googleのアプリ ◦ たまに奇抜 •
Material Designのガイドライン ◦ シンプルなので色づけしやすい • 各社のアプリはほどほどに ◦ 各社なりの思考や事情があるため
レベル 2 ガイドラインから コンポーネントを持ってくる
ガイドライン • 「やりたいこと」に合いそうな Viewコンポーネントを探す ◦ ガイドライン総当たり探索 • ガイドラインの説明を読み、 本当に合っているを確認する
レベル 2.5 自分でコンポーネントを作る
レベル 3 ルール化
ルール化 • ガイドラインの情報整理ができている段階 • 自分なりのルールを作る ◦ ex: 一番重要なものはFAB ◦ ex:
メニューがN個以上なら隠す • ルールに従ってUIを作っていく
レベル 4 フローチャート化
フローチャート化 • ルールを発展させ、フローチャートを作る ◦ 秘伝のタレ • 超高速にUIが作れるようになる • 同じ操作感の画面が増えるとユーザー負荷も減る
もう一歩 使いやすくする
1. 要素を絞る
要素を絞る • やりたいことを詰め込むと機能が増えがち • 要素が多いとユーザーが迷子になる • 必要なものだけ表示する • そこまで必要でないものの扱い ◦
デフォルトを変えることで不要になる? ◦ 隠す ▪ ActionMenu, BottomSheet ▪ ×操作手順が増える ◦ 要素を消す際はデータを見て慎重に!
2. 強弱をつける
強弱をつける • 色 • 重要なものはAccentColorにする ◦ Primary : Base :
Accent = 2 : 7 : 1 ◦ AccentColorは各画面で1つくらいで十分 • コントラストをしっかりと取る ◦ ガイドラインに従う
強弱をつける • 大きさ • 重要なものは大きく 重要でないものは小さく ◦ ジャンプ率を意識 • ガイドラインに従う
「重要なこと」
重要なこと • 開発側が重要だと思うこと • ユーザーがやりたいこと • ユーザーの行動はねじ曲げられない ◦ 不評を買うだけ ◦
ユーザーの思考までねじ曲げてはいけない • ユーザーのやりたいことで メインの動線を作る
やらない方がいいこと
やらない方がいいこと • 説明やチュートリアルを大量につける ◦ 要素が多すぎて逆にユーザーが迷子になる ◦ すべてに説明がアプリは僅か ◦ 画面の流れや構成が間違っている? •
過度な自動化 ◦ 自己帰属感がない自動化はしない ◦ 勝手に進むと理解ができない ▪ 「何もしてないのにバグる」 ◦ ユーザーが何も学べない
更によくするために
更によくするために • 良いUIに触れる ◦ 何が良いUIかを知る ◦ 知らない知識は出てこない • エモいUIを目指す ◦
芸術方面に手を出してみる ◦ 気持ちの動かし方を知る ▪ GooglePlay→多彩な色でわくわく感 ▪ Gmail→シンプルな色でタスクに集中
更によくするために • アプリ全体を俯瞰してバランス調節 ◦ 色合い、UI、アニメーション ◦ 1画面で最適化しないほうがよいこともある • 触る、触る、触る、触る、触る、触る、触る、触る... ◦
開発者が気になるところはユーザーも気になる ◦ 微調整してすぐ試せるのはエンジニアの特権 ◦ 理論よりも使い勝手 ▪ 使い勝手の裏にある理論を学ぶ
以上