Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
技術とデザインの間
Search
takanorip
September 29, 2020
Design
2.5k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
技術とデザインの間
takanorip
September 29, 2020
More Decks by takanorip
See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
6k
「見せる」登壇資料デザインの極意
takanorip
7
1.6k
Design System Documentation Tooling 2025
takanorip
3
3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
890
Bulletproof Design System with TypeScript
takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
320
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.2k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
8k
Other Decks in Design
See All in Design
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.5k
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
570
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
accessinnovations
0
160
開閉UIのアニメーション設計
hiro0218
2
1.1k
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
240
Luna's Light
shemeetscity
0
140
インターンから2年新卒フロントエンドエンジニアから見たサイボウズのアクセシビリティ
taku10101
0
150
Of Ordination and Rebellion exploration sketches
rezaline
0
220
Jun Wei Portfolio 2026
wjw100788
PRO
1
290
「惜しいデザイン」 を生み出さないための AIレビューループ
0b1tk
3
4.5k
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
6.6k
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
110
Featured
See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
280
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
760
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
Heart Work Chapter 1 - Part 1
lfama
PRO
10
36k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
330
The Language of Interfaces
destraynor
162
27k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
850
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Unsuck your backbone
ammeep
672
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
The Pragmatic Product Professional
lauravandoore
37
7.4k
Thoughts on Productivity
jonyablonski
76
5.4k
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? •
良いアプリケーションに触れる? • 教えて!!!
͓ΘΓ