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
Tsubasa SEKIGUCHI
PRO
May 08, 2025
Design
1
1.1k
エンジニアでも捗る デザイナー的思考入門
社用で作成したエンジニア向けのデザイン入門スライドです。
特に機密情報はないのでそのまま公開しています
追記(2025/6/5): スライドのtypo修正と顔写真差し替えました
Tsubasa SEKIGUCHI
PRO
May 08, 2025
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
110
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
43
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
920
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
はじめての GitHub Actionsアクション開発
tinykitten
PRO
0
150
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
450
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
Bulletproof Design System with TypeScript
takanorip
6
3.6k
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
170
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
今日から意識できるアクセシビリティ
fumiko
0
250
Yumika Yamada Portfolio
yumii
0
650
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
460
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Embracing the Ebb and Flow
colly
86
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
2025.05.09 | 技術共有会 #2 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION Freelance Frontend
Engineer Tsubasa SEKIGUCHI エンジニアでも捗る デザイナー的思考入門 Design Thinking for Engineers: A Practical Introduction
関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼
Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 2 2025.05.09 | 技術共有会 #2
TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.05.09 |
技術共有会 #2
TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.05.09 |
技術共有会 #2
5 バズりました ユーザーさんがシェアしてくれたので App Storeランキング12位に入ってました 寝耳に水です TrainLCD 直近のハイライト 2025.05.09 |
技術共有会 #2
ノンデザイナーの デザインの誤解あるある Misconceptions About Design 6 2025.05.09 | 技術共有会 #2
7 “デザイン”って聞くと こんなイメージ ありませんか? みんなこう思ってない? 2025.05.09 | 技術共有会 #2 ※全部過去の私です
レビューで毎回何か言われる… 正解がありそうで怖い 自分には無理そう センスの話でしょ Figma開いたけど閉じた わからなすぎて黙る
8 2025.05.09 | 技術共有会 #2 現場で“デザイン”に 直面する瞬間 実際の現場では… Figma見たけど、 何を見ればいいかわからない
margin: 3px と padding: 4px の違いに悩む PRでデザイナーから... 「spacingずれてますね」と言われて焦る
9 2025.05.09 | 技術共有会 #2 デザインは “伝えるための設計” 本当のところは… ユーザーが 迷わないための設計
視線誘導・階層構造 余白の整理 情報の意味と順序を 伝えるための“ロジック”
2025.05.09 | 技術共有会 #2 10 人の行動は変わる? “見せ方”だけで 同じ機能、同じアプリ、同じ中身でも、 伝え方を少し変えるだけで、“見え方”も “使われ方”も変わってしまう。
“伝え方を変えると、人の動きが変わる。” “Change how you present it, and people’s behavior starts to shift.”
「見た目を整える」≠「伝わるように整える」 2025.05.09 | 技術共有会 #2 11 でも、伝わってる? 見た目は、整えた。 “整ってる”と“伝わってる”は、違う話。 誰のために、何を伝えようとしてますか?
12 2025.05.09 | 技術共有会 #2 実例から学ぶ TrainLCDアプリ デザイン戦略 Design Strategies
Behind TrainLCD
13 「誰に届けたいか」 がデザインを決める シンプルだけど、一番重要 2025.05.09 | 技術共有会 #2
ターゲッティングが 重要な理由 届けるって、どういうこと? モノを届けるには、 「何を」「誰に」「どうやって」を 決める必要がある。 “誰に?”が決まることで、 “どうやって”が見えてくる。 2025.05.09
| 技術共有会 #2 14 → → モノを届けたい → 誰に? → だからこうした
2025.05.09 | 技術共有会 #2 15 TrainLCD ランディングページ マニアックさを避け、多くの人に愛されるデザインを目指した “鉄オタ向け”を やめた理由
ターゲットを明確に TrainLCDは、 マニアックなアプリではありません。 公共性の高いデザインを作れば、 より多くの人に便利に使ってもらえる。
航空機のコックピット 航空機の操縦には多くの情報が必要。でも、乗用車では? 2025.05.09 | 技術共有会 #2 16 「ターゲット」が 定まるとデザインは 自然と決まる。
まとめると 「誰のためのプロダクトか」を 常に問い直すことが、 デザインの起点になる。 全員に伝えようとすると、 誰にも響かないデザインになることがある。
17 2025.05.09 | 技術共有会 #2 伝えるための“機能”としての装飾 「装飾」は“飾り”ではない Decoration Is Not
Just Decoration
装飾には “伝える理由”がある。 ちょっとした“見せ方”が差をつくる ボタンに見えるから、押せる。 見えなければ、行動すら起きない。 18 2025.05.09 | 技術共有会 #2
A 申し込む B 申し込む どちらが「押せそう」に見えますか?
個人的にセンスがいいと思っている 東京メトロのサインシステム 「装飾」は “情報”である。 伝えるつもりが、逆に迷わせている。 「装飾」のように見えるデザインも、 伝わりやすさを支える“仕組み”。 意図が伝わるレイアウトや色使いは、 ただの見た目ではなく“情報設計”。 19
2025.05.09 | 技術共有会 #2 引用: https://x.com/Station_Furooke/status/916827214036869120
引用: https://design.digital.go.jp/components/button/ 情報は整理してこそ 意味がある 整っていなければ、伝わらない 複数の強調が並ぶと、 かえって判断が難しくなる。 整理とは、 伝えるべき順を明確にすることでもある。 20
2025.05.09 | 技術共有会 #2 プライマリのボタンが1つ以上使われていて どのアクションが最重要か不明瞭
iOS 18のホーム画面 「伝わる情報」は 整理されている まとめると 見た目のデザインだけではなく、 伝えるべきことを どう優先し、構造化するか。 それが情報設計であり、 装飾の本質でもある。
2025.05.09 | 技術共有会 #2 21
22 2025.05.09 | 技術共有会 #2 見た目の話だけじゃない、“伝わる”をつくる工夫 エンジニアができる小さなデザイン Practical Design Tips
for Engineers
B A Nerima, Tokyo フリーランス フロントエンドエンジニア 関口 翼 aka TinyKitten
080-0000-0000
[email protected]
2025.05.09 | 技術共有会 #2 23 情報の優先順位が 見えると、余白も 自然に決まる。 詰め込みすぎれば、 伝えたい情報すら埋もれてしまう。 基礎はWebもグラフィックも同じです。 “読みやすい”は“迷わせない”デザイン。
B ふれあい予約 A 予約する 小さなデザインが、 使いやすさをつくる。 角丸ひとつ、余白ひとつ。 たったそれだけで印象は変わるし、 迷いも減る。 細部は、ユーザーへの
やさしさの現れでもある。 「ちょっといいかも」を足し算 2025.05.09 | 技術共有会 #2 24
B ふれあい予約 A ふれあい予約 2025.05.09 | 技術共有会 #2 25 「なんかいい」
の正体 見過ごされがちな違和感こそ、 ユーザー体験のほころびの種になる。 小さな違いに敏感であろうとする姿勢が、 プロダクト全体の丁寧さをつくっていく。 違和感に気づく目
26 2025.05.09 | 技術共有会 #2 まとめ 明日から何する? So, What Can
You Do Starting Tomorrow?
B A Nerima, Tokyo フリーランス フロントエンドエンジニア 関口 翼 aka TinyKitten
080-0000-0000
[email protected]
デザイン ≠ 装飾 を意識する 名刺だって小さなUI。だからこそ、 余白や強弱で伝わりやすさを設計している。 情報は整理されてこそ伝わる 2025.05.09 | 技術共有会 #2 27
B ふれあい予約 ブタさんお迎え相談 A ふれあい予約 お迎え相談 UIの1px、 余白、 文言に気を配ってみる 見過ごされがちな小さな調整が、
安心感や信頼感を生み出すこともある。 その“さじ加減”が プロダクト全体の印象を変える。 「なんかいい」を観察する目を養う 2025.05.09 | 技術共有会 #2 28
デザインの 引き出しを増やそう デザイナーは必ずしもデザインを 1から組んでいる訳ではありません。 デザイナーこそ巨人の肩に乗るものです。 今日からでも「いいデザイン」を 盗んでいきましょう。 デザインは生まれ持ったセンスではない 2025.05.09 |
技術共有会 #2 29 質の高いデザイナーSNS Dribbble 世界中のデザイナーが作品を共有したり、交流したりするSNS
2025.05.09 | 技術共有会 #2 30 デザインの 引き出しを増やそう デザイナーは必ずしもデザインを 1から組んでいる訳ではありません。 デザイナーこそ巨人の肩に乗るものです。
今日からでも「いいデザイン」を 盗んでいきましょう。 デザインは生まれ持ったセンスではない スライドの宝庫 SpeakerDeck 簡単にスライドをWeb上で共有できるサービス
デザインできる エンジニア、 実はスゴい。 手前味噌ですが、 エンジニアとしてコードを書いて コードを視覚的に色付けできる 可能性は無限に広がります。 オンリーワンになろう 2025.05.09 |
技術共有会 #2 31 自分以外のデザイナーは要りません TrainLCDは設計、開発、集客、保守すべて一人で行ったプロダクトです
Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました! Thank you for listening!
2025.05.09 | 技術共有会 #2 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION