AdobeXDでテキストのプロパティを調整する方法

Adobe XDプロジェクトにテキストがある場合は、テキストのプロパティの変更を開始できます。これらのプロパティには、フォントファミリ、フォントサイズ、フォントの太さ、配置、文字間隔（カーニングとトラッキング）、行間隔（先頭）、塗りつぶし、境界線（ストローク）、シャドウ（ドロップシャドウ）、および背景のぼかしが含まれます。それでは、これらのプロパティがどのように適用されるかを確認しましょう。

読みやすさとフォントの選択について

フォントの選択は非常に重要です。システムには多くのフォントの選択肢があるかもしれませんが、画面上で読むための成功した選択肢としてそれをカットするのはほんの一部です。フォントの選択で探すべきいくつかの特徴は次のとおりです。

• セリフまたは非セリフ？以下に、上部にセリフスタイルのフォントファミリ、下部にサンセリフスタイルのフォントファミリを示します。セリフには、文字のストロークを終了するわずかな突起があります。一方、サンセリフにはそのようなわずかな突起はありません。サンセリフ書体はより現代的に見える傾向があり、インタラクティブなアプリケーションやWebサイトで人気があります。以前は、テキストが多いとセリフのあるフォントファミリが読みやすくなると考えられていました。アイトラッキングデバイスで実行されたテストでは、セリフとサンセリフの読みやすさに大きな違いがないことが証明されているため、以下の他のフォント特性に注意を払う限り、どちらのスタイルも自由に選択してください。

  上部にセリフ書体、下部にサンセリフ書体。

• 直線で均一な線幅：タイプはピクセルから作成されるため、テキストの幅に多くのバリエーションを持たないことが最善です。ピクセルプレビューで、幅が変化するフォント（上）と幅が一定のフォントの違いを確認できます。

  一番上のフォントには、フォントを作成する太い線と細い線のバリエーションがあります。下のフォントは一貫していて、画面上で読みやすくなっています。

• 強力なカウンター： カウンターは、「O」、「B」、「R」などの文字に見られる穴です。これらのカウンターは、画面にピクセルとして表示されたときに閉じると読みやすさの問題を引き起こす可能性があるため、これらのカウンターの大きさに注意してください。2つの異なるフォントファミリのピクセルビューが表示されます。カウンターが互いに比較してどのように見えるかを確認してください。

  フォントファミリーの選択で強力なオープンカウンターを探します。

• ディセンダーとキャップの高さ：画面で読みやすくするためには、ディセンダーを短くし、キャップの高さを低くすることが重要です。上部には、ディセンダーが短く、キャップの高さが低いフォントファミリが表示されます。下部には、長いディセンダーと高いキャップの高さを持つフォントがあります。

  ディセンダーが短く、キャップハイトが低いフォントファミリは、通常、画面上で読みやすくなっています。

フォントファミリーの選択

読みやすさのためにフォントをより適切に選択する理由がわかったので、[プロパティ]パネルを使用してフォントを選択します。選択する際に探すべきことは次のとおりです。

• フォントファミリー：画面にタイプを入力したら、それを選択して、[プロパティ]パネルの[テキスト]セクションにある[フォントファミリー]ドロップダウンメニューを選択できます。必要なフォントがわかっている場合は、[フォントファミリ]テキストボックスにフォントの名前を入力し始めるだけで、システムにある場合はリストに表示されます。

  AdobeTypeKitを介して利用できるフォントがあることを忘れないでください。

• フォントの太さ：フォントファミリを選択した後、[フォントの太さ]ドロップダウンメニューから太さを選択できます。システムにあるフォントに応じて、フォントの太さを選択できます。

  フォントファミリーとフォントの太さを選択します。

• フォントサイズ： [フォントサイズ]テキストボックスにフォントサイズを入力するだけですが、どのサイズが最適かわからない場合は、[フォントサイズ]テキストボックスの下にカーソルを置いてクリックしてドラッグします。ドラッグする前に、両方向の矢印を探してください。上にドラッグするとサイズが小さくなります。ダウンするとサイズが大きくなります。

  クリックしてドラッグし、フォントサイズを視覚的に変更します。

• 配置： [プロパティ]パネルの[テキスト]セクションにある[配置]ボタンを使用して、選択したテキストを[左揃え]、[中央揃え]、または[右揃え]に変更できます。
• 文字間隔： 文字間隔とは、文字間の間隔を指します。これは追跡として知られています。ここでは、文字間の間隔を広げた結果を確認できます。

  通常の間隔の文字。0（ゼロ）に設定してから150に設定します。

文字間隔を視覚的に変更するために、[フォントサイズ]テキストボックスで使用できるのと同じクリックアンドドラッグ手法を使用できることに注意してください。

クリックしてドラッグすることで、文字間隔のサイズを視覚的に変更することもできます。

• 行の高さ： 行の高さが先頭にあり、テキストの行の間のスペースです。これは情報デザインにおいて重要な役割を果たす可能性があるため、デザイン全体でこれを一貫して使用していることを確認してください。カーソルを[行の高さ]テキストボックスの下に置き、クリックして上下にドラッグし、行の高さを増減することもできます。
• 色： [プロパティ]パネルの[塗りつぶしの色]の横にあるボックスをクリックして、塗りつぶしの色を変更します。このタスクは、他の形状の場合と同じ方法で実行します。[塗りつぶし]ボックスを選択し、カラーピッカーから色を選択します。カラーピッカーの右側にある透明度スライドから、テキストの透明度を選択することもできます。
• 境界線：境界線を適用すると、テキストの周囲にストロークが配置されます。読みやすさの問題が発生する可能性があるため、これはお勧めしません。控えめに、おそらく特殊効果のためにのみ使用してください。下の画像は、暗い背景に細いストロークと白い塗りつぶしがある大きな書体の例を示しています。このような状況では、境界線は機能しますが、小さいテキストでは機能しません。

  暗い背景に白い塗りつぶしの小さな境界線。