Figmaで柔らかな印象のメッシュグラデーションを作成する
近年、ウェブやアプリケーションなどのUIデザインでもよく見かけるメッシュグラデーションですが、Illustratorを使って細かく作成する方法もありますが、シンプルなものであればIllustratorを使わず、UIデザインツールでも十分に綺麗なものを作成できたりします。今回はFigmaを使ってメッシュグラデーションを作成してみたいと思います。いろんな作り方がありますが、ここでは円形(放射状)グラデーションと円錐グラデーションを使った2つの方法で見比べていきたいと思います。
続いてそれぞれの要素の塗りをベタ塗りではなく、円形(放射状)のグラデーションで設定します。このとき中央部分が不透明、円の周囲が透明になるようにグラデーションを指定します。
全ての要素に対して円形のグラデーションを適用させます。この段階ではまだメッシュグラデーションの見た目とは大きく異なりますね。
続いて、先ほど円形のグラデーションを適用させた要素に対してブラー効果をつけてぼかしていきます。各要素の境界がわからなくなるように長いボケ足で強めにかけていきます。
あとは、所定の形にマスクをかけて、要素の重なり位置などを調整しながらメッシュグラデーションの見た目になるよう調整していくと完成です。
そして円形グラデーションの時と同じようにブラー効果をつけていきます。円錐グラデーションの場合には円形グラデーションより強めにかけた方がメッシュグラデーションっぽさが出ますね。
最後にトリミングをしてブラーの強さなどを調整して完成です。
円形グラデーションと円錐グラデーションでそれぞれ作成したものを見比べてみます。見た目はかなり近いですが、円形グラデーションで作成したものはグラデーションの境界がマイルドで、円錐グラデーションで作成したものは、各色味がより強調されてソリッドな感じに見えますね。同じ色でもこのように見た目に差が生まれるので使い分けてみると良さそうですね。
今回はFigmaを使ってメッシュグラデーションを作成してみました。UIデザインツールであれば、SketchやAdobeXDも同じような感じで作成できますし、CSSでも同じように実現できそうですね。円形グラデーションと円錐グラデーションでニュアンスの違いも表現できるので、一度試してみてはいかがでしょうか。
円形(放射状)グラデーションを使う
まずは円形グラデーションを使った方法です。最初に混ぜ合わせる色の数だけ円形のオブジェクトを作成し、それぞれが均等に重なり合うように配置します。




円錐グラデーションを使う
次は円錐グラデーションを使った方法です。こちらの方がシンプルに作成できますね。まずは対象となる要素に対して円錐グラデーションを設定していきます。このとき、ある程度境界線がくっきりと出るように色の境目を残しておきます。そうすることで各色味がしっかりと残って綺麗に見えるようになります。ちょうどパイチャートのような見た目になりますね。



今回はFigmaを使ってメッシュグラデーションを作成してみました。UIデザインツールであれば、SketchやAdobeXDも同じような感じで作成できますし、CSSでも同じように実現できそうですね。円形グラデーションと円錐グラデーションでニュアンスの違いも表現できるので、一度試してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories