Web制作の新定番？AdobeXDの基本の使い方

前回に引き続き今回もAdobeXDに関する記事。
本記事ではAdobeXDの基本的な使い方について紹介していきます。

AdobeXDとは何かについて気になる方はこちらの記事を参照してください。

AdobeXDには大きく分けて3つのモードがあります。
デザインモードとプロトタイプモード、共有モードです。

以下でそれぞれ解説していきます。

デザインモード

AdobeXDの立ち上げ

引用：公式サイト

AdobeXDのアプリケーションを立ち上げると、新規作成画面が表示されるので好きなものを選択します。
画像では、iPhone 6/7/8、iPad、Web 1920が表示されています。
上3つ以外のサイズで作成する場合はカスタムサイズを選択。

Tips
新規作成（command + N）

インターフェースの紹介

引用：公式サイト
A：メインメニュー
B、C、D：モードの切替え（B：デザインモード、C：プロトタイプモード、D：共有モード）
E：ドキュメントに招待
F：デバイスでプレビュー(スマートフォンのアプリケーションを使用してプレビュー)
G：プレビュー
H：プロパティインスペクター（色やフォントサイズなど、オブジェクトの見た目を変える機能）
I:ペーストボード
J:アートボード
K、L、M：パネルの切り替え（K：プラグイン、L：レイヤー、M：アセット）
※プラグインはオンラインで公開されているものをDLして使用することができる
N：ツールバー（テキストや図形を描画する）

便利な機能

・リピートグリッド
繰り返し表現をしたいときに便利な機能です。
基準のオブジェクトを設定し、縦や横に動かすとリピートされます。

やり方は簡単で、対象のオブジェクトを選択して「リピートグリッド」を選択するだけ。

すると、つまみが表示されてリピートグリッド化されます。

縦と横に動かすとオブジェクトがリピートされます。
リピートグリッドの解除は簡単で、「リピートをグループ解除」を選択するとリピートグリッドは解除されます。

Tips
リピートグリッド（command + R）
解除（command + shift + G）

・コンポーネント
デザインを使い回す際に便利な機能。
こちらの機能を使用することで、後からでも容易に色やテキストなどを変更することができます。

コンポーネントを使うには対象のオブジェクトを選択し、右クリック>コンポーネントにするを選択します。
左右のパネルをクリックすることでもコンポーネント化ができます。

コンポーネントにはマスターとインスタンスがあります。
ぱっと見で違いはわかりにくいですが、左上のひし形が緑色のものがマスター、白色のものがインスタンスです。

マスターコンポーネントの色や形などを変更すると、インスタンスも同時に変更されます。

反対にインスタンスの変更はマスターに影響しません。

Tips
ショートカット（command + k）

プロトタイプモード

引き続き、プロトタイプモードについて解説していきます。

プロトタイプモードを使用するには画面左上にある、「プロトタイプ」を選択します。

ボタンからドラッグして右隣りのアートボードまで線を伸ばすことでアクションを設定します。
今回はクリックすると右のアートボードに遷移するアクションを設定しています。
なお、画面右のパネルではアクションを細かく設定することも可能。

設定できたら画面右上の再生ボタンを選択します。
すると別ウインドウが立ち上がるので、設定したアクションを確認します。
なお、作成ボタンの左スマホアイコンをクリックすると、スマートフォンで確認もできます。

共有モード

最後は共有モード。

画面左上にある「共有」を選択すると、共有モードに切り替わります。

右のパネルにある「リンクを作成」を押すとリンクURLが生成されます。
こちらのURLを共有することで、他の人にデザインを確認してもらうことができます。

リンクURLを開いたところ。
デザインを確認して、コメントができます。
メンションをつけたり、デザイン上にコメントをピン留めしたりすることができます。

まとめ

今回はAdobeXDの基本の使い方でした。

プロトタイプを行うことで、コーディングをしてみてからミスに気づくなどのミスを減らせます。
コンポーネントやリピートグリッドなどのようにWeb制作に役立つ機能が多いので、まだ使ったことがない人は一度使ってみてください。

公式でもチュートリアルが公開されているので、まずは手を動かしながらXDをいじってみるのがオススメです。
AdobeXDチュートリアル

それでは！