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

Adobe XD でグラデーションを作成、編集、読み込み、使用します。グラデーションパネルを使って、カラー分岐点を追加し、グラデーション不透明度を制御します。

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

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

線形グラデーション

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

放射状グラデーション

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

円錐グラデーション

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

グラデーションカラーピッカー

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

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

グラデーションカラーピッカー
グラデーションカラーピッカー

A. グラデーションエディター B. カラー分岐点 C. 不透明度スライダー D. カラーフィールド E. スウォッチとして保存 F. カンバス上のグラデーションエディター 

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

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

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

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

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

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

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

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

  1. オブジェクトを選択し、プロパティインスペクターで「塗り」をクリックします。

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

    カラーピッカー

    線形、円形、および円錐グラデーション
    線形、円形、および円錐グラデーション

  3. グラデーションエディターでカラー分岐点をクリックして、カラーピッカーを使って目的のカラーを選択します。 

    • カラー分岐点を追加するには、グラデーションエディターをクリックします。
    • カラー分岐点に割り当てられたカラーを変更するには、カラー分岐点をクリックします。
    • カラー分岐点を移動するには、グラデーションエディターに沿ってドラッグします。
      注意:カラー分岐点をグラデーションエディターの両端に移動することはできません。
    • カラー分岐点を削除するには、グラデーションエディターから離れた位置にドラッグします。カンバス上のグラデーションエディターを使用した場合は、カラー分岐点をクリックして、「削除」を押します。
    • カラー分岐点を切り替えるには、Tab キーを使用します。
    • 放射状グラデーションの方向や角度を変更するには、コーナーハンドルをドラッグします。
    放射状グラデーションを使用する
    放射状グラデーションを使用する

  4. グラデーションの方向を変更するには、必要に応じて、カンバス上のグラデーションエディターセグメント(オブジェクト上)をドラッグします。

    カンバス上のグラデーションエディターセグメントのエンドポイントをオブジェクトの線の外にドラッグすることもできます。カラー分岐点をオブジェクトの線の外に配置した場合、(カラー分岐点に関連付けられた)カラーはオブジェクト上に表示されません。

    注意:

    カンバス上のグラデーションエディターセグメントの端を移動するには、矢印キーおよび Shift キーを押しながら矢印キーを使用します。内側のカラー分岐点を選択すると、矢印キーおよび Shift キーを押しながら矢印キーを使用して、セグメントに沿って移動できるようになります。

    Tab キーを押して、カンバス上のグラデーションエディターに沿ってカラー分岐点を変更することもできます。 

  5. グラデーションを作成したら、後で再利用するためにアセットパネルに保存できます。グラデーションを含むオブジェクトをクリックし、アセットパネルの「カラー」の横にある「+」アイコンをクリックして保存します。 

    アセットパネルに保存されたグラデーション
    アセットパネルに保存されたグラデーション

円錐グラデーションの使用方法

円錐グラデーションを使用して、カラーホイール、円グラフ、または進行状況を表すインジケーターを作成します。反時計回りに始点から終点までのカラーのグラデーションで塗りつぶしを適用します。 

カラーホイールを作成
円錐グラデーションを選択して円を塗りつぶす

カラーホイールを作成
円錐グラデーションを使用してカラーホイールを作成する

これらの手順を試して、円錐グラデーションでここに示すようなカラーホイールを作成してください。

  1. キャンバスに円オブジェクトを追加し、円を選択して、プロパティインスペクター内の塗りつぶしをクリックします。
  2. カラーピッカーのドロップダウンリストから「円錐グラデーション」を選択します。
  3. 円錐グラデーションエディターにあるカラー分岐点の始点と終点をクリックし、それらを移動させて必要なカラーを選択します。 
  4. カラー分岐点を追加するには、円錐グラデーションエディターをクリックします。 
  5. キャンバス上の分岐点をクリックしてドラッグすることにより、分岐点を上下に移動させます。
  6. 円の上部にある回転ハンドルを使用して、カラーホイールを回転させます。

これらのカラーを Creative Cloud ライブラリに保存することはできません。回避策として、円錐グラデーションカラーセットをコピーして別のオブジェクトに貼り付けることができます。 

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

  1. Adobe XD に読み込む前に、必ずファイルを .svg ファイルとして保存してください。

  2. ファイル/読み込みをクリックし、SVG ファイルを選択し、「読み込み」をクリックします。

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

注意:

原点が中心から外れた放射状グラデーションが読み込まれた場合、XD では編集できません。 

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン