株式会社間島宣伝事務所

BLOG

mashima

知っておきたいデザイン用語集㉖
【 オパシティ】

オパシティとは、「不透明度」と訳されるデザイン用語で、要素の透明さを調整する際に使用されます。オパシティの値が低いほど透明度が高くなり、背景が透けて見えるようになります。一方、オパシティの値が高いほど不透明になり、要素がはっきりと表示されます。重要な点として、「不透明度」という意味であるため、透明度と逆の考え方をする必要があり、混乱しやすいので注意が必要です。

実際のデザインの場面では、「不透明度」「透明度」「透過」といった日本語で表現されることが多く、たとえば「画像の背景を少し透けさせましょう」や「CTAボタンのクリック時は30%透過させてみましょう」といったような形で使われます。また、Webデザインでは、CSSでオパシティを設定する場合にopacityというプロパティを用い、値を「0.0(完全に透明)」から「1.0(完全に不透明)」まで指定することで調整します。

オパシティを活用することで、要素を目立たせたり、背景と馴染ませたりといったデザインの調整が可能です。たとえば、背景画像をうっすら透過させてテキストを際立たせたり、ボタンのホバーアクションでオパシティを変えることで、視覚的なフィードバックを与えることができます。

オパシティはシンプルなプロパティですが、デザインの印象を大きく変える強力なツールです。使い方をマスターして、視覚的に洗練されたデザインを目指してみましょう。

オパシティとは、「不透明度」と訳されるデザイン用語で、要素の透明さを調整する際に使用されます。オパシティの値が低いほど透明度が高くなり、背景が透けて見えるようになります。一方、オパシティの値が高いほど不透明になり、要素がはっきりと表示されます。重要な点として、「不透明度」という意味であるため、透明度と逆の考え方をする必要があり、混乱しやすいので注意が必要です。