記事の詳細

前回の記事はこちら

Adobe XDを使ってワイヤーフレームを作る その1【ファイルの作成とアートボードの設置、パネルの見方】
Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできる...
Adobe XDを使ってワイヤーフレームを作る その2【ツールとアセットパネル、レイヤーパネル】
前回の記事はこちらAdobeXDのツールパレットと各パネルCtrl+Yでレイヤーパネルを展開することができます。 レイヤーパネルの左にあるのがツールですが、上から選択ツー...
この間自宅のMacでAdobeXDを操作したら普通にメニューが出てきてびっくりしました。
Windowsだとハンバーガーメニューに収納されているんですけど……。あとメニュー内容もだいぶ少ないような……?
基本としてWindowsは右クリックを使えってことなんでしょうか。

Adobe XDの選択ツール

使う頻度が一番高いツールです。

Adobe XD【選択ツール】

何のオブジェクトも選択していない場合は、左のレイヤーパネルはアートボード一覧が表示されます。いずれかのオブジェクトを選択すると、そのオブジェクトが属しているアートボードの内部オブジェクトの一覧に切り替わります。アートボードに属していない場合はペーストボード(アートボード外の灰色部分)の一覧が表示されます。

Adobe XD【ペーストボード選択時】

右のパネルは上から順に、「整列ツール」「リピートグリッド」「パスファインダ」「変形(サイズ変更)」「アピアランス」となるのが基本。

Adobe XD【パネルの展開】

選択したオブジェクトがテキストオブジェクトだった場合

選択したオブジェクトがテキストオブジェクトだった場合は、右のパネルにフォントやフォントサイズ、フォントウェイト、トラッキング、行間、の変更ができるパネルが展開されます。最近テキストにアンダーラインがつけられるようになりました。(2017年12月15日現在)
また、アピアランスに塗りと線、シャドウと背景のぼかし/オブジェクトのぼかしの設定が加わります。
それぞれアピアランスの要素にチェックを入れると、編集可能箇所が展開します。境界線の幅位置や、シャドウの大きさ、背景のぼけ具合など、細かい設定がスライドバーで簡単に操作できます。

Adobe XD【テキスト選択時】

選択したオブジェクトがパスやシェイプオブジェクトだった場合

選択したオブジェクトがパスやシェイプオブジェクトだった場合は、アピアランスに角丸設定が表示されます。左が全指定、右が各々の角の設定で、右のアイコンをクリックすると数値記入欄が展開します。

Adobe XD【オブジェクトの選択時】

Adobe XD【角丸設定】

カラー変更パネルは以下のようになります。一番下の列のプラスボタンを押すと、現在選択しているカラーがスウォッチに登録されます。べた塗部分をグラデーションに変更することで、グラデーションカラーにすることができます。
実際のアートボードパネル上にもラインがでますので、こちらでも編集可能です。色の変化させたい部分をクリックすることで、色を追加することができます。

Adobe XD【カラーパネル設定】 Adobe XD【カラーパネル設定】 Adobe XD【カラーパネル設定】

選択したものがアートボードだった場合

選択したものがアートボードだった場合(アートボードの名前をクリック、もしくはペーストボード時に展開した左パネルの任意のアートボードを選択)は、スクロール、アピアランス、グリッドといったものが展開します。

スクロール設定

スクロールには「なし」と「垂直方向」があり、なしの場合はサンプルURLを出力して表示しても画面がスクロールしません。垂直方向に指定することで、スクロールが可能になります。その場合、アートボードのファーストビュー指定の終了部分に点線がつきます。
表示領域の高さもピクセルで指定が可能です。

Adobe XD【スクロール設定】

レイアウト設定

レイアウトにチェックを入れると、画面に下図のようにガイドグリッドが表示されます。縦列の数、その列の幅と間幅を設定することができ、さらに下の設定では「両端のマージン」か「正方形のマージン」を設定することができます。

Adobe XD【レイアウト設定】

なお、選択できるレイアウトにはほかに「マス目」があり、方眼紙のようなガイドが現れます。

Adobe XD【方眼紙】

Adobe XDのシェイプツール(四角)

四角いシェイプを作ることができます。

Adobe XD【シェイプツール(四角)】

Adobe XDのシェイプツール(円形)

丸いシェイプを作ることができます。

Adobe XD【シェイプツール(円形)】

●Adobe XDのラインツール

ラインを描くことができます。

Adobe XD【シェイプツール(ラインツール)】

Adobe XDのペンツール

パスで自由にシェイプを作ることができます。操作的にはIllustratorに近いものがあります。
パスの切り替えはアンカーポイント上でダブルクリック。また、アンカーポイントのないセグメント上でクリックすると、そこにアンカーポイントを作ることができます。アンカーポイントを削除するにはdeleteで処理できます。

Adobe XD【ペンツール】

Adobe XDのテキストツール

フォントサイズ、フォントファミリー、フォントウェイトのほかに、左揃え、センター揃え、右揃え、また、テキストそのものに合わせるか、テキストボックスに合わせるかの選択が可能です。アンダーラインを設置することも。

Adobe XD【テキストツール】

Adobe XDのアートボードツール

ドラッグすることで任意のアートボードを生成できます。また、展開した左パネルにあるそれぞれの提携サイズを選択し、ペーストボード上でクリックすると、任意の場所に整列した形で提携サイズのアートボードが生成されます。

Adobe XD【アートボード】 Adobe XD【アートボード】

Adobe XDの拡大・縮小ツール

拡大と縮小を行います。

Adobe XD【拡大縮小】

 

 

次回はリピートグリッドとシンボルについてです。

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

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

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

久保田 里美

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

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

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

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

AD

ページ上部へ戻る