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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Design
See All in Design
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
AIでデザインをつくる:基礎編
kenichiota0711
3
2.5k
kintone Style Book
kintone
6
10k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
520
Franks Myth
gfht1
1
410
2026年の勢い / Momentum for 2026
bebe
0
350
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
310
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
Spacemarket Brand Guide
spacemarket
2
170
Liquid GlassとApp Intents
touyou
0
810
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
210
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
870
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
Deep Space Network (abreviated)
tonyrice
0
65
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
150
Code Reviewing Like a Champion
maltzj
527
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
Building AI with AI
inesmontani
PRO
1
710
HDC tutorial
michielstock
1
390
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
260
Building the Perfect Custom Keyboard
takai
2
690
Navigating Weather and Climate Data
rabernat
0
110
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!