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
130
エンジニアのための”最低限いい感じ”デザイン入門
しゅん🌙
August 08, 2025
Tweet
Share
More Decks by しゅん🌙
See All by しゅん🌙
Rustで対戦型Tetrisを作った話
shunshobon
0
370
文字数の話の続き 〜Unicodeの楽しくない話〜
shunshobon
0
220
文字数の話 〜Unicodeの楽しい話〜
shunshobon
0
250
Haskellの並列・並行処理
shunshobon
1
380
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
860
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
令和最新版手のひらコンピュータ
koba789
14
8k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
コンテキストエンジニアリング Cursor編
kinopeee
1
710
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Ace a Technical Interview
jacobian
279
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
160
23k
Designing Experiences People Love
moore
142
24k
A designer walks into a library…
pauljervisheath
207
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Building Adaptive Systems
keathley
43
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
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 パターン: まずは真似てみよう。実際の事例を見て引き出しを増やそう。