Adobe XD の描画ツールとテキストツール

Adobe XD CC の左側のツールバーにある描画ツール（長方形ツール、楕円形ツール、線ツールおよびペンツール）を使用すると、単純なアイコンやグラフィックをすばやく描画できます。また、選択ツールにより、特定の線、シェイプまたはオブジェクトを選択して編集することが可能です。

その後、様々な方法でこれらのシェイプを組み合わせて、複合シェイプや複合オブジェクトを作成したり、シェイプの一部をマスクしたりできます。組み合わせとマスキングの方法について詳しくは、ブール演算を使用したオブジェクトの組み合わせとシェイプを使用したオブジェクトのマスクを参照してください。

楕円および円の描画

線の描画

ペンツールを使用した描画

ペンツールを使用して作成できる最も単純なパスは直線です。ペンツールをクリックして 2 つのアンカーポイントを作成すると、それらのアンカーポイントを結ぶ直線が作成されます。クリックを続けると、角丸ポイントで連結された直線セグメントから成るパスが作成されます。

曲線の描画

曲線が方向を変える位置にアンカーポイントを追加し、曲線を形成する方向線をドラッグすることで、曲線を作成することができます。方向線の長さと弧により、曲線の形状が決定されます。

アンカーポイントの数を少なくすると、曲線を編集しやすくなり、曲線の表示やプリントがより快適になります。ポイント数が多すぎると、曲線がでこぼこになることがあります。アンカーポイントの間隔を広く取り、方向線の長さと角度を調整して曲線を描くようにします。

直線に続く曲線の描画

曲線に続く直線の描画

角丸で連結された 2 つの曲線セグメントの描画

描画モードと編集モード

描画モードと編集モードを切り替えるには、Esc キーを押します。

「パス編集モード」は、シェイプまたはパスをダブルクリックして開始することもできます。このモードでは、シェイプのアンカーポイントは表示されますが、マウスを動かしても描画はされません。既存のアンカーポイントやコントロールポイントを操作したり、パス上の既存のセグメントに新しいアンカーポイントを挿入したりすることは可能です。

ペンツールで描画しているときは、新しいセグメントを描画するだけではなく、上記のすべての編集をおこなうことができます。

既存のパスの延長

ペンツールを選択すると、アートボード上のすべてのパスで、マウスを置いたときに始点と終点に渡るハンドルが表示されます。その点から引き続きパスを描画するには、いずれかのハンドルをクリックします。

閉じたパスを延長すると、パスが再び開き、そのパスに対してペンツールが描画モードになります。

アンカーポイントの選択

描画をダブルクリックしてアンカーポイントを表示します。次に、アンカーポイントをクリックして選択します。複数のアンカーポイントを選択するには、Shift キーを押しながらアンカーポイントを選択するか、または選択ツールを使用してアンカーポイントを囲み枠で選択します。

選択したアンカーポイントは、キーボードで移動するか、マウスでドラッグするか、またはプロパティインスペクターでプロパティ（x および y 座標）を編集します。

アンカーポイントのスナップの無効化

新しいアンカーポイントを配置しようとするとき、または既存のアンカーポイントをドラッグしているとき、アンカーが別のアンカーポイントに垂直方向または水平方向に接近すると、スナップ線が表示されます。アンカーポイントのスナップを無効にするには、command/Ctrl キーを押しながら操作を行います。

アンカーポイントの追加および編集

描画をダブルクリックして選択し、既存のアンカーポイントを表示します。パスをクリックすると、カーソルの位置に新しいアンカーポイントが追加されます。

アンカーポイントの削除

アンカーポイントを選択して Delete キーを押します。

描画のショートカット

任意の位置へのテキストの入力

テキストツールをクリックし、テキストを開始する場所をクリックします。テキストを入力して Return キーを押します。

キャンバス上で位置を選択してテキストを入力すると、横書きのテキスト行が表示されます。この行は、クリックした場所から始まり、文字を入力するにつれて広がっていきます。各テキスト行は独立しています。編集すると拡大または縮小しますが、次の行に折り返すことはありません。この入力方法は、アートワークに短い文字列を追加するときに便利です。

他のオブジェクト上でテキストを入力し、そのテキストが最前面に表示されるように配列するには、オブジェクト／重ね順オプションを使用します。

エリア内へのテキストの入力

テキストツールをクリックした後、テキストを配置するキャンバスの場所をクリック＆ドラッグしてテキストエリアを定義します。次に、そのエリア内をクリックしてテキストの入力を開始します。

テキストエリアを定義すると、オブジェクトの線によって、文字のフローが水平方向または垂直方向に制御されます。線に達した文字は、エリア内に収まるように自動的に折り返されます。 この入力方法は、複数の段落で構成されたパンフレットなどを作成するときに便利です。

テキストファイルからのテキストの読み込み

事前に作成したテキストを簡単にアートボードに組み込むには、次のいずれかの方法を使用します。

• アートボードにテキストファイルをドラッグします。
  

アートボードにプレーンテキストファイルをドラッグするだけで、事前に作成したテキストを簡単にデザインに組み込むことができます。この操作により、テキストファイルの内容を含むエリアテキストがアートボード上に作成されます。         

• リピートグリッドにテキストファイルをドラッグします。

テキストファイル（改行を含む）をドラッグし、そのファイルをリピートグリッド内のテキストコンポーネント上にドラッグすることもできます。すべてのテキストエレメントには、そのファイルからのテキストが読み込まれます。

詳しくは、リピートグリッドにテキストファイルからテキストを追加を参照してください。

• アートボードにテキストをコピー＆ペーストします。

Adobe XD では、アートボードにテキストをコピー＆ペーストして、エリアテキストエレメントを作成することもできます。作成したエリアテキストエレメントは、簡単に移動したり、編集したりできます。

テキストエリアのサイズ変更

テキストをクリックしてハンドルをドラッグすると、書体のサイズを変更できます。この機能は、ポイントテキストでのみ利用できます。

テキストの書式設定

テキストをクリックした後、プロパティインスペクターを使用して、テキストの種類、フォントサイズ、およびテキスト揃えを指定します。

テキストブロックの個々の単語または文字を選択して、そのセクションのみを書式設定することもできます。

字間および行間の変更

字間を変更するには、テキストオブジェクトをクリックし、プロパティインスペクターの「字間」オプションを使用して字間を指定します。

テキストのサブセット内の字間を変更するには、テキストを選択し、プロパティインスペクターを使って milli-em で字間を変更します。

行間を変更するには、テキストエリアをクリックし、プロパティインスペクターの「行間」オプションを使用して行間を指定します。

行の高さを初期設定にリセットするには、プロパティインスペクターの「行間」オプションで 0 を入力します。