UI/UXデザインツール『Adobe XD』入門

4-1. UIキットの取得・活用

  • UIデザイン
  • UXデザイン
  • Webデザイン

ワイヤーフレームやデザインを効率よく行うために提供されている UI キットの取得と活用について説明します。

公開日:2019/10/08最終更新日:2019/10/24

1.UIキットとは

Adobe XD にはワイヤーフレームやデザインをサクサク作るために UIキットが提供されています。

UIキットは最新のApple製品をはじめ、Google、Microsoft デバイスのような頻繁に必要となるUIが無料で提供されているため、デザイン制作の効率があがります。

2.UI キットの取得

UIキットの取得場所
  • Mac → ファイル > UI キットを取得
  • Windows → アプリケーション左上の設定メニュー > UI キットを取得

3.UIキットの種類

2019年10月現在、UIキットは以下のラインナップです。

  • Apple iOS, macOS, watchOS, tvOS 
  • Google Android
  • Microsoft Windows
  • ワイヤーフレーム
  • その他

その他には

  • Material Design
  • Design Systems
  • Amazon Alexa
  • Auto-Animate UI Kit
  • 日本語ワイヤーフレームキット Wires jp
  • Dashboard
  • Responsive Design
  • Fantasy Sport
  • Vido
  • Design for Good
  • Smartwatch
  • E-Commerce
  • Social Meetup
  • クラウドファンディング企業
  • Vault
  • Movie Magic
  • Tractiv
  • Bauhaus-Inspired
  • MentorMe
  • Navigo
  • Pawtastic
  • Sky
  • Cooin
  • Designer Marketplace

があります。

デザインシステムやワイヤーフレームなどを1からデザインすると大変ですが、これらをうまく活用すればWebサイトやアプリケーションのUIをスピーディに開発できます。 

4.UIキットの活用方法

ためしにiOSをダウンロードしてiPhone XのテンプレートをAdobe XDで開いてみましょう。

1. ファイル > UI キットを取得 > Apple iOS... を選択。

2. 開いたページから iOS > Download for Adobe XD をクリック

iOSの画面

3. 端末にダウンロードしたファイルを実行し iOS > UI Elements + Design Templates + Guides > UIElemetnts+DesignTemplate+iPhoneX.xd を実行

インストール後のスクリンショット

するとAdobe XD上でこのようにファイルが開きます。

UIElemetnts+DesignTemplate+iPhoneXのスクリーンショット

ここに収録されているパーツから必要となるものをコピーし、ご自身がデザインするデザインデータにペーストすることで iPhone X 上での見た目を考慮しながらデザインワークが行なえます。

理解度チェック





UI/UXデザインツール『Adobe XD』入門

1. Adobe XDの概要とインストール

2. Adobe XDの基本操作

3. Adobe XDで画面をデザインする

4. より効率よくデザインするための機能

5. Adobe XDでプロトタイプを作成する

6. Adobe XDでデザイン・プロトタイプを共有する