個人で何かを作っている時、「なんかデザイン微妙だなぁ。何をどうすればいい感じになるかわからない」ってことありませんか？

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を整える

見出しは狭くするなど

重なりが生じるコンポーネントの端を揃えない

checkboxやradioのラベルは目立たせたい部分だけ強調させる

ブランドカラーを多用しない

Discussion