uiGradients：デザイナーと開発者のためのオープンソースグラデーション集 78

uiGradients はデザイナーや開発者向けのオープンソースのグラデーションカラーコレクションで、たくさんの既製のリニアグラデーションやラジアルグラデーションが揃っています。オンラインで閲覧できるほか、CSS コードをコピーしたり、gradients.json を通じてコードから呼び出したりできます。Web サイト、アプリ、グラフィックデザインにすぐに活用できます。

uiGradients の主な特徴

• 使い方が簡単：好みのグラデーションを選んだら、右上のボタンからコードをコピーしたり画像をダウンロードしたりできます。

• 多様なフォーマットに対応：CSS、SCSS、LESS、Stylus、Swift、Android XML などとして書き出せるので、さまざまな技術スタックの人がそのまま使えます。

• みんなでメンテナンス：すべてのグラデーションは GitHub リポジトリの gradients.json に保存されており、誰でも fork して新しい配色を追加でき、PR が通れば公開されます。

• 関連プロジェクトが豊富：すでに iOS 拡張、React コンポーネント、SCSS 版、Handlebars ヘルパーなどの関連プロジェクトがあり、さまざまな開発環境で素早く使えます。

• 無料かつオープンソース：MIT ライセンスで提供されており、商用利用や改変も可能ですが、原作作者の著作権表示を残す必要があります。

uiGradients の活用シーン

• Web サイトやアプリの背景、ボタン、ナビゲーションバー、カードなど目立たせたい部分に使用；

• ブランドのメインカラーやサブカラーを探す際、配色がうまくいくか素早く試す；

• スライドやポスター、SNS 投稿用画像などのグラフィックデザインにグラデーションを敷き詰める；

• 配色の理論を学ぶ際の参考資料として、今のトレンドのグラデーションをチェックする。

uiGradients の使い方（Web の場合）

1. uiGradients の公式サイトを開き、左側のリストから任意のグラデーションをクリックすると、右側に即時にプレビューが表示されます。

2. 右上の「Copy CSS」を選択すると、以下のようなコードを取得できます：

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. これをスタイルシートまたはインラインの style に貼り付けて保存・更新すれば、効果を確認できます。

uiGradients のちょっとしたコツ

• インスピレーションを得たいときは、URL の末尾に #random を付けるとランダムなグラデーションにジャンプできます。

• スマートフォンやタブレットでも利用でき、画面サイズに応じてページが調整されるため、選んでそのままコードをコピーできます。

• 他の配色ツールと組み合わせて使うと、例えば Color Hunt や Mesh Gradients など、より複雑なカラースキームを作成できます。