🎨
【エンジニア向け】デザインをいい感じにするコツ
個人で何かを作っている時、「なんかデザイン微妙だなぁ。何をどうすればいい感じになるかわからない」ってことありませんか？
tailwind labsのデザイナー＆パートナーを務めるSteve Schoger氏がtwitter上でデザインをいい感じにするコツをシェアしていたので、内容を確認しつつまとめてみました。
一緒に働くエンジニアのAdam Wathan氏とデジタルコンテンツ（RefactoringUI）を開発して販売もしているようです。
勉強になる情報が多かったので購入意欲高まってます。
背景の色味を文字色に加える
- 具体的な方法
- hueをいじる
- テキストのopacityを下げる
区切りにborderを多用しない
- 代替案
- input欄に背景色を付ける
- 行間を広くする
- 影を付ける
アイコンの色を文字色より薄くする
- アイコンがテキストより重い場合
リストマーカーをアイコン等に置き換える
ページ上部に細いラインを入れる
- 効能
- メリハリが生まれる
要素を一部重ねる
- 効能
- スクロールを促す
- 奥行きが出る
入力欄を無駄に長くしない
大きさだけでなく色やweightで差をつける
アイコンを背景色付きの図形で囲う
テキストサイズとline-heightを反比例させる
いい感じの表の見せ方
- 具体的な方法
- 見出しは強調しない
- 縦線はいらない
- 単位付きの値なら右寄せ、それ以外は左寄せ
- 罫線は細く
- アクションボタンはhover時に表示
- アクションボタンはテキストリンクに
影を付けすぎない
# bad
box-shadow: 0px 0px 8px rgba(0,0,0,0.18);
# better
box-shadow: 0px 2px 4px rgba(0,0,0,0.18);
コンテンツをいい感じに見せるコツ
- 見出しのfontを変える
- 本文の文字色は薄く
ドロップダウンリストをrichにする
- 2カラムにする
- バッジを追加
- 説明書きを追加
- アイコンを追加する
grayに色味を付ける
- 青味を加えれば寒色に
- 茶色を加えれば暖色に
大きさの異なるテキストを同じweightに見せる
- サイズを大きくするときはweightを小さく
- サイズを小さくするときはweightを大きく
画像を重ねる
- 重ねる側の画像に背景と同じ色のborderを付けると際立つ
データの解釈を変えて見せ方を変える
- データベースっぽくしない
- 項目名を単位として使う
- 現在との差分で表示する（築年数とか）
ラジオボタンをカードリスト風に見せる
table cellにシンプルなテキストだけを使わない
- 複数の属性を組み合わせる
- 色味を加える
- 画像を使う
濃い背景＋白抜き文字をやめる
- 薄い背景＋暗い文字の方が見やすい
表示するデータがない場合は行動を促しやすくする
- イラストを表示して楽しい感じに
- CTAボタンを配置するなど
画像にinner shadowを加える
- 背景との間にコントラストが生まれる
グラフの色はhueを揃える
- 良いアクセシビリティにもつながる
lightモードを単純に反転したものをdarkモードとしない
- 手前のlayerほど明るい背景にする
アウトプットのフォーマットの入力欄にする
画面幅だけを注視したレスポンシブデザインにしない
- SP時はモーダルの位置を下寄せにするなど
見出しのletter-spaceを整える
見出しは狭くするなど
Discussion