Tailwind CSS: 開発者が知っておきたいデリケートなUIデザインの便利技11種（翻訳）
そこそこのUIデザインと良い優れたUIデザインの違いは、細部に隠れていて見えにくいものです。こうしたささやかな微調整は注意していないと気づきにくいのですが、削除してみると即座に違いがわかります。
本記事では、（Rails）アプリのUIで今すぐ使える、さまざまな小技について解説します。これは、私が25年以上養ってきたUIデザインの経験に基づいています。本記事ではTailwind CSSのクラスを使っています（私のRails Designerをお買い上げいただいた方もTailwind CSSを使うことになります）が、普通のCSSでも同じ技が使えます。
個別のプレビューは、UI要素にその小技がどのように適用されるかを示しています。
訳注
本記事のサンプルは英語レイアウトが前提になっているので、日本語レイアウトではノウハウや値などが異なる可能性があります。
また、色合いの変化が極めてわずかなものもあるので、人によってはわかりにくいかもしれません。
🔗 01: 見出しの字間を調整して読みやすくする
カーニング（kerning）とは、フォント表示を美しくするために、テキスト内の文字と文字の間のスペースを微調整することです。カーニングはletter-spacingプロパティで変更できます。
プロがデザインした書体には、重み（weight: 太さとも）やスタイル、WAのような特定の文字の組み合わせに基づいて、特定の設定が施されているのが普通です。しかし無料の書体（Googleフォントなど）ではこうした設定が行われていないので、タイポグラフィがぎこちなく見栄えの悪いものになってしまいます。
見出し要素は、多くの場合、カーニングを少し引き締めるだけで即座に見た目を改善できます。こうすることで、表示要素が視覚的に調和して、読みやすさも向上します。
Tailwind CSSは字間設定用のtracking-*クラスを提供しています。デフォルトのクラスは以下ですが、もちろんTailwindではtracking-[0.05em]のように任意の値も指定できます。
tracking-tightertracking-tighttracking-normaltracking-widetracking-widertracking-widest
See the Pen
Tailwind Tips 01 by hachi8833 (@hachi8833)
on CodePen.
🔗 02: シャドウに色をつける
背景色が灰色でない要素に対してシャドウ（テキストシャドウやボックスシャドウ）を付ける場合、色付きの影も使うと効果的です。シャドウに色をつけることで印象がぼやけにくくなり、背景から引き立つようになります。これには、Tailwind CSSのBox Shadow Colorユーティリティを利用できます。
See the Pen
Tailwind Tips 02 by hachi8833 (@hachi8833)
on CodePen.
🔗 03: 色合いを統一する
私がTailwind CSSで気に入っている点の1つが、カラーパレットが実に豊富なことです。特にグレーが豊富です。好みの色合い（slateやzincなど）を一度定めたら、見た目が汚くならないようにするために他の色合いを混ぜないようにしたいものです。
See the Pen
Tailwind Tips 03 by hachi8833 (@hachi8833)
on CodePen.
Tailwindではグレーの色合いを豊富に選択できます。私の場合は、気に入ったグレーの色合い（例: slate）をTailwindのコンフィグファイルで設定しておくのが好みです。これで、 bg-gray-*と指定すればbg-slate-*よりも自然な形でグレーの色合いを統一できるようになります。
// tailwind.config.js
module.exports = {
// ...
theme: {
extend: {
colors: {
gray: colors.slate
}
}
}
// ...
}
🔗 04: グレー背景上の色付き要素をホバーするときの不透明度に一工夫を加える
マウスでホバーするとグレーの色調が変わる（例: 白→グレー、グレー50→グレー100）背景に、色付き背景を持つ要素やコンポーネント（バッジや通知ドットなど）を配置する場合は、配置するバッジの色付き背景を50%不透明にしておくことをおすすめします。
このテクニックを使うことで、グレーにさりげない透明感が生まれ、要素がより見やすくなって濁りも少なくなります。以下は、この方法がおそらく最も効果を発揮するサンプルです。
See the Pen
Tailwind Tips 04 by hachi8833 (@hachi8833)
on CodePen.
🔗 05: 空白をデザインの武器にする
私が（UI）デザインで最初に学んだルールの1つが、「空白もデザインの要素である」というものです。
要素同士をつい近づけすぎてしまう癖のある開発者が大勢います。そうした開発者は画面の情報を隙間なく密に表示することを好みますが、デザイナーは空白を増やすことを好みます。両者の落とし所をどう取ればよいでしょうか？
これについてはケースバイケースなので簡単ではありませんが、左右方向のスペースと、上下方向のスペースのバランスに気をつけるようにしましょう。
経験則では、左右方向（x方向）のスペースは、上下方向（y方向）のスペースよりも多めにしておく必要があります。以下の例をご覧ください。
See the Pen
Tailwind Tips 05 by hachi8833 (@hachi8833)
on CodePen.
（Rails DesignerのButtonComponentも参考にどうぞ）
🔗 06: 繊細なグラデーションで注目を呼ぶ
背景にさりげないグラデーションをつけることで、画面上の要素の魅力を高められることがあります。このとき、グラデーションの「開始の色合い」と「終了の色合い」の違いを大きくしすぎないのがコツです。
グラデーションは、Tailwind CSSが提供する豊富なカラーパレットを使うと簡単に行えます。たとえば、from-indigo-900 to-indigo-800のように指定します。
グラデーションの方向を決めるときは、身の回りの自然にある色彩を参考にしましょう。つまり、明るいテーマの要素なら「明るい色から暗い色へ」、ダークテーマの要素なら「暗い色から明るい色へ」変化させます。これは、それぞれ「日の出」の色彩と「日の入り」の色彩を模倣する形になります。
See the Pen
Tailwind Tips 06 by hachi8833 (@hachi8833)
on CodePen.
さらにインスピレーションが必要な方は、私がTailwind CSSで丁寧に作り上げた流麗なグラデーションもご覧ください。
🔗 07: 行間を正しく設定して読みやすくする
行間（line-height）の設定は、難易度の高いトリックです。行間が広すぎても狭すぎても、見た目がおかしくなってしまいます。
行間が狭すぎるのは、多くの場合、表示する情報が増えすぎた結果ですが、そうなると読みにくくなってしまいます。
Tailwind CSSが提供するrelative行間とfixed行間では、どちらもleading-*クラスが利用できます。
- 行間が
relativeの場合、現在のフォントサイズを元にします。 - 行間が
fixedの場合、現在のフォントサイズと無関係に設定されます。
See the Pen
Tailwind Tips 07 by hachi8833 (@hachi8833)
on CodePen.
🔗 08: テキストのパラグラフ幅を狭めて読みやすくする
テキストのパラグラフが長くなる場合、パラグラフの幅を狭めておくことが重要です。私が以前学んだ良い経験則は、そのフォントサイズでA〜Zをすべて表示したときの幅の2.5倍を超えないようにするというものです。
これを解決するには、フォントサイズを大きくするか、コンテナの幅を狭めます。これは画面の全体的なUIによって変わってきます。
通常は、コンテナの幅を狭める方が望ましい解決方法になります。CSSが提供しているchという単位は、0という文字の幅を元にしています。つまり、上述の経験則を念頭に置くと、max-widthに2.5 × 26 = 65を適用したmax-width: 65chを使います。
Tailwind CSSには、すぐ使える max-w-proseというユーティリティクラスがあります。
See the Pen
Tailwind Tips 08 by hachi8833 (@hachi8833)
on CodePen.
🔗 09: 見出しの行間も調整する
これも書体に関連するコツです。つまるところ、優れた書体はUIの成功と失敗を左右します。大きな見出しを扱うときは、行間もチェックしておくことが重要です。さもないと、見出しのテキストが普通の要素と同じように見えてしまい、読みにくくなります。
Tailwind CSSにあるfont-*ユーティリティクラスでは、既に行間が適切に設定されています。
See the Pen
Tailwind Tips 09 by hachi8833 (@hachi8833)
on CodePen.
🔗 10: 現在のスタッキングコンテキストを崩さないようにする
z-indexのチェックは面倒な作業でした。"z-index map"を維持する方法から、z-indexの値を99999にする敗北的な方法までさまざまなものがありました。
しかしz-indexの問題は、isolation: isolate;で解決できます。Tailwind CSSにはそれ用のisolateが追加されているので、これを使って要素に「スタッキングコンテキスト（要素同士の前後関係）」を新たに作成できます。
See the Pen
Tailwind Tips 10 by hachi8833 (@hachi8833)
on CodePen.
なお、これは別記事に切り出しました↓。
🔗 11: インタラクティブな要素をふんわりと遷移させる
フォーカスやホバーに繊細な遷移を追加すると、表示が滑らかに変化することで自然なフローが生まれ、ユーザーの目線が適切に誘導されるようになります。
これはCSSのtransitionクラスだけで実現できます。ここではTailwind CSSで実現しますが、私はほとんどの場合transition ease-in-out duration-200というクラスをデフォルトにしています。このクラスのセットを常に使えるよう手軽に設定する方法については、以下の過去記事をご覧ください。
参考: Add a custom Tailwind CSS class for reusability and speed | Rails Designer
See the Pen
Tailwind Tips 11 by hachi8833 (@hachi8833)
on CodePen.
なお、大きな要素にホバー状態を適用する場合は、必ずdelay-*を追加しておきましょう。これは、ユーザーが画面をスクロールするときにホバーが誤ってトリガーされないようにするためのものです。
開発者が知っておくとよい便利技を他にもご存知でしたら、ぜひフォームにてお知らせください。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。