Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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.6k
Significance and application of engineers learning design
takanorip
July 06, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
0
760
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
780
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
570
Bulletproof Design System with TypeScript
takanorip
7
4.4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
210
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
970
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
530
Other Decks in Design
See All in Design
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
140
Yumika Yamada Portfolio
yumii
0
2.3k
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
Vibe Coding デザインシステム
poteboy
3
1.5k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
500
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
810
Shaolin_Showdown
solmetts
0
140
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
130
「UXとUIの違い」v2
shirasu3
0
300
図じゃなく言語で描く - Common Ground for Design AI Operations.
kazukiikeda
1
450
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
210
体験を守るためのデザイン計測
techtekt
PRO
0
110
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
432
66k
Balancing Empowerment & Direction
lara
5
770
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Faster Mobile Websites
deanohume
310
31k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
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!