Adobe XD の描画ツールとテキストツールを使用してグラフィックオブジェクトやテキストオブジェクトを作成する方法を説明します。

描画ツール

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

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

長方形と正方形の描画

  1. 長方形ツール 選択します。

  2. 次のいずれかの操作を実行します。

    • 長方形を描画するには、長方形が希望のサイズになるまで、斜めにドラッグします。
    • 正方形を描画するには、正方形が希望のサイズになるまで、Shift キーを押しながら斜めにドラッグします。
  3. 角丸長方形を描画するには、長方形を描画した後、クリックして半径編集ハンドルを表示します。いずれかのハンドルをクリックし、長方形の中心に向かってドラッグします。プロパティインスペクターを使用して、1 つ以上の角丸の半径値を入力することもできます。

    角丸長方形および正方形の描画
    角丸長方形および正方形の描画
  4. 正方形または長方形をさらにカスタマイズするには、角丸の半径を編集できます。

    • 1 つの角丸の半径のみを調整するには、次のいずれかの操作をおこないます。
      • Option キー(Mac)または Alt キー(Windows)を押しながら、角丸のハンドルをクリックし、マウスをドラッグします。
      • プロパティインスペクター を選択した後、角丸の半径値を個々に編集します。
    • すべての角丸の半径を同時に調整するには、次のいずれかの操作をおこないます。
      • 角丸の半径をクリックし、マウスをドラッグします。 
      • プロパティインスペクター を選択した後、半径値を編集します。
    4 つすべての角丸を同時に調整
    4 つすべての角丸を同時に調整
    角丸を 1 つずつ調整
    角丸を 1 つずつ調整

楕円および円の描画

  1. 楕円形ツール  を選択します。

  2. 次のいずれかの操作を実行します。

    • 作成する位置にポインターを置き、目的のサイズになるまで斜めにドラッグして楕円を描画します。
    • 円を作成するには、Shift キーを押しながらドラッグします。
    楕円のサイズ変更
    ドラッグして楕円のサイズを変更します。
    ドラッグして円のサイズを変更します。
    Shift キーを押しながらドラッグして円のサイズを変更します。

線の描画

  1. ラインツール  を選択します。

  2. ポインターを直線の始点に置き、終点までドラッグします。

    ラインツールを使用して線を描画します。
    ラインツールを使用して線を描画します。

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

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

  1. ペンツール  を選択します。

  2. ペンツールのポインターを直線セグメントの描画を開始する地点に移動し、クリックして最初のアンカーポイントを定義します。

  3. 次に、書き始めのセグメントを終了させる地点でクリックします(セグメントの角度を 45° 単位に固定するには、Shift キーを押しながらクリックします)。

  4. ペンツールのクリックを続けて、他の直線セグメントのアンカーポイントを設定します。

    注意:

    アンカーポイントを直線から曲線に、または曲線から直線に変換するには、アンカーポイントをダブルクリックします。

    直前に追加したアンカーポイントは常に塗りつぶしの丸で表示され、これが選択されていることを表します。新しいアンカーポイントを追加すると、それまでに定義したアンカーポイントは白抜きの四角いポイントで表示され、選択が解除されます。

  5. 次のいずれかの操作をおこなって、パスを完成します。

    • パスを開いたままにするには、Esc キーを押します。
    • クローズパスにする場合は、最初に作成した(白抜きの)アンカーポイントの上にペンツールを置きます。クリックまたはドラッグするとパスが閉じます。
    • パスを閉じずに開始点を選択してドラッグするには、Command/Ctrl キーを押しながら操作します。
    直線の描画
    ペンツールを使用して直線を描画します。

