「グラデーション機能の使い方は？」「Adobe XDでグラデーションを活用したテクニックが知りたい」
今回の記事は、このような疑問を持った人の悩みを解決していきます！
この記事を読むことで、XDのグラデーションの使う方や調整方法、実用的な応用テクニックを習得することができるので、ぜひご一読ください！
Adobe XDでグラデーションを作成する方法
グラデーションの使い方は、次の３ステップです。
- オブジェクトを作成
- アピアランスの塗りを選択
- べた塗りの箇所からグラデーションの種類を選択
ステップ①オブジェクトを作成
まずは、グラデーション用のオブジェクトを作成していきましょう。
今回はオブジェクトで作成しますが、アートボードに直接グラデーションを適用することも可能です。
もちろん円や三角などのオブジェクトでも作成できます。
ステップ②アピアランスの塗りを選択
次にXD画面右にあるアピアランスの中の「塗り」をクリックしましょう。
クリックするとカラーパネルが表示されます。
ステップ③べた塗りの箇所からグラデーションの種類を選択
次に「べた塗り」の部分をクリックします。
すると下の画像のように選択項目がでてきます。
■グラデーションの種類
- 線形グラデーション
- 放射状グラデーション
- 円錐グラデーション
ここで自分が適用したいグラデーションを選択すれば、オブジェクトにグラデーションが反映されます！放射状や円錐などありますが、今回は線形グラデーションで試してみます。
グラデーションの適用方法はこれだけです！ここから色や角度などを自由にカスタマイズしていくことができます。
Adobe XDで作成したグラデーションの調整
- グラデーションの色を変更する方法
- グラデーションの角度を変更する方法
- グラデーションに新しい色を追加する方法
実用的に使えるように、今回はWEBボタンを例としてそれぞれ順番に解説していきます！
グラデーションの色を変更する方法
画像は、グラデーションを適用して何も調整していない状態のボタンです。
グラデーションの色を変更する場合は、ボタン（オブジェクト）をクリックしてアピアランスの塗りをクリックしましょう。
グラデーションの色は、カラーパネルにある画像の枠の部分（グラデーションバー）から簡単に変更できます。
今回の場合は、左端が上部（白色）、右端が上部の色（グレー）です。
Adobe XDのグラデーションは、リアルタイムでデザインを確認できるのがポイントです。
色の変更を行う際は、グラーデションバーにある開始点もしくは終了点をクリックして、カラーフィールドで調節しましょう！
もちろん数値で変更することも可能なので、用途に合わせて使い分けてみてください。
グラデーションの角度を変更する方法
グラデーションの角度は、オブジェクトもしくはアートボードの端にある白丸（ハンドル）をドラック&ドロップすれば、簡単に調節できます。
例えば、グラデーションを斜めにしたい場合は、上下のハンドルをドラック&ドロップで左右に引っ張ります。
これでグラデーションの角度が変わりました。
もう少しゆるくグラデーションをかけたいという場合は、ハンドルをオブジェクトの外側まで引っ張ることで自然なグラデーションにすることができます。
グラデーションに新しい色（分岐点）を追加する方法
デフォルトのグラデーションだと2色となっていますが、3色や4色など好みに合わせて色をいくつでも追加していくことが可能です。
ハンドルを繋ぐ線の上にカーソルを合わせると小さな＋マークが表示されます。
このマークがでている状態でクリックをすると新しい色（分岐点）が追加されます。
もしくは、グラデーションバーを直接クリックしても同じことができます。
あとは好みに合わせて色や分岐点の位置などを調整していきましょう。
グラデーションに画像やイラストを合わせる方法
次の3ステップで簡単に実装できるので、実際にやってみましょう！
- XD上に画像を追加
- 画像をグラデーションレイヤーの上に配置
- 描画モードを「ソフトライト」に変更
【完成形】グラデーションをフィルターとして使う
まず始めに完成形は、こちらです。
単色のフィルターだとのっぺりしてしまうデザインもグラデーションを使うことで洗練された高級感や今っぽさなどを表現することができます。
さっそく1から作ってみましょう！
ステップ①グラデーションを作成
まずは、フィルターに使うグラデーション（オブジェクト）を準備します。
今回は、線形グラデーションを使って3つの分岐点で作成しています。
右上：#FFCC70
真ん中：#C850C0
左下：#4158D0
ステップ②グラデーションの上に画像を配置
画像をXD上に追加し、グラデーションレイヤーの上へ重なるように配置していきましょう。
画像を追加する際にオブジェクトの上にドラック&ドロップしてしまうと、マスクがかかってしまい調整できなくなります。必ず画像とグラデーションのレイヤーは分かれるようにしましょう。
ステップ③描画モードを「ソフトライト」に変更
画像をクリックして、描画モードを変更します。
「標準」から「ソフトライト」に変更しましょう。
完成イメージのように画像にグラデーションのフィルターがかかり、今風なデザインになったと思います。
あとは、用途に合わせてロゴやキャッチコピーなどを配置すれば、完成です！
Adobe XDでグラデーションを使いこなそう！
グラデーションと聞くと「設定が難しいのでは？」と感じる人もいると思いますが、Adobe XDのグラデーションは、直感的かつシンプルなので初めての人でも簡単に作成できます。
グラデーションは、あらゆるシーンで使える万能なデザインなので、XDで使う方法をマスターして、今日から仕事や趣味に役立ててください！