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
September 29, 2020
Design
0
2.1k
技術とデザインの間
takanorip
September 29, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Design
See All in Design
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
210
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
LayerX DesignersDeck
layerx
PRO
0
2.5k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
セブンデックス カルチャーブック
sevendex
0
1.7k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
Featured
See All Featured
Side Projects
sachag
452
42k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Statistics for Hackers
jakevdp
797
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Thoughts on Productivity
jonyablonski
69
4.5k
Bash Introduction
62gerente
610
210k
Designing for humans not robots
tammielis
250
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Site-Speed That Sticks
csswizardry
3
370
The Invisible Side of Design
smashingmag
299
50k
Transcript
ٕज़ͱσβΠϯͷؒ UI/UXデザイナーLT会 #uiuxdesignerslt Takanori Oki - 2020/09/29
ࣗݾհ
大木尊紀(オオキタカノリ/Takanori Oki) • インターネット上では@takanorip(Twitter: @takanoripe) • フロントエンドエンジニア、現ClassDo IncのUIデザイナー • Web
Platform Study Group(WPSG)のOrganizer • https://www.youtube.com/channel/UCfToJ- sTOqvBnnuVq3zdZhA • 好きなもの: Figma、フォント、VTuber
6*σβΠϯͷྺ࢙
ソフトウェア エンジニアのための UIデザイン概論 Zennにて好評発売中! https://zenn.dev/takanorip/ books/ c793924600a6009b43c2
UIの進化 • バッチインターフェース • パンチカードや紙テープでコンピュータを操作してた • Character User Interface •
キーボード入力+文字表示でコンピュータを操作 • Graphical User Interface • グラフィック+ポインティングデバイス or タッチ操作
UIデザインも 技術の進化に対応するために 変化してきた
UIデザインの進化 • Windows 95 • PCが広く普及するきっかけを作った親しみやすいデザイン • スキューモーフィズム • 現実世界のものを模倣することでわかりやすいデザインを目指した
• フラットデザイン • 様々なデバイスや状態に対応するため、シンプルになったデザイン
UIデザインの変遷は ただのトレンドではなく 技術や利用環境の変化によるもの
ΤϯδχΞͱσβΠφʔ
デザイナーとエンジニアの分業体制は 本来あるべき姿ではないのか?
職種名は採用のために生まれる、という話 • 採用するには「採用したい人のスキル」を定義する必要がある • 母数を増やすために、ここには「汎用的なスキル」が多く含まれる • そうすると、ある一定のスキルをもった架空の人物像ができあがる • それが「職種」「肩書」になる •
UIデザイナー • ウェブエンジニア
分業体制が生まれるということは 業界が成熟し流入資本が多くなった ということを示している
良し悪しは置いておいて、 産業が大きくなった以上分業化は 避けられない
分業体制におけるデザイナーに必要なもの • 「デザイン対象の理解、知識」 • 言い換えれば「材料、素材の知識」 • 紙の性質を知らなければ印刷物のデザインができないのと同じ • エンジニアからデザイナーになるのは、この点で有利だと思う •
しかし、プログラムが書けることが必須であると思ってない
プログラミング苦手なデザイナーへ • プログラムが書けなくても良い、でも触ってみる体験は必須 • アプリケーションが作れなくても、アプリケーションやブラウザなどの 仕組みを理解することが大事 • 仕組みがわからないデザイナーはどんどん必要とされなくなっていく • 工業デザイナーと同じマインドセットが必要になってきた
• エンジニア勉強会に参加してみる、入門書を読む、etc…
σβΠϯཧͱ ηϯεɾΦϒɾϫϯμʔ
UIデザインは論理的?
デザインには様々な原理原則がある • ゲシュタルト原則 • グリッドシステム • 認知心理学 • 行動経済学 •
人間中心設計 • etc…
しかし… • 完全に論理的ではない(当たり前だけど) • 感覚的な良さを排除することはできない • 理論:感覚 = 7:3 くらい?
• デザインの「感覚」が乏しい人でもある程度できるのがUIデザインの 良いところでもあり悪いところでもあるかも
UIのセンス・オブ・ワンダー • 何をユーザーに届けたいのか次第 • シンプルで使いやすいけど印象に残るUIデザインが重要 • どうやって鍛えたらいいの? • Dribble? •
良いアプリケーションに触れる? • 教えて!!!
͓ΘΓ