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.2k
技術とデザインの間
takanorip
September 29, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
Bulletproof Design System with TypeScript
takanorip
6
3.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
140
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
890
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.2k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
490
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Design
See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
420
The Golden Whitney
ohtristanart
PRO
0
510
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
「デザイン」を信じるには
iflection
0
260
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
Saudade typeface
tiagoporto
0
320
How to get a Tiger to Tulsa
mcduckyart
0
110
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
158
25k
Bash Introduction
62gerente
614
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Docker and Python
trallard
44
3.4k
Embracing the Ebb and Flow
colly
86
4.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
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? •
良いアプリケーションに触れる? • 教えて!!!
͓ΘΓ