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

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

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

長方形と正方形の描画

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

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

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

    角丸長方形および正方形の描画
    角丸長方形および正方形の描画

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

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

    角丸を 1 つずつ調整
    角丸を 1 つずつ調整


楕円および円の描画

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

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

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

    ドラッグして円のサイズを変更します。
    Shift キーを押しながらドラッグして円のサイズを変更します。

線の描画

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

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

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

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

注意:

チュートリアル:Draw icons and shapes for your design(デザイン用にアイコンとシェイプを描画する)

Adobe XD CC でペンツールを使用して、画像を描画する方法を説明します。

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

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

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

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

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

    注意:

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

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

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

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

曲線の描画

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

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

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

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

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

    注意:

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

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

    • C 字曲線を作成する場合は、前の方向線とは逆の方向にドラッグします。その後マウスボタンを放します。
    • S 字曲線を作成する場合は、前の方向線と同じ方向にドラッグします。その後マウスボタンを放します。
    曲線の描画
    ペンツールを使用して曲線を描画します。

  5. 一連の滑らかな曲線を作成するには、引き続き別の場所からペンツールをドラッグします。

    注意:

    アンカーポイントの方向線を分割するには、Option キーを押しながら方向線をドラッグします。

  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テキストの書式設定

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

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

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

字間および行間の変更

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

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

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

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

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

行間の変更
行間の変更

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

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