Webサイト制作の現場ではもはや必須となったAdobe XDですが、まだ使った事が無くてこれから勉強しようと考えている方も多いはず。
XDの使い方を勉強するならAdobeの公式チュートリアル 「Adobe XD Trail」が初心者にも分かり易くておすすめ。良い練習になります。
Adobe XD Trailでは単にXDの使い方だけでなく、便利なテクニックをチュートリアル動画で解説しています。
以下の様な疑問を持つ方は、勉強前にこの記事を読んでおくと理解が早まりますよ。
- そもそもAdobe XDとは？
- Adobe XDとPhotoshopの違いは？
この記事の目次
Adobe XDとは？
XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツール。
要するに、XDを使えばワイヤーフレーム、デザインカンプ、プロトタイプまでを作成出来ます。制作のスピードも断然違ってきます。
勿論、制作チームでの共有や、アプリを持っていないクライアントに確認してもらう事も簡単に出来ます。
見せ方や操作性、動き等を開発段階で確認・修正が出来るので、工数の削減にもつながります。
おすすめチュートリアルと練習素材
これから紹介するチュートリアルサイト「Adobe XD Trail」がおすすめで、実際このサイトで全て事足ります。
Adobeは関連する公式サイトが沢山あるのですが、結局どれを使えば良いのか分かりにくいです。出来れば効率的に勉強したいですよね。
公式サイトの中でもAdobe XD Trailは情報量が多く、体系的にまとまっています。
Adobe XD Trail – このサイトで十分！
「動画で学ぶ総合学習プログラム」と題されたチュートリアルサイトです。有り難いのは、実際に動画で使われている素材をダウンロードして使える事です。
動画と同じ素材を使って真似すれば理解が進みますよね。
チュートリアル：Adobe XD Trail
学習内容をちょっと紹介
どれから始めるか自由ですが、おすすめの学習順は、
- Adobe XD スターターキット
- LESSON – 作り方を学ぶ
- WORKSHOP – みんなで高め合う
- TUTORIAL – 機能を学ぶ
各プログラムをやりつつ、分からない時はTUTORIALで調べる。各プログラムを行ったり来たりする感じですね。
詳細はAdobe XD Trailを見れば分かるので、各メニューの概要だけ解説しますね。
TUTORIAL – 機能を学ぶ
「Adobe XDの多彩な機能を、個別に動画で学ぶ」
この記事を書いている時点では92本の動画があります。多いですが、全部使う訳ではないので・・・。
色々な機能がありますので、目的別に動画を見る事が出来ます。各動画ページ内から素材もダウロード出来ます。
興味のあるものからどうぞ。
LESSON – 作り方を学ぶ
「目的やつくりたいもの別に、実際に手を動かして学ぶ」なら、まずはこの「LESSON」から始めてはどうでしょうか。動画は23本あります。
こちらも各動画ページ内から素材をダウロード出来ます。
WORKSHOP – みんなで高め合う
動画では制作の様子を解説者が解説しながら進んでいきます。動画は6本で再生時間は長め。
チュートリアルとは違いますが、実際の制作手順を見れるのは勉強になります。
各動画ページ内の下にある「Q＆A」も結構参考になりますよ。
KIT/RESOURCE – 学習キット
先に紹介したワークショップ動画で使われているXDファイルと素材、さらには手順書がセットになったデータをダウンロード出来ます。
テーマ別に分かれているので便利。
Adobe XD スターターキット
「KIT/RESOURCE」メニューの下の方からスターターキットもダウンロード出来ます。
初めての方でも、自習形式でXDの主要機能の使い方を簡単に学べるデザインキット。
初級編と中級編があり、レベルに応じての学習が可能です。
Adobe XDとPhotoshopの違いは？
XDは大きく分けて「デザイン」「プロトタイプ」「共有」の３つの項目に分けられます。
各項目ごとに、Photoshopと何が違うのか代表的なものを幾つか紹介します。
①デザイン
例えば、Webサイトデザインにおいてよく使われるレイアウトに繰り返しパターンがあります。商品画像と説明文がセットになったカード型のレイアウト等ですね。
XDの「リピートグリッド」機能を使えば、余白を含めたレイアウトをドラッグするだけで繰り返し配置出来ます。
Photoshopではレイヤーを必要分だけ複製し、それぞれ余白を調整して配置しなければいけません。
他にも、
ホバーやタップ時の状態変化を「ステート」としてデザインを切り替える事が出来ます。
Photoshopでは状態変化ごとに別途レイヤーを分ける必要があり、管理が面倒になりがちです。
②プロトタイプ
Adobe XDではプロトタイプが作成出来ます。これはPhotoshopとの大きな違いの1つです。
完成時の実際の操作感などを開発段階で確認も出来るので、作業工数の削減に繋がります。
グローバルメニューからの各ページへのリンクなどもアニメーション付きで設定出来るので、完成時のイメージがつかみやすいです。
③共有
XDを使えば、チーム間やクライアントとのやりとりもスムーズに行うことができます。
XDを持っていないクライアントでも修正や要望のコメントを付ける事が出来たり、逆にコメントに対して、対応済などのリアクションをする事も出来ます。
まとめ – 制作はどう変わる？
これまでは、Webディレクターがパワーポイントやその他ツールでワイヤーフレームを作ったりしていたのではないでしょうか？
言うまでも無くパワーポイント等では、デザイナーやコーダーに細かい要望は伝わりません。指示漏れや追加要望は、ある程度制作が進んでから出てくるなんて事も。
Adobe XDを使えば、
- デザイン作業の効率化に繋がる。
- デザインだけでなくプロトタイプとして、操作できる状態の物を確認出来る。
- 修正箇所もコメントでやり取り出来るので、チームやクライアントのやり取りがスムーズ。
メリットは作業工数の削減だけでは無いですが、分かり易いポイントなのでは無いでしょうか。クライアント側にもメリットがありますので、XDの習得にチュートリアルを活用してくださいね。
チュートリアル：Adobe XD Trail
ちなみにPhotoshopが駄目という事では無く、大事なのは使い分ける事。画像加工などは変わらずPhotoshopです。