ADOBE XD

【2020年版】Adobe XDでできること。6のデザイン事例とおすすめ機能を紹介。

INTRODUCTION

WebデザインやUI・UXデザインのプロトタイプ作成ができるAdobe XDについて、できることを紹介していきたいと思います。

2020年6月には大幅にアップデートされて使い勝手がさらに向上しました。Adobeのアプリの中でも一番成長中といえる大注目のアプリです

CONTENTS

Adobe XD

Adobe XDとは

Adobe XD(エックスディー)はWebデザイナーやUI・UXデザイナーのためのデザインアプリで、Adobeの中でも比較的新しいソフトです。

Web, UI・UXデザインに特化した機能がたくさんあり動作も軽いのが特徴で、無料でダウンロードして使い始められます。

Adobe XDの詳細と無料インストールは以下から

https://www.adobe.com/jp/products/xd.html

XDはプロトタイプのデザインを作成するものなのでコーディングは別途作業が必要です。

一度使うとPhotoshopやIllustratorでのWebデザイン作成には戻れなくなるかも?というくらい便利です。

現在AdobeではBlack Fridayセールを開催中です。

Adobe XDの価格とプラン

Adobe XDを始めたい場合、3種類のプランがあります。

Adobeを利用していない方はとりあえず無料のスタータープランから始めても良いかと思います。

Adobe XDの料金プラン

Z

Adobe XDは無料で始められる

Adobe XDは無料でインストールして使い始められる他のAdobeアプリにはない「スタータープラン」があります。

Adobe XD自体も強力なデザインツールですが、PhotoshopやIllustratorと組み合わせてデザインする事で更にクオリティが上がります。

Adobe XDの中でも個人的にお気に入り・注目の機能を紹介していきたいと思います。

BASIC SKILLS

XDオススメの 5つの機能

Adobe XDの特徴的な機能についてです。

Webデザインに特化した面白い機能がいくつもあるのでいくつか紹介していきます。

■ レスポンシブ対応機能

■ リピートグリッド機能

■ プロトタイプモード

■ スタック機能 NEW!

■ デザインプレビュー

1. レスポンシブ対応機能

Webデザインでは必須ともいえるレスポンシブデザインがXDを使えば短時間で効率的に作成できます。

XDでレスポンシブデザイン作成する

上に貼ったAdobe公式のXD解説1分動画を見れば使い方を簡単に理解できると思います。

Adobeの中でもXDにしかできない強力な機能です。PhotoshopやIllustratorでは表現しきれないところに手が届きます。

2. リピートグリッド機能

繰り返しのコンテンツ配置が多いWebサイトやUIデザインで非常に便利な機能がリピートグリッドです。

リピートグリッド機能

要素を好きな間隔でコピーでき、それぞれのグリッド要素を個別に編集もできるのでデザインの配置や調整にかかる時間を大きく短縮する事ができます

また、リピートグリッドに複数の画像もしくはテキストをドラッグ&ドロップすると各要素に自動的に配置してくれるのもかなり楽です

3. プロトタイプモード

XDにはプロトタイプモードがあり、作成したデザインのページ間の遷移を追う事ができます。

プロトタイプモード

実際に使っている完成品のイメージが想像しやすくなるので、クライアントへの提示やコーディング担当への伝達をスムーズに行う事ができます。

個人的にはこのプロトタイプモードは、デザインを作成する中で作った全てのページが繋がっていくのが確認できるので楽しい作業の一つです。

4. スタック機能 NEW!

2020年6月のアップデートで追加された一押しの新機能です。

スタック機能

まとまった要素(コンポーネント)内の配置や順序をドラッグするだけで簡単に入れ替える事ができるのがスタック機能です。

修正で配置変更をしてもレイアウトが崩れるのを防げます

また、スタックを更にスタックすることもできるのでレイアウト全体の管理がかなり楽になります

5. スクロールグループ NEW!

スクロールグループについて

表示範囲を固定して中の要素をスクロールできるカルーセルエフェクトやマップ配置の表現などがプロトタイプ作成の段階で表現できるようになりました。

上に貼った動画内での説明にもあるように、固定のヘッダーフッターと、その間の要素をスクロールグループとして扱う使い方などもあります。

これも非常に便利。

6. デザインプレビュー

参照: Adobe XDヘルプ デザインのデバイスでのプレビュー

USBでスマホやタブレットなどのデバイスを繋ぐと、修正箇所をリアルタイムで反映させながらデザインの表示確認ができます。

また、XDのモバイルアプリでもスマホやタブレットで作成したデザインを実際のデバイスで確認する事ができるので後戻りする作業の手間を減らせます。

Adobe XDはシンプルで軽いUIながら機能がかなり充実してきていると思います。

まだまだ成長段階のアプリなのでこれからのアップデートにも期待です。

現在AdobeではBlack Fridayセールを開催中です。

PLAN

Adobe XDスタータープラン

Adobe XDは日数制限などなく、無料で使い始められるスタータープランが用意されています。

Adobe XDの詳細と無料インストールは以下から

https://www.adobe.com/jp/products/xd.html

共有できるプロトタイプ数やストレージ量に制限がありますが、機能的にはほぼ全て使用できるのでこれから始めたい方にはピッタリのプランです。

本格的に利用していく場合は有料プランに移行しましょう。

コンプリートプラン

3つ以上のアプリを使う場合はコンプリートプランを利用するのがおすすめです。Adobeアプリが全部利用できる超お得なプランです。

20以上のAdobeソフト全てを利用できるプラン

>>すべてのプランと料金を確認する(Adobe公式サイト)

*表示は月額の税抜き価格

このプランを使っていますが、コスパが良くてかなりオススメです。

グラフィックデザインから動画編集まで何でもできます。

併せて使いたいアプリ

Adobe XDを使うAdobeユーザーが併せてよく使うアプリはこちら。

デザインに使用する画像の編集に関してはPhotoshop。Adobe XDでは画像をPhotoshopを直接開いて編集できるので手間が省けてかなり楽です。

また、ロゴやアイコンを作成するのにIllustratorも一緒に使う事がだいたいです。

Adobe Stockで素材を入手する

Adobe Stockは画像など、ロイヤリティフリーの素材が1億5000点以上ある巨大なストックサイトです。

商用でも使えるイラレのベクターデータが多数ストックにあり、どのようにデザイン作成されているのか見れるので勉強になります。

Adobe Stock 公式サイト

https://stock.adobe.com/jp

商用利用も可能な高品質な素材が手に入るので、個人的にもよく利用しています。Adobeアプリとの相性が良いです。

More of DESIGN

Adobe関連記事

Adobe関連の記事をピックアップして紹介します。

併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【2020年版】Premiere「Rush」と「Pro」の動画編集 8つの違いを比較解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

【特典】Adobeのプランを2ヶ月無料で利用する方法

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

【商用利用可】おすすめフリー素材・画像サイト

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Adobe Photoshopでできる10のこと

Photoshopでできるデザインや機能について解説しています。

【UI/UX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。