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
May 08, 2025
Design
0
110
エンジニアでも捗る デザイナー的思考入門
社用で作成したエンジニア向けのデザイン入門スライドです。
特に機密情報はないのでそのまま公開しています
Tsubasa SEKIGUCHI
May 08, 2025
Tweet
Share
More Decks by Tsubasa SEKIGUCHI
See All by Tsubasa SEKIGUCHI
Gunma.web #55
tinykitten
0
150
React Nativeではじめる ハイパフォーマンス スマホアプリ開発(GENIEE Edit)
tinykitten
0
99
AWS/GCPで始める 生成AI入門
tinykitten
0
130
Rustとtonicで始める gRPC入門(GENIEE Edit)
tinykitten
0
35
スモールスタートで始める フィードバック管理システム開発入門
tinykitten
0
280
Rustとtonicで始める gRPC再入門
tinykitten
0
850
gRPCで始める ハイパフォーマンス タイプセーフウェブ開発
tinykitten
0
250
ノンデザイナーが 多少マシな見た目の資料を作る方法
tinykitten
0
180
はじめての GitHub Actionsアクション開発
tinykitten
0
130
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
880
Starry | Storyboards | Scene 1-21
giofortuna_story
0
180
線で考える画面構成
natsuume
1
840
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
210
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
1k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.6k
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
180
Les petites aventures de CSS, saison 2025
goetter
3
4k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
170
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
610
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
190
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.3k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Side Projects
sachag
453
42k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Raft: Consensus for Rubyists
vanstee
137
6.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Into the Great Unknown - MozCon
thekraken
38
1.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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