マニュアル キャンセル

UI デザインキットへのアクセス

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  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. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  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. 書き出しに表示されないサードパーティ製品

XD での UI キット、プラグインおよびアプリ統合の方法について説明します。

Adobe XD では、Apple iOS、Google マテリアル、Microsoft Windows およびワイヤフレーム向けの UI キットへのリンクが提供されます。これらの UI キットには、オペレーティングシステム固有のグラフィック要素が含まれます。例えば、iOS アプリをデザインする場合、Apple iOS キットの簡単に使用できる画面を利用してすぐに始めることができます。XD では、デザイナー MarketplaceDashboard UI キットなどのインスピレーションをもたらすキットにアクセスすることもできます。

XD は、デザイナーがデザイン製品の出発点として使用できるいくつかの UI キットを提供します。 

UI キットにアクセスするには、ファイルUI キットを入手にアクセスします。

UI デザインキットへのアクセス
UI デザインキットへのアクセス

ダウンロードできるカスタム UI キットをいくつか用意しました。必要に応じてダウンロードしてカスタマイズできます。これらの UI アクセスキットは、デザインプロセスにおけるデザイナーの時間と労力を節約し、確立されたデザインガイドラインへの一貫性と準拠に役立ちます。

AEM:すべてのポート(イントラネット)

従業員のコミュニケーションを再考します。Adobe Experience Manager のイントラネットプロジェクトの作成を今すぐ開始し、XD および AEM ワークフローを高速化します。

アンカーリンク

このキットを使用すると時間の節約になります。単一ページの web デザインの例がいくつか含まれており、すべてアンカーリンク、ホバー状態、および固定要素を使用して接続されています。

AEM:Sooth(eコマース)

直感的な eコマースエクスペリエンスを作成します。Adobe Experience Manager の eコマースプロジェクトの作成を加速させ、XD および AEM ワークフローを高速化します。

AEM:WKND

Adobe Experience Manager のコアコンポーネントのみを使用して新しいサイトを構築します。

Vault

20 のカスタマイズ可能な画面、デザインスペック、およびエンドツーエンドのプロトタイプから選択します。

BFSI

金融機関向けの Adobe Experience Manager サイトのデザインを高速化します。

アニメーションチャート

複数のアートボードの相互作用とコンポーネントの状態のアニメーションチャートを作成します。

デザインシステム:Semantic

Semantic のユーザーインターフェイスから影響を受けたキットを使用して、独自のカスタムデザインシステムを構築します。

Boomerang(モバイルアプリ)

メッセージを送信し、親しい友人と写真やビデオを共有するためのモバイルアプリをデザインします。

コンポーネントステート

XD でコンポーネントのステートを使用して、ボタン、トグルスイッチ、読み込みシーケンスなどを作成する方法を探ります。

ダッシュボード

カスタマイズ可能なチャート、アイコン、コンポーネント、およびレイアウトを使用して、分析とデータの視覚化を簡素化します。

自動アニメーション

マイクロインタラクションやドラッグ効果などを作成するツールを使用して、アートボード全体で要素をアニメーション化します。

ワイヤーフレーム

これらの包括的なワイヤーフレーム UX キットを使用して、XD 専用のモバイルや web エクスペリエンスを作成します。

eコマース

完全にレイヤー化されたアートボード全体で 40 以上のカスタマイズ可能なコンポーネントを使用して、eコマースエクスペリエンスを作成します。

金融機関のデザインシステム

金融機関のエクスペリエンスのデザインシステムのクリエイティブを加速します。

プレゼンテーション

この Adobe XD テンプレートの 16 の動的なアニメーションスライドデザインで、テキストと画像の両方を作成してカスタマイズします。

Urgym(マーケティング)

これを使用して、ランディングページ、電子メールテンプレート、およびソーシャルメディアグラフィックを使用して、次のローンチに備えてキャンペーンアセットを準備します。

スマートウォッチ

iOS 用にカスタマイズ可能な、60 以上の画面、20 以上のコンポーネント、30 以上のアイコン、6 つのプロトタイプフローを備えたスマートウォッチアプリをデザインします。

watchOS

Apple Watch 用のアプリのデザインとプロトタイプ作成には、watchOS 5 のボタンやアイコンなどの様々なユーザーインターフェイスマテリアルを含むキットを使用します。

デジタルマーケティングデザイン

最新の仕様に基づいて、ソーシャルメディアプラットフォームやデジタル広告バナーのマーケティンググラフィックを作成します。

Altura(eコマース)

クリエイティビティをすぐに発揮するために、あらかじめデザインされたアセット、コンポーネント、レイアウトを使用して、家具の eコマースの web サイトをデザインします。

ワイヤーフレーム:手描き

モバイルおよび web 用の XD で、手描きのワイヤーフレームスケッチを模倣します。


関連リソース

ここでは、UI キットへのアクセス方法について説明しました。次は一歩進んで、ワークスペースの基本XD のプラグインUI キットを使用してデザインを開始する方法をご確認ください。

アドビへのお問い合わせ

質問やアイデアを共有するには、Adobe XD コミュニティに参加します。皆様からのご意見や作品をお待ちしております。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合