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チュートリアル