UIデザインで役立つ「不透明度」使いこなしガイド（翻訳）
はじめに
透明色（transparent colors）は今や現代のOSでは定番です。しかしどういうわけか、Webアプリではこの驚異的なインターフェイスデザインが今ひとつ活用されていません。
透明色を自分たちのデザインツールキットに適切に取り込むことに成功したらどうなるか考えてみたことはありますか？デザイントークン、スタイル、コンポーネントのバリエーション数を最小限に抑えられるようになり、ワークフローが今よりも効率的かつ柔軟になります。
それでは、不透明度を活用してデザインに革命をもたらす方法についてお話しいたします。この秘訣は、特にスタートアップ企業や迅速な動きを求められるチームにとって役に立ちます。
🔗 1: ボタンのデザインを不透明度でシンプルにする
セカンダリのボタン（デフォルト以外のボタン）のデザインは、特にさまざまな背景やサーフェス（表面）上で表示したときにも調和するよう考慮すると、思ったよりも複雑になってしまうことがあります。
たとえば、明るい色のボタンを白い背景に配置した場合は問題なさそうでも、そこに灰色のサーフェスなどのレイヤを追加した途端にボタンが埋もれて見えなくなってしまうことがあります。そうなるとボタンにホバリングしたときのスタイルや、ボタンを押したときのスタイルをわざわざ作らなければならなくなります。
明るい色のボタンを明るい灰色の背景に置くと、ボタンが埋もれて見えにくくなる可能性がある
こんなときは、不透明度の制御が効果的です。
以下のように不透明度を弱めた（12%）透明色を使うことで、背景ごとにスタイルを追加する必要がなくなり、1セットの透明色でさまざまな背景に調和するようになるので、ボタンで必要な状態は「アイドリング時」「ホバリング時」「押下時」の3つのスタイルで済むようになります。
このアプローチは、灰色のボタンに限らずあらゆる色で効果を発揮し、デザインプロセス全体をシンプルにできます。
12%に弱めた透明色を活用すれば手軽に修正できる
🔗 2: 不透明度で状態の変化を周囲に適応させる
ボタンに限らず、多くのUI要素では「ホバー時」「押下時」のような明確な状態に応じたスタイルを必要とします。このような状態のデザインをソリッドカラー（不透明度100%の色）だけで作ろうとすると、特に背景が変わったときの表示に問題が生じる可能性があります。
この問題は、不透明度を弱めた透明色を使ってUI要素をあらゆるサーフェスに適応させることで解決できます。これによって、手間を増やさずにデザインを統一できるようになります。
透明度のないソリッドカラーは、白背景ではよくても灰色の背景では埋もれてしまいます（上段の左右のボタン）。
透明度を3%上げて15%にすると、ホバーしたときの色がどのサーフェスでも適切になります（下段の左右のボタン）。
🔗 3: ボーダーと透明色の相性は完璧
ボーター（境界線）ではほとんどの場合、透明色を使うのが最適です。その理由は、ボーダーの透明色は背景が変わってもアクセシビリティが損なわれず、ライトモードとダークモードのどちらでもシームレスに使えるからです。
ボーダーの場合、ボタンやホバー状態と違って、同じレベルのコントラストを維持する必要がないので、ボーダーで選ぶ色は透明色一択なのは明らかです。
透明色にするとどれほど手間を省けるかについては、HTTPieをご覧ください
🔗 4: 不透明度でテーマ機能を楽に設定する
アプリケーションがカスタマイズ可能なテーマ（白、緑がかった背景、青がかった背景など）を提供する場合、透明色は非常に重要になってきます。透明色はさまざまなサーフェスと自然に調和するので、テーマごとに個別のカラーセットを用意せずに済みます。
SlackやZedのようにユーザーがテーマをカスタマイズできる機能が重要なアプリは、不透明度の制御によるメリットを得られる好例です。透明度を使った要素は自動的に周囲に調和するので、最小限の労力で一貫したエクスペリエンスを提供できるようになります。
アプリで透明度を使いこなしていれば、背景色を切り替えてもアプリ全体で調和するようになる
いろいろ申し上げましたが、不透明度を適切に活用することでデザインやワークフローに大きなメリットがもたらされる一方、いくつかの注意点もあります。
🔗 コントラストレベルに注意（WCAG/APCAに準拠する場合）
参考: Web Content Accessibility Guidelines (WCAG) 2.0
透明色のコントラストは、背景色によって変わってきます。
たとえば、#000000かつ不透明度（opacity）8%を指定すると、白背景や明るい灰色背景ではアクセシビリティのコントラスト要件を満たせても、暗い背景についてはコントラスト要件を満たせない可能性があります。
アクセシビリティへの準拠を厳格にしなければならない場合は、透明色を使わないソリッドカラーが必要になるかもしれません。
See the Pen
WCAG and opacity contrast ratio demo by Arthur (@Objartel)
on CodePen.
コントラスト比が不透明度や背景色とどのように相関するかを理解するために、Codepenで上の簡単なデモを作成しました。
結果は控えめに言っても興味深いもので、サーフェスが灰色のセット（Radix Colors Gray scaleなど）で、不透明度が最大20%の範囲の #000000色が使われていると、コントラスト比の一貫性はかなり高まります。
灰色のコントラスト比の変化は、正しく行われれば大変ではありません
ダークモードにおけるRadixカラーのグレースケールと#FFFFFFの正方形についても、ほぼ同じことが言えます。不透明度を13%前後に保つと、コントラスト比はほとんど変化しません。
ダークモードの場合のコントラスト比の変化もわずかで済む
Figmaのデザインでは引き続き不透明度を利用できますが、すべてをソリッドカラーに変換して小さなミスを調整します。これは以前のFigmaデザインシステムで使われていた方法です。
This is basically how Figma’s design system used to work. For practicality we “pre computed” most colors to solids as that’s what’s used in production, but conceptually we really only had black, white and one shade of grey.
— Rasmus Andersson (@rsms) July 4, 2024
半透明の塗りつぶしはデザインシステムで不可欠です。
たとえば、ボタンの不透明度を24%にすれば、ほぼすべてのサーフェスで問題なく使えるので、5種類のスタイルではなく1種類のスタイルで済みます。
皆さんはUIで透明度を使えない事情があったりしますか？Figmaの以前のデザインシステムでは、基本的に次のようにしていました。ほとんどの色は、実用性を考慮して本番用のソリッドカラーへの変換を「事前に計算に入れていました」（概念上は黒・白・特定のグレーのみ）。
🔗 ボーダーの重なりに注意
ボーダーの色を半透明にすると、他の要素と重なったときに目ざわりになる可能性があります。重なり合う要素をデザインするときは、この点に注意しましょう。
プロ向けのヒント: これはpaddingを1pxにすれば簡単に修正可能
🔗 不透明度がパフォーマンスに与える影響
透明な要素のパフォーマンスは一般に良好ですが、古いデバイスやGPUが非力なデバイス（ほとんどの低価格スマートTVや10年前のスマートフォンなど）では、特に全画面で不透明度を表示するときにパフォーマンスの問題が発生する可能性があります。
一貫したユーザーエクスペリエンスを確保するためには、さまざまなデバイスでテストすることが重要です。
透明度がデバイスで正常に機能するかどうかをテストするための簡単なテストスタンドを作成しました。このテストは、Intel Core i3を搭載した2011年製の古いノートPCを含むさまざまなマシンで実行され、どのマシンでも一貫して60 fpsを実現しました。
Intel Core i3でグラデーション背景上の100個の透明な四角形を58.8 fpsで移動するテスト
不透明度の制御は、特に納期が短い場合に設計プロセスを簡素化できる強力なツールであり、20%の手間で80%のソリューションを実現できます。
もちろん、私たちが編み出したapcachやOKLCHのようなより洗練されたアプローチを用いれば、さらに優れた結果が得られますが、多くの場合、時間とリソースを大量に必要とするものです。
スタートアップ企業や迅速な動きを求められるチームの場合、デザインに透明度を適切に取り入れることで、バリエーションやスタイルを無限に増やすことなく、よりクリーンで効果的な結果を得られるようになります。
概要
元サイトの許諾を得て翻訳・公開いたします。
（技術編集者）
日本語タイトルは内容に即したものにしました。