描画ツールとテキストツールの操作

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

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

長方形と正方形の描画

楕円および円の描画

多角形の描画

多角形ツールを使用すると、三角形、菱形、五角形、星形、ハートのような様々な新しいシェイプを作成できます。

線の描画

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

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

曲線の描画

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

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

直線に続く曲線の描画

曲線に続く直線の描画

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

描画モードと編集モード

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

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

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

既存のパスの延長

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

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

アンカーポイントの選択

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

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

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

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

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

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

アンカーポイントの削除

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

描画のショートカット

距離の計測

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

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

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

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

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

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

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

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

テキストツール

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

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

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

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

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

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

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

スペルチェック

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

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

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

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

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

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

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

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

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

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

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

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

文字のサイズ変更オプション

XD には、テキストのサイズを変更する 3 つのオプションが用意されています。内容が 1 行に収まるようにテキストボックスの幅を拡大するオプション、テキストボックスの高さを動的に調整するオプション、テキスト領域の幅と高さを制御するオプションです。

デザインニーズに応じて、テキストオブジェクトを選択し、プロパティインスペクターで「自動幅調整」、「自動高さ調整」、「固定サイズ」のいずれかのオプションを選択します。

自動幅調整

フレーム、画像、オブジェクト内にテキストを追加する場合は、テキストボックスの幅を最大限に広げて、テキストを 1 行に収めることができます。

自動高さ調整

大量の文字を含むアプリケーションをデザインする場合や、スタックと組み合わせてレスポンシブデザインを作成する場合、エリアテキストの幅を変えずに、高さを動的に調整できます。

自動高さ調整を適用すると、エリアテキストの文字の高さが内容に合わせて自動的に調整されます。エリアテキストを描画する場合、このオプションはデフォルトで有効です。 

固定サイズ

パンフレットや web サイトなどのデザイン内にテキストを追加する場合、通常、1 つまたは複数の段落を追加し、テキスト領域の幅と高さを調整します。「固定サイズ」を選択すると、テキストボックス内に収まるようにテキストが折り返され、高さを超えたときには自動的に切り捨てることができます。 

固定サイズを有効にするには、プロパティインスペクターで アイコンを選択します。エリア内テキストのサイズを変更するには、すべての辺に表示されるサイズ変更ハンドルをクリックしてドラッグします。テキストがテキスト領域内に収まらない場合、XD に赤いサイズ変更ハンドルで示されます。

テキストボックスの下端にあるサイズ変更ハンドルをダブルクリックすると、テキスト領域のサイズがコンテンツに合わせて変更されます。

テキストの書式設定

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

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

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

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

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

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

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

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

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

テキスト変換

テキスト変換を適用するには、変更するテキストを選択します。プロパティインスペクターから、以下のオプションを選択します。

• 大文字アイコン（TT）：テキストをすべて大文字に設定します。
• 小文字アイコン（tt）：テキストをすべて小文字に設定します。
• 単語の先頭のみ大文字アイコン（Tt）：テキストの単語の先頭のみを大文字に設定します。
• テキストを上付き文字にするアイコン：テキストを上付き文字に設定します。
• テキストを下付き文字にするアイコン：テキストを下付き文字に設定します。

テキストの下線

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

テキストの打ち消し線

テキストに打ち消し線を引くには、テキストエリアを選択し、プロパティインスペクターから打ち消しアイコンをクリックします。テキストの中央にまっすぐ線が描かれ、テキストが取り消されたことが示されます。

全体的なスタイル変更

スタイル全体を簡単に変更するには、テキストの変換または打ち消し線を文字スタイルに適用します。

アセットパネルで、ドキュメント全体で使用するスタイルを文字スタイルとして保存します。次に、文字スタイルを右クリックし、ドロップダウンメニューから編集オプションを選択します。大文字、小文字、単語の先頭のみ大文字、または打ち消し線オプションのいずれかを選択すると、その文字スタイルを使用するテキストがドキュメント全体で変更されます。

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

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

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

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

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

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

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

ビデオ：テキストの自動高さ調整の操作方法

「テキストの自動高さ調整のコンテナは、内側のテキストの量に基づいて、高さが自動的に調整されます。 また、スタックやパディングなどのコンテンツ対応のレイアウト機能でも美しく機能します」- Dani Beaumont 氏（Adobe XD のプリンシパルプロダクトマネージャー）

テキストの自動高さ調整を操作する方法については、以下のビデオをご覧ください。

視聴時間：3 分