この記事ではAdobe XDのツールについて紹介していきます。
Adobe XDは、「ツール」の操作方法を切り替えてデザインを制作していきます。
まずは、どんな操作ができるのかを把握するところから始めましょう。
Adobe XD のツール
Adobe XDのツールは全部で９つあります。 これから９つのツールの使い方を紹介していきます。
選択ツール
まずは、選択ツールです。
選択ツールは、要素の選択、移動を行うツールです。
ショートカットキーは「V」です。
Adobe XDの操作は、基本的にこのツールを用いて行います。
デザインツールの基本的な操作の流れは
「要素を作成or選択 → プロパティの変更 → 配置」です。
要素を移動させるときは、Adobe XDに表示されるガイドを頼りに移動させましょう。
要素を揃えて配置したり、中央寄せしたりする際に重宝します。
範囲選択する
クリック&ドラッグで要素を囲うことで、範囲選択を行うことができます。
要素をまとめて選択/移動させる際によく使用する選択方法です。
複数選択する
Shiftキーを押しながら要素を選択すると、要素を複数選択することができます。
範囲選択だと選択したくない要素も選択されてしまうので、特定の要素をまとめて選択する際に使用する操作方法です。
要素同士の距離を測る
Adobe XDの特徴の１つで、選択ツールを使用することで要素間の距離を測ることができます。
デザインデータからコーディングを行う際や、デザインを作成する際などに重宝する操作です。
測定の仕方Windows：選択ツールで要素を選択後、カーソルを合わせてAlt
Mac：選択ツールで要素を選択後、カーソルを合わせてOption
長方形ツール
次は、長方形ツールです。
長方形ツールは、Adobe XDで長方形を作成するツールです。
ショートカットキーは「R」です。
クリックしてドラッグすることで、長方形を作成します。 Shiftキーを押しながら作成すると、正方形になります。
長方形のプロパティ
長方形のプロパティは上記のようになります。
オレンジで囲われた部分はよく使用するプロパティなので覚えておきましょう。
テキストツール
次はテキストツールです。
テキストツールは、Adobe XDでテキストを作成するツールです。
ショートカットキーは「T」です。
クリックすることでテキストを入力することができます。
テキストを作成するといっても、２つの形式でテキストを入力します。
- ポイントテキスト：テキスト単体（横幅、高さを指定できない）
- エリア内テキスト：文章（横幅、高さを指定できる）
デザイン内でテキストを作成する際には、どどちらの形式で入力するかを考えましょう。
テキストのプロパティ
テキストのプロパティは上記のようになります。
長方形にもあった箇所は割愛しています。
テキストに当てるスタイルなので、CSSのプロパティは以下のようになります。
「塗り：color」「影：text-shadow」
基本的に使うツールのまとめ
ここまでで、「選択ツール」「長方形ツール」「テキストツール」の３つを紹介してきました。
この３つがWebデザインを作成する上でよく使用ツールになるので、使い方をきちんと覚えておきましょう。
楕円形ツール
次は、楕円形ツールを確認していきます。
楕円形ツールは、Adobe XDで楕円形を作成するツールです。
ショートカットキーは「E」です。
クリックしてドラッグすることで、楕円を作成します。
Shiftキーを押しながら作成すると、正円になります。
Webデザインの中で、装飾やボタンなどで円を作成する際などに登場します。
多角形ツール
次は、多角形ツールを確認していきます。
多角形ツールは、Adobe XDで多角形を作成するツールです。
ショートカットキーは「Y」です。
クリックしてドラッグすることで、多角形を作成します。（デフォルトは三角形）
Shiftキーを押しながら作成すると、正多角形になります。
多角形のプロパティ
多角形のプロパティには、以下の３つの項目があります。
- コーナーカウント：多角形の角数を指定する
- 角丸の半径：丸みを指定する
- スター比率：辺の中点の凹み具合を指定する
多角形ツールを使うことで、デザイン上の装飾を簡単に作成することもできます。
線ツール
次は、線ツールを確認していきます。
線ツールは、Adobe XDで直線を作成するツールです。
ショートカットキーは「L」です。
クリックしてドラッグすることで、直線を作成します。
Shiftキーを押しながら作成すると、45度間隔で線が引けるようになります。
ペンツール
次は、ペンツールを確認していきます。
ペンツールは、Adobe XDでパスを作成するツールです。
ショートカットキーは「P」です。
パスとは、デザインデータ上で図形を形成するポイントのことです。
このペンツールは使いこなせると、さまざまな図形を描くことができるツールになります。
ただ、練習がたくさん必要になるので、この記事では詳しい解説は割愛します。
現段階では、ちょっとした曲線を作りたいときに使用しましょう。
アートボードツール
次は、アートボードツールについて見ていきましょう。
アートボードツールは、Adobe XDのワークスペース内にアートボードを作成することができます。
ショートカットキーは「A」です。
クリック&ドラッグで任意の大きさで作成したり、アートボードの種類から作成することもできます。
授業で作成するアートボード
- Web1366（パソコン版のデザイン）
- iPhone SE（スマートフォン版のデザイン）
デザインのレッスンでは、上記のアートボードを使用してデザインを作成するので、作成の方法を覚えておきましょう。
ズームツール
最後のズームツールについて確認してみましょう。
ズームツールは、Adobe XDのワークスペース内を拡大することができます。
ショートカットキーは「Z」です。
Adobe XDで拡大縮小する方法はいくつかあり存在します。
ノートパソコンのトラックパッドでは「ピンチイン/ピンチアウト（拡大するときに指を広げたりする動き）」でも拡大縮小できます。
また、マウスを使っている場合は、「Alt/Option」を押しながら、マウスホイールを回すと拡大縮小ができます。
まずは３つのツールを使えるようになろう
ここまでで、Adobe XDの９つのツールを紹介しました。
なかなかボリュームのある内容でしたが、１度に全て覚える必要はありません。
簡単なWebデザインを作成するのであれば、一旦は３つのツールを使うことで完成します。
- 選択ツール
- 長方形ツール
- テキストツール
この記事を初めて読まれた方は、まずは上記の３つのツールの使い方をマスターしてください。
