Adobe XD入門 | XDでは何ができる?WEBデザイン特化ツール

XDはWEBデザイン以外にも活用できる WEBデザイン

WEBデザイナーとして働いているさめはだ舞子です。

WEBデザインを考えたり、簡単なアイコンやロゴ、ブログのアイキャッチ画像を作るときにあなたは何のツールを使用していますか?

  • Illustrator
  • Photoshop
  • PowerPoint

などなど、デザインができるツールは意外と多いです。

 

その中でもおすすめのデザインツールが・・・

さめはだ
Adobe XDです!!

わたしは最初の頃、WEBデザインを考えるときにPowerPointやIllustratorを使っていました。

しかし、機能が足りなかったり、逆に操作が難しかったり・・・

 

XDは直感的に操作でき、初心者にも分かりやすいというのが素晴らしいポイントでした。

 

今回の記事では、

  1. XDでできること
  2. UI / UXデザインについて
  3. XD入門に役立つ参考書

をお伝えします!


AdobeXDとは?

IllustratorやPhotoshopで有名なAdobeの、だれでも気軽に使えるUI / UXデザインツールです。

たとえばWEBサイトのワイヤーフレームを組み立てたり…

ワイヤーフレームとは?
WEBサイトの設計図。 「どこに」「何の情報」を掲載するのか、「どのような機能(リンクなど)」があるのかなどが記載されます

オブジェクトを作成したり…

AdobeXDでできること

自分でつくってみたXDマークの過程

こんなことが初心者でも簡単にできるツールがXDです!

  • デザイナー以外でも気軽につかえるUI / UXデザインツール
  • これまで1枚の画像でしか見れなかったWEBデザインの「操作感(動き)」まで見ることができる
  • スマホ・タブレット・PC画面それぞれのパターンでWEBデザインができる
  • WEBデザインだけではなく、資料作成などにも使われる

そもそも、UI / UXデザインとは

XDはどんな人でもつかうことができるシンプルなUI / UXデザインツールです。

UI / UXデザインについて『世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書』では次のように説明されています。

UI(ユーアイ)
ユーザー・インターフェース。ボタンや見やすさなど、操作に関係するもの。

UX(ユーエックス)
ユーザー・エクスペリエンス。「このサービスは使いやすいか」などWEBサイトを使った人の総合的な満足度。

操作性に関わる部分の全体的なデザイン(ボタンであれば、クリックしやすいか・クリックする場所だと分かりやすいかなど)がUIデザインと呼ばれています。

さめはだ
ここを押せば関連記事に移動できるんだ!

一方、UXデザインとはもっと大きな枠組みのデザインで、サイトを訪問して「ユーザーがどのように感じるか」という部分を考えます。

さめはだ
このWEBサイトは読みやすいな!

 

また、UI/UXデザインについては以下の説明がわかりやすいです。

「UI/UXデザイン」などと並べて使われることがよくありますが、これはつまり「製品の操作感や、見た目をいい感じにして、ユーザーがいい感じの体験をしてくれること」を指しています。


引用元:『UI/UXとは?知っておきたいUI/UXデザイン50の知識

 

 

直感的にWEBデザインができる

XDでは直感的に操作ができるため、だれでも簡単に利用することができます。

こちらはお問い合わせボタンを作成し、配置をしている様子。

ガイドが自動的に表示されるのですが、上下左右の距離も見えるためとても便利です。

XDはガイドが表示されるため直感的に操作ができる

一覧記事などのフレームを作成するときには「リピートグリット」という機能があります。

画像・テキストなどの単体素材やグループ素材をドラックするだけで複製できる機能です。

同じように各余白もドラックだけで簡単に調整できるので、だれでも見栄えの良いデザインを組み立てることができます。

XDのリピート操作

 

ページの「動作」も確認できる

WEBページのデザインを組み立てるときにページの「動作」も考える必要があります。

ページの動作とは、いわゆる『リンク』のことです。

例えば…

  • メニューバーの [ HOME ] ボタンを押すと、TOPのページに
  • [ カテゴリ ] ボタンを押すと、カテゴリ一覧ページに

どのボタンがどのページと繋がっているか、ボタンを押すとどのような動きをするのかを考えます。

XDではこれらの動作を「視覚的に」確認することができます。



リンクしたいページを矢印でつなぐだけ

XDのリンク作業は矢印でつなぐだけ

