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

社用で作成したエンジニア向けのデザイン入門スライドです。
特に機密情報はないのでそのまま公開しています
旧バージョン: https://speakerdeck.com/tinykitten/enziniademobu-ru-dezainade-si-kao-ru-men

Transcript

1. 2026.07.28 | ENGINE #88 エンジニアでも捗る デザイナー的思考入門 Design Literacy for Engineers: A Practical Introduction Freelance Frontend Engineer Tsubasa SEKIGUCHI NON-CONFIDENTIAL 社外公開可
2. 2026.07.28 | ENGINE #88 フリーランス フロントエンドエンジニア 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten 2
3. 2026.07.28 | ENGINE #88 フリーランス フロントエンドエンジニア TinyKitten タイニーキトゥン aka 関口 翼 3
4. 2026.07.28 | ENGINE #88 電車のあの画面、持ち歩けます。 TrainLCD 今までありそうでなかった あなたのスマートフォンで使える トレインビジョン 4
5. 2026.07.28 | ENGINE #88 推定到着時間(ETA)機能 ストアリリースしました！ 表示されている分数はあくまで推定です。 実際の経路とは多少の誤差があります。 5
6. 2026.07.28 | ENGINE #88 ノンデザイナーの
 デザインの誤解あるある Misconceptions About Design 6
7. 2026.07.28 | ENGINE #88 💭 🎨 🌀 レビューで毎回何か言われる… 暗黙のルールがありそう みんなこう思ってない？ 自分には無理そう センスの話でしょ “デザイン”って聞くと こんなイメージ ありませんか？ Figma開いたけど閉じた わからなすぎて黙る ※全部過去の私です 7
8. 2026.07.28 | ENGINE #88 🧑‍🎨 🖼️ 📐 PRでデザイナーから...
 「1pxズレてますね」と言われて焦る Figma見たけど、 何を見ればいいかわからない 実際の現場では… 現場で“デザイン”に 直面する瞬間 フロント実装時に、 余白がmarginなのか gapなのか読み取れない 8
9. 2026.07.28 | ENGINE #88 🗺️ 👀 🧠 ユーザーが 迷わないための設計 視線誘導・階層構造 余白の整理 本当のところは… デザインは “伝えるための設計” 情報の意味と順序を 伝えるための“ロジック” 9
10. 2026.07.28 | ENGINE #88 “見せ方”だけで 人の行動は変わる？ 同じ機能、同じアプリ、同じ中身でも、 伝え方を少し変えるだけで、“見え方”も “使われ方”も変わってしまう。 10
11. 2026.07.28 | ENGINE #88 見た目は、整えた。 でも、伝わってる？ “整ってる”と“伝わってる”は、違う話。 誰のために、何を伝えようとしてますか？ 「見た目を整える」≠「伝わるように整える」 11
12. 2026.07.28 | ENGINE #88 実例から学ぶ TrainLCDアプリ デザイン戦略 Design Strategies Behind TrainLCD 12
13. 2026.07.28 | ENGINE #88 シンプルだけど、一番重要 「誰に届けたいか」 がデザインを決める 13
14. 2026.07.28 | ENGINE #88 📦→🎯→💡 モノを届けたい → 誰に？ → だからこうした 届けるって、どういうこと？ ターゲッティングが 重要な理由 モノを届けるには、   「何を」「誰に」「どうやって」を 決める必要がある。 “誰に？”が決まることで、 “どうやって”が見えてくる。 14
15. 2026.07.28 | ENGINE #88 ターゲットを明確に 乗り慣れない路線で 不安を感じる人 TrainLCDは、 マニアックなアプリではありません。 公共性の高いデザインを作れば、 より多くの人に便利に使ってもらえる。 TrainLCD ランディングページ マニアックさを避け、多くの人に愛されるデザインを目指した 15
16. 2026.07.28 | ENGINE #88 まとめると 「ターゲット」が 定まると、デザイン 判断の基準ができる 航空機のコックピット 航空機の操縦には多くの情報が必要。でも、乗用車では？ 出典: Andrés Dallimonti 「誰のためのプロダクトか」を 常に問い直すことが、 デザインの起点になる。 全員に伝えようとすると、 誰にも響かないデザインになることがある。 16
17. 2026.07.28 | ENGINE #88 デザインと装飾 装飾でも情報を伝える Design and Decoration: Conveying Information Through Decoration 17
18. 2026.07.28 | ENGINE #88 どちらが「押せそう」に見えますか？ 申し込む 申し込む A ちょっとした“見せ方”が差をつくる B 選べましたか？ では、なぜそう思いましたか？ 装飾には “伝える理由”がある 18
19. 2026.07.28 | ENGINE #88 どちらが「押せそう」に見えますか？ 申し込む 申し込む A ちょっとした“見せ方”が差をつくる B ボタンに見えるから、押せる。
 見えなければ、行動すら起きない。 装飾には “伝える理由”がある 19
