エンジニアでも捗る デザイナー的思考入門(旧ver)

社用で作成したエンジニア向けのデザイン入門スライドです。
特に機密情報はないのでそのまま公開しています

追記(2025/6/5): スライドのtypo修正と顔写真差し替えました
再追記(2026/7/29): 新verを公開しました: https://speakerdeck.com/tinykitten/enziniademobu-ru-dezainade-si-kao-ru-men-bita-edit

Transcript

1. 2025.05.09 | 技術共有会 #2 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION Freelance Frontend Engineer Tsubasa SEKIGUCHI エンジニアでも捗る デザイナー的思考入門 Design Thinking for Engineers: A Practical Introduction
2. 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 2 2025.05.09 | 技術共有会 #2
3. TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.05.09 | 技術共有会 #2
4. TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.05.09 | 技術共有会 #2
5. 5 バズりました ユーザーさんがシェアしてくれたので App Storeランキング12位に入ってました
 寝耳に水です TrainLCD 直近のハイライト 2025.05.09 | 技術共有会 #2
6. ノンデザイナーの
 デザインの誤解あるある Misconceptions About Design 6 2025.05.09 | 技術共有会 #2
7. 7 “デザイン”って聞くと こんなイメージ ありませんか？ みんなこう思ってない？ 2025.05.09 | 技術共有会 #2 ※全部過去の私です レビューで毎回何か言われる… 正解がありそうで怖い 自分には無理そう センスの話でしょ Figma開いたけど閉じた わからなすぎて黙る
8. 8 2025.05.09 | 技術共有会 #2 現場で“デザイン”に 直面する瞬間 実際の現場では… Figma見たけど、 何を見ればいいかわからない margin: 3px と padding: 4px の違いに悩む PRでデザイナーから...
 「spacingずれてますね」と言われて焦る
9. 9 2025.05.09 | 技術共有会 #2 デザインは “伝えるための設計” 本当のところは… ユーザーが 迷わないための設計 視線誘導・階層構造 余白の整理 情報の意味と順序を 伝えるための“ロジック”
10. 2025.05.09 | 技術共有会 #2 10 人の行動は変わる？ “見せ方”だけで 同じ機能、同じアプリ、同じ中身でも、 伝え方を少し変えるだけで、“見え方”も “使われ方”も変わってしまう。 “伝え方を変えると、人の動きが変わる。” “Change how you present it, and people’s behavior starts to shift.”
11. 「見た目を整える」≠「伝わるように整える」 2025.05.09 | 技術共有会 #2 11 でも、伝わってる？ 見た目は、整えた。 “整ってる”と“伝わってる”は、違う話。 誰のために、何を伝えようとしてますか？
12. 12 2025.05.09 | 技術共有会 #2 実例から学ぶ TrainLCDアプリ デザイン戦略 Design Strategies Behind TrainLCD
13. 13 「誰に届けたいか」 がデザインを決める シンプルだけど、一番重要 2025.05.09 | 技術共有会 #2
14. ターゲッティングが 重要な理由 届けるって、どういうこと？ モノを届けるには、   「何を」「誰に」「どうやって」を 決める必要がある。 “誰に？”が決まることで、 “どうやって”が見えてくる。 2025.05.09 | 技術共有会 #2 14 → → モノを届けたい → 誰に？ → だからこうした
15. 2025.05.09 | 技術共有会 #2 15 TrainLCD ランディングページ マニアックさを避け、多くの人に愛されるデザインを目指した “鉄オタ向け”を やめた理由 ターゲットを明確に TrainLCDは、 マニアックなアプリではありません。 公共性の高いデザインを作れば、 より多くの人に便利に使ってもらえる。
16. 航空機のコックピット 航空機の操縦には多くの情報が必要。でも、乗用車では？ 2025.05.09 | 技術共有会 #2 16 「ターゲット」が 定まるとデザインは 自然と決まる。 まとめると 「誰のためのプロダクトか」を 常に問い直すことが、 デザインの起点になる。 全員に伝えようとすると、 誰にも響かないデザインになることがある。
17. 17 2025.05.09 | 技術共有会 #2 伝えるための“機能”としての装飾 「装飾」は“飾り”ではない Decoration Is Not Just Decoration
18. 装飾には “伝える理由”がある。 ちょっとした“見せ方”が差をつくる ボタンに見えるから、押せる。
 見えなければ、行動すら起きない。 18 2025.05.09 | 技術共有会 #2 A 申し込む B 申し込む どちらが「押せそう」に見えますか？
