Adobe XDスターターキット基礎編 Mac版/Win版 提供開始!15分で学べるXDの基本的な使い方 | アドビUX道場 #UXDojo
Adobe XDがPhotoshopファイルを直接読み込めるようになったことで、ちょっとXDが気になっている方もいらっしゃるのではないでしょうか?
PhotoshopユーザーがもしAdobe XDを使えたら、Photoshopで描いたデザインをインタラクティブなプロトタイプにしてiPhone上で動かせるようになります。オンラインでデザインを共有してコメントをお願いすることだって簡単にできちゃいます。起動が速くて動作が軽いXDは、Photoshopメインの人にも使いやすいツールです。
Adobe XDでつくった画面をiPhone Xに表示した例
もうひとつのAdobe XDの良い点は、簡単に使い方を学べることです。XDのワークスペースは必要最少限のツールだけが並んだミニマルな仕様です。アドビのデザインツールを使った経験がある人なら、基本的な使い方をマスターするには数時間もあれば十分でしょう。
ですが、自分で使い方を調べるのは忙しいデザイナーには気乗りがしないことかもしれません。そもそもアドビ製品使ったことないし、という方もいらっしゃると思います。
Adobe XDスターターキット基礎編 Mac版/Win版
そこで、Adobe XDスターターキット基礎編を用意いたしました。XDファイルをダウンロードして開くと、そこにはXDの基本的な使い方とすぐ試せるチャレンジが記述されています。順番に進んでいくと、ファイルを全部読み終わったときにはXDを使うために最低限必要な知識が学習できます。
Adobe XDとスターターキットはどちらもAdobe XD製品ページからダウンロードできます。スターターキットはMac版とWindows版の2種類がありますのでご注意ください。
スターターキット基礎編の内容は以下の通りです。
-
- まずはこれだけ覚えよう
-
-
- 図を描くツール
- 2種類のテキスト
- 画像の配置とマスク
- プロトタイプとプレビュー
-
-
- もっと便利に使ってみよう
-
-
- アートボードの作成
- リピートグリッドの基礎
- アセット:カラー
- プロトタイプの共有
-
ミニマルと言っても、フラットデザインには十分な機能がXDには揃っています。UIキットを使えばワイヤーフレームも効率的に作成できます。これをきっかけにぜひAdobe XDを試してみてください。
スターターキットの内容は、XDのプレビュー機能を使って見ることもできます(プレビュー機能の使い方はスターターキットの中に書かれています)。下は、Mac版のスターターキット基礎編のプレビューです。ダウンロード前に確認したい方は、ぜひ下のプロトタイプを触ってみてください。下にスクロールすると更にコンテンツが表示されるページもあります。
https://xd.adobe.com/embed/0aa37265-9d1e-4bf5-4e17-3c3795fea751-7c92/
Adobe XDスターターキット基礎編(Mac版) プロトタイプ
なお、PhotoshopとXDの連携手段は、PSDファイルを開く方法以外にも提供されています。詳しくは次の記事をご覧ください。
https://blogs.adobe.com/creativestation/web-everything-photoshop-user-needs-get-started-adobe-xd
Adobe XDをはじめて使うPhotoshopユーザーが知っておくべきすべてのこと
スターターキットに対する皆様のご意見をAdobe XD JapanのFacebookページにぜひ投稿してください。今後の改善の参考にさせていただきます。Adobe XD Japan Facebookページについては、以下の記事をご覧ください。ご意見よろしくお願いいたします。
https://blogs.adobe.com/creativestation/web-facebook-page-adobe-xd-japan
日本語Facebookページ「Adobe XD Japan」開設!