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
170
エンジニアのための”最低限いい感じ”デザイン入門
しゅん🌙
August 08, 2025
Tweet
Share
More Decks by しゅん🌙
See All by しゅん🌙
Rustで対戦型Tetrisを作った話
shunshobon
0
390
文字数の話の続き 〜Unicodeの楽しくない話〜
shunshobon
0
220
文字数の話 〜Unicodeの楽しい話〜
shunshobon
0
250
Haskellの並列・並行処理
shunshobon
1
400
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
技術的負債の正体を知って向き合う
irof
0
230
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
iOSでSVG画像を扱う
kishikawakatsumi
0
160
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
100
CSC509 Lecture 05
javiergs
PRO
0
310
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
460
CSC305 Lecture 10
javiergs
PRO
0
220
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
590
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Embracing the Ebb and Flow
colly
88
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Why Our Code Smells
bkeepers
PRO
340
57k
Writing Fast Ruby
sferik
629
62k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Balancing Empowerment & Direction
lara
5
700
BBQ
matthewcrist
89
9.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
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 パターン: まずは真似てみよう。実際の事例を見て引き出しを増やそう。