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

Adobe XDをもっと使いこなすヒント！

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

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

#adobexd #protip series is back after my sabbatical break! Quickly and easily change your border’s location with relation to the stroke. Note that the stroke’s position doesn’t change; the border does. @adobexd pic.twitter.com/Ios4n8m2sc

— Elaine Chao (@elainecchao) August 21, 2018

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

#adobexd #protip Objects with different border alignments will export at different bitmap sizes, regardless of their reported size on the canvas. @adobexd pic.twitter.com/sYq1o2h7GR

— Elaine Chao (@elainecchao) August 23, 2018

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

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

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

#adobexd #protip Snapping and smart guides align with relation to the stroke, so you might not get the alignment you think you’ll get if your stroke positions are different. @adobexd pic.twitter.com/008ainZuHe

— Elaine Chao (@elainecchao) August 22, 2018

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

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

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

#adobexd #protip Change your path or line endcaps in the property inspector. Note that round and projecting caps extend beyond the stroke. @adobexd pic.twitter.com/QzJccZYLsJ

— Elaine Chao (@elainecchao) August 24, 2018

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

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

#adobexd #protip Remember that XD snaps to the stroke, which means paths with extended endcaps will not be snapped visually. @adobexd pic.twitter.com/6ihDxzKshF

— Elaine Chao (@elainecchao) August 27, 2018

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

#adobexd #protip Change the style of your path’s joins with a simple click in the property inspector. @adobexd pic.twitter.com/Uq1sKoayhH

— Elaine Chao (@elainecchao) August 28, 2018

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

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

#adobexd #protip Change the border’s “Dash” property with the numeric value of the dash length. XD by default fills in the same value for the gap. @adobexd pic.twitter.com/ofokV5fjCl

— Elaine Chao (@elainecchao) August 29, 2018

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

#adobexd #protip Don’t worry – that gap value is customizable with your own value. Adjust it to your heart’s content and get exactly the right value for your style. @adobexd pic.twitter.com/IDdRvGDaJT

— Elaine Chao (@elainecchao) August 30, 2018

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

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

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

#adobexd #protip Want to return to your automatically calculated value? Simply highlight, backspace, and press enter to commit. The value will display italicized to show you it’s back to reflecting the dash value. @adobexd pic.twitter.com/oJyGftvpNw

— Elaine Chao (@elainecchao) August 31, 2018

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

次回をお楽しみに！