記事の詳細

前回の記事はこちら

Adobe XDを使ってワイヤーフレームを作る その1【ファイルの作成とアートボードの設置、パネルの見方】
Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできる...

AdobeXDのツールパレットと各パネル

Ctrl+Yでレイヤーパネルを展開することができます。

AdobeXDの使い方2【レイヤーパネルの展開】 AdobeXDの使い方2【レイヤーパネルの展開】

レイヤーパネルの左にあるのがツールですが、上から選択ツール、スクエアシェイプ、サークルシェイプ、ライン、ペンツール、テキスト、アートボード、ルーペ、となっています。間をおいて、下の円がつながっているようなアイコンが「アセット」、その更に下のひし形のものが「レイヤー」となっています。

AdobeXDの使い方2【ツールパレット】

Adobe XDでは、基本的に「アセットでその他ツールの設定」「レイヤーで画面の処理」といった役割分担があるようです。

Adobe XDのアセットでできること

主に以下の3つのことができます。

カラーの変更

AdobeXDの使い方2【カラーの変更】

選択しているオブジェクトのカラーをスウォッチ的に登録することができます。別途右側のパネルで登録した際は、自動的にここに登録が同居されます。アセットパネル上で色を変更すると、グローバルカラー的に変化します。

その他各々、面や線の色変更を行う際は、それぞれのカラーをクリックすることで、シェイプやオブジェクトの色彩変化に対応します。

文字スタイル

AdobeXDの使い方2【テキストの変更】

テキストボックス、およびテキストを作成した際、フォントファミリー、フォントウェイト、フォントサイズといったものが登録できます。登録したものは、オブジェクトを選択したのちクリックすることで適応することができます。

シンボルの登録

AdobeXDの使い方2【シンボルの登録】

特定のオブジェクトをシンボル化することができます。オブジェクトは複数個でまとめて登録可能。シンボルにしたいオブジェクトを選択後、プラスボタンを押すことで登録できます。

登録後、シンボルのエリアからドラッグ・アンド・ドロップすることでアートボード上に設置することができます。

Adobe XDのレイヤーパネルの使い方

重ね順の変更

AdobeXDの使い方2【重ね順の変更】

アセットからレイヤーパネルに切り替えると、上記のような状態になっています。わかりやすくかさねたものがこちら。

レイヤーは上から順番に重なっており、一番上のオブジェクト(図の場合はシンボル1-2)が一番上に来ています。このシンボル1-2を下にドラッグすると、以下のようになります。

AdobeXDの使い方2【重ね順の変更】

重ねの順番は、レイヤーで移動するか、イラストレータやフォトショップのショートカットキーと同じく、「(Shift+)Ctrl(⌘)+]」「(Shift+)Ctrl(⌘)+[」で変更することができます。

グループ化

グループ化したいオブジェクトをすべて選択したのち、「Ctrl(⌘)+G」でグループ化することができます。グループ化したオブジェクトは左側のパネルでフォルダ表記になり、フォルダ横の名前をダブルクリックすることで名前を変更することができます。

AdobeXDの使い方2【フォルダ名の変更】

なお、フォルダの中のレイヤー層は、グループ化する前と変わりません。フォルダ内(=グループ化されたオブジェクト)の編集を行いたい場合は、フォルダをクリックすることで、中身が展開します。中身の上下入れ替えで重ね順もそのまま変更できます。

フォルダ外にオブジェクトを出すと、グループ化が解除されます。

次回は各ツールを使用した際の右側のパレットの変化を見ていきます。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る