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.7k
共創するためのデザイン批評
takanorip
February 26, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k
Other Decks in Design
See All in Design
Improve a service workshop
mastervicedesign
1
110
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
580
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
210
Fleet Gas Station
joshtang
0
140
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
310
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Happy Clients
brianwarren
98
6.7k
YesSQL, Process and Tooling at Scale
rocio
169
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Cult of Friendly URLs
andyhume
78
6k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
A Philosophy of Restraint
colly
203
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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