2018年7月5日

デザイン

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

目次

  1. はじめに
  2. Easing Gradientとは
  3. セットアップ / 使い方
  4. まとめ

はじめに

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

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

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

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

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

Easing Gradientとは

概要

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

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

Andreas Larsenが書いた、CSS-tricksの記事はこちら
Easing Linear Gradients

現状では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プラグインを使ってみてはいかがでしょうか?

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP