マニュアル キャンセル

オブジェクトの線、塗り、ドロップシャドウおよびシャドウ(内側)の設定

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  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. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  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. オブジェクトを選択します。

  2. 塗り」の横にある長方形をクリックします。カラーピッカーが表示されます。

    カラーピッカー
    カラーピッカー

    注意:

    スポイトツールを使用して、カラーの塗りつぶしをおこなうこともできます。[i] キーで、塗りのスポイトツールを有効にできます。

    • キーを 1 回クリックすると、塗りつぶしのスポイトツールが開きます。
    • キーをもう一度クリックすると、塗りつぶしのスポイトツールが終了します。
  3. 以下のことを実行できます。

    • 正確なカラー値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。様々なカラーモード間を切り替えることもできます。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。  
    • カラースライダーを使用するか、パーセンテージの値を指定して、塗りおよび塗りの不透明度を設定できます。
    • スポイトツールを使用してアートボードからカラーを選択します。
    • オブジェクトにグラデーション塗りつぶしを適用することもできます。グラデーションについて詳しくは、グラデーションの作成と修正を参照してください。

    カラーピッカーでオプションを変更しながら、アートボードで変更をプレビューできます。

    注意:

    Adobe XD では、16 進コードの短縮形もサポートされています。例えば、0 を入力して Return キーを押すと、コード #000000 のカラーが自動的に表示されます。

  4. 後で使用できるように、カラーをスウォッチとして保存できます。カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。

    スウォッチの追加
    スウォッチの追加

    カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーの外にドラッグします。

オブジェクトへの画像の塗りの適用

まず、有効になっていない場合、塗りを有効にします(オブジェクトへの塗りのカラーの適用の説明を参照)。次に、保存した場所(例えば、Finder や Windows エクスプローラー)から、画像をオブジェクトにドラッグします。

画像の塗りの切り抜きと配置

コンテナ内に配置された画像をダブルクリックし(オブジェクトシェイプでマスク)、画像の塗り内の画像を切り抜き、位置を変更することができます(デスクトップからのドラッグ時)。画像の塗りに切り抜きモードを使用して、次の操作を実行できます。

  •      画像の塗りをダブルクリックして切り抜きモードにする
  •      切り抜きモードで画像の位置を変更する
  •      切り抜きモードの任意の場所に画像を移動する

この機能強化は Photoshop と Sketch からインポートされたファイルにも適用されます。インポートされたファイルには、ソースアプリケーションで実行された画像の塗りと切り抜きが保持されます。

クリップボードからの画像のペースト

Adobe XD 以外の画像をオペレーティングシステムのクリップボードにコピーし、シェイプを選択し、オペレーティングシステムのクリップボードの画像を画像の塗りとしてペーストすることもできます。シェイプが選択されているときにユーザーがファイル/読み込みを選択すると、画像でシェイプも塗りつぶされます。

線の作成および線カラーの指定

  1. オブジェクトを選択します。

  2. 線の初期設定の幅は 1 です。別の値を指定するには、の値を変更します。

  3. 」の横にある長方形のカラーチップをクリックします。カラーピッカーが表示されます。

    カラーピッカー
    カラーピッカー

  4. 以下のことを実行できます。

    • 正確な値がわかっている場合は、HSBA、RGB または 16 進数の値を指定します。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSBA、RGB、16 進数の数値が適宜調整されます。  
    • スポイトツールを使用してアートボードからカラーを選択します。
    • カラースライダーを使用するか、パーセンテージの値を入力して、線の不透明度を設定します。
    • 枠線のサイズの編集と点線の作成
    • 線端(バット、丸形、突出)と結合(マイター、ラウンド、ベベル)、内側の線と外側の線を指定します。

    カラーピッカーでオプションを変更しながら、オブジェクトの線のカラーをプレビューできます。

  5. 後で使用できるように、カラーをスウォッチとして保存できます。カラーをスウォッチとして保存するには、カラーピッカーの下部にある「+」アイコンをクリックします。

    スウォッチの追加
    スウォッチの追加

    カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーからドラッグします。

  6. オブジェクトがクローズパスである場合、線幅を指定できます。線をパスに揃えるには、次のイラストに示すオプションのいずれかを選択します。

    デフォルトでは、XD ではクローズパスの内側の線が揃えられます。

    線の形状
    線の形状

    A. 線(内側) B. 線(外側) C. 線(中央) D. バット線端 E. 丸型線端 F. 突出線端 G. マイター結合 H. ラウンド結合 I. ベベル結合 

    注意:

    線幅や線の整列を変更しても、(バウンディングボックスでは)オブジェクトの実際のサイズは変更されません。ただし、オブジェクトを書き出す場合、使用される線の種類によってオブジェクトのサイズが変更される場合があります。

    SVG は中央の線のみをサポートします。内側の線または外側の線を持つオブジェクトを SVG として書き出す場合、書き出される画像のサイズは、中央の線がある場合のように表示されます。