19. 個人的にセンスがいいと思っている 東京メトロのサインシステム 「装飾」は “情報”である。 伝えるつもりが、逆に迷わせている。 「装飾」のように見えるデザインも、
 伝わりやすさを支える“仕組み”。 意図が伝わるレイアウトや色使いは、
 ただの見た目ではなく“情報設計”。 19 2025.05.09 | 技術共有会 #2 引用: https://x.com/Station_Furooke/status/916827214036869120
20. 引用: https://design.digital.go.jp/components/button/ 情報は整理してこそ 意味がある 整っていなければ、伝わらない 複数の強調が並ぶと、 かえって判断が難しくなる。 整理とは、 伝えるべき順を明確にすることでもある。 20 2025.05.09 | 技術共有会 #2 プライマリのボタンが1つ以上使われていて どのアクションが最重要か不明瞭
21. iOS 18のホーム画面 「伝わる情報」は 整理されている まとめると 見た目のデザインだけではなく、 伝えるべきことを どう優先し、構造化するか。 それが情報設計であり、 装飾の本質でもある。 2025.05.09 | 技術共有会 #2 21
22. 22 2025.05.09 | 技術共有会 #2 見た目の話だけじゃない、“伝わる”をつくる工夫 エンジニアができる小さなデザイン Practical Design Tips for Engineers
23. B A Nerima, Tokyo フリーランス フロントエンドエンジニア 関口　 翼 aka TinyKitten 080-0000-0000 ts@tinykitten.me 2025.05.09 | 技術共有会 #2 23 情報の優先順位が 見えると、余白も 自然に決まる。 詰め込みすぎれば、 伝えたい情報すら埋もれてしまう。 基礎はWebもグラフィックも同じです。 “読みやすい”は“迷わせない”デザイン。
24. B ふれあい予約 A 予約する 小さなデザインが、 使いやすさをつくる。 角丸ひとつ、余白ひとつ。 たったそれだけで印象は変わるし、 迷いも減る。 細部は、ユーザーへの やさしさの現れでもある。 「ちょっといいかも」を足し算 2025.05.09 | 技術共有会 #2 24
25. B ふれあい予約 A ふれあい予約 2025.05.09 | 技術共有会 #2 25 「なんかいい」
 の正体 見過ごされがちな違和感こそ、 ユーザー体験のほころびの種になる。 小さな違いに敏感であろうとする姿勢が、 プロダクト全体の丁寧さをつくっていく。 違和感に気づく目
26. 26 2025.05.09 | 技術共有会 #2 まとめ 明日から何する？ So, What Can You Do Starting Tomorrow?
27. B A Nerima, Tokyo フリーランス フロントエンドエンジニア 関口　 翼 aka TinyKitten 080-0000-0000 ts@tinykitten.me デザイン ≠ 装飾
 を意識する 名刺だって小さなUI。だからこそ、
 余白や強弱で伝わりやすさを設計している。 情報は整理されてこそ伝わる 2025.05.09 | 技術共有会 #2 27
28. B ふれあい予約 ブタさんお迎え相談 A ふれあい予約 お迎え相談 UIの1px、 余白、 文言に気を配ってみる 見過ごされがちな小さな調整が、 安心感や信頼感を生み出すこともある。 その“さじ加減”が プロダクト全体の印象を変える。 「なんかいい」を観察する目を養う 2025.05.09 | 技術共有会 #2 28
29. デザインの
 引き出しを増やそう デザイナーは必ずしもデザインを １から組んでいる訳ではありません。 デザイナーこそ巨人の肩に乗るものです。 今日からでも「いいデザイン」を 盗んでいきましょう。 デザインは生まれ持ったセンスではない 2025.05.09 | 技術共有会 #2 29 質の高いデザイナーSNS Dribbble 世界中のデザイナーが作品を共有したり、交流したりするSNS
30. 2025.05.09 | 技術共有会 #2 30 デザインの
 引き出しを増やそう デザイナーは必ずしもデザインを １から組んでいる訳ではありません。 デザイナーこそ巨人の肩に乗るものです。 今日からでも「いいデザイン」を 盗んでいきましょう。 デザインは生まれ持ったセンスではない スライドの宝庫 SpeakerDeck 簡単にスライドをWeb上で共有できるサービス
31. デザインできる
 エンジニア、 実はスゴい。 手前味噌ですが、 エンジニアとしてコードを書いて コードを視覚的に色付けできる 可能性は無限に広がります。 オンリーワンになろう 2025.05.09 | 技術共有会 #2 31 自分以外のデザイナーは要りません TrainLCDは設計、開発、集客、保守すべて一人で行ったプロダクトです
32. Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました！ Thank you for listening! 2025.05.09 | 技術共有会 #2 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION