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
Significance and application of engineers learn...
Search
takanorip
July 06, 2019
Design
1
3.5k
Significance and application of engineers learning design
takanorip
July 06, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
480
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
940
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Design
See All in Design
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
410
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
630
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
350
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
500
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
350
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
260
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
portfolio.pdf
onof003
0
190
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
2
320
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Cost Of JavaScript in 2023
addyosmani
54
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
For a Future-Friendly Web
brad_frost
180
9.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
1 エンジニアがデザインを学ぶことの意義とその応用 Takanori Oki @BCU30 2019/07/06 Copyright © 2019 FOLIO,
Ltd. All Rights Reserved.
自己紹介 @2 • 大木尊紀 / takanorip • 株式会社FOLIO フロントエンドエンジニア •
オンライン証券会社 • https://corp.folio-sec.com/ • フロントエンドエンジニア・デザイナー絶賛募集中! • React / Web Componets / Figma / ウェブフォント / etc...
デザイン? @3
デザインの定義 @4 「デザインとは、ものづくりやコミュニケーションを通して 自分たちの生きる世界をいきいきと認識することであり、 優れた認識や発見は、生きて生活を営む人間としての喜びや誇りを もたらしてくれるはずだ」 原研哉 「デザインのデザイン」
デザインの定義 @5
デザインの定義 @6 語源はラテン語の「Designare(設計)」
デザインの定義 @7 デザイン ≠ グラフィックデザイン
デザインの定義 @8 グラフィックデザイン 建築デザイン サービスデザイン ウェブデザイン モーションデザイン DTPデザイン デザイン インターフェースデザイン
デザインの定義 @9 インターフェースデザイン
インターフェースデザイン @10 コンピュータの性質を どのように人間の活動に 結びつけるか
インターフェースデザイン @11 インターフェースデザイン UIデザイン ユーザビリティ その他
認知科学 心理学 人間工学 @12 学術的視点
インターフェースデザインは 至極論理的であり 感性の世界ではない @13 インターフェースデザイン
なぜエンジニアが デザインを学ぶのか? @14
作ってるものが「良いもの」なのかどうか 判断するための基準を持つため @15 デザインを学ぶ理由 自分が作ってるものが「良い」って自信持って言える?
制作会社のフロントエンドエンジニア時代 @16 takanoripの話① ディレクターとデザイナーの立場が強い会社だった。 僕は何もわからないままデザイナーが作ったデザインを実装し再現した。 「これは本当に使う人にとって良いものなのか?」 何もわからなくて何も言えなかったのが悔しかった。
「何を作るべきか」を 考えるため @17 デザインを学ぶ理由 良いプロダクトを作るためには必要なものを見極めることが必要
FOLIOでのto Cサービス開発 @18 takanoripの話② 投資初心者向けのサービスという 前例のないサービスなので、みんな手探り状態。 「何を作るべきか」「今何が必要なのか」という議論を繰り返してる。 エンジニアとしての意見にデザイン的な視点を加えると、説得力が増す (頭でっかちになってはいけないけど)
デザイナーやビジネスサイドの人との コミュニケーションを円滑にするため @19 デザインを学ぶ理由 スムーズなコミュニケーションには共通言語が必要
@20
前職でto Cのサービスを立ち上げたとき @21 takanoripの話③ サービス立ち上げ時は人数が少ないし仕様なども流動的になりがち。 そういうときにデザイナーの意図を汲み取れると 無駄なコミュニケーションが減り、関係が良くなる。
デザインを 成長・キャリアにつなげる @22
どんなキャリアがありそう? @23 キャリア・成長につなげるために
そのままエンジニアとして プロダクト開発に貢献 エンジニア デザイナーとエンジニアの つなぎ目、土台整備 デザインエンジニア よりマネジメントに注力 弊社ではこのパターンが多い PdM @24
キャリアの例
でも… @25 キャリア・成長につなげるために
@26 キャリア・成長につなげるために • デザイナーじゃないから仕事で使う機会がない… • デザインはデザイナーの仕事だしエンジニアが口を挟むなんて… • どうやって勉強すれば良いかわからない…
機会は自分で作る! @27 キャリア・成長につなげるために
機会は自分で作る! @28 • プライベートでなにか作る • 仕事で作っているもののUI改善を提案してみる • ミーティングで発言してみる • デザイナーと話してみる
• etc...
デザインはチーム全員の仕事! @29 キャリア・成長につなげるために
「融けるデザイン」 「スペキュラティブデザイン」 「なるほどデザイン」 本を読む 僕は個人サイトとか 雑誌とか 名刺とかを作ってます 個人で何かつくる 既存のデザインに対して 批評してみる
(文句言うのとは違うよ) デザイン批評する @30 How to study Design
THANK YOU!