Adobe XDをもっと使いこなすヒント！ 第35回 テキストツールの使い方
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、テキストツールの使い方に関する10のツイートを取り上げます。
Tip 1. テキストエリアを作成する
#adobexd #protip With the text tool selected (T), you can click to create point text that resizes with the text inside, or drag to create area text that enables text to reflow dynamically. @adobexd pic.twitter.com/EdzTX1nhas
— Elaine Chao (@elainecchao) May 13, 2019
ツールバーからテキストツールを選択するかショートカットキー (T) を押すと、アートボード上にテキストエリアを作成できます。
XDのテキストエリアには、テキストを一行に表示するポイントテキストと複数行に表示するエリアテキストがあります。アートボードをクリックするとその場所にポイントテキストを作成できます。エリアテキストをつくる場合は、アートボード上をドラッグして領域を指定します。
#adobexd #protip Quickly switch between area text and point text through the property inspector. @adobexd pic.twitter.com/weFAPcnSpw
— Elaine Chao (@elainecchao) May 20, 2019
作成したテキストエリアを、後からポイントテキストにしたりエリアテキストにしたりと切り替えることができます。プロパティインスペクタ内のテキストのブロック内に、切り替え用のアイコンが用意されています。
Tip 2. ポイントテキストを操作する
#adobexd #protip Point text’s single handle resizes the text inside the text box. @adobexd pic.twitter.com/XbS7As04PM
— Elaine Chao (@elainecchao) May 15, 2019
ポイントテキストでは、領域のサイズと連動してテキストのサイズが変わります。テキスト領域の中央下に表示される小さな円を上下にドラッグすると、テキストサイズを変更できます。
#adobexd #protip That single handle on your point text can also be used to quickly rotate your text object. Just hover slightly outside the handle to change to the rotation handle. @adobexd pic.twitter.com/yIvwlGsI1e
— Elaine Chao (@elainecchao) May 16, 2019
円形のハンドルはテキストを回転させるために使うこともできます。円の少し外側にカーソルを置くと形状が変化する場所があるので、その状態でカーソルを左右にドラッグして、テキストを回転させます。
Tip 3. エリアテキストを操作する
#adobexd #protip The handles on area text are used to resize the container in which the text flows. If you have additional text, it will correctly flow in the box and will show as much text as can fit within the bounds. @adobexd pic.twitter.com/zuucuWVctc
— Elaine Chao (@elainecchao) May 17, 2019
エリアテキストは、周囲に表示される9つの円形のハンドルを使ってサイズを変更できます。移動したい辺または角のハンドルをドラッグするとテキストエリアの大きさが変わり、それに合わせてテキストの再配置が自動的に行われます。ポイントテキストのように大きさが変わることはありません。
ポイントテキストと同様の操作により回転させることもできます。
#adobexd #protip Want to know if there’s extra text in your area text that is not shown because it’s clipped? Check the bottom middle handle. If it’s filled, you have extra text that isn’t shown to the user. @adobexd pic.twitter.com/H90o90ALX6
— Elaine Chao (@elainecchao) May 14, 2019
エリアテキストの領域から溢れて表示されていないテキストがあるかどうかを知りたいときは、下辺中央のハンドルを確認しましょう。円の中に黒い点が表示されていたら、隠れているテキストがあることを伝えています。
Tip 4. 行間を調整する
#adobexd #protip Adjust the line spacing of a text object using the property inspector. @adobexd pic.twitter.com/AFRB8SFzrE
— Elaine Chao (@elainecchao) May 23, 2019
行間を調整するには、プロパティインスペクタに適当な数字を入力します。行間の他にも文字間隔と段落の間隔を調整する入力フィールドが用意されています。
#adobexd #protip Want to return to the default line spacing? Enter 0 in the line spacing parameter in the property inspector. @adobexd pic.twitter.com/RsTcf70l3Q
— Elaine Chao (@elainecchao) May 24, 2019
デフォルトの設定に戻したいときは、入力欄に0を指定します。確定すると、自動的にデフォルトの数値と置き換わります。
Tip 5. 文字の属性を指定する
#adobexd #protip New in the May release – switching from sentence case to all caps and all lower case is a cinch through the text transformation buttons in the property inspector. @adobexd pic.twitter.com/Vpo2gJN29I
— Elaine Chao (@elainecchao) May 21, 2019
単語の文字をすべて大文字あるいは小文字にしたり、先頭の文字だけ大文字にするボタンがプロパティインスペクタに追加されています。英語を扱うときに便利な機能です。
#adobexd #protip Also new in the May release: draw a line through your text using the new strikethrough style. @adobexd pic.twitter.com/mTbOrbNd51
— Elaine Chao (@elainecchao) May 22, 2019
文字に打ち消し線と下線を引くことができます。日本語テキストの下線は途切れずに引かれます。さらに、上付き文字と下付き文字も設定できます。それぞれ専用のボタンをクリックして指定します。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！