テキストのスケーリング

Windows 11 でのテキストスケーリングの例 (100% から 225%)

概要

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

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

Support

ユニバーサル Windows アプリケーション (標準と PWA の両方) では、既定でテキストのスケーリングがサポートされます。

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

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

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

ユーザーは、[設定] -> [簡単操作] -> Vision/Display 画面の [テキストを大きくする] スライダーを使用して、テキストスケールを調整できます。

設定のテキストスケール設定 -> 簡単操作 -> ビジョン/表示画面

UX ガイダンス

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

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

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

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

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

<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>

アニメーションテキストの拡大縮小

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

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

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

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

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

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

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

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

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

テキストの折り返しを使用したアニメーションテキストのスケーリング

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

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

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

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

テキストのクリッピングを伴うテキストの拡大縮小

ツールヒントを使用する

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

ここでは、テキストの折り返しをサポートしていない 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 プロパティを false に設定します。

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

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

概要

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

関連資料

API リファレンス

• IsTextScaleFactorEnabled
• TextScaleFactorChanged