エンジニアのための”最低限いい感じ”デザイン入門

Transcript

1. エンジニアのための
 ”最低限いい感じ”
 デザイン入門 MCC しゅん
2. ’ 名前: しゅん ’ 所属: 東京農工大 B4 MCw ’ 分野: Webフロントエンド/ネットワークなH ’ Twitter: @shun_shobo) ’ GitHub: @shun-shobon 最近自分のブログをリニューアルしたので
 良かったら見てください。 https://blog.s2n.tech 自己紹介
3. サークルや個人開発で割と困るのがデザインです。 最近はAIでそれっぽいものも作れますが、やっぱり微調整は人間が必要です。 あとAIのデザインはどうしても量産型っぽい… 今回はデザイナーは居ないけど、ダサいのは嫌！という方のために、
 エンジニアでもそれなりのデザインを作るための実践テクニックを紹介します。 今日話すこと
4. s 今回は登壇者が実際にデザインをやってきて、これは意識したらいい感じのデザイ ンになったという事例を紹介しますT s 登壇者もデザイナーではありませんT s デザインを専門で学んでいるわけではないので、本来のベストプラクティスなどか ら逸脱してる可能性があります。 おことわり
5. なぜダサくなるのか？ 01
6. 主に3つあると思っています。 逆にこの3点を押さえれば、”最低限いい感じ”にまで持っていけるはずです。 H 色: #000000(黒)や#ff0000(赤)など原色を多用しがち。
 また、色の階調や統一感が無い。 H 余白: 場所ごとに値がバラバラで視線誘導が崩れる。 H パターン: 一般的なUIパターンや既存の作法を知らず、再発明をしてしまう。 なぜダサくなるのか？
7. 色の使い方 02
8. 基本的に原色は#ffffff(白)以外使いません。 特に#000000(黒)は使われがちですが、原色なので結構目にキツイです。 ここでは背景色でしたが、文字色でも#000000を使っているサービスは少ないで す。このスライドでも見出しは#171717、本文は#404040を使用しています。 原色を避ける あのイーハトーヴォのすきとおった風、夏でも底に冷 たさをもつ青いそら、うつくしい森で飾られたモリー オ市、郊外のぎらぎらひかる草の波。 #000000 あのイーハトーヴォのすきとおった風、夏でも底に冷 たさをもつ青いそら、うつくしい森で飾られたモリー オ市、郊外のぎらぎらひかる草の波。 #404040
9. 色相・明度を揃える 複数色でバリエーションを作る場合は、色相と明度のどちらかを揃えると統一感が出 ます。 単色展開: 多色展開: ボタン 基本 ボタン 押したとき ボタン 押せないとき ボタン 基本 ボタン 危険 ボタン その他
10. 配色の比率 配色の基本比率は7:2:1と言われています。
 背景色で7、文字色で2、その他アクセントカラーで1になるくらいの配色にすると良い でしょう。
11. 既存のカラーパレットを
 使う 初心者がいきなり彩度や明度を合わせてカラーパレット を作るのは難しいです。 おすすめはTailwind CSSのデフォルトカラーパレット を使うことです。 ここから縦または横に色を取っていくだけでそれっぽい 色使いになると思います。 例s l background: zinc-5– l text: zinc-900 / 50– l accent: indigo-600 / 700
12. 余白の取り方 03
13. 4/8の倍数を意識する 要素のサイズや要素間の余白は倍数にすることで秩序を持たせやすくなります。 特に4の倍数や8の倍数はデザインでよく使用され、以下のようなメリットがあります。 Tailwind CSSなんかでも、基本の余白は4pxとなっていて、p-4で16pxの余白が 生まれるようになっています。 “ 割り切りやすい値なので、端数が発生しづらい˜ “ スクリーンサイズの基準に合わせやすい。
 (フルHDの場合、8×240=1920, 8×135=1080)
14. 4つの基本原則 デザインには4つの基本原則と呼ばれる有名な原則があります。 この原則は余白以外にも大きさや色に適用可能ですが、特に余白の取り方で役に立ち ます。 q 対比: 要素のサイズや色を変えることでメリハリを付け、強調するw q 反復: 同じ要素を繰り返すことで、一貫性と統一性を生み出すw q 整列: 要素を整列させることで、秩序と統一感を生み出すw q 近接: 関連する要素を近づけてグループ化することで、関係性を明確にする。
15. パターンを学ぶ 04
16. まずは真似てみる 基本的な原則やテクニックを学んでもデザインが難しい場合、それは引き出しの少なさ が原因かもしれません。 まずは既存のデザインシステムやUIライブラリを真似るのが最速です。 デザインシステムやUIライブラリは様々な場面で活用できるよう、クセが少なく汎用性 が高いものが多いです。 Œ デザインシステム: Material Design / Human Interface Guidelines な‘ Œ UIライブラリ: Bootstrap / Daisy UI / Chakra UI など
17. 実際の事例を見てみる デザインに個性を持たせたい！ゲームUIなどもっと凝ったものが作りたい！という場 合は、実際の事例を見てみるのが良いと思います。 正直この辺は自分もまだまだ勉強中ですが… r 汎用的ギャラリー: Pinterest / Behance な˜ r Web UI: SANKOU! / Codepen な˜ r ゲームUI: Game UI Database / ゲームUIブログ など
18. まとめ 05
19. まとめ G 色: 原色を避けよう。色相・明度を揃えよう。7:2:1の原則。Tailwindを活用T G 余白: 4/8の倍数で統一しよう。4つの基本原則を意識しようT G パターン: まずは真似てみよう。実際の事例を見て引き出しを増やそう。