on:2022年8月22日sponsors同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。下記は、上はベタ塗り、下は半透明です。AlphredoAlphredoの使い方は簡単、登録など面倒なことは一切ありません。Alphredo」をクリックします。Alphredo変換したいカラーのHEX値を左側に入力するだけで、そのカラーと同じように見える半透明のカラーが生成されます。Color」で追加できます。左半分はHEX値、右半分は半透明のカラーで、背景に重なることで同じカラーになります。白地にブラックなどは不透明度が高くなるため、肉眼では違いを感じられないと思います。ベタ塗り(ホワイト)の背景と、透明の背景で比較すると違いがよく分かります。背景を変更する場合は、左のパネル「Background」から。デフォルトでホワイト・ブラックがあり、「Custom」から好きなカラーに変更できます。半透明のカラーの彩度は「Saturation」から変更できます。作成したカラーは「Export」からコピペできます。カラーのエクスポートFigmaのプラグインも用意されています。-Figmaこちらも使い方は簡単です。変換したいカラーのレイヤーを選択し、背景を持つフレームに収まっていることを確認します。あとは、プラグインを実行するだけです。