Adobe XDの使い方を画像付きでやさしく解説【初心者向き】

  • PR
  • WEB制作
Adobe XDの使い方を画像付きでやさしく解説【初心者向き】

今回は、人気のデザインツール『Adobe XD』の使い方について解説してゆきます。

画像付きなので初心者の方にも分かりやすいですよ!WEBデザイン・WEB制作を学習中の方は必見の内容です!

そもそもAdobe XDって何ができるツールなの?どんな作業に適したツールなの?という事が気になる方は「Adobe XDとは?出来ることや使い方を解説する」の記事をご覧ください。



いますぐAdobe XDを使ってみたい!インストール方法が知りたい!という方には、次の記事もオススメです。

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

Adobe XDとは?

Adobe XD

Adobe XD(アドビ・エックスディー)は、WEBサイトやアプリ開発の目的に利用できるデザインツールです。PhotoshopやIllustratorでおなじみのAdobe(アドビ)によって開発され、シンプルな機能性と扱いやすさから、多くのクリエイターの支持を集めています。



XDを利用するには「Adobe ID」の作成が必要ですが、他のデザインツールとは異なり基本的な機能はすべて無料で利用することが可能となっています。

そんなXDについて、今回はWEBサイトのデザイン作業を例にして、各機能の使い方をくわしく解説してゆきます。



▼本記事で解説する内容

  • 新規ファイルを作り方
  • アートボードを作成する方法
  • オブジェクトを作成する方法
  • その他のXDの機能について
XDの基本的な使い方を覚えゆきましょう!

新しいファイルを作成する

Adobe XDでデザインを作るためにも、まずは新しいファイルを作成します。



XDを起動すると次のようなスタート画面が開くので、ここで『Web 1920』と書かれたアイコンを選択しましょう。

XDで新しいファイルを作成する方法①
ここで選択したサイズはXDの編集画面(アートボード)の大きさに影響しますが、このサイズは後からでも変更ができます。

今回は、WEBデザインの作成にもっとも適している『Web 1920』を選択します。クリックすると、ファイルが作成されるのと同時にワークスペースが開きます。

XDの編集画面
XDで新しいファイルを作成する方法②
XDではこのワークスペースを通して様々な作業を行います!

ワークスペースの構成

XDのワークスペースは、次の様な構成になっています。

ワークスペースの構成

XDで行われるデザイン作業は、すべてワークスペース内で完結する様になっています。

最初はなんとなく把握するだけでOK!少しだけ眺めたら次に進みましょう!

アートボードを作成する

新しいファイルを作成したら、『アートボード』を並べてみましょう。

アートボードとは
Adobe XDにおけるアートボードとは1つのアートボードにつき1つの画面をデザインする、WEBサイトやアプリなどの画面を表す作業領域のことです。

XDでは、次のようにすればアートボードが追加できます。



▼アートボードを追加する方法

  • ツールバーの『アートボード』を選択する
  • アートボード以外の灰色の部分をクリックする
XDでアートボードを追加する方法

アートボードについて詳しく知りたい方には、つぎの記事が参考になります。

ここまで出来たらデザイン作業の準備はOKです!

オブジェクトを作成する

ここからは、『オブジェクト』と呼ばれるものを使って実際のWEBデザインを作成してゆきます。Adobe XDにおけるオブジェクトとは、例えば次のようなデザインを構成する要素のことをいいます。



▼XDのオブジェクト

  • 円形・三角形・四角といった図形
  • 文字・文章などのテキスト
  • イラストや写真などの画像
  • アイコンなどのパス・ベクター
XDのオブジェクトについて
XDではオブジェクトを組み合わせてデザインの作成を行います!

図形のオブジェクトを追加する

XDで図形などのオブジェクトを扱う場合、主には次のような流れで作業を行います。



  1. 図形をツールバーから選択する
  2. アートボード上に配置する
  3. 塗や線などの外観を設定する
XDで図形を追加する方法

テキストを追加する

文字などのテキストを追加するには、ツールバーから『テキスト』を選択してアートボード上に配置し、フォントや文字のサイズなどを指定するといった流れで行います。

Adobe XDでテキストを追加する方法

画像ファイルを追加する

イラストや写真などの画像を追加するには、外部のファイルをXDのアートボード上にドラッグ&ドロップします。他のオブジェクトと同様に、見た目の調整などを行うことも出来ます。

XDで画像を追加する方法

XDの便利な機能を使いこなそう

上記に紹介した方法だけでもデザインを作成することが出来ますが、XDにはその他にも、WEBデザインやアプリ開発で役立つ便利な機能がたくさんあります。



▼Adobe XDの便利な機能

  • リピートグリッド
  • コンポーネント
  • レイアウトグリッド
  • プロトタイプ
  • プラグイン

リピートグリッド

Adobe XDのリピートグリッドは、同じデザインを繰り返すようなレイアウトを自動的に作成することができる機能です。

3.リピートグリッドの使い方
Adobe XDのリピートグリッドの使い方

▼リピートグリッドを使うメリット

  • 同じデザインを繰り返すレイアウトを自動的に作成する
  • 一括編集にも対応しているので後からの変更にも強い
  • 手間をなくして効率的にデザインの作成ができる



リピートグリッドを使いこなすと、例えばWEBサイトにおけるブログの一覧画面など、繰り返しの多いデザインを一瞬で作り出すことが可能となります。


WEBサイトのデザイン作業における最強のツールともいうべき存在!使いこなせば作業効率がぐっと上がります!

リピートグリッドについて詳しく知りたい方は、次の記事が参考になります。

コンポーネント

コンポーネントは、WEBページなどのデザインにおいてくり返し使用する様なデザインの要素を、管理するために役立つ機能です。

Adobe XDでコンポーネントを作る方法
Adobe XDでコンポーネントを配置する方法

▼コンポーネントを使うメリット

  • デザインの要素を部品化して管理できる
  • 修正などの作業回数が減り、作業の効率化ができる



リピートグリッドとあわせて使えば、管理・効率化の2つの側面から快適な作業環境が実現できます!

コンポーネント機能について詳しく知りたい方は、次の記事が参考になります。

レイアウトグリッド

WEBサイトの制作では、整理した情報を並べて表示させる、多様なデバイス幅に対応させる(レスポンシブWEBデザイン)といったことを目的に、グリッドシステムというレイアウト手法が広く使われています。



Adobe XDでも同様に、『レイアウトグリッド』という機能を使うことでグリッドシステムを前提としたデザイン作業に対応することが可能となります。

Adobe XDでレイアウトグリッドを使用したデザイン作業例

▼レイアウトグリッドを使用するメリット

  • グリッドシステムを前提としたWEBサイトのデザインに対応できる
  • WEBサイトの制作において、より精度の高いデザインが作成できる
主流のレイアウト手法に対応して、より品質の高いデザインをつくろう!


レイアウトグリッドについて詳しく知りたい方、Bootstrapなどを前提にした作業例が知りたい方は、次の記事が参考になります。

プロトタイプ

Adobe XDには、作成したデザインを実際のWEBサイト・アプリの様に動作せることが出来る『プロトタイプ』という機能があります。

XDのプロトタイプのイメージ
Adobe XDのプロトタイプのイメージ

プロトタイプとは『試作モデル』という意味合いをもつ言葉ですが、このプロトタイプを利用すると、例えばWEBサイト・アプリなどの制作において次のメリットが得られます。



▼プロトタイプのメリット

  • デザイン段階から動作検証が可能となる
  • 機能・デザイン・操作性のイメージが共有しやすくなる
  • コミュニケーションや修正作業にかかるコストが減る



プロトタイプ機能には、デザイン作業のみならず制作全体に影響する多くのメリットがあります。とくにコミュニケーションにおけるストレスフリーな作業環境の実現という意味で複数人での作業時に効果があると言えます。

WEB全般のクリエイティブを意識した、XDならではの機能です!

Adobe XDのプロトタイプ機能について詳しく知りたい方は、次の記事が参考になります。

プラグイン

Adobe XDには標準機能を拡張する『プラグイン』という仕組みがあり、プラグインを利用することでXDをより自分好みの作業環境にカスタマイズすることが可能です。

Adobe XDのプラグイン

▼プラグイン利用のメリット

  • XDに存在しない機能が追加できる
  • XDによるデザインの作業効率があがる
  • 作業精度が上がり、制作物のクオリティがあがる
Adobe XDが今よりもずっと便利に使えますよ!

プラグインについて詳しく知りたい方は、次の記事が参考になります。

この記事のまとめ

本記事ではAdobe XDの基本的な使い方をはじめ、WEB制作で活用すべき便利な機能について、解説を行いました。



▼本記事で解説する内容

  • 新規ファイルを作り方
  • アートボードを作成する方法
  • オブジェクトを作成する方法
  • WEB制作で活用したい便利な機能


いずれもXDを使った作業効率をぐっと上げることが出来るスキルです!

Adobe XDは、無料で使うことが出来て、初心者にも扱いやすい高機能なデザインツールです。複数人での作業にも対応しているため、現在のWEB制作・アプリ開発の現場では標準化しつつあります。



▼公式サイト

Creative Cloud


WEB制作において、これからデザイナーやエンジニアを目指す方にとっては習得必須とも言えるべきツールです。当サイトの情報もぜひ参考にしていって下さいね!