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.8k
共創するためのデザイン批評
takanorip
February 26, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
91
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
750
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
410
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Design
See All in Design
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
110
LLMによるRAG評価用合成テストデータの生成
licux
6
630
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
2.9k
Museum Heist
allykae
0
100
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
LayerX DesignersDeck
layerx
PRO
0
2.3k
Dive Deep into Communication
yomtsu
0
200
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
360
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
250
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
270
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
20
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Optimising Largest Contentful Paint
csswizardry
33
3k
Building an army of robots
kneath
302
45k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Why Our Code Smells
bkeepers
PRO
335
57k
KATA
mclloyd
29
14k
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