XDのグラデーションの種類
XDには線形グラデーション、円形グラデーション、円錐グラデーションの3種類のグラデーションがあります。
線形グラデーション
線形グラデーションは、直線方向にかかるグラデーションのことです。 グラデーションの一般的な形です。
円形グラデーション
円形グラデーションは、中心から外側に向かってかかるグラデーションのことです。 立体的な表現をする場合や少し印象的に仕上げたい場合に使うことが多いです。
円錐グラデーション
円錐グラデーションは、任意の点を中心にかかるグラデーションのことです。 ボタンなどに立体感を出したい時に役立つグラデーションです。
実際にグラデーションを作ってみよう！
今回は線形グラデーションを使い、実際にこの画像を作ってみましょう。
STEP
アートボードを選択する
XDを開き、Web1920（1920×1080px）のアートボードを選択しましょう。
STEP
長方形ツールで長方形を作成する
左側のツールバーから長方形を選択し、1920×1080pxの長方形を作成します。
STEP
長方形の塗りを設定する
①長方形を選択した状態で、右側のパネルの塗りをクリックします。 ②カラーピッカーの左上にある「べた塗り」をクリックします。 ③ブルダウン内の「線形グラデーション」を選択します。
線形グラデーションを選択すると以下のような画面が表示されます。
STEP
グラデーションに色を付ける
カラーピッカーのグラデーションエディター（上部の細長い長方形）の左右のつまみをそれぞれクリックして色を設定します。（青色：#332DD2、オレンジ：#E88732）
さらに他の色を入れたい場合は、オブジェクト上のグラデーションを調整する線をクリックしてつまみを追加します。
追加したつまみをクリックして色を設定します。（赤色：#E12950）
STEP
グラデーションを調整する
オブジェクト上の上のつまみを右端まで、下のつまみを左端までドラッグします。
真ん中のつまみも任意の位置に調整しましょう。
STEP
画像を挿入する
画像をドラッグ＆ドロップで挿入します。 大きさや位置を調整しましょう。
STEP
画像の描画モードを「ソフトライト」に変更する
画像の描画モードを「ソフトライト」に変更するとグラデーションと馴染みます。
STEP
テキストを挿入する
ツールバーの「テキスト」を選択しテキストを挿入します。 フォントの大きさは100px、種類はNoto Sans JPのBoldです。
STEP
長方形ツールで長方形を作成し、設置する
長方形ツールで960×286pxの長方形を作成し、アートボードの中央に配置します。
以上で完成です！
まとめ
XDのグラデーション機能はできることがたくさんあります。 実際に手を動かすことで新しい発見が得られると思いますので、是非いろいろ試してみてください！