アウトラインストロークを使用してストロークをシェイプに変換する

アウトラインストロークを使用して、線、パス、シェイプ、テキスト、画像、ブールグループから編集可能なベクターシェイプを作成します。シェイプを作成した後、コントロールを使用するか、プロパティパネルのプロパティを変更することで、シェイプにさらに変更を加えることができます。

これらの手順を試して、パスのアウトラインでここに示すようなアイコンを作成します。 

  1. 任意の文字を入力します。例えば、カンバス上の テキストツールを使用して「S」と入力します。

  2. 文字「S」を選択し、オブジェクト/パス/パスのアウトライン
    を選択します。レイヤーパネルで次の 2 つのレイヤーを表示します。1)S - アウトライン、2)S

    テキスト文字に対してアウトラインストロークを使用します。
    テキスト文字に対してアウトラインストロークを使用します。

  3. 長方形をダブルクリックして、アンカーポイントを追加します。

  4. アンカーポイントをクリックしてドラッグし、カスタムシェイプを作成します。 

  5. シェイプを作成したら、プロパティパネルの塗りつぶしグラデーションを使用して、カラーを変えるなどの変更を加えることができます。

    カラーやスタイルを追加してシェイプをカスタマイズします
    カラーやスタイルを追加してシェイプをカスタマイズします

シャドウを追加する

トグル、ボタン、スライダー、イラストなどのオブジェクトにドロップシャドウとシャドウ(内側)を追加できます。

  1. アートボードにオブジェクトを追加します。

  2. オブジェクトをクリックし、プロパティインスペクターの「ドロップシャドウ」または「シャドウ(内側)」をクリックします。

  3. カラーピッカー内で次のように操作します。

    a. シャドウにカラーを追加するには、次のいずれかの操作をおこないます。

    • カラーの HSB, RGB, または16 進数値を指定します。これらのカラーモード間は簡単に切り替えることができます。
    • カラーフィールドとカラースライダーを使用してカラーを調整します。これをおこなった場合、HSB、RGB、または 16 進数値が自動で調整されます。  
    • スポイトツールを使用してアートボードからカラーを選択します。

    b. 不透明度を設定するには、不透明度スライダーを使用するか、不透明度の値を入力します。

    スウォッチを保存するには、カラーピッカーの下部にある + アイコンをクリックします。カラーピッカーでスウォッチの順序を変えるには、スウォッチを新しい位置にドラッグします。スウォッチを削除するには、カラーピッカーからドラッグします。

  4. プロパティインスペクターで、以下を指定します。

    X オフセットY オフセット:シャドウをオブジェクトからオフセットする距離を指定します。

    B (ぼかし):シャドウの端からぼかしの開始点までの距離を入力します。

シャドウ(内側)

オブジェクトにシャドウ(内側) を適用する
オブジェクトにシャドウ(内側) を適用する

ドロップシャドウ

オブジェクトにドロップシャドウを適用する
オブジェクトにドロップシャドウを適用する

ブレンド効果の適用

デザインカンバスで画像またはオブジェクト(シェイプ、テキストレイヤー、グループ、マスク、またはコンポーネント)を選択します。プロパティインスペクターから、目的の描画モードを選択して適用します。詳細は、ブレンド効果の追加を参照してください。

オブジェクトからの塗り、シャドウまたは線の削除

オブジェクトを選択します。次に、プロパティインスペクターで「」、「塗り」または「シャドウ」の隣にあるチェックボックスをオンにします。塗り、線またはシャドウを元に戻す場合は、チェックボックスをもう一度クリックします。

その他の関連ヘルプ

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン