XD

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

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

製品Tutorials

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

このページ