次の方法で共有

テキストのスケーリング

100% から 225%へのテキストスケーリングの例を示すヒーロー画像。
Windows 11 (100% から 225%)

概要

コンピューター画面上のテキストの読み取りは、多くの人にとって困難な場合があります。 逆に、一部のユーザーは、アプリや Web サイトで使用されるフォント サイズが必要以上に大きいことが分かっています。

最も広い範囲のユーザーがテキストをできるだけ読みやすくするために、Windows では、ユーザーが OS と個々のアプリケーションの両方で相対フォント サイズを変更できます。 拡大鏡アプリ (通常は画面の領域内のすべてを拡大し、独自の使いやすさの問題が生じる)、表示解像度の変更、DPI スケーリング (ディスプレイと一般的な表示距離に基づいてすべてをサイズ変更する) を使用する代わりに、ユーザーはテキストのみをサイズ変更する設定をすばやくaccessできます(既定のサイズは 100% から最大 225%)。

Support

WinUI アプリでは、既定でテキストのスケーリングがサポートされています。

Windows アプリケーションにカスタム コントロール、カスタム テキスト サーフェイス、ハードコーディングされたコントロールの高さ、古いフレームワーク、またはサード パーティ製フレームワークが含まれている場合は、ユーザーにとって一貫した便利なエクスペリエンスを確保するために、いくつかの更新を行う必要がある可能性があります。

DirectWrite、GDI、XAML SwapChainPanels ではテキストのスケーリングはネイティブにサポートされませんが、Win32 のサポートはメニュー、アイコン、ツール バーに限定されます。

ユーザー エクスペリエンス

ユーザーは、[設定] -> [アクセシビリティ -> Vision/Display] 画面の [テキストを大きくする] スライダーを使用してテキストスケールを調整できます。

テキストを大きくするスライダーを示す簡単操作の視覚/表示設定ページのスクリーンショット。
設定のテキストスケール設定 -> 簡単操作 -> 視覚/ディスプレイ 画面

UX ガイダンス

テキストのサイズが変更されると、コントロールとコンテナーも、テキストとその新しいレイアウトに合わせてサイズを変更してリフローする必要があります。 前述のように、アプリ、フレームワーク、プラットフォームに応じて、この作業の多くがユーザーに提供されます。 次の UX ガイダンスでは、そうでないケースについて説明します。

プラットフォーム コントロールを使用する

私たちはすでにこれを言いましたか? 繰り返す価値があります。可能な限り、さまざまなWindows app フレームワークに付属の組み込みコントロールを常に使用して、最小限の労力で可能な限り包括的なユーザー エクスペリエンスを得ます。

たとえば、すべての WinUI テキスト コントロールは、カスタマイズやテンプレートを使用せずに、フルテキスト スケーリング エクスペリエンスをサポートします。

いくつかの標準的なテキスト コントロールを含む基本的な WinUI アプリのスニペットを次に示します。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

テキストスケーリングのアニメーション 100%から225%まで。
アニメーションテキストの拡大縮小

自動サイズ設定を使用する

コントロールの絶対サイズを指定しないでください。 可能な限り、プラットフォームがユーザーとデバイスの設定に基づいてコントロールのサイズを自動的に変更できるようにします。

前の例のこのスニペットでは、一連のグリッド列に と 幅の値を使用し、プラットフォームがグリッドに含まれる要素のサイズに基づいてアプリ のレイアウトを調整できるようにします。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

テキストの折り返しを使用する

アプリのレイアウトが可能な限り柔軟で適応可能になるようにするには、テキストを含むコントロールでテキストの折り返しを有効にします (多くのコントロールでは、既定ではテキストの折り返しがサポートされていません)。

テキストの折り返しを指定しない場合、プラットフォームでは、クリッピングを含む他の方法を使用してレイアウトを調整します (前の例を参照)。

ここでは、レイアウトが可能な限り柔軟になるように、 プロパティと TextBox プロパティを使用します。

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

テキストの折り返しで 100% 225% にスケーリングするアニメーション。
テキストの折り返しを使用したアニメーションテキストのスケーリング

テキストトリミングの動作を指定する

テキストの折り返しが優先される動作でない場合、ほとんどのテキスト コントロールでは、テキストをクリップしたり、テキストトリミングの動作に省略記号を指定したりできます。 楕円自体がスペースを占有するため、クリッピングは省略記号より優先されます。

注

テキストをクリップする必要がある場合は、先頭ではなく文字列の末尾をクリップします。

この例では、 TextTrimming プロパティを使用して TextBlock 内のテキストをクリップする方法を示します。

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

100%から225%へスケーリングするとテキストがクリップされる様子のスクリーンショット。
テキストのクリッピングを伴うテキストの拡大縮小

ツールヒントを使用する

テキストをクリップする場合は、 ツールヒント を使用して、ユーザーにフルテキストを提供します。

ここでは、テキストの折り返しをサポートしていない TextBlock にツールヒントを追加します。

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

フォント ベースのアイコンや記号をスケーリングしない

強調や装飾にフォントベースのアイコンを使用する場合は、これらの文字の拡大縮小を無効にします。

ほとんどの XAML コントロールで IsTextScaleFactorEnabled プロパティを に設定します。

テキストのネイティブ スケーリングをサポートする

カスタム フレームワークとコントロールで TextScaleFactorChanged UISettings システム イベントを処理します。 このイベントは、ユーザーがシステムでテキストの拡大縮小率を設定するたびに発生します。

概要

このトピックでは、Windows でのテキスト スケーリングのサポートの概要について説明し、ユーザー エクスペリエンスをカスタマイズする方法に関する UX と開発者向けガイダンスを示します。

API リファレンス

  • IsTextScaleFactorEnabled
  • TextScaleFactorChanged
  • Last updated on