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

Sketchのお仕事に関するご相談

Bageleeの運営会社、palanではSketchに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP