Webgradientsとは？
「Webgradients」は、デザイン時のグラデーション配色を効率化するFigmaプラグインです。約180種類のグラデーションライブラリを搭載しており、直感的に使えるため初心者でも扱いやすいのが特徴です。
主な特徴
豊富なグラデーションライブラリ
約180種類のプリセットが用意されており、あらゆるデザインテイストに対応できます。パステル系、ビビッド系、ダーク系など、幅広いバリエーションが揃っています。
カラーフィルター機能
メインカラーごとにグラデーションを検索できるフィルター機能を搭載。「青系のグラデーションが欲しい」「暖色系で探したい」といった要望に、素早く対応できます。
2つの活用パターン
パターン1：CSSコード取得
WebgradientsはCSSコード取得機能を備えており、以下のようなコードを自動生成できます。
```css
linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)
```
デザインからコーディングへの移行がスムーズになり、デザイナーとエンジニアのコミュニケーションコスト削減にも貢献します。
パターン2：Figma内のシェイプに直接適用
プラグインから直接Figma内のシェイプにグラデーションを適用することもできます。プリセットから選ぶだけで即座に反映されるため、アイデア出しの段階で気軽に試すことができます。
活用シーン
- Webサイトの背景設計 — ファーストビューやセクション背景のカラーリング
- CTAボタンやカードデザイン — ユーザーの視線を引きつけるアクセントとして
- イラスト・アイコンの装飾 — フラットデザインに奥行きを加える
- プロトタイプ制作 — 素早くビジュアルモックを作成する際のカラー設定
Web実装で使うときの注意点
グラデーションは見た目の印象を大きく変えますが、背景として使う場合は文字の可読性が最優先です。白文字を重ねるなら暗めのオーバーレイを足す、本文背景にはコントラストを強くしすぎないなど、実装前に確認しましょう。
CSSコードを使う場合は、Figma上の見た目とブラウザ上の見た目が微妙に変わることがあります。実装後はPCとスマホの両方で表示を確認し、必要に応じて角度や色の停止位置を微調整するのがおすすめです。プラグインの公開状況は Figma Community でも確認できます。
まとめ
Webgradientsは、グラデーション配色の作業効率を大幅に向上させてくれるFigmaプラグインです。180種類のプリセットとCSSコード取得機能を活用して、美しいグラデーションデザインを効率的に制作しましょう。
