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
3.7k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Significance and application of engineers learning design
takanorip
July 06, 2019
More Decks by takanorip
See All by takanorip
「見せる」登壇資料デザインの極意
takanorip
4
1.1k
Design System Documentation Tooling 2025
takanorip
3
2.7k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
770
Bulletproof Design System with TypeScript
takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
290
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.3k
Other Decks in Design
See All in Design
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
deadlinepoet
0
320
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
500
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
840
第18回サイゼミ
lw
1
3.9k
AIスライド生成を進化させるMDファイル
kenichiota0711
1
1.3k
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
nttcom
0
720
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
670
PAMPHLET.pdf
mhand01
0
490
なぜ、インサイトを貯めるのか?
tajima_kaho
2
2.2k
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
240
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
7
5.6k
Featured
See All Featured
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
390
AI: The stuff that nobody shows you
jnunemaker
PRO
8
720
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Typedesign – Prime Four
hannesfritz
42
3.1k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
How STYLIGHT went responsive
nonsquared
100
6.2k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
260
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
230
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
160
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
200
Technical Leadership for Architectural Decision Making
baasie
3
420
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!