曲線の描画

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

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

  1. ペンツール  を選択します。

  2. ペンツールを曲線の開始点に移動し、マウスボタンを押したままにしてドラッグします。

  3. 次にドラッグして、作成中の曲線セグメントの弧を設定し、マウスボタンを放します。

    注意:

    Shift キーを押しながらドラッグすると、ツールの動きを 15 度単位に固定できます。

  4. 曲線セグメントの終点にペンツールを置いてから、次のいずれかの操作をおこないます。

    • C 字曲線を作成する場合は、前の方向線とは逆の方向にドラッグします。その後マウスボタンを放します。
    • S 字曲線を作成する場合は、前の方向線と同じ方向にドラッグします。その後マウスボタンを放します。
    ペンツールを使用した曲線の描画
    ペンツールを使用した曲線の描画
  5. 一連の滑らかな曲線を作成するには、引き続き別の場所からペンツールをドラッグします。

    注意:

    方向線をドラッグして、アンカーポイントの方向線を分割することもできます。

  6. 次のいずれかの操作をおこなって、パスを完成します。

    • クローズパスにする場合は、最初に作成した(白抜きの)アンカーポイントの上にペンツールを置きます。クリックまたはドラッグするとパスが閉じます。
    • パスを開いたままにするには、Esc キーを押します。

直線に続く曲線の描画

  1. ペンツール()で 2 つの場所をクリックしてコーナーポイントを設定し、直線セグメントを作成します。

  2. 選択されている端点上にペンツールを置きます。次に作成する曲線セグメントの弧を設定するには、アンカーポイントをドラッグして方向線を作成し、その後マウスボタンを放します。

  3. 次のアンカーポイントを追加する位置にペンツールを置き、新しいアンカーポイントをクリック(必要に応じてドラッグ)して、曲線を完成させます。

曲線に続く直線の描画

  1. ペンツール()を使用して、ドラッグして曲線セグメントの最初のスムーズポイントを作成し、マウスボタンを放します。

  2. 曲線セグメントの終点となる位置にペンツールを合わせ、ドラッグして曲線を完成させ、マウスボタンを放します。

  3. 選択されている端点上にペンツールを置きます。

  4. 直線セグメントの終点となる位置にペンツールを置いてクリックすると、直線セグメントが完成します。

    曲線に続く直線の描画
    曲線に続く直線の描画

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

  1. ペンツール()を使用して、ドラッグして曲線セグメントの最初のスムーズポイントを作成します。

  2. 2 番目のスムーズポイントを使用して曲線を作成するには、ペンツールを置いてドラッグします。

  3. 2 番目の曲線セグメントを終了する位置にペンツールを置き、新しいスムーズポイントをドラッグして 2 番目の曲線セグメントが完成します。

描画モードと編集モード

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

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

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

既存のパスの延長

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

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

アンカーポイントの選択

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

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

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

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

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

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

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

アンカーポイントの削除

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

描画のショートカット

描画ツール ショートカットキー(MacOS) ショートカットキー(Windows)
選択 V V
四角形 R R
楕円形 E E
L L
ペン P P
ズーム

ズームモードに切り替える:Z

  • ズームイン:Adobe XD キャンバスの任意の場所をクリックするか、目的のアートボードをクリックします。または、ズームインする領域を囲み枠で選択します。
  • ズームアウト:Option を押しながらクリック

ズームインおよびズームアウトを一時的に有効にするには:

  • スペース + Command を押してから、アートボード上の領域を囲み枠で選択してズームイン(拡大)します。
  • スペース + Command + Option でズームアウト

ズームモードに切り替える:Z

  • ズームイン:Adobe XD キャンバスの任意の場所をクリックするか、目的のアートボードをクリックします。または、ズームインする領域を囲み枠で選択します。
  • ズームアウト:Alt を押しながらクリック

ズームインを一時的に有効にするには:

  • スペース + Ctrl を押してから、アートボード上の領域を囲み枠で選択してズームイン(拡大)します。
選択範囲に合わせてズーム ⌘3 Ctrl + 3

距離の計測

オブジェクトをクリックし、Option キー(Mac)または Alt キー(Windows)を押して、オブジェクトとアートボード間、またはオブジェクトと他の周辺のオブジェクト間の距離を測定します。

注意:

選択したオブジェクトが正方形または長方形ではない場合は、XD によりオブジェクトの周りにバウンディングボックスが描画されます。次に、バウンディングボックスの境界からの測定値が表示されます。

オブジェクトの、アートボードの端からの距離を測定するには、次の手順を実行します。

オブジェクトをクリックし、Option キー(Mac)または Alt キー(Windows)を押します。

Adobe XD により距離が測定され、Option キーまたは Alt キーを押している間だけ測定値が表示されます。

オブジェクトとアートボードの端との間の距離の測定
オブジェクトとアートボードの端との間の距離の測定