20. 2026.07.28 | ENGINE #88 配色も、レイアウトも 路線や方向を伝える情報になっている 「装飾」は “情報”である 「装飾」のように見えるデザインも、
 伝わりやすさを支える“仕組み”。 意図が伝わるレイアウトや色使いは、
 ただの見た目ではなく“情報設計”。 個人的にセンスがいいと思っている 東京メトロのサインシステム 出典: https://x.com/Station_Furooke/status/916827214036869120 20
21. 2026.07.28 | ENGINE #88 整っていなければ、伝わらない 情報は整理してこそ 意味がある 複数の強調が並ぶと、 かえって判断が難しくなる。 整理とは、 伝えるべき順を明確にすることでもある。 プライマリボタンが複数使われていて どのアクションが最重要か不明瞭 出典: https://design.digital.go.jp/components/button/ 21
22. 2026.07.28 | ENGINE #88 まとめると 「伝わる情報」は 整理されている 見た目のデザインだけではなく、 伝えるべきことを どう優先し、構造化するか。 それが情報設計であり、 装飾の本質でもある。 iPhoneのホーム画面 出典: Apple Inc. 22
23. 2026.07.28 | ENGINE #88 見た目の話だけじゃない、“伝わる”をつくる工夫 エンジニアができる小さなデザイン Practical Design Tips for Engineers 23
24. 2026.07.28 | ENGINE #88 A フリーランス フロントエンドエンジニア 関口 翼 aka TinyKitten myc@tinykitten.me https://tinykitten.me Nerima, Tokyo B “読みやすい”は“迷わせない”デザイン 情報の優先順位が 見えると、余白も 自然に決まる 強弱がなければ、 伝えたい情報すら埋もれてしまう。 基礎はWebもグラフィックも同じです。 24
25. 2026.07.28 | ENGINE #88 A 予約する 「ちょっといいかも」を足し算 小さなデザインが、 使いやすさをつくる。 B 配色を変えてみる。 たったそれだけで印象は変わるし、 押せそうな印象や親しみやすさをつくる。 予約する 25
26. 2026.07.28 | ENGINE #88 A 予約する B 予約する 違和感に気づく目 「なんかいい」
 の正体 見過ごされがちな違和感こそ、 ユーザー体験のほころびの種になる。 小さな違いに敏感であろうとする姿勢が、 プロダクト全体の丁寧さをつくっていく。 26
27. 2026.07.28 | ENGINE #88 最後に 明日から何する？ So, What Can You Do Starting Tomorrow? 27
28. 2026.07.28 | ENGINE #88 A フリーランス フロントエンドエンジニア 関口 翼 aka TinyKitten myc@tinykitten.me https://tinykitten.me Nerima, Tokyo B 情報は整理されてこそ伝わる デザイン ≠ 装飾
 を意識する 名刺だって小さなUI。だからこそ、
 余白や強弱で伝わりやすさを設計している。 28
29. 2026.07.28 | ENGINE #88 ふれあい予約 お迎え相談 ふれあい予約 どうぶつお迎え相談 A B 「なんかいい」を観察する目を養う UIの1px、 余白、 文言に気を配ってみる 見過ごされがちな小さな調整が、 安心感や信頼感を生み出すこともある。 その“さじ加減”が プロダクト全体の印象を変える。 29
30. 2026.07.28 | ENGINE #88 デザインは生まれ持ったセンスではない 見た目の
 引き出しを増やそう 配色・余白・角丸の“効かせ方”を、 完成されたアウトプットの細部から学ぶ。 気になった1枚を「なぜ良いのか」 一言で言語化してみる。 その積み重ねが、あなたの引き出しになる。 質の高いデザイナーSNS Dribbble 世界中のデザイナーが作品を共有したり、交流したりするSNS 30
31. 2026.07.28 | ENGINE #88 デザインは生まれ持ったセンスではない 構成と言葉の
 引き出しを増やそう 情報の順番、見出しの立て方、 そして1枚に「何を載せないか」。 この資料も、 先人の型を借りて作り上げました。 スライドの宝庫 SpeakerDeck 簡単にスライドをWeb上で共有できるサービス 31
32. 2026.07.28 | ENGINE #88 🗺️ 🎯 🎨 デザインは ユーザーが迷わないための設計 誰のためのデザイン？ デザインのターゲットを明確に これだけでも持ち帰ってください まとめ 装飾は情報である 「伝わる情報」は整理されている 32
33. 2026.07.28 | ENGINE #88 NON-CONFIDENTIAL ご清聴ありがとうございました！ Thank you for listening! Freelance Frontend Engineer Tsubasa SEKIGUCHI 社外公開可