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
しゅん🌙
August 08, 2025
Programming
0
150
エンジニアのための”最低限いい感じ”デザイン入門
しゅん🌙
August 08, 2025
Tweet
Share
More Decks by しゅん🌙
See All by しゅん🌙
Rustで対戦型Tetrisを作った話
shunshobon
0
380
文字数の話の続き 〜Unicodeの楽しくない話〜
shunshobon
0
220
文字数の話 〜Unicodeの楽しい話〜
shunshobon
0
250
Haskellの並列・並行処理
shunshobon
1
390
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
280
CSC305 Lecture 02
javiergs
PRO
1
260
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
270
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
CSC509 Lecture 02
javiergs
PRO
0
400
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
610
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
1
420
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
0
550
CSC305 Lecture 04
javiergs
PRO
0
230
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.5k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Making Projects Easy
brettharned
118
6.4k
Fireside Chat
paigeccino
40
3.7k
Speed Design
sergeychernyshev
32
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Language of Interfaces
destraynor
162
25k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Designing for Performance
lara
610
69k
Building an army of robots
kneath
306
46k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
Facilitating Awesome Meetings
lara
56
6.6k
Transcript
エンジニアのための ”最低限いい感じ” デザイン入門 MCC しゅん
名前: しゅん 所属: 東京農工大 B4 MCw 分野:
Webフロントエンド/ネットワークなH Twitter: @shun_shobo) GitHub: @shun-shobon 最近自分のブログをリニューアルしたので 良かったら見てください。 https://blog.s2n.tech 自己紹介
サークルや個人開発で割と困るのがデザインです。 最近はAIでそれっぽいものも作れますが、やっぱり微調整は人間が必要です。 あとAIのデザインはどうしても量産型っぽい… 今回はデザイナーは居ないけど、ダサいのは嫌!という方のために、 エンジニアでもそれなりのデザインを作るための実践テクニックを紹介します。 今日話すこと
s 今回は登壇者が実際にデザインをやってきて、これは意識したらいい感じのデザイ ンになったという事例を紹介しますT s 登壇者もデザイナーではありませんT s デザインを専門で学んでいるわけではないので、本来のベストプラクティスなどか ら逸脱してる可能性があります。 おことわり
なぜダサくなるのか? 01
主に3つあると思っています。 逆にこの3点を押さえれば、”最低限いい感じ”にまで持っていけるはずです。 H 色: #000000(黒)や#ff0000(赤)など原色を多用しがち。 また、色の階調や統一感が無い。 H 余白: 場所ごとに値がバラバラで視線誘導が崩れる。 H
パターン: 一般的なUIパターンや既存の作法を知らず、再発明をしてしまう。 なぜダサくなるのか?
色の使い方 02
基本的に原色は#ffffff(白)以外使いません。 特に#000000(黒)は使われがちですが、原色なので結構目にキツイです。 ここでは背景色でしたが、文字色でも#000000を使っているサービスは少ないで す。このスライドでも見出しは#171717、本文は#404040を使用しています。 原色を避ける あのイーハトーヴォのすきとおった風、夏でも底に冷 たさをもつ青いそら、うつくしい森で飾られたモリー オ市、郊外のぎらぎらひかる草の波。 #000000 あのイーハトーヴォのすきとおった風、夏でも底に冷
たさをもつ青いそら、うつくしい森で飾られたモリー オ市、郊外のぎらぎらひかる草の波。 #404040
色相・明度を揃える 複数色でバリエーションを作る場合は、色相と明度のどちらかを揃えると統一感が出 ます。 単色展開: 多色展開: ボタン 基本 ボタン 押したとき ボタン
押せないとき ボタン 基本 ボタン 危険 ボタン その他
配色の比率 配色の基本比率は7:2:1と言われています。 背景色で7、文字色で2、その他アクセントカラーで1になるくらいの配色にすると良い でしょう。
既存のカラーパレットを 使う 初心者がいきなり彩度や明度を合わせてカラーパレット を作るのは難しいです。 おすすめはTailwind CSSのデフォルトカラーパレット を使うことです。 ここから縦または横に色を取っていくだけでそれっぽい 色使いになると思います。 例s
l background: zinc-5 l text: zinc-900 / 50 l accent: indigo-600 / 700
余白の取り方 03
4/8の倍数を意識する 要素のサイズや要素間の余白は倍数にすることで秩序を持たせやすくなります。 特に4の倍数や8の倍数はデザインでよく使用され、以下のようなメリットがあります。 Tailwind CSSなんかでも、基本の余白は4pxとなっていて、p-4で16pxの余白が 生まれるようになっています。 割り切りやすい値なので、端数が発生しづらい スクリーンサイズの基準に合わせやすい。
(フルHDの場合、8×240=1920, 8×135=1080)
4つの基本原則 デザインには4つの基本原則と呼ばれる有名な原則があります。 この原則は余白以外にも大きさや色に適用可能ですが、特に余白の取り方で役に立ち ます。 q 対比: 要素のサイズや色を変えることでメリハリを付け、強調するw q 反復: 同じ要素を繰り返すことで、一貫性と統一性を生み出すw
q 整列: 要素を整列させることで、秩序と統一感を生み出すw q 近接: 関連する要素を近づけてグループ化することで、関係性を明確にする。
パターンを学ぶ 04
まずは真似てみる 基本的な原則やテクニックを学んでもデザインが難しい場合、それは引き出しの少なさ が原因かもしれません。 まずは既存のデザインシステムやUIライブラリを真似るのが最速です。 デザインシステムやUIライブラリは様々な場面で活用できるよう、クセが少なく汎用性 が高いものが多いです。 デザインシステム: Material Design
/ Human Interface Guidelines な UIライブラリ: Bootstrap / Daisy UI / Chakra UI など
実際の事例を見てみる デザインに個性を持たせたい!ゲームUIなどもっと凝ったものが作りたい!という場 合は、実際の事例を見てみるのが良いと思います。 正直この辺は自分もまだまだ勉強中ですが… r 汎用的ギャラリー: Pinterest / Behance な
r Web UI: SANKOU! / Codepen な r ゲームUI: Game UI Database / ゲームUIブログ など
まとめ 05
まとめ G 色: 原色を避けよう。色相・明度を揃えよう。7:2:1の原則。Tailwindを活用T G 余白: 4/8の倍数で統一しよう。4つの基本原則を意識しようT G パターン: まずは真似てみよう。実際の事例を見て引き出しを増やそう。