Adobe XDによるUIデザイン/プロトタイピング

Adobe XDについてのメモ。XDはデザインだけでなく、プロトタイピングもでき、インタラクティブに動く(ex. 画面遷移, ポップアップ)APのモックを短時間で用意できるツールです。本確的な実装に入る前に、ステークホルダーにUXを検証してもらうことで、後の改修作業のリスク低減を見込めます。

特にデザイナー不在のPJにおいては、ExcelやpptによるUI設計を避けるために、エンジニアや営業も覚えておくと役立ちます。ハッカソンやアイデアソンにも使えそう。

Adobe XD thumbnail design

ダウンロード〜インストール

  • AdobeのサイトからXD_installer.dmgをダウンロード
Adobe XD
  • インストーラーを開く

    installer
  • 指示に従ってインストール

    Adobe XD Install
  • なければAbodeのユーザ登録が必要

    Adobe ユーザ登録
  • インストールが完了すると以下の画面が表示されます

    Adobe XD desktop

UI Kitを導入する

Adobe XD UI Kit

デザイナー以外が利用する場合は、更の状態から作らずにテンプレを使うのが一般的

  • 以下のサイトからUI Kitを導入できる

  • AngularなどのWEBフレームワークでフロントエンド開発を行うのであれば以下を導入すると良い

    • AngularでUI開発に用いるAngular MaterialはこのGoogle Material Designが元になっている
Google Material Design
  • ローカルにKitをダウンロードすると、Light ThemeとDark ThemeのXDファイルを入手できる

    • それぞれのファイルを開くと、Adobe XDで以下の様に表示される
  • Dark Theme

    Adbo XD Dark Theme
  • Light Theme

    Adobe XD Light Theme

UIのプロトタイピング

  • 新規ドキュメントを作成からデザインしたいタイプを選択してデザインを始められる
    • ex. モバイル, Web, カスタムサイズ
Adobe XD desktop

リンク機能

  • 共有タブ/右のナビから、作成したデザインやプロトタイプを任意の形式で公開することができる

    Adobe XD make link
  • 生成されたURLにアクセスすると以下の様に表示される

    • 関係者にコメントを書き込んでもらうことも可能

AbdobeXD Link Smaple

  • 表示設定

    AdobeXD リンク 表示設定
  • 以下の4種から設定可能

    • デザインレビュー
    • 開発
    • プレゼンテーション
    • ユーザーテスト
    • カスタム
  • 無料アカウントでは1リンクまでしか公開できないが、作品→公開中のアイテム→完全に削除 より消せば問題なし

    • 仕事で使用する場合は、法人アカウントを作ると良い
  • 以下で詳しく解説されていた

モバイルデバイスのプレビュー

Mobile Device Preview

参考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×