【まとめ】Adobe XDとは？使い方は？ XDでできることを初心者向けに徹底解説！

同じAdobe製品である「photoshop」や「illustrator」にはない特徴として、web特有のレイアウトの作成や、ボタンを押したときの動きを設定や確認ができることが挙げられます。

完成したデザインからURLを作成してメールで送付できたり、コメントで意見の共有ができたりと、今まで他のツールで行っていた作業をAdobe xd一つで行うことができるところも魅力の一つです。

さらに詳しく知りたい方は、各リンク先の記事に飛んでみてくださいね！

 📖目次に戻る

アートボード

アートボードの作成

アートボードは、あらかじめ用意されたテンプレートを選ぶか、アートボード外の灰色の部分をクリックまたはドラッグして作成します。

グリッドを表示する

また、右サイドバー下の、「グリッド」にチェックを入れるとガイドを表示することができます。

列の数や、段間隔、列の幅を自由に調整できるので非常に便利です。

アートボードの縦の長さは、デザインの過程で変わるので最初は気にしなくても良いかもね

 📖目次に戻る

オブジェクト

オブジェクトとして、「図形」や「画像」、「テキスト」などを配置したり変形することが可能です。

図形を作成する

図形は、あらかじめ用意された「長方形、楕円形、多角形ツール」や「ペンツール」など使って作成します。

より複雑な図形の作成は、複数の図形を組み合わせて作ることもできるよ

画像を配置する

画像は、フォルダなどから直接アートボードに配置することができます。

また、作成した図形の中に画像を配置することで、好きな形にトリミング（切り抜き）された画像を作成することもできます。

画像を配置した後でマスクをかけても、同じことができるよ

 📖目次に戻る

アセットパネル

さて、ここからが本番です！

アセットパネルは、よく使う「カラー」や「文字スタイル」、ボタンやヘッダー・フッターなどの「コンポーネント」などを登録 & 呼び出すことができる機能です。

登録した「カラー」「文字スタイル」「コンポーネント」などは、画面左にあるサイドバーに格納され、名前を付けたり、並び替えることもできます。

カラーや文字スタイルの登録

色や文字の登録は、登録する対象を選択中に、アセットパネルの「カラー」「文字スタイル」のそれぞれの「+」をクリックして行います。

呼び出す時は、同じく「カラー」や「文字スタイル」直下のアイコンをクリックすることで簡単に使用が可能です。

文字スタイルは、フォントの種類や色、サイズの全てが登録されるよ

コンポーネントの登録

コンポーネントの登録は、登録する対象物を選択中に、アセットパネルの「コンポーネント」横の「+」をクリックして行います。

呼び出す時は、同じく「コンポーネント」直下のアイコンをドラッグすることで簡単に使用が可能です。

また、マスターコンポーネントを編集することで、コピーも連動して一括編集されるので、修正漏れを防ぐことができます。

もちろん「一部」だけを編集することもできるよ

 📖目次に戻る

リピートグリッド

リピートグリッドは、サムネイル画像や記事一覧などのテキストや画像がひと固まりになったレイアウトなどを、縦や横方向に丸ごとコピーすることができます。

テキストや画像を一括配置する

また、配置する対象の数だけ画像を選択した状態で、ファイルなどからxdにドラッグ＆ドロップすることで簡単に一括配置することもできます。

ちなみに、テキストデータの中身は以下の通りです。

改行されるまでのテキストを１つのデータとして、一つずつ貼り付けられてることがわかるね

📖目次に戻る

プロトタイプ

プロトタイプは、配置したボタンに「クリック後の遷移先」を指定したり、「遷移時のアニメーション」を設定することができる機能です。

プロトタイプの設定作業は、「プロトタイプ」タブに切り替えて行います。

ページの遷移先を設定する

例として、トップページのボタンから別ページに遷移するプロトタイプを設定してみます。

使い方は、以下の通り非常にシンプルです。

プレビューで確認する

今設定したボタンが機能するか、実際にプレビュー画面で確認します。

プレビューを確認する場合は、画面右上の「▶︎」マークをクリックして行います。

ボタンをクリックすることで、ちゃんと遷移先のページが表示されてるね

アニメーションを設定する

遷移させるだけでなく、遷移時のアニメーションを設定することも可能です。

色々なアニメーションが用意されているので、用途に合わせて使い分けてみると良いでしょう。

他にも、アコーディオンメニューや、動き続けるオブジェクトなど、工夫次第で色々な動きが表現できるよ

📖目次に戻る

共有

共有機能は、デザインしたページの公開リンクを作成し、クライアントや社内のデザイナーとデータの共有をしたり、コメント機能を使ったやりとりができる機能です。

共有機能は、「共有」タブに切り替えて作業を行います。

公開リンクの作成

adobe xd で作成したページは、画面右の「リンクを更新」ボタンをクリックすることで公開リンクを作成することができます。

このURLをメールなどに添付して送付することで、adobe XDを持っていない人もページを確認できるよ。

コメントの挿入

先ほど、生成されたURLをクリックした先のページで、コメントのやりとりを行うことができます。

また、下の例のように、送信したコメントを任意の場所にピン留めすることも可能です。

共有したデザインデータを使ってコーディングに利用することも出来るよ

📖目次に戻る

最後に

いかがでしたでしょうか、今回は「xdって何？」という疑問について、基本的な使い方を交えて解説しました。

各機能についてもっと詳しく知りたい方は是非こちらもチェックしてみて下さいね。

最後までお読みいただき、ありがとうございました！