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
Reactで始める リグレッションテスト概論
tinykitten
PRO
0
28
Gunma.web #55
tinykitten
PRO
0
210
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
PRO
0
120
AWS/GCPで始める 生成AI入門
tinykitten
PRO
0
150
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
PRO
0
44
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
PRO
0
290
Rustとtonicで始める gRPC再入門
tinykitten
PRO
0
930
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
PRO
0
270
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
PRO
0
200
Other Decks in Design
See All in Design
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
harutaka Vision Deck
zenkigenforrecruit
0
170
7 Core Values of Round-L
wired888
0
720
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
770
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
Storyboard Honey
rocioparronrubio
0
310
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.6k
AIで加速するアクセシビリティのこれから
magi1125
3
590
DC Style Redesign
mcduckyart
0
140
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
290
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
sachi_y_portfolio
sachi337
0
420
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
346
40k
Facilitating Awesome Meetings
lara
54
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Being A Developer After 40
akosma
90
590k
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