XD

チュートリアルヒーロー画像

Adobe XDは、web サイト、アプリ、音声インターフェイス、ゲームなどのデジタルエクスペリエンスをデザインするための、UX デザインおよびプロトタイプ作成ツールです。

製品Tutorials

ホバーステートを持つコンポーネントの作成 インタラクティブなデザイン用に、再利用可能で動的にサイズ変更可能なボタンを作成します
リピートグリッドの作成と設定 クリック&ドラッグするだけで、ひとつの要素をリピートグリッドに変換できます
スタックの操作 要素を簡単に並べ替えるには、stack プロパティを使用します
プロトタイプの作成 — アンカーリンクとスクロールグループ プロトタイプへのナビゲーションとスクロールの追加
プロトタイプの作成 — インタラクティブコンポーネントのステート プロトタイプへのインタラクティブ機能とオーバーレイメニューの追加
電子メール — リピートグリッドの作成と設定 クリック&ドラッグするだけで、ひとつの要素をリピートグリッドに変換できます
電子メール — スタックの操作 要素を簡単に並べ替えるには、stack プロパティを使用します
スペーサー

スペーサー

作成 コンポーネント ホバーステートを使用 (7:35)

説明
インタラクティブなデザイン用に、再利用可能で動的にサイズ変更可能なボタンを作成します。

このチュートリアルでは、次の方法について学習します。

  • ソースのメインコンポーネントを変更すると、その変更がそのコンポーネントのすべてのインスタンスに自動的にプッシュされます
  • コンポーネントを使用して一貫性を保ち、時間を節約し、クリック数を減らす

提供元:
Michael Murphy、シニアソリューションコンサルタント(デジタルメディア)

リピートグリッドの作成と設定 (2:57)

説明
クリック&ドラッグするだけで、1 つの要素をリピートグリッドに変換できます。

このチュートリアルでは、次の方法について学習します。

  • ワークフローを加速。必要なサイズのグリッドを瞬時にドラッグして作成できます
  • 実際のコンテンツとデータを取り込むと、XDがすべての画像とテキストを魔法のようにグリッドに配置します
  • 変更を加えたら、その変更を任意の方向に任意の場所に適用できます

提供元:
Ashley Dvorin、シニアソリューションコンサルタント(デジタルメディア)

スタックの操作 (5:33)

説明
要素を簡単に再配置するには、stack プロパティを使用します。

このチュートリアルでは、次の方法について学習します。

  • デザインを変更しても、カンバス上のオブジェクト間の整列と間隔を維持できます
  • スタックに新しいオブジェクトを挿入したり、スタック内でオブジェクトの順序を変更したりすると、すべての設定が自動的に調整されます

提供元:
Michael Murphy、シニアソリューションコンサルタント(デジタルメディア)

プロトタイプの作成 — アンカーリンクとスクロールグループ (9:55)

説明
プロトタイプにナビゲーションとスクロールを追加します。

このチュートリアルでは、次の方法について学習します。

  • リンクをプロトタイプに追加するとき、ユーザーを同じアートボード上の異なるポイントにジャンプさせるアクションを使用できます
  • デザインの他の領域からは独立してスクロールする領域を定義して、アクティビティフィードや画像カルーセル、製品一覧などを作成できます
  • 垂直方向、水平方向、またはその両方にスクロールするグループを作成します

提供元:
Michael Murphy、シニアソリューションコンサルタント(デジタルメディア)

プロトタイプの作成 — インタラクティブコンポーネントのステート (8:55)

説明
プロトタイプにインタラクティブ機能とオーバーレイメニューを追加します。

このチュートリアルでは、次の方法について学習します。

  • アートボードを追加することなく、ノンリニアのインタラクティブなアニメーションユーザーエクスペリエンスを作成できます
  • プロトタイプやインタラクションの複数のフローを 1 つのXDドキュメント内に生成し、共有可能な一意のリンクをフローごとに公開します

提供元:
Emilie Enke、アソシエイトソリューションコンサルタント(デジタルメディア)

電子メール — リピートグリッドの作成と設定 (4:45)

説明
クリック&ドラッグするだけで、1 つの要素をリピートグリッドに変換できます。

このチュートリアルでは、次の方法について学習します。

  • ワークフローを加速。必要なサイズのグリッドを瞬時にドラッグして作成できます
  • 実際のコンテンツとデータを取り込むと、XDがすべての画像とテキストを魔法のようにグリッドに配置します
  • 変更を加えたら、その変更を任意の方向に任意の場所に適用できます

提供元:
Victoria Torres、ソリューションコンサルタント(デジタルメディア)

電子メール — スタックの使用 (3:38)

説明
要素を簡単に再配置するには、stack プロパティを使用します。

このチュートリアルでは、次の方法について学習します。

  • デザインを変更しても、カンバス上のオブジェクト間の整列と間隔を維持できます
  • スタックに新しいオブジェクトを挿入したり、スタック内でオブジェクトの順序を変更したりすると、すべての設定が自動的に調整されます

提供元:
Victoria Torres、ソリューションコンサルタント(デジタルメディア)

XDロゴ

XD Resources

ラーニングとサポート は、その他のチュートリアルのハブです。 新機能コミュニティフォーラムへのリンクも含まれています。

2020 年 10 月リリース

これらの機能を使い始めましょう(さらに多くの機能を利用できます)。 デスクトップアプリケーションから最新のアップデートをCreative Cloudしてダウンロードします。

このページ