グラデーションの作成と修正

グラデーションとは、1 つのカラーから他のカラーに徐々に変化させたもの、または 1 つのカラーや複数のカラーの濃度を徐々に変化させたものです。グラデーションを使用して、カラーブレンドや円グラフを作成したり、ベクターオブジェクトにボリュームを加えたり、デザインに照明効果やシャドウ効果を追加したりすることができます。

XD では、線形グラデーション、円形グラデーションおよび円錐グラデーションがサポートされます。

XD では、開始点から終了点に向かって直線的に変わるグラデーションが作成されます。

XD では、開始点から終了点に向かって放射状のグラデーションが作成されます。

XDは、円の中心からシェイプの周りをスイープするカラーグラデーションで塗りつぶしを適用します。 

XD でグラデーションのカラーピッカーにアクセスするには、オブジェクトを選択し、プロパティインスペクターで「塗り」をクリックします。XD では線形、円形および円錐のグラデーションを作成できます。

カラーピッカーの上部で、ドロップダウンリストから「線形グラデーション」、「円形グラデーション」または「円錐グラデーション」を選択します。

グラデーションカラーピッカーを使用して、カラーを選択し、グラデーションの不透明度を設定できます。

グラデーションカラーピッカーにはグラデーションエディターがあり、グラデーションで使用されるすべてのカラーのクイックプレビューが表示されます。透明部分は、チェッカーパターンで示されます。

また、グラデーションエディターでは、グラデーションのカラー分岐点も表示されます。カラー分岐点は小さい円で示されます。カラーは、カラー分岐点間の距離に応じて変化し、混ざり合います。また、カラー分岐点は、グラデーションが適用されるオブジェクトに表示されるカンバス上のグラデーションエディターにも表示されます。 

初期設定では、2 つのカラー分岐点を利用できます。カラー分岐点を追加するには、グラデーションエディターをクリックします。グラデーションエディターに沿ってカラー分岐点をドラッグして、カラー分岐点の位置や各カラーの広がりを変えることもできます。カラー分岐点を削除するには、グラデーションカラーピッカーでグラデーションエディターから離れた位置にドラッグするか、カンバス上のグラデーションエディターでカラー分岐点をクリックして、「削除」を押します。

カンバス上のグラデーションエディターを使用して、グラデーションの方向を変えることができます。

コーナーハンドルを使用して、円形グラデーションの起点と角度を変更できます。

グラデーションカラーピッカーの右側にあるスライダーを使用して、カラー分岐点の不透明度を制御できます。

線形グラデーション、円形グラデーションまたは円錐グラデーションによる塗りつぶしの適用

オブジェクトに円錐グラデーションを適用

円錐グラデーションを使用して、カラーホイール、円グラフ、または進行状況を表すインジケーターを作成できます。円錐グラデーションは、円の中心からシェイプの周りをスイープするカラーグラデーションで塗りつぶしを適用します。

次の手順に従って円錐グラデーションを円に適用し、カラーホイールを作成します。

カラーホイールの作成が完了したら、長方形または三角形のような他のシェイプで円錐グラデーション効果をコピーして再利用できます。

^例

以下は、円錐グラデーションを使用して作成されたサンプルの一部です

^{チュートリアル}

円錐グラデーションは、線形グラデーションや円形グラデーションとは異なり、進行状況を表すスピナーやカラーホイールなどのデザインで非常に便利です。円錐グラデーションを使用する方法については、Adobe XD のプリンシパルプロダクトマネージャーである Dani Beaumont によるこちらのチュートリアルをご覧ください。

視聴時間：4 分 7 秒 

グラデーション塗りが適用されたオブジェクトの読み込み

グラデーションを SVG として読み込むと、初期設定で、カラーピッカーに「グラデーション」オプションが表示されます。XD でオブジェクトをコピー＆ペーストすると、グラデーションの塗りもコピーされます。読み込むグラデーションのカラーやカラー分岐点を変更することもできます。