WEBデザイナーとして働いているさめはだ舞子です。
WEBデザインを考えたり、簡単なアイコンやロゴ、ブログのアイキャッチ画像を作るときにあなたは何のツールを使用していますか？
- Illustrator
- Photoshop
- PowerPoint
などなど、デザインができるツールは意外と多いです。
その中でもおすすめのデザインツールが・・・
わたしは最初の頃、WEBデザインを考えるときにPowerPointやIllustratorを使っていました。
しかし、機能が足りなかったり、逆に操作が難しかったり・・・
XDは直感的に操作でき、初心者にも分かりやすいというのが素晴らしいポイントでした。
今回の記事では、
- XDでできること
- UI / UXデザインについて
- XD入門に役立つ参考書
をお伝えします！
もくじ
AdobeXDとは？
IllustratorやPhotoshopで有名なAdobeの、だれでも気軽に使えるUI / UXデザインツールです。
たとえばWEBサイトのワイヤーフレームを組み立てたり…
『世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書』を参考につくったワイヤーフレーム
WEBサイトの設計図。 「どこに」「何の情報」を掲載するのか、「どのような機能（リンクなど）」があるのかなどが記載されます
オブジェクトを作成したり…
自分でつくってみたXDマークの過程
こんなことが初心者でも簡単にできるツールがXDです！
- デザイナー以外でも気軽につかえるUI / UXデザインツール
- これまで1枚の画像でしか見れなかったWEBデザインの「操作感（動き）」まで見ることができる
- スマホ・タブレット・PC画面それぞれのパターンでWEBデザインができる
- WEBデザインだけではなく、資料作成などにも使われる
そもそも、UI / UXデザインとは
XDはどんな人でもつかうことができるシンプルなUI / UXデザインツールです。
UI / UXデザインについて『世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書』では次のように説明されています。
UI（ユーアイ）
ユーザー・インターフェース。ボタンや見やすさなど、操作に関係するもの。
UX（ユーエックス）
ユーザー・エクスペリエンス。「このサービスは使いやすいか」などWEBサイトを使った人の総合的な満足度。
操作性に関わる部分の全体的なデザイン（ボタンであれば、クリックしやすいか・クリックする場所だと分かりやすいかなど）がUIデザインと呼ばれています。
一方、UXデザインとはもっと大きな枠組みのデザインで、サイトを訪問して「ユーザーがどのように感じるか」という部分を考えます。
また、UI/UXデザインについては以下の説明がわかりやすいです。
「UI/UXデザイン」などと並べて使われることがよくありますが、これはつまり「製品の操作感や、見た目をいい感じにして、ユーザーがいい感じの体験をしてくれること」を指しています。
直感的にWEBデザインができる
XDでは直感的に操作ができるため、だれでも簡単に利用することができます。
こちらはお問い合わせボタンを作成し、配置をしている様子。
ガイドが自動的に表示されるのですが、上下左右の距離も見えるためとても便利です。
一覧記事などのフレームを作成するときには「リピートグリット」という機能があります。
画像・テキストなどの単体素材やグループ素材をドラックするだけで複製できる機能です。
同じように各余白もドラックだけで簡単に調整できるので、だれでも見栄えの良いデザインを組み立てることができます。
ページの「動作」も確認できる
WEBページのデザインを組み立てるときにページの「動作」も考える必要があります。
ページの動作とは、いわゆる『リンク』のことです。
- メニューバーの [ HOME ] ボタンを押すと、TOPのページに
- [ カテゴリ ] ボタンを押すと、カテゴリ一覧ページに
どのボタンがどのページと繋がっているか、ボタンを押すとどのような動きをするのかを考えます。
XDではこれらの動作を「視覚的に」確認することができます。
リンクしたいページを矢印でつなぐだけ
プロトタイプモードでリンクをつくる
ボタンとページをリンクさせるのは、とても簡単です。
リンクさせたい「ボタン」「ページ」をそれぞれ矢印でつなげるだけ。
ただのリンクではなく、画面移動のアニメーションなども設定できます。
- アニメーションの種類
- アニメーションの速度
- アニメーション全体の時間
- 移動先の画面の高さを現在と同じ位置にする、など
プレビュー機能で動作を「見る」
プレビュー画面で動作を「見る」
プレビュー画面では、実際の操作をプレビューできます。
リンクだけではなく、スクロールの動きやファーストビューの範囲の確認も可能。
パスや結合機能が使える
Illustratorではパスを使って自由自在に図形やイラストを描くことができます。
XDでも同様の機能が備わっているため、Illustratorが使えなくても図形やオブジェクトを作成することができます。
ペンツールでパスを自由に動かせる
また、結合機能やマスク機能など、Illustratorさながらの機能が満載。
シンプルなのに本格的な作業を行うことができます。
ボタン一つでパスが結合される
ボタンなども簡単につくれる
これらの機能のおかげで、初心者でも簡単にオブジェクトを作成できます。
レスポンシブ対応ができる
AdobeXDは日々アップデートされているため、より便利な機能が増えています。
最近（2018年9月）のアップデートではレスポンシブデザインがより簡単に！
画面サイズのテンプレートも豊富
これまではスマホ画面用・PC画面用など画面サイズごとにデザインを組んでいました。
アップデートで追加されたレスポンシブリサイズ機能を使えば、デザインを崩さず直感的にレスポンシブデザインに変換できます。
WEBデザイン以外での活用もできる
AdobeXDはワイヤーフレーム作成のイメージが強いですが、それ以外にも幅広く活用することができます。
例えばこの記事のアイキャッチ画像。これもXDでつくっています。
XDで作成 | アイキャッチ画像
アイキャッチ画像作成は「Canva」などのツールが人気ですが、XDを使うとより凝った画像が作成可能になります。
その他にも…
- 簡単なロゴ
- アイコン
- 会議資料
- チラシ
実際に使ってみた感想は、
というような感覚です。
「手軽に作りたいけれど、もう少し凝ったデザインをしたい…」といった方には特にXDをおススメします！
XDを利用するためには（無料/有料）
Adobe Creative Cloudコンプリート版を持っている方はすぐにXDをダウンロードすることができます。
Adobe Creative Cloud コンプリート|12か月版|パッケージコード版
単体で購入する場合は月額1,180円で利用可能です。
多機能なのにIllustratorほど値が張らないのが嬉しいですね。
また、スタータープランとして無料版もあります。
有料版との大きな違いは、
- プロトタイプやデザインスペックの一度に共有できる数
- クラウドストレージの容量
無料版であってもほとんどの機能が利用できますので、操作に慣れるまでは十分満足できるでしょう。
| 無料版 | 有料版 | |
|---|---|---|
| 料金 | 無料 | 月額1,180円 |
| 共有可能プロトタイプ数 | 1つのみ | 無制限 |
| 共有可能デザインスペック | 1つのみ | 無制限 |
| クラウドストレージ | 2GB | 100GB |
| フォントライブラリ | 一部のフォントセットのみ | 全フォントライブラリ |
XD入門のための参考書
私はXDの勉強のために『世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書』を購入しました。
基本的な使い方から応用まで詳しく、やさしく書いてあるため楽しみながらレッスンすることができました！
中でも自分の苦手だった
- オブジェクト結合への理解
- パスの使い方
- パターンの作成方法
- 最終的に1つのWEBデザインがつくれた
「これからXDを使ってみたい」「XDの使い方がよく分からない」という方にとてもおススメの1冊です。
以上、「Adobe XD入門 | XDでは何ができる？」でした！
