オブジェクトの塗り、線、ドロップシャドウの設定 1/3（塗り） Adobe XD でオブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。 カラーフィールドとカラースライダーを使用して色を調整する...
繰り返しオブジェクトの作成 リピートグリッド機能は、カードUIの様にオブジェクトを繰り返し配置するデザインの作成を効率化します。 繰り返し配置したい一連のオブジェクトを選択し、リピートグリッド機能では、オブジ...
コンポーネントへの複数ステートの追加 1/3（ホバーステート） コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。 ステートを持つコンポーネントの代表的な例には、ボタ...
ハイパーリンクの作成 Adobe XD では、任意のオブジェクトから Web ページを開いたりメールアプリを起動するハイパーリンクを作成できます。アクションに「ハイパーリンク」を選択できるトリガーは以下...
リンクされたアセットから Creative Cloud ライブラリへ移行 2021 年 9 月のアップデート以降、XD のドキュメント間でリンクされたアセットを共有するには、Creative Cloud ライブラリの利用が唯一の方法となります。 クラウド...
Adobe XD でのビデオの操作 XD は動画を埋め込んだプロトタイプを作成し、レビュー用に共有できます。XD にビデオを読み込むには、アートボードに動画ファイルをドラッグするか、メニューからファイル／読み込みを選...
Adobe XD での Lottie アニメーションの操作 XD はアートボードに Lottie アニメーションを配置して、プロトタイプとして共有できます。XD に Lottie アニメーションを読み込むには、アートボードにファイルをドラッ...
選択したアートボードの共有 Adobe XD では、共有したいアートボードを選択すると、ワンクリックで共有リンクを作成できます。作業中のアートボードの簡易レビューを行いたいときや、プレゼンテーション用に数枚の...
複数のフローを含んだプロトタイプの作成 ひとつの XD ドキュメントに複数のインタラクションのフローを定義できます。フローの定義はプロトタイプモードで行います。 まず、ホームアートボードを設定して、フローの開始点を定義し...
音声コマンドや音声再生を使用したプロトタイプの作成 2/2（音声とオーディオの再生） Adobe XDでは、プロトタイプに音声によるテキストの読み上げや、オーディオを使用した効果音を追加できます。 音声UIのプロトタイプを作成していて、遷移したら音声が再生されるよう...
音声機能付きプロトタイプのデザイン Adobe XDは、音声を使って体験をデザインし、音声機能付きプロトタイプを共有できます。デザイナーは、音声技術やコーディングに関する知識がなくても、音声をプロトタイプに簡単に追加...
音声コマンドや音声再生を使用したプロトタイプの作成 1/2（音声コマンドの使用） Adobe XD は、音声 UI（VUI）のプロトタイプを作成できます。そのための機能のひとつが、音声をトリガーとする音声コマンドです。 プロトタイプへの音声コマンドの追加はプロト...
キーボードを使用したプロトタイプの作成 Adobe XD には、キー入力により操作できるプロトタイプを作成する機能があります。 設定はプロトタイプモードで行います。遷移先のアートボードに接続ハンドルをつないでから、トリガ...
Slackとの連携 Adobe XD の共有プロトタイプを Slack と連携させるには、Creative Cloud と Slack の連携のページにアクセスし、「Slackに接続」をクリックします...
Adobe Fontsとの連携 Adobe XD は、環境に無いフォントが Adobe Fonts ライブラリから入手できる場合、それを自動的にアクティベートします。特に操作する必要はありません。 使用しなくなっ...
デザイントークンを使用する ドキュメントアセットとして登録したカラーや文字スタイルには名前を付けることができます。この名前はデザイントークンと呼ばれ、開発者がスタイルに対応する変数やクラスを作成する際に使用し...
スタックを使用した動的なデザイン 2/2（スタックの使用方法） スタックはネストして利用できます。例えば、水平方向スタックを有効にしたカード型 UI をいくつか縦に並べてグループ化し、そのグループに垂直方向スタックを有効にすると、スタックがネス...
スタックを使用した動的なデザイン 1/2（スタックの作成方法） スタックを利用するには、グループまたはコンポーネントのレスポンシブサイズ変更を有効にします。次に、プロパティインスペクター内のスタックのチェックボックスをオンにすると、グループのレ...
3D変形を使用したデザインの作成 2/2（3D変形の使用したプロトタイプの作成） 3D 変形はプロトタイプの動きの表現に利用できます。立体感のある動きが欲しいときに有効な使い方です。 まず、同じオブジェクトを配置した2つのアートボードを用意します。次に、どちらか...
3D変形を使用したデザインの作成 1/2（3D変形の使用方法） オブジェクトやグループに対して3D変形を有効にすると、X 軸と Y 軸に沿って回転させたり、Z 軸方向に移動できるようになります。 3D 変形を有効にするには、プロパティインスペク...
オブジェクトの整列、分布 列パネルを使用すると、オブジェクトを整列させたり、等間隔に並べることができます。整列に使用できるオプションは以下の通りです。 上揃え、上下中央揃え、下揃え 左揃え、左右中央揃え、右...
オブジェクトの配置 Adobe XD ではオブジェクトを描画すると、描画した順に手前に表示されます。 レイヤーパネル内のレイヤーは、オブジェクトの重なり順に並べられています。最前面に表示されているオブ...
オブジェクトの移動 オブジェクトの移動には、いくつかの方法が利用できます。 マウスをつかってオブジェクトをドラッグ キーボードの矢印キーを使用 プロパティインスペクターに XY 座標を入力 マウスを使...
オブジェクトの複製、コピー、反転 オブジェクトを複製するには、目的のオブジェクトを選択し、Opt/Alt キーを押しながら選択されたオブジェクトをドラッグします。Mac では編集／複製をクリックしてオブジェクトを複...
オブジェクトのグループ化、ロック 複数のオブジェクトをグループ化すると、まとめて移動や拡大縮小したり、線の塗りなどのプロパティを変更できます。グループ化するには、対象のオブジェクトをすべて選択した状態で右クリックし...
シェイプの合成 単純なシェイプの組み合わせから複雑なシェイプを作成することができます。そのためには、組み合わせたいシェイプを選択し、プロパティインスペクター内の次のいずれかのオプションをクリックし...
グリッドの操作 Adobe XD では、方眼グリッドとレイアウトグリッドの 2 種類のグリッドが利用できます。方眼グリッドはマス目に沿って、レイアウトグリッドはカラムに沿って、オブジェクトを整列し...
アートボードの操作 2/2（サイズ変更、移動、ズーム） アートボードを選択するには、選択ツールを使用して、アートボードのタイトルをクリック、またはアートボードの背景をダブルクリックします。Mac では Cmd+3 、Windows では...
アートボードの操作 1/2（作成、名前の変更、スクロール） XD ドキュメントには複数のアートボードを含めることができます。モバイル、タブレット、デスクトップ用など異なるサイズのアートボードを並べることもできます。アートボードの作成は、事前...
スクロールグループの作成 スクロールグループを使用すると、アートボード内に、独立したクロール領域を定義できます。水平方向、垂直方向、または両方向へのスクロールを指定できます。 スクロールグループを作成するに...
スクロール可能なアートボードの作成 アートボードの長さが足りないために、コンテンツをすべて配置できない場合、アートボードを長くしてスクロール可能にすることができます。アートボードを縦に伸ばすには、アートボードの下辺を...
ブレンド効果の適用 Adobe XDのブレンド効果を使用すると、複数レイヤーを組み合わせて、目を引くユニークな効果をつくり出したり、画像を自然に合成することができます。 ブレンド効果はデフォルトでは「...
ぼかし効果の適用 Adobe XDでは、オブジェクト全体をぼかしたり、オブジェクトにぼかしマスクを追加することができます。 オブジェクト全体をぼかすには、ぼかしたいオブジェクトを選択してから、プロパ...
レイヤーの操作 1/2（レイヤーパネルの表示、検索と絞り込み） Adobe XD のレイヤーパネルを開くと、アートボード一覧を表示したり、作業中のアートボードに関連付けられたレイヤーを確認できます。レイヤーパネルにアクセスするには、ツールバーの...
レイヤーの操作 2/2（追加、並び替え、グループ化、名前変更など） ドキュメント内のオブジェクトは、それぞれ個別のレイヤー内に配置されます。そのため、レイヤーをグループすると、それらのレイヤーに含まれるオブジェクトをグループ化できます。レイヤーをグ...
描画ツール 1/3（長方形） 長方形や正方形を描画するには、長方形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると長方形を描画できます。Shift キーを押しながらドラッグすると正...
描画ツール 2/3（楕円形、多角形） 楕円や円を描画するには、楕円形ツールを選択します。アートボード上で希望のサイズになるまで斜めにドラッグすると楕円を描画できます。Shift キーを押しながらドラッグすると円を描画で...
描画ツール 3/3（線、ペン） 線ツールを選択し、始点をクリックして終点までドラッグすると、直線を描画できます。Shift キーを押しながらドラッグすると、水平、垂直、45度の線を描画できます。 ペンツールを使用...
オブジェクトの選択、サイズ変更および回転 1/2（選択） オブジェクトを選択するには、選択ツールを使い、目的のオブジェクトをクリックします。複数のオブジェクトを選択するには、選択ツールをドラッグして選択範囲を指定するか、Shift キーを...
オブジェクトの選択、サイズ変更および回転 2/2（サイズ変更と回転） オブジェクトのサイズを変更するには、オブジェクトを選択して、丸形のハンドルをドラッグします。サイズ変更時にアスペクト比を固定するには、プロパティインスペクターでロックアイコンをクリ...
オブジェクトの塗り、線、ドロップシャドウの設定 1/3（塗り） Adobe XD でオブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。 カラーフィールドとカラースライダーを使用して色を調整する...
オブジェクトの塗り、線、ドロップシャドウの設定 2/3（線、アウトライン） Adobe XD でオブジェクトへ線を適用するには、まずオブジェクトを選択します。プロパティインスペクターで「線」が有効になっていると、カラーピッカーを表示して色を変えたり、サイズ...
オブジェクトの塗り、線、ドロップシャドウの設定 3/3（ドロップシャドウ、シャドウ内側） Adobe XD でオブジェクトにドロップシャドウを追加するには、対象のオブジェクトを選択し、プロパティインスペクターの「ドロップシャドウ」をクリックして有効にします。 ドロップシ...
テキストツール 1/2（テキストの作成と編集） テキストツールを選択し、テキストを開始する場所をクリックすると、テキスト入力を開始できます。Esc キーを押してテキストの変更を確定するか、Return キーを押して次の行に移動す...
テキストツール 2/2（その他の機能） テキスト変換として適用可能なオプションには、テキストを「すべて大文字／小文字にする」、「単語の先頭の文字のみ大文字にする」、「上付き文字や下付き文字にする」が用意されていあます。テ...
繰り返しオブジェクトの作成 リピートグリッド機能は、カードUIの様にオブジェクトを繰り返し配置するデザインの作成を効率化します。 繰り返し配置したい一連のオブジェクトを選択し、リピートグリッド機能では、オブジ...
デザイン素材の書き出し Adobe XD からデザイン素材を PNG、SVG、JPG、PDF 形式で書き出せます。書き出したいオブジェクトを選択し、ファイル／書き出し／選択したオブジェクトを選択するか、シ...
レスポンシブサイズ変更とレイアウトの制約 近年では数々な解像度を持つデバイス向けのデザインを作成する必要があります。Adobe XD のレスポンシブサイズを使うと、オブジェクトのサイズを変更する際、オブジェクトの関係を維持...
コンポーネントへの複数ステートの追加 1/3（ホバーステート） コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。 ステートを持つコンポーネントの代表的な例には、ボタ...
コンポーネントとグループへの固定パディングの設定 Adobe XD では、グループまたはコンポーネントに固定パディング値を設定できます、パディングを固定すると、コンテンツに応じて自動的に背景の大きさが変わります。たとえばラベルに合...
コンポーネントへの複数ステートの追加 2/3（インタラクションの追加） コンポーネントのステートにインタラクションを指定して、タップ操作で表示するステートを切り替えることが可能です。アートボード間のインタラクションと同様の指定を行いますが、接続先にステ...
コンポーネントへの複数ステートの追加 3/3（リピートグリッドでの応用） マスターコンポーネントに追加されたステートは、そのコピーであるインスタンスでも利用できます。リピートグリッドにインスタンスを配置すれば、複数インスタンスの配置を一度にまとめて行えま...
デザインの共同編集 Adobe XD では、他のデザイナーとのリアルタイム共同編集から、関係者やユーザーの協力によるフィードバックの収集まで、デザインプロセスのあらゆる段階でエンドツーエンドの共同作業...
インタラクティブプロトタイプの作成 1/2（ホーム画面と画面遷移） プロトタイプの作成は、プロトタイプモードに切り替えて行います まず、ホーム画面、すなわち最初に表示される画面を設定します。アートボードを選択して、左上隅のホームアイコンをクリックす...
インタラクティブプロトタイプの作成 2/2（画面遷移のアニメーション） 画面遷移のインタラクションにはデフォルトで「ディゾルブ」のアニメーションが設定されています。これを「左にスライド」「右にスライド」のアニメーションに変更すると、一覧画面と詳細画面の...
オーバーレイを使用したプロトタイプの作成 Adobe XDのプロトタイプでは、アートボードの上に別のアートボードを重ねて表示できます。ドロップダウンリスト、入力用キーボードなどの表現に便利です。 まず、プロトタイプモードで...
モバイルデバイスでプレビュー モバイルデバイスを使い、XD で作業中のデザインをレビューしたり、保存済みのクラウドドキュメントを確認することが可能です。プレビューに必要な XD モバイルアプリケーションは、iO...
プレビューウィンドウでのデザインとプロトタイプのプレビュー Adobe XD のデスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。プレビューウィンドウを表示するには、デザインモードまたはプロトタイ...
リピートグリッドを使ったインタラクションの作成 リピートグリッドから他のアートボードへの接続は、3種類の方法が選べます。 リピートグリッド全体を接続するには、リピートグリッドを選択し、接続ハンドルをドラッグして移動先のアートボー...
プロトタイプのアニメーション化 1/3（フェードイン/アウト） 自動アニメーションを使用すると、流れるようなトランジションを作成して、アートボード間のコンテンツの関係を視覚的に表現できます。 プロトタイプモードでアートボードを接続し、プロパティ...
プロトタイプのアニメーション化 2/3（拡大縮小のアニメーション） 自動アニメーションでは、移動元と移動先のオブジェクトの種類、レイヤー名、グループの階層が一致している場合、そのオブジェクトの属性が自動的にアニメーション化されます。 移動元のアート...
プロトタイプのアニメーション化 3/3（ドラッグトリガー） 自動アニメーションとドラッグトリガーを組み合わせると、実際のドラッグ操作のようなインタラクションを作成できます。 移動元と移動先のアートボードには自動アニメーションの条件を満たすオ...
タイマートランジションの作成 1/2（時間トリガーの基本） 時間トリガーを使用して、時間の経過により自動的に発生するアートボード間のトランジションを作成できます。 プロトタイプモードで、移動元のアートボードを選択し、移動先のアー...
タイマートランジションの作成 2/2（自動ループの作成） 時間トリガーをアクションと組み合わせて使用すると、ループアニメーションを作成できます。 ループアニメーションを作成するには、アニメーションの最初と最後のアートボードの外観を同じにし...
ブラウザーでのプロトタイプの操作 共有モードで「デザインレビュー」のリンクを作成すると、プロトタイプを共有して簡単にレビューを行えます。 共有されたリンクを入力して、ブラウザーにプロトタイプを表示します。プロトタイ...
デザインおよびプロトタイプの共有 共有モードでは、作成したデザインを関係者に共有するリンクの管理を行います。事前に組み込まれている 4 つのシナリオ、またはカスタムから目的に合うものを選択して、共有リンクを作成しま...
デザインスペックからのデザイン素材の書き出し 書き出し用にマークされたレイヤーは、共有リンクから画像としてダウンロードできます。書き出し用にマークするには、カンバス上でオブジェクトを選択して右クリックし、コンテキストメニューか...
デザインスペックのナビゲート 開発用に共有されたリンクを開くと、全体像を把握できるグリッドビューおよびフロービュー、そして、開発に必要な情報が表示されるデザインスペックを利用できます。 グリッドビューを表示する...
デザインスペックのレビューとコメント 表示設定に「開発」を指定して共有した場合も、「デザインレビュー」と同じコメント機能を利用できます。デザインにコメントを付け、ピンを使用してコメントの正確な位置を示すことが可能です。...
デザインスペックの共有 Adobe XDでは、オブジェクトの高さ、幅、位置、スタイルなどを、デザインスペックとして共有できます。デザインスペックの共有は「共有」モードで行います。 プロパティインスペクター...
デザインスペックを確認する 表示設定に「開発」を指定して共有されたリンクは、スペックモードを表示できます。スペックモードは、アートボード内のオブジェクトのスタイル、レイアウトなどの属性や、ダウンロード可能なア...
Adobe XD のクラウドドキュメント クラウドドキュメントとして保存すると、複数のデバイスからの共有や、他のデザイナーとの共同作業、バージョン管理が可能になります。 クラウドドキュメントには、XD ...
アセットの管理 2/2（文字スタイルの登録と利用） 文字スタイルをアセットとして追加するには、カンバス上のテキストを選択して、ライブラリパネル内の「文字スタイル」の横にある「+」アイコンをクリックします。複数のスタイルが設定されたテ...
アセットの管理 1/2（カラーの登録と利用） ライブラリパネルには、カラー、文字スタイル、コンポーネントが登録できます。 カラーをアセットとして登録するには、カンバス上の関連オブジェクトを選択して、ライブラリパネルの「カラー」...
コンポーネントの操作 1/3（作成方法） デザイン全体で繰り返される要素を作成するとき、コンポーネントを使うと柔軟に効率よく作業することができます。 コンポーネントを作成するには、オブジェクトまたはオブジェクトのグループを...
コンポーネントの操作 2/3（インスタンスのカスタマイズ） 作成したメインコンポーネントのすべてのコピーをインスタンスと呼びます。インスタンスは、メインコンポーネントの正確なコピーで、メインにリンクされているため、メインコンポーネントに変更...
コンポーネントの操作 3/3（レスポンシブサイズ変更機能との併用） メインコンポーネントのサイズを変更すると、サイズ変更されていないインスタンスは自動的にサイズ変更されますが、既にサイズ変更されているインスタンスのサイズはオーバーライドとして保持さ...
Adobe XD での Creative Cloud ライブラリの操作 複数のデザイナーが関わるときは、一貫性を保つことが困難かつ重要になります。XD では、再利用可能なカラー、文字スタイル、コンポーネントを定義したクラウドドキュメントによるデザインシ...
リンクされたアセットの操作 1/2（外部ドキュメントのアセットの読み込み） ソースドキュメントのアセットパネルに必要なカラー、文字スタイル、コンポーネントを登録し、クラウドドキュメントとして保存して、それをリンクして使うことで、デザインの一貫性を保つことが...
リンクされたアセットの操作 2/2（カラー、文字スタイルの適用と編集） リンクされたカラーや文字スタイルは、通常のアセットと同じようにカンバス上のオブジェクトに適用できます。 リンクされたアセットを編集するにjは、編集するアセットを右クリックし、「ソー...
リンクされたコンポーネントの操作 1/2（外部ドキュメントのコンポーネントの読み込み） コンポーネントもカラーや文字スタイルと同様、他のドキュメントからリンクして使うことができます。 保存したソースドキュメントからコンポーネントをコピーして自分のドキュメントに貼り付け...
リンクされたコンポーネントの操作 2/2（メインコンポーネントの変更と更新の適用） ソースドキュメントでマスターコンポーネントを編集するには、アセットパネルまたはカンバス上でコンポーネントを右クリックして、「元のドキュメントでマスターを編集」を選択します。ソースド...
アンカーリンクの作成 Adobe XD では、プロトタイプにアンカーリンクを作成し、アートボードの特定の位置にスクロールする動作を設定できます。 設定するには、プロトタイプモードに切り替えて、アンカーリ...
Adobe XD と Creative Cloud – 概要 Creative Cloudライブラリを使うと、他のアプリとデザインアセットを共有できます。XDでCCライブラリを開き、PhotoshopやIllustratorなどから共有された...
プラグインの作成と管理 プラグインの検索は、プラグイン管理画面から行えます。プラグインパネル右上の（+）アイコンをクリックすると、プラグイン管理画面を表示できます。 「参照」タブを開き、検索フィールドにキ...
外部ツールとの連携 1/5（画像ファイル） Adobe XD には、PNG、JPG、TIFF、GIF または SVG ファイルとして保存されているデザイン素材を読み込めます。読み込むには、Mac の場合は、ファイル／読み込み...
外部ツールとの連携 2/5（Photoshop） Photoshop のデザイン素材を Adobe XD に取り込むには、次のいずれかの方法を使用します。 Mac の場合は、ファイル／開く、Windows の場合は、ハンバーガーメ...
外部ツールとの連携 3/5（Illustrator） Illustrator のデザイン素材を Adobe XD に取り込むには、次のいずれかの方法を使用します。 Mac の場合は、ファイル／開く、Windows の場合は、ハンバーガ...
外部ツールとの連携 4/5（Sketch） Sketch のデザイン素材を Adobe XD に取り込むには、次のいずれかの方法を使用します。 Mac の場合は、ファイル／開く、Windows の場合は、ハンバーガーメニュー...
外部ツールとの連携 5/5（After Effects） XD のデザインを After Effects に書き出すことができます（書き出しがサポートされるのは、After Effects 2018 以降です）。その際、すべてのエレメント...
XDでのCreative Cloud ライブラリの利用 3/3（アセットの編集） Creative Cloud ライブラリでグラフィックを編集するには、Creative Cloud ライブラリのグラフィックを右クリックして「編集」を選択します。ラスタライズグラフ...
XDでのCreative Cloud ライブラリの利用 2/3（アセットの利用） ライブラリパネルに表示された Creative Cloud ライブラリのカラー、文字スタイル、グラフィックなどのアセットを XD ドキュメントで利用することができます。 カンバス上...
XDでのCreative Cloud ライブラリの利用 1/3（アセットの追加、整理、共有） Creative Cloud ライブラリを使用して、Photoshop や Illustrator など他のアプリケーションとカラー、文字スタイル、グラフィックなどのアセットを共有...
XDとPhotoshopとの連携 1/3（コピー＆ペーストと編集） PhotoshopからXD素材を読み込むにはいくつかの方法があります。最も簡単な方法は、Photoshop内の画像をコピーして、それをXDにペーストすることです。 複数のレイヤーを...
XDとPhotoshopとの連携 2/3（PSDファイルを開く方法と読み込む方法） Photoshop（.PSD）ドキュメントをXDで開くと、レイヤー構造が保たれたまま、XDでPhotoshopのデザインを扱えます。そのため、テキストの編集をXDで行うことも可能で...
XDとPhotoshopとの連携 3/3（CCライブラリを利用した連携） PhotoshopからレイヤーをCCライブラリにグラフィックとして追加すると、XDのCCライブラリからアクセスして、カンバスに配置することができます。 CCライブラリ経由で共有され...
XDとIllustratorとの連携 Illustratorから素材を読み込むにはいくつかの方法があります。最も簡単な方法は、Illustratorの素材をXDにコピー＆ペーストすることです。レイヤー構造が維持されたま...
XDのプラグイン Adobe XD にはアドビおよびサードパーティが開発したさまざまなプラグインを追加できます。これにより、複雑で反復の多い作業を自動化し、外部ツールやサービスとの緊密な統合が実現さ...