アートボード内のオブジェクト間の距離を測定するには、次の手順を実行します。

オブジェクトをクリックし、Option キー(Mac)または Alt(Windows)を押して、マウスをオブジェクト上に移動します。

Adobe XD により、両方のオブジェクトの最も近距離の境界線の間の距離が測定され、Option または Alt キーを押している間だけ測定値が表示されます。

2 つのオブジェクト間の距離の測定
2 つのオブジェクト間の距離の測定

テキストツール

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

テキストツールをクリックし、テキストを開始する場所をクリックします。テキストを入力し、Esc キーを押してテキストの変更を確定するか、Return キーを押して次の行に移動します。

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

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

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

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

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

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

Experience Design へのテキストの入力
テキストツールをクリックして、テキストの入力を開始

スペルチェック

編集メニューで、「スペルチェックをオン」を選択します。 スペルチェック機能は、テキストフィールド内の間違ったテキストでのみ機能します。 スペルが間違っている単語には赤の下線が引かれ、自動修正された単語には青の下線が引かれます。文法の間違いには緑の下線が引かれます。

スペルと文法オプションをオンにする
スペルと文法オプションをオンにする

スペルが間違っている単語を右クリックし、提案されたリストからコンテキスト上正確なスペルを選択します。

スペルが正しい単語を選択する
スペルが正しい単語を選択する

自動修正されたスペルを最初に入力した単語に戻すには、Mac OS の場合は Command + Z キー、Windows OS の場合は Ctrl + Z キーを押します。

自動修正を取り消す
自動修正を取り消す
スペルを追加する
スペルを追加する

ポイントテキストとエリアテキストの切り替え

1 回クリックするだけでポイントテキストとエリアテキストを切り替えることができます。 

テキストオブジェクトを選択し、プロパティインスペクターでポイントテキストエリアテキストのオプションを切り替えます。

ポイントテキストとエリアテキストの切り替え
ポイントテキストとエリアテキストの切り替え

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

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

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

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

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

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

詳しくは、リピートグリッド内のテキストオブジェクトに改行区切りのテキストファイルをドラッグするを参照してください。

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

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

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

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

ハンドルのドラッグによるテキストのサイズ変更
ハンドルのドラッグによるテキストのサイズ変更

テキストの書式設定

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

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

テキストオブジェクト全体またはテキストの個々のセクションの書式設定
テキストオブジェクト全体またはテキストの個々のセクションの書式設定

字間、行間、および段落間の変更

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

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

テキストオブジェクト内のテキストの字間の変更
テキストオブジェクト内のテキストの字間の変更

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

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

行間の変更
行間の変更

Photoshop や InDesign と同様に、Adobe XD では、同じテキストエレメント内の段落の前後のスペースを変更できます。

段落間を変更するには、段落を選択して、書式設定パネルの段落アイコンをクリックします。必要に応じて、間隔の値を変更します。

 

段落間の設定
段落間の設定

テキストの下線

テキストに下線を引くには、テキストエリアをクリックし、プロパティインスペクター下線アイコンをクリックします。XD により、テキストのディセンダーで途切れる滑らかな下線が描画されます(より美しい線が作成されます)。

XD の下線
XD の下線

数学計算による高精度なデザインの作成

数学計算を使用して、精度の高いデザインを作成する、オブジェクトを新しい場所に移動する、またはオブジェクトの幅と高さを変更することができます。

1 つ以上のオブジェクトを選択します。プロパティインスペクターの数値を入力できるボックスで、簡単な数値計算を実行します。Adobe XD は、+、-、/、* の数学演算を使用した変更の計算をサポートしています。

例えば、現在の測定単位を使用して、選択したオブジェクトを 3 単位右に移動する場合は、現在の値の後に「+3」と入力します。


プロパティインスペクターの数値を入力できるテキストボックスで、次のいずれかの操作をおこないます。

  • 現在の値全体を数式に置き換えるには、その値全体を選択します。
  • 現在の値を数式の一部として使用するには、その値の前または後をクリックします。

 

数学計算
数学計算

注意:

Adobe XD は、一度に 1 つの演算しか実行できません。つまり、「4in + 2p」は処理できますが、「4in + 2p - 1p」は 2 つの異なる演算として解釈されるため処理できません。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー