Monkeypod

ホーム > Web制作の新定番?AdobeXDの基本の使い方

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

それでは!


プロフィール

profile_image

Mito

 

旅行とネットが好きなWebデザイナー。ブログを書いたり、書かなかったりします。

カテゴリー