4-6. オブジェクトにエフェクトをつける

カードUI・ボタン・背景などによく使われる「ドロップシャドウ」や「ぼかし」などの、オブジェクトに対して様々なエフェクトをつける方法を解説します。

UIデザイン

UXデザイン

プロトタイピング

Webデザイン

公開日：2019/08/23最終更新日：2019/08/23

1.オブジェクトにエフェクトをかける

オブジェクトにエフェクトをかけるには、オブジェクトを選択し、プロパティパネル右にある「Effects」の下にあるプルダウンメニューから、選択したいエフェクトを選択します。

エフェクトには以下の4種類があります。

「Effects」、プルダウンメニューから「Inner Shadow」を選択することで、オブジェクトの外側に影をつけることが出来ます。

以下のようなパラメーター項目があります。

インナーシャドウの使用例は図4を参照してください。

「Effects」、プルダウンメニューから「Inner Shadow」を選択します。

パラメータは以下の設定があります。

ドロップシャドウの使用例は図6を参照してください。

「Effects」、プルダウンメニューから「Layer Blur」を選択します。
レイヤーブラーは全方向にぼかす一般的なブラーです。

パラメータは以下の設定があります。

レイヤーブラー使用例は図8を参照してください。

「Effects」、プルダウンメニューから「Background Blur」を選択します。
バックグランドブラーは、オブジェクトそのものではなく、背面レイヤーをぼかすためのブラーです。
使用する際は、Fillの透明度を100%以下にする必要があります。

パラメータは以下の設定があります。

Background Blurの使用例は図10を参照してください。