Adobe XDは、WEBサイトやモバイルアプリなどのUI/UXをデザインできるツールです。
Adobe XDから書き出されたデータファイルは、まるで本物の仕上がりのように動作し、しかも共同作業を効率化する仕組みが、多く取り入れられています。
このAdobe XDを使うのは、それほど難しくはありません。
でも、これまでの常識的な制作工程に馴染みきった思考のままでは、Adobe XDを思うように活用することはできないでしょう。
Adobe XDには、これまでの経験からは発想できない機能がたくさんあります。そのため、このAdobe XDを十分に活用するためには、少しばかり時間が必要なように思います。
そこでここでは、Adobe XDを効率よく楽しく学ぶ方法を紹介します。
Adobe XDは、単なるワイヤーフレーム作成ソフトとして使うのではなく、WEBサイト開発までのパワフルツールとして活用できます。
今後のWEBサイト開発にも大きな影響を与えるであろうAdobe XDを、今のうちにマスターしておきましょう! もう、グズグズしてる時間はありません。
Adobe公式サイト Adobe XDとはどんなソフトで、どう使うのでしょうか?
基礎:Adobe XDチュートリアル
もし、Adobe XDって何ができるのかもまだよく知らないというのなら、まずはAdobe公式のチュートリアル動画「XDことはじめ」を見るのがオススメです。
このチュートリアルはAdobe XDを持っていなくても見れるし、AdobeのIDがなくてもOKです。誰でもWEBサイト上で見ることができます。
このチュートリアルではXDの基本的な作業の流れを見ながら、基礎的なツールの使い方や、もっとも特徴的な機能の一つ「リピートグリッド」や、「画面遷移の作り方」などを見ることができます。
この「XDことはじめ」はStep1・2とありますが、どれも短い動画です。再生速度も最大で2倍速で聞けるので、あっという間に聞き終わります。
ほんの概要だけの紹介動画ですが、きっとこの動画を見終わった頃には、自分で実際にXDを触ってみたくてウズウズしてしまいますよ。
Adobe公式サイト XDことはじめStep1:まずはここから!
Adobe公式サイト Adobe XD
初中級:実践形式のXD講座
次に、もっと実践的な内容を学びましょう。
私のオススメは、Udemy の「【2023年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング 」です。
この講座では、スマホの画面サイズでワイヤーフレームを作り始めたあと、最終的にはiPad ProとWEBページへの展開、そして一番最後に、実際のサイト制作で役立つCSSコードの書き出しまで説明しています。
「実際の仕事の現場ではどんなふうに作業が進むのか」ということを講座背景においているので、単なる機能紹介動画ではありません。十分に実用に足る動画講座です。
この講座は、多くの大手企業の研修にも採用されている実績があるとのことで、几帳面で丁寧な口調で解説されています。
派手さはありませんが、講師自身が何かを売り込もうという宣伝めいたことが全くなく、しっかりと学べます。
講義の総時間数は11時間半あって少し長いので、ちょっと大変なように思うかもしれませんが、Adobe XDは難しいソフトではありませんから、このくらいのボリュームがないと、逆に物足りなく感じます。
私は実際にこの講座を受講しましたが、最初の基礎のあたりのセクションは2倍速再生で聴き、その後に自分で手を動かして実際にXDを使ってみる、というやり方で視聴しました。
少し複雑になってきたらスピードを緩めましたが、IllustratorやPhotoshopなどのツールを使った経験がある人なら、サクサクと進められるはずです。
Udemy には、Adobe XD以外にもたくさんの講座があります。
それらの講座はほとんどが有料講座で、このXDの講座も有料ですが、Udemy
では頻繁にセールをやっているので是非チェックしてみてください。
セールでは95%引きなどで購入できるので、普段は数万円する講座も千円ちょっとまで安くなります。
おそらくもうすぐBlack Friday(ブラックフライデー)のセールも始まります。
それまでに、良さそうな講座を探しておくと良いと思います。
Udemy公式サイト 【2023年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。UI/UXデザイナーを目指す完全ガイド
Udemy には、この他にもAdobe XDの講座がいくつかあります。日本語の講座は多くはありませんが…。
講師によって講座の雰囲気も違うし、講座のボリュームが小さいものもあるので、サンプル動画を比較して、自分に合いそうな講座を選んでみても良いかもしれません。
Udemy公式サイト Adobe XD 講座一覧
詳細機能:Adobe XD Trail
もうひとつオススメなのが、Adobe XD公式の「Adobe XD Trail」という動画で学べる総合学習プログラムです。
このサイトでは、Adobe XDのたくさんの機能が動画で説明されています。めちゃくちゃたくさんあります。
「え!? じゃUdemyいらねぇじゃん」ってなりそうですが、このサイトは各機能を深掘りして説明しているサイトです。
ですから、基礎のチュートリアルの後で、すぐにこのサイトをみてもほとんどついていけません。
「Adobe XD Trail」は機能紹介に特化しているサイトですから、まずは、前述の11時間半の【2023年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング で学んだあとで、この「Adobe XD Trail」で興味を持った動画を見てみると効率よく学べます。
公式サイト Adobe XD Trail
まとめ
私のオススメするAdobe XDを学ぶ方法は、この2つです。
Adobe XDの使い方は、YouTubeで無料動画を公開している人もいます。
もちろん、書籍もたくさん出ています。
でもやっぱり、無料動画では入門・基礎から抜け出すのは難しいように思います。
また、書籍を読みながらXDを使って覚えるのは、動画視聴に比べると効率が良くありません。
Udemy
のセールなら1,200円程度まで値引きされるので、本を1冊買うよりも安いんです。
最初にも言いましたが、Adobe XDは今後のWEB制作においては大きな影響力を持つソフトです。
いまのウチに、XDを自由に使いこなせるだけのスキルを身につけておきましょう。
Adobe公式サイト Adobe XD