XD

最終更新日: 2023-10-19
  • トピック:
  • UI Design
    このトピックの詳細を表示
  • 作成対象:
  • Beginner
    Intermediate
    User

Adobe XDは、webサイト、アプリ、音声インターフェイス、ゲーム、およびその他の種類のデジタルエクスペリエンスをデザインするためのユーザーエクスペリエンスデザインおよびプロトタイピングツールです。

製品のTutorialsを参照

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

スペーサー

作成 コンポーネント ホバーステートあり(7:35)

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

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

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

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

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

説明
クリック&ドラッグするだけで、単一の要素を繰り返しグリッドに変換できます。

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

  • ワークフローを強化し、必要なサイズのグリッドを即座にドラッグします
  • 実際のコンテンツとデータを取り込むと、XDがすべての画像とテキストを魔法のようにグリッドに配置します
  • 一度変更を加え、好きな場所や方向に適用します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 追加のアートボードを必要とせずに、ノンリニアインタラクティブでアニメーション化されたユーザーエクスペリエンスを作成します
  • 1つのXDドキュメントで複数のプロトタイプフローまたはインタラクションフローを作成し、各フローに対して一意の共有可能なリンクを公開します

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

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

説明
クリック&ドラッグするだけで、単一の要素を繰り返しグリッドに変換できます。

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

  • ワークフローを強化し、必要なサイズのグリッドを即座にドラッグします
  • 実際のコンテンツとデータを取り込むと、XDがすべての画像とテキストを魔法のようにグリッドに配置します
  • 一度変更を加え、好きな場所や方向に適用します

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

電子メール – スタックの操作(3:38)

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

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

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

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

XDロゴ

XDリソース

ラーニングとサポート は、追加のチュートリアルのハブです。 新機能、およびコミュニティフォーラムへのリンク。

2020年10月リリース

これらの機能の使用を開始しましょう(さらに多くの機能を使用できます)。 Creative Cloudのデスクトップアプリから最新のアップデートをダウンロードする方法を説明します。

このページ