プロトタイプモードでリンクをつくる

ボタンとページをリンクさせるのは、とても簡単です。

リンクさせたい「ボタン」「ページ」をそれぞれ矢印でつなげるだけ

ただのリンクではなく、画面移動のアニメーションなども設定できます。

インタラクション設定項目

  • アニメーションの種類
  • アニメーションの速度
  • アニメーション全体の時間
  • 移動先の画面の高さを現在と同じ位置にする、など

プレビュー機能で動作を「見る」

AdobeXDのプレビュー画面でプロトタイプを見る

プレビュー画面で動作を「見る」

プレビュー画面では、実際の操作をプレビューできます。

リンクだけではなく、スクロールの動きやファーストビューの範囲の確認も可能

さめはだ
WEB上で表示される形で確認できる!

 

パスや結合機能が使える

Illustratorではパスを使って自由自在に図形やイラストを描くことができます。

XDでも同様の機能が備わっているため、Illustratorが使えなくても図形やオブジェクトを作成することができます。

XDのパスでオブジェクトを作成する

ペンツールでパスを自由に動かせる

また、結合機能やマスク機能など、Illustratorさながらの機能が満載

シンプルなのに本格的な作業を行うことができます。

AdobeXDは結合機能もついている

ボタン一つでパスが結合される

XDでオブジェクトを作成する

ボタンなども簡単につくれる

これらの機能のおかげで、初心者でも簡単にオブジェクトを作成できます。

さめはだ
XDの練習はIllustratorの練習にもなる!

 

レスポンシブ対応ができる

AdobeXDは日々アップデートされているため、より便利な機能が増えています。

最近(2018年9月)のアップデートではレスポンシブデザインがより簡単に!

XDは各画面サイズに対応できる

画面サイズのテンプレートも豊富

これまではスマホ画面用・PC画面用など画面サイズごとにデザインを組んでいました。

アップデートで追加されたレスポンシブリサイズ機能を使えば、デザインを崩さず直感的にレスポンシブデザインに変換できます。





WEBデザイン以外での活用もできる

AdobeXDはワイヤーフレーム作成のイメージが強いですが、それ以外にも幅広く活用することができます

例えばこの記事のアイキャッチ画像。これもXDでつくっています。

XDはWEBデザイン以外にも活用できる

XDで作成 | アイキャッチ画像

アイキャッチ画像作成は「Canva」などのツールが人気ですが、XDを使うとより凝った画像が作成可能になります。

その他にも…

  • 簡単なロゴ
  • アイコン
  • 会議資料
  • チラシ

実際に使ってみた感想は、

XDはIllustratorとCanvaの間

というような感覚です。

「手軽に作りたいけれど、もう少し凝ったデザインをしたい…」といった方には特にXDをおススメします!

使用ツールは「Canva」だけ!アイキャッチ・記事画像まとめ

2018.01.29

 

XDを利用するためには(無料/有料)

Adobe Creative Cloudコンプリート版を持っている方はすぐにXDをダウンロードすることができます。


単体で購入する場合は月額1,180円
で利用可能です。

多機能なのにIllustratorほど値が張らないのが嬉しいですね。

 

また、スタータープランとして無料版もあります。

有料版との大きな違いは、

  • プロトタイプやデザインスペックの一度に共有できる数
  • クラウドストレージの容量
などです。

 

無料版であってもほとんどの機能が利用できますので、操作に慣れるまでは十分満足できるでしょう。

 無料版有料版
料金無料月額1,180円
共有可能プロトタイプ数1つのみ無制限
共有可能デザインスペック1つのみ無制限
クラウドストレージ2GB100GB
フォントライブラリ一部のフォントセットのみ全フォントライブラリ

 

XD入門のための参考書

私はXDの勉強のために『世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書』を購入しました。

基本的な使い方から応用まで詳しく、やさしく書いてあるため楽しみながらレッスンすることができました!

中でも自分の苦手だった

  1. オブジェクト結合への理解
  2. パスの使い方
が詳しく書かれていたことと、
  1. パターンの作成方法
  2. 最終的に1つのWEBデザインがつくれた
という点が満足ポイントでした。

「これからXDを使ってみたい」「XDの使い方がよく分からない」という方にとてもおススメの1冊です。

さめはだ
今日からあなたもXDデビュー!

以上、「Adobe XD入門 | XDでは何ができる?」でした!