採用ミスマッチはなぜ起こる？企業が陥りやすい原因と改善ポイントを解説
- 働き方
モバイルからWebまで、幅広いプロジェクトに活用されているAdobe XD。
まだSketchほど認知度は高くありませんが、ワイヤーフレームやプロトタイプの作成、UI/UXのデザインなどが可能な、とても優秀なツールです。まだ使ったことがない方は、ぜひこちらから試してみましょう。
今回は、Adobe XDについて学びたい方におすすめのチュートリアルを13個ご紹介します。
目次
- 1. Quick Start for Adobe XD
- 2. Ultimate Guide to Adobe XD
- 3. Color and Character Styles
- 4. App Design & Prototype
- 5. Responsive Layout Grids
- 6. Adobe XD for Web Design
- 7. Create a Social Media App
- 8. Account Creation & Verification UI Tutorial
- 9. User Onboarding Experience in Adobe XD
- 10. Creating a Working Sidebar Menu
- 11. Adobe XD Scroll and Blur
- 12. Chat UI Design
- 13. Ecommerce Product Detail Design
- おわりに
1. Quick Start for Adobe XD
はじめにご紹介するのは、Adobe自身が公開している14分のチュートリアル。プロジェクトファイルが含まれており、4つのステップで簡単にプロトタイプ作成のプロセスを学べます。
2. Ultimate Guide to Adobe XD
Adobe XDについてより詳しく知りたいなら、こちらのチュートリアルがおすすめ。概要からプロジェクト作成まで、完璧に網羅しています。Adobe XDに関するその他のチュートリアルへのリンクもぜひチェックしてみましょう。
3. Color and Character Styles
色や文字スタイルについて重点的に掘り下げたいなら、Danskyによるこのチュートリアルを見てみましょう。色や文字カスタム方法や、既存のスタイルの編集方法を学べます。
4. App Design & Prototype
さきほどの『Color and Character Styles』の作者であるDanskyによる、アプリデザインのチュートリアル。ログイン画面、取引の概要、送金画面などを備えた、架空の銀行業務アプリを制作するプロセスを解説してくれます。
5. Responsive Layout Grids
このチュートリアルでは、さまざまなデザインプロジェクトで使用できるレスポンシブレイアウトグリッドの作成プロセスを学べます。動画を参考に、列の数やガターの幅などを調整してみましょう。
6. Adobe XD for Web Design
Adobe XDをWebデザインプロジェクトで使いたいなら、かならずチェックしておきたいのがこのチュートリアル。30分の動画に、ポートフォリオサイトをデザインするための知識がぎゅっと詰まっています。
7. Create a Social Media App
架空のソーシャルメディアアプリ作成を通して、デザインプロセスが学べるチュートリアル。たとえソーシャルメディアアプリを作る予定がなくても、Adobe XDが提供している機能に慣れるのにぴったりです。
8. Account Creation & Verification UI Tutorial
Adobe XDでアカウント作成ページとアカウント確認ページを作りたいなら、このチュートリアルを参考にしてみましょう。
Account Creation & Verification UI Tutorial
9. User Onboarding Experience in Adobe XD
アプリやWebサイトを継続して使ってもらうには、優れたユーザーオンボーディングが欠かせません。このチュートリアルではモバイルアプリを例に、スムーズなユーザーオンボーディングを作成する方法を学べます。
User Onboarding Experience in Adobe XD
10. Creating a Working Sidebar Menu
モバイル端末が広く普及したいま、モバイル用のメニューをデザインするスキルはとても重要です。このチュートリアルは、スライドインメニューの作成方法を解説してくれます。
Creating a Working Sidebar Menu
11. Adobe XD Scroll and Blur
スクロールとぼかし機能について知りたいならこのチュートリアル。動画を参考に、リアルなエフェクトをつけてみましょう。
12. Chat UI Design
さまざまなWebサイトで使用されている、チャットボットやライブチャットボックス。この1時間のチュートリアルを見れば、魅力的なチャットのデザイン方法が網羅的に学べます。
13. Ecommerce Product Detail Design
「Adobe XDでECサイトを作りたいのに、製品の紹介ページの作りかたがわからない……」そんなときはこのチュートリアルがおすすめ。20分足らずの動画を見るだけで、製品ページのデザインに役立つ知識が得られます。
Ecommerce Product Detail Design
おわりに
Adobe XDは、モバイルアプリ、Webサイト、ユーザーインターフェース、さらにはユーザーオンボーディングのプロトタイプまで作成できる万能ツール。有料プランだけでなく、無料プランも提供されています。今回ご紹介したチュートリアルを参考に、ぜひさまざまな用途に活用してみましょう！
（原文：Brenda Stokes Barron 翻訳：Nakajima Asuka）
こちらもおすすめ！▼
Adobe XD おすすめ無料キット21選まとめ【UI/UXデザイナー必見】
Workship MAGAZINE
デザイナー向けSNS『Behance』の使い方とワンポイントアドバイス
Workship MAGAZINE
デザイナーの役割とは？デザイナーの”肩書き”と”仕事範囲”をダイヤグラムで徹底解説
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.
この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
10 Tutorials to Help You Master Adobe XD
