モバイルからWebまで、幅広いプロジェクトに活用されているAdobe XD。

まだSketchほど認知度は高くありませんが、ワイヤーフレームやプロトタイプの作成、UI/UXのデザインなどが可能な、とても優秀なツールです。まだ使ったことがない方は、ぜひこちらから試してみましょう。

今回は、Adobe XDについて学びたい方におすすめのチュートリアルを13個ご紹介します。

1. Quick Start for Adobe XD

Quick Start for Adobe XD

はじめにご紹介するのは、Adobe自身が公開している14分のチュートリアル。プロジェクトファイルが含まれており、4つのステップで簡単にプロトタイプ作成のプロセスを学べます。

Quick Start for Adobe XD

2. Ultimate Guide to Adobe XD

Ultimate Guide to Adobe XD

Adobe XDについてより詳しく知りたいなら、こちらのチュートリアルがおすすめ。概要からプロジェクト作成まで、完璧に網羅しています。Adobe XDに関するその他のチュートリアルへのリンクもぜひチェックしてみましょう。

Ultimate Guide to Adobe XD

3. Color and Character Styles

Color and Character Styles

色や文字スタイルについて重点的に掘り下げたいなら、Danskyによるこのチュートリアルを見てみましょう。色や文字カスタム方法や、既存のスタイルの編集方法を学べます。

Color and Character Styles

4. App Design & Prototype

App Design & Prototype

さきほどの『Color and Character Styles』の作者であるDanskyによる、アプリデザインのチュートリアル。ログイン画面、取引の概要、送金画面などを備えた、架空の銀行業務アプリを制作するプロセスを解説してくれます。

App Design & Prototype

5. Responsive Layout Grids

Responsive Layout Grids

このチュートリアルでは、さまざまなデザインプロジェクトで使用できるレスポンシブレイアウトグリッドの作成プロセスを学べます。動画を参考に、列の数やガターの幅などを調整してみましょう。

Responsive Layout Grids

6. Adobe XD for Web Design

Adobe XD for Web Design

Adobe XDをWebデザインプロジェクトで使いたいなら、かならずチェックしておきたいのがこのチュートリアル。30分の動画に、ポートフォリオサイトをデザインするための知識がぎゅっと詰まっています。

Adobe XD for Web Design

7. Create a Social Media App

Create a Social Media App

架空のソーシャルメディアアプリ作成を通して、デザインプロセスが学べるチュートリアル。たとえソーシャルメディアアプリを作る予定がなくても、Adobe XDが提供している機能に慣れるのにぴったりです。

Create a Social Media App

8. Account Creation & Verification UI Tutorial

Account Creation & Verification UI Tutorial

Adobe XDでアカウント作成ページとアカウント確認ページを作りたいなら、このチュートリアルを参考にしてみましょう。

Account Creation & Verification UI Tutorial

9. User Onboarding Experience in Adobe XD

User Onboarding Experience in Adobe XD

アプリやWebサイトを継続して使ってもらうには、優れたユーザーオンボーディングが欠かせません。このチュートリアルではモバイルアプリを例に、スムーズなユーザーオンボーディングを作成する方法を学べます。

User Onboarding Experience in Adobe XD

10. Creating a Working Sidebar Menu

Creating a Working Sidebar Menu

モバイル端末が広く普及したいま、モバイル用のメニューをデザインするスキルはとても重要です。このチュートリアルは、スライドインメニューの作成方法を解説してくれます。

Creating a Working Sidebar Menu

11. Adobe XD Scroll and Blur

Adobe XD Scroll and Blur

スクロールとぼかし機能について知りたいならこのチュートリアル。動画を参考に、リアルなエフェクトをつけてみましょう。

Adobe XD Scroll and Blur

12. Chat UI Design

Chat UI Design

さまざまなWebサイトで使用されている、チャットボットやライブチャットボックス。この1時間のチュートリアルを見れば、魅力的なチャットのデザイン方法が網羅的に学べます。

Chat UI Design

13. Ecommerce Product Detail Design

Ecommerce Product Detail Design

「Adobe XDでECサイトを作りたいのに、製品の紹介ページの作りかたがわからない……」そんなときはこのチュートリアルがおすすめ。20分足らずの動画を見るだけで、製品ページのデザインに役立つ知識が得られます。

Ecommerce Product Detail Design

おわりに

Adobe XDは、モバイルアプリ、Webサイト、ユーザーインターフェース、さらにはユーザーオンボーディングのプロトタイプまで作成できる万能ツール。有料プランだけでなく、無料プランも提供されています。今回ご紹介したチュートリアルを参考に、ぜひさまざまな用途に活用してみましょう!

(原文:Brenda Stokes Barron 翻訳:Nakajima Asuka)

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