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
2k
技術とデザインの間
takanorip
September 29, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
4
620
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
390
Ubieとアクセシビリティのこれからを考える
takanorip
0
370
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.6k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k
Other Decks in Design
See All in Design
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
740
我做了一個詐騙網站...嗎?
crboy
1
140
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
210
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
Карта реализации историй — убийца USM
ashapiro
0
130
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
420
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
170
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
150
root COMPANY DECK / We are hiring!
root_recruit
1
14k
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
160
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
110
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.5k
Featured
See All Featured
Optimizing for Happiness
mojombo
376
69k
The Invisible Side of Design
smashingmag
297
50k
Building Adaptive Systems
keathley
38
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Side Projects
sachag
452
42k
A better future with KSS
kneath
237
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Designing for Performance
lara
604
68k
Building Your Own Lightsaber
phodgson
102
6k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Scaling GitHub
holman
458
140k
For a Future-Friendly Web
brad_frost
174
9.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? •
良いアプリケーションに触れる? • 教えて!!!
͓ΘΓ