【Adobe XD】Adobe XDとは？特徴から活用イメージまで詳しく紹介

Adobe XDは、2017年に公式リリースされた、WebサイトやアプリのUIUXの作成に強みを持つデザインツール。本記事では、初心者向けに、XDの特徴や活用イメージなどを詳しく解説します。

想定読者

Adobe XDがどんなアプリか知りたい
他のAdobeアプリとの違いを知りたい
Adobe XDの始め方を知りたい

XD以外にも、20以上のアプリが利用できる「コンプリートプラン」のお得な購入方法も次の記事で紹介しています。

▼学生や教職員向けのお得な購入方法

【Adobe CC】学生・教職員ならコンプリートプランの学割一択。対象者や購入方法を詳しく解説キャンペーン情報Black Fridayセールキャンペーン期間中、Photoshop、Illustrator、Adobe XDなど20以上のアプリが利用できる『Creative Cloud コンプリートプラン』が最大38%OFF！学生・教職員なら最大73%OFF。お…

▼社会人向けのお得な購入方法

【Adobe CC】社会人でも学割料金でコンプリートプランを購入する方法（Adobe認定スクールの活用）キャンペーン情報Black Fridayセールキャンペーン期間中、Photoshop、Illustrator、Adobe XDなど20以上のアプリが利用できる『Creative Cloud コンプリートプラン』が最大38%OFF！学生・教職員なら最大73%OFF。お…

Contents

Adobe XD とは
Adobe XDの活用イメージ
Adobe XDの関連記事
おわりに

Adobe XD とは

まずAdobe XDの役割や特徴について解説します。

Adobe XDはどんなアプリか

Adobe XDは、2017年に公式リリースされた、WebサイトやアプリのUIUXの作成に強みを持つデザインツールです。

Web制作の過程には、次のような作業があります。

情報設計
ワイヤーフレーム作成
UIデザイン
プロトタイプ作成

パワーポイントを活用した情報設計やワイヤーフレーム作成、イラストレーター等でUIデザイン、そして各ページ遷移先の情報も仕様書に纏めていく..

これらの工程はすべて、Adobe XDで実現することができるのです。

大まかに分類すると、XDには、主に次のような機能があります。

ワイヤーフレーム・デザイン作成
プロトタイプ作成
共有・コメント

ワイヤーフレーム・デザイン作成はもちろん、ボタンやリンクをクリックした後のページ遷移や、ページ内スクロールの挙動も「プロトタイプ」として作成することができます。

このプロトタイプ機能によって、Adobe XDの画面内で、実際のWebサイトやアプリを触るように、UIUXの検証をすることが可能になるわけです。

そしてチームで同じファイルにアクセスして、リアルタイムに共同編集が出来るのはもちろん、XDをインストールしていない相手からも「リンク共有※」を通して、瞬時にフィードバックを得ることができます。

※Webブラウザ上で共有リンクを開き、プロトタイプの閲覧が可能となる

このように、XDは情報設計からエンジニアや関係者への共有までのあらゆる作業にワンストップで対応できる、とても便利なアプリです。

他Adobeツールとの比較

Adobeには他にもデザインツールが存在します。

代表的なツールとして、PhotoshopとIllustratorが挙げられるでしょう。

これらは主に次のような違いがあります。（上記画像内の記載テキストと同じ内容です）

□ Adobe XD
強み：WebのUIUXデザイン
XDはUIUXデザインに強みを持つツールです。
Webサイトやアプリは、見た目のわかりやすさや、使いやすさが求められます。
クリックやページ遷移の挙動を含めたデザインや検証を目的にした活用などに向いています。

□ Illustrator
強み：グラフィックや紙媒体のデザイン
Illustratorはイラストやグラフィックデザインに強みを持つツールです。
特に雑誌やパンフレットなど、紙媒体のデザインで活用される場合が多いと思います
またベクターデータを扱えるため、ロゴやアイコンの作成にも向いているツールです。

□ Photoshop
強み：画像や写真の高度な加工
Photoshop画像や写真の加工に強みを持つツールです。
写真の色・明るさの調整や合成、切り抜きや背景の削除はもちろん、思い描くままに写真の加工ができます。高度な描画ツール、豊かで自然な表現を可能にするブラシツールなど様々な機能が備わっています。