マニュアル キャンセル

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

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

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 では編集できません。 

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン