マニュアル キャンセル

ヒントとコツ

  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 でプロトタイプをデザインまたは作成します。

Adobe XD を使用するうえで役立ついくつかのコツを紹介します。

一般的なヒントとコツ

  • デザインでアイテムのグループをコピー&ペーストするのではなく、リピートグリッドツール(プロパティインスペクターで利用可能)を使用することをお勧めします。
  • シェイプを選択し、Option キー(Mac の場合)または Alt キー(Windows の場合)を押しながらその新しいコピーをドラッグすることで、シェイプを複製できます。
  • エレメントをロックするには、Mac ではオブジェクト/ロック(または Command + L)を使用します。これはロックの状態を切り替えるため、エレメントをロック解除する場合もこのコマンドを使用できます。Windows では、オブジェクトを右クリックして、コンテキストメニューから「ロック」を選択します。
  • Command キーまたは Ctrl キーを押して、ダイレクト選択を有効にします。ネストされたオブジェクトを選択することもできます。
  • 画像をシェイプにドロップしてすばやくマスクします。シェイプの塗りつぶしは画像になります。
  • 画像を読み込んで編集可能なマスクを作成し、その上にシェイプを描画します。両方を選択し、オブジェクト/シェイプでマスク(Mac の場合)を選択するか、オブジェクトを右クリックしてコンテキストメニューから「シェイプでマスク」を選択します。マスクされたグループをダブルクリックして、マスクまたは画像を後で編集することができます。

描画とテキスト

  • スナップガイドをオフにするには、Command/Ctrl キーを押し続けます。
  • アンカーポイントをダブルクリックして、曲線と角度を切り替えることができます。
  • Option/Alt キーを押しながら曲線ハンドルをドラッグして、曲線ハンドルを独立させます(もう一度依存させるには、ダブルクリックして角度に戻り、再度ダブルクリックします)。
  • ペンツールを使って描画するときに、アンカーポイントを選択できます。
  • ダブルクリックしてグループの編集コンテキストに入るか(このコンテキストでエレメントを追加できます)、単に Command/Ctrl を押して、グループ内のオブジェクトをクリックして選択します。
  • テキストアイテムを選択してから、新しいアイテムを作成し、最初のアイテムから 2 番目のアイテムにすべてのスタイルを適用します。
  • パスの組み合わせ(合体、前面オブジェクトで型抜き、交差、重なる部分を中マド)は非破壊的です。また、オン/オフを切り替えることができます。

コンテンツの読み込み

  • Illustrator からコンテンツを読み込むには、Illustrator でベクターシェイプを選択してコピーし、Adobe XD にペーストします。
  • Photoshop からビットマップコンテンツを読み込むには、ビットマップまたはテキストレイヤーですべてを選択(Command + A または Ctrl + A)(または最初にベクターレイヤーまたはグループをスマートオブジェクトに変換)してから、Adobe XD にペーストします。ペーストされたレイヤーは、ビットマップになります。選択ツールを使用して対象を選択し、Photoshop からコンテンツをコピーすることもできます。次に、メニューから、編集/コピー(現在のレイヤー上の選択内容を取得)を選択するか、編集/結合部分をコピー(選択範囲内のすべてのレイヤー上の選択内容を取得)を選択します。
  • Sketch からコンテンツを読み込むには、1 つ以上のレイヤーまたはグループを選択し、「書き出し可能にする」をクリックします。形式として SVG を選択し、Sketch から Adobe XD にレイヤーをドラッグ&ドロップします。これにより、Adobe XD で編集可能なベクターコンテンツが生成されます。
  • アセット(PNG、JPG、TIFF、GIF、SVG)を読み込むには、Mac では、ファイル/読み込みを使用するか、ドラッグ&ドロップするか、Finder から Adobe XD に画像をコピー&ペーストします。
    Windows では、ハンバーガーメニューをクリックして「読み込み」をクリックするか、ドラッグ&ドロップするか、エクスプローラーで画像をコピー&ペーストします。
    ブラウザーから Adobe XD にコピー&ペーストすることもできます。

キーボードコントロール

  • 角丸の半径を調整する場合、Option キーを押し続けて、角丸を個別に調整できます。
  • エレメントを移動またはサイズ変更するときにスナップを一時的に無効にするには、Command キーまたは Ctrl キーを押し続けます。
  • Shift キーを押しながらエレメントをサイズ変更して、エレメントの縦横比を固定します。
  • 初期設定(左上隅にある)ではなく、中央から描画するには、Alt キーを押しながらシェイプを描画します。
  • 選択したアイテムの不透明度をすばやく変更するには、次の数値キーを押します:1 = 10%、2 = 20%など。0 = 100%です。
  • 矢印キーを使ってシェイプまたはコントロールポイントを移動する場合、Shift キーを押し続けると 10 px 単位で移動できます。
  • スペースバーを押しながら、手動モードを操作します。クリック&ドラッグで、カンバス全体に拡張できます。

アートボード

  • アートボードを選択するには、アートボードのタイトルをクリックするか、Command/Ctrl キーを押しながらその背景をクリックするか、その背景をダブルクリックします。
  • 空のアートボードを選択するには、アートボードの背景をクリックします。
  • アートボード(とその内容)を複製するには、アートボードを選択し、Command キー(Mac の場合)または Alt キー(Windows の場合)を押しながらドラッグしてコピーを作成します。
  • アートボードの名前を変更するには、そのタイトルをダブルクリックします。

リピートグリッド

  • リピートグリッドで繰り返されるアイテム間の間隔を調整するには、リピートグリッドを選択し、エレメント間のスペースの上にマウスを移動して、ドラッグします。リピートグリッド内のアイテムを編集する場合、Esc を押して、編集モードを終了する必要があります。

プロトタイプ化とプレビュー

  • アートボード(またはアートボード全体)の任意のオブジェクトを選択し、ワイヤーをドラッグして、アートボード間のインタラクションをトリガーできます。
  • 設定したインタラクションの接続を解除するには、接続先からワイヤーを外すようにドラッグします。
  • Web デザインで、ディゾルブトランジションを使用できます。
  • アートボード間のすべての接続を表示するには(アートボードから直接トリガーされたものを除く)、プロトタイプモードで Command + A キー(Mac の場合)または Ctrl + A キー(Windows の場合)を押します。
  • プレビューウィンドウにアートボードと現在の選択内容が表示されます。何も選択されていない場合は、プレビューウィンドウがホームアートボードと共に開きます。
  • インタラクティブプロトタイプのプレビューウィンドウから記録できます。タイトルバーの記録アイコンをクリックし、記録を開始します。
  • 記録を停止するには、記録ボタンを再度クリックするか、Esc を押します。
  • 設計したエクスペリエンスのタイプに基づいて、プロトタイプ上でキーボードショートカットやゲームパッドトリガーを使うことができます。 

共有

  • 共有するには、Adobe Creative Cloud デスクトップアプリケーションまたはその他のアドビのアプリケーション(Photoshop、Illustrator など)にアドビアカウントでログインしている必要があります。
    Adobe ID、Enterprise ID、Federated ID はすべてサポートされています。
  • 最初はインタラクションを追加しないでデザインファイルを共有した場合、すべてのアートボードがアップロードされ、ユーザーはキーボードの矢印キーを使用して移動できます。アートボードの順序は、左上を起点として、そこから右へと移動する順序になります。
  • デザインにインタラクションが含まれている場合は、ホームアートボードに接続されているアートボードのみがアップロードおよび共有されます。
  • ホームアートボードとして定義したアートボードが、共有されたデザインを表示したときにユーザーに最初に表示されるアートボードです。
  • ホームアートボードを変更するには、プロトタイプモードで、アートボードの横のホームアートボードアイコンを選択します。このホームアートボードアイコンは、選択されているアートボード(または選択したターゲットの接続先)に対してのみ表示されます。
  • モバイルの Web ブラウザーにプロトタイプを表示したとき、デバイスのホーム画面にそのプロトタイプのショートカットを保存できます。これにより、プロトタイプはネイティブアプリケーションであるかのように表示されます。

その他の関連ヘルプ

アドビのロゴ

アカウントにログイン