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
takanorip
February 26, 2021
Design
8
3.9k
共創するためのデザイン批評
takanorip
February 26, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
460
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Design
See All in Design
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
#Dubois Challenge 2025: Economics
ajstarks
1
170
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
250
What makes a great Director?
_limex_
0
220
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.2k
harutaka Vision Deck
zenkigenforrecruit
0
220
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
7 Core Values of Round-L
wired888
0
1.7k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Code Reviewing Like a Champion
maltzj
525
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Why Our Code Smells
bkeepers
PRO
339
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
4 Signs Your Business is Dying
shpigford
184
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
共創するためのデザイン批評 2021.02.26 Takanori Oki @Front-End Study #4 「いま考えるユーザー体験とデザインの世界」
自己紹介 • UI designer at ClassDo • Organizer of Web
Platform Study Group • Figma, Web Font, 11ty, etc… • 最近引っ越しました 2
デザイン批評の基本 3
デザイン批評の 基本 • 批判的思考 • デザインがプロダクトの目的を達成するために 適切かどうかを判断する • 批評には適切な方法があり、それを学ぶ必要がある •
ただ感想を伝えれば良いわけではない! 4
批評とレビューの違い 5 デザイン批評 デザインが目的を達成できる か判断するための分析手法。 デザインレビュー デザインの承認や合意形成の ために行われるミーティング。
ベスト プラクティス • 質問で始める • 感情のままに話さない • 自分の意見が正しいと思い込まない • 意見を押し付けない
• 長所について話す • 「誰の視点から考えているか」を考える 6
みんなではじめるデザイン批評 7 チームでどのようにデザイン批評を実践するか 体系的に解説した名著(個人的) みんな読もう
デザイン批評で大切な3つの観点 8
その前に… 9
デザイン批評で一番重要なことは 「見た目」にとらわれないこと 10
見た目の好き嫌いを表明することは 「批評」ではない 11
「デザインのセンスがないから…」 というのは一番言ってはいけない言葉 12
見た目にとらわれない 13 表層にとらわれず、その本質を見極める 見た目の裏側を意識する
デザイン批評で大切な3つの観点 14 デザインの目的 使いやすさ UI Stack
デザインの目的 15
デザインの目的 • なぜこのデザインにしたのか • この「なぜ?」をチーム全員が理解することが重要 • これがレビューの「基準」となる • 見落としてる要件はないか 16
使いやすさ 17
使いやすさ • 達成したいことを迷わず達成できるか • 情報の過不足がないか • 行動を邪魔する要素がないか • etc… •
ダークパターンになってないか • こちらがしてほしいことを強制していないか • ユーザーを騙していないか 18
ダークパターン デザイナーやマーケターが意図せず ダークパターンを生み出す可能性もある ダークパターンはUXを低下させるだけでなく 会社やブランドのイメージ低下につながる デザイン批評でダークパターンを防ぐ 19
UI Stack 20
UI Stack 21 Ideal State Blank State Error State Partial
State Loading State UIの基本的な5つの状態 https://www.scotthurff.com/posts/ why-your-user-interface-is-awkward- youre-ignoring-the-ui-stack/
デザインレビューで考慮すべきポイント 22
デザインレビューで考慮すべきポイント 23 UIの一貫性 実装難易度 データとUI
UIの一貫性 24
UIの一貫性 • 色やmarginなどスタイルの一貫性 • 各UIコンポーネントの役割の一貫性 • インタラクションの一貫性 25
インタラクション 26 「ユーザーのアクションとそれに対するレスポンスの関係性」
UIの一貫性 一貫性のないデザインを 鵜呑みにしない! 高い確率で負債になる エンジニアは「規則を作り守る」ことに慣れてるので、 エンジニアのほうが気づきやすい 気づいたことは伝えることが大事 27
実装難易度 28
実装難易度 • 本来はデザイン始まる前(仕様策定段階)で確認して おくべきこと • 技術面の知識がないデザイナーに対して 「知識を育てる」つもりで、しっかりと説明する • 何が出来て何ができないか、なぜ出来ないか、 代替案はないか、など
29
大事な話 • ごまかさない • 「本当はできるけど面倒だから黙っておこう…」 • 相手を侮らない • 「どうせ説明してもわからないだろう…」 •
本質を探る • 「なぜこのUIを実装する必要があるのか?」 30
データとUI 31
データとUIの 整合性 • データ構造とUIに矛盾がないか • DB • API • マイクロサービス
• etc... • 既存のデータ構造とUIが一致していない場合、 どちらを修正するべきなのかを話し合う必要がある 32
まとめ 33
まとめ • デザイン批評には適切な方法があるよ • デザイン批評とは、デザインが目的を達成できるか どうかを分析すること • 見た目にとらわれず、必要な観点からデザインを分析 してチーム全体で良いプロダクトを開発しよう! 34
THANK YOU! 35