グラデーションを自然に！Easing Gradientプラグイン

はじめに

今日ご紹介するのは、従来のグラデーションをもっと自然にするために作られた、イージングを加えたグラデーションを作ることができるSketchのプラグインです！

カードの下に文字を入れるため、グラデーションを使い文字の部分にのみ黒い背景を入れるデザイン、よく見かけますね。

これ、実はEasingグラデーションを使うと綺麗さが全然違って見えます！

Linearの方はブツッと切れている感じなのに対し、Easingグラデーションがついている方はふわっとグラデーションが消えていて、とてもナチュラルに見えます。

従来のSketchのデフォルトのグラデーション機能だとこのEasingグラデーションを作ることはできませんが、本日ご紹介するEasing Gradientプラグインを導入すると、このように自然なグラデーションを作り出すことができるのです！

Easing Gradientとは

概要

そもそも、このEasing Gradientというコンセプト自体が昔からありましたが、未だWeb上のデザイン界ではそこまでメジャーではありません、

Easing GradientとはAndreas Larsenというデンマーク出身のフロントエンドエンジニアの方が現在推奨しているコンセプトで、グラデーションにもイージングをかけられるようにしよう！というものです。

現状ではCSSではlinear-gradationプロパティ、Sketch上でもlinearなグラデーションしか存在しませんが、postCSSではeasing-gradientが使えるようになっています。

こちらもAndreas Larsen氏によるPostCSSのプラグインです。

postcss-easing-gradientsリポジトリ

Easing Gradientのメリット

Easing Gradientのメリットは特に透明と色のグラデーションで顕著に現れます。

下記をご覧ください。

こちらのbeforeはlinear-gradient, afterはeasing gradientが使われています。

同じ黒と透明のグラデーション、且つ始まる場所と終わる場所も同じですが、easing gradientの方が自然に馴染むようなグラデーションになっています。

これがeasing gradientの魅力です。

easing gradient エディタ

こちらはAndreas Larsenが作った、easing gradientを触るためのエディタのスクリーンショットです。

実際に使いたい方はこちらからどうぞ
Easing Gradients

以上、Easing Gradientについてです。

セットアップ / 使い方

では、実際にEasing Gradientを体験するべき、プラグインを使ってみましょう。

プラグインは無料で使えます。

Easing Gradient Pluginのリポジトリ
sketch-easing-gradient

1. プラグインをダウンロードする

プラグインをダウンロードしていない方は、公式リポジトリからクローンしてください。

クローンしたファイルを解凍し、sketch-easing-gradient-master をそのままPluginsフォルダに移動させます。

なお、Sketch Runnerからも同じものがインストールできるので、Pluginsフォルダが見つからない方はSketch Runnerからインストールすると間違いないでしょう。

2. レイヤーを作り、グラデーションを設定する

まずは、下準備として、長方形などのシェイプを描き、グラデーションを設定し、そのレイヤーを選択した状態にしておきます。

3. Easing Gradientプラグインを使う

グラデーションがあるレイヤーが選択されている状態で、プラグインメニューの Edit Easing Gradientを選択します。

4. Easing Gradientプラグインを使う

あとは好きにグラデーションを作っていきます。

他にもプラグインのメニューから Download Demo File でデモファイルをダウンロードすることができるので、そちらも見てみると良いかもしれないですね。

まとめ

以上、今日は従来のグラデーションをもっと自然にするために作られた、イージングを加えたグラデーションを作ることができるSketchのプラグインをご紹介しました！

細かいところではありますが、細かいところで差をつけたいのがデザイナーの性格…!!
今度カードなどで黒い背景をふわっと自然にのせる際は、Easing Gradientプラグインを使ってみてはいかがでしょうか？