近年、ウェブやアプリケーションなどのUIデザインでもよく見かけるメッシュグラデーションですが、Illustratorを使って細かく作成する方法もありますが、シンプルなものであればIllustratorを使わず、UIデザインツールでも十分に綺麗なものを作成できたりします。今回はFigmaを使ってメッシュグラデーションを作成してみたいと思います。いろんな作り方がありますが、ここでは円形（放射状）グラデーションと円錐グラデーションを使った2つの方法で見比べていきたいと思います。    

円形（放射状）グラデーションを使う

まずは円形グラデーションを使った方法です。最初に混ぜ合わせる色の数だけ円形のオブジェクトを作成し、それぞれが均等に重なり合うように配置します。   続いてそれぞれの要素の塗りをベタ塗りではなく、円形（放射状）のグラデーションで設定します。このとき中央部分が不透明、円の周囲が透明になるようにグラデーションを指定します。   全ての要素に対して円形のグラデーションを適用させます。この段階ではまだメッシュグラデーションの見た目とは大きく異なりますね。   続いて、先ほど円形のグラデーションを適用させた要素に対してブラー効果をつけてぼかしていきます。各要素の境界がわからなくなるように長いボケ足で強めにかけていきます。   あとは、所定の形にマスクをかけて、要素の重なり位置などを調整しながらメッシュグラデーションの見た目になるよう調整していくと完成です。    

円錐グラデーションを使う

次は円錐グラデーションを使った方法です。こちらの方がシンプルに作成できますね。まずは対象となる要素に対して円錐グラデーションを設定していきます。このとき、ある程度境界線がくっきりと出るように色の境目を残しておきます。そうすることで各色味がしっかりと残って綺麗に見えるようになります。ちょうどパイチャートのような見た目になりますね。   そして円形グラデーションの時と同じようにブラー効果をつけていきます。円錐グラデーションの場合には円形グラデーションより強めにかけた方がメッシュグラデーションっぽさが出ますね。   最後にトリミングをしてブラーの強さなどを調整して完成です。   円形グラデーションと円錐グラデーションでそれぞれ作成したものを見比べてみます。見た目はかなり近いですが、円形グラデーションで作成したものはグラデーションの境界がマイルドで、円錐グラデーションで作成したものは、各色味がより強調されてソリッドな感じに見えますね。同じ色でもこのように見た目に差が生まれるので使い分けてみると良さそうですね。  

---

  今回はFigmaを使ってメッシュグラデーションを作成してみました。UIデザインツールであれば、SketchやAdobeXDも同じような感じで作成できますし、CSSでも同じように実現できそうですね。円形グラデーションと円錐グラデーションでニュアンスの違いも表現できるので、一度試してみてはいかがでしょうか。