Adobe XDをもっと使いこなすヒント! 第12回 境界線の位置と形状の種類

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、境界線の位置、および、線の端と結合箇所の種類に関連する9つのツイートを取り上げます。

Tip 1. 境界線の位置を変更する

シェイプの境界線は、パスの座標を基準に、「内側」、「外側」、「中央」、の3種類から選択できます。上のビデオを見ると、小さい円の位置、すなわちパスの座標と、境界線との相対位置が変化する様子を確認できます。

シェイプの書き出しの際、書き出される画像の大きさは境界線の位置に応じて変わります。
プロパティインスペクタに表示される幅と高さはパスの位置が基準です。そのため、パスの外側に境界線がある図形(「外側」と「中央」)は、その分だけ大きな画像になります。

なお、SVGに書き出す場合は、境界線の指定がどれであれ、(いまのところ)「中央」が指定されているものとして扱われます。したがって、「中央」以外が指定されている画像をSVGに書き出した場合は、JPEGやPNGに書き出した場合とサイズが異なることになります。

Tip 2. 境界線の位置が異なる図形同士を揃える

シェイプをドラッグして他のシェイプと揃えたり、グリッドにスナップさせる際は、パスが基準として使われます。そのため、境界線の位置指定が異なるシェイプ同士(例えば、「内側」と「外側」)をドラッグ操作で整列させると、境界線の見た目は揃いません。上のビデオでその状況の例を確認できます。

同様に、「内側」以外の境界線を持つシェイプをグリッドにスナップさせると、境界線がグリッドの外側にはみ出します。

Tip 3. 線の先端の形状を変える

閉じていないシェイプでは、線の端の形状を選べます。選択肢は、線の終わりの位置の先は何も無い「線端なし」、線の端が丸くなる「丸型線端」、線端が線幅に応じて突き出る「突出線端」の3種です。
「丸型線端」と「突出線端」は、パスを引いたポイントより先まで線が引かれます

上で書いたとおり、ドラッグしてスナップさせる際はパスが基準になります。そのため、「線端なし」以外の線は、整列させても飛び出して見えるケースがあります。下のビデオでその例が確認できます。

Tip 4. 線の接合箇所の形状を変える

線の接合部の形状も、3種類から選べます。尖った形状になる「マイター結合」、丸い形状になる「ラウンド結合」、角が切り落とされる「ベベル結合」の3種類です。実際の例は上のビデオをご覧ください。

Tip 5. 破線の見た目を調整する

線を破線に変えるには、プロパティインスペクタの「境界線」の欄にある「線分」属性に数値を入力します。デフォルトでは、破線の長さと同じ値が間隔の長さに適用されます。

破線の間隔を変えたい場合は、上のビデオのように、「線分」属性の隣にある「間隔」属性のフィールドに具体的な数値を指定します。

破線にも、Tips 3で説明した線端の種類が適用されます。つまり、破線の切れ目の形状を丸くしたり、突き出させたりすることが可能です。ただし、その際には破線の間隔が「間隔」で指定された長さよりも短くなります。例えば、「線分」の値は0のまま「丸型線端」を指定して、「間隔」の値を適当に入力すると、丸いドットの点線が作成できます。

「線分」属性も「間隔」属性も、値を削除してEnterキーを押すとデフォルト値に戻ります。デフォルト値が表示されているときは、数値がイタリック体で少し薄く表示されます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.10.4

Products Featured

  • Adobe XD

Tags

タグはありません