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
1.9k
技術とデザインの間
takanorip
September 29, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
早わかり W3C Community Group
takanorip
0
270
Ubieとアクセシビリティのこれからを考える
takanorip
0
240
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
180
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Design
See All in Design
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
610
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
250
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
400
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
310
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
モデル・デザイン入門
akitsugu7935
0
480
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
860
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Optimizing for Happiness
mojombo
370
69k
RailsConf 2023
tenderlove
8
550
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
What's new in Ruby 2.0
geeforr
337
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
12
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Docker and Python
trallard
35
2.7k
Design by the Numbers
sachag
274
18k
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? •
良いアプリケーションに触れる? • 教えて!!!
͓ΘΓ