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
49
エンジニアのための”最低限いい感じ”デザイン入門
しゅん🌙
August 08, 2025
Tweet
Share
More Decks by しゅん🌙
See All by しゅん🌙
Rustで対戦型Tetrisを作った話
shunshobon
0
370
文字数の話の続き 〜Unicodeの楽しくない話〜
shunshobon
0
210
文字数の話 〜Unicodeの楽しい話〜
shunshobon
0
250
Haskellの並列・並行処理
shunshobon
1
370
Other Decks in Programming
See All in Programming
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
構文解析器入門
ydah
7
2k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
440
新世界の理解
koriym
0
130
AIのメモリー
watany
12
1.2k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
実践 Dev Containers × Claude Code
touyu
1
120
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
2
610
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Navigating Team Friction
lara
188
15k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
4 Signs Your Business is Dying
shpigford
184
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
It's Worth the Effort
3n
185
28k
Practical Orchestrator
shlominoach
190
11k
A Tale of Four Properties
chriscoyier
160
23k
A better future with KSS
kneath
238
17k
Designing Experiences People Love
moore
142
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
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 パターン: まずは真似てみよう。実際の事例を見て引き出しを増やそう。