日本一やさしいXDの教科書 - あなたのスイッチを押すブログ

Adobe が提供している UI/UX デザインソフト「Adobe XD 」。

非常に高機能で、ワイヤーフレームの作成だけでなく、簡単なデザインなら制作可能な万能ツールだ。

それでいて Photoshop などに比べるとわかりやすく使いやすい操作画面で、学習コストが低く済むのも嬉しいところ。

当ブログでは「Adobe XD」の使い方について、基礎編から応用編まで幅広く紹介している。

この記事のもくじ

Adobe XD の使い方：基礎編

Adobe XD を使い始めてまだ日が浅い人のために、XD の基本的な操作や機能についてまとめた。

熟練した人にとっても、意外と知らない機能やテクニックが見つかるかもしれない。

XDを実際に操作する画面について詳しくまとめた。

各エリアの説明、ツールバーの意味や役割、画面に散りばめられた数々のアイコンの名前や役割なども詳細に解説。

どのツールで、どんな操作・機能を使うことができるのか、初めての人でも理解しやすいように画像多めに設計してある。

XDにおけるアートボードの基礎知識について紹介。

デバイスのサイズに合わせたサイズの変更方法、複製や書き出し方など、意外と知らないアートボードの機能や使い方をお伝えする。

XDでできるテキストの装飾についてご紹介。

XDには、テキストの長さに応じてオブジェクトとなる「ポイントテキスト」と、テキストを表示する範囲を指定する「エリア内テキスト」の2種類がある。それらの違いや特徴を解説する。

また、テキストの行間や文字間隔、シャドウやカラーの変更方法も合わせて説明する。

複数のオブジェクトを組み合わせて結合させ、ひとつの図形オブジェクトを作る方法をまとめた。

たとえばXDのオブジェクトに「矢印」というものはないが、三角と四角を組み合わせて矢印を "つくる" ことはできる。

この機能を応用すれば、どんな複雑な図形であってもXDで表現することが可能。ぜひマスターしよう。

XDで画像をマスクする方法を解説。「マスク」という言葉に馴染みがない人でもわかるように、仕組みや原理についてもまとめた。

この方法を使えば、画像を好きな形に切り取ることも可能。「トリミング」と同じことができるようになる。

Adobe XD には、まだまだ知られていないマイナーな機能や使い方も多い。そんな細かなテクニックを紹介する。

知っておくことでクリエイティブの幅が広がったり、作業が効率化するようなものも多いので、要チェックだ。

XDのアートボード上に作成したレイヤーを、個別のパーツとして書き出す方法を紹介する。

例えばデザインしたウェブページの画像パーツを書き出したり、同サイズのバナーを大量に書き出したりするのに、非常に役立つ。ぜひ覚えておこう。

XDを使って画像に「ぼかし」を入れる方法をご紹介。

「ぼかし」を入れる方法は2種類あり、「画像自体をぼかす方法」と「ぼかしレイヤーを画像の上に乗せる方法」がある。状況に応じて使い分けよう。

「テキスト量に応じて要素が可変（伸び縮み）させる方法」を紹介する。

例えばウェブサイトでボタンを作るとき、横幅を200pxで指定するのではなく、テキストの長さに応じて長さが変わるようなパーツの作り方だ。