テキストの拡大縮小Text scaling

100 ~ 225% のテキストスケーリングの例を示すヒーローの画像。Hero image showing an example of text scaling from 100% to 225%.
Windows 10 でのテキストスケーリングの例 (100% から225%)Example of text scaling in Windows 10 (100% to 225%)

概要Overview

コンピューター画面上のテキスト (モバイルデバイスからノート pc、デスクトップモニター、Surface Hub のジャイアント画面) を読むのは、多くの方にとって困難な場合があります。Reading text on a computer screen (from mobile device to laptop to desktop monitor to the giant screen of a Surface Hub) can be challenging for many people. 逆に、アプリや web サイトで使用されているフォントサイズが必要以上に大きくなるユーザーもいます。Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

広範なユーザーにとってテキストをできるだけ読みやすくするために、Windows では、OS と個々のアプリケーションの間で相対的なフォントサイズを変更することができます。To ensure text is as legible as possible for the broadest range of users, Windows provides the ability for users to change relative font size across both the OS and individual applications. 拡大鏡アプリ (これは通常、画面の領域内のすべてを拡大するだけであり、独自のユーザビリティの問題が発生する) を使用したり、ディスプレイの解像度を変更したり、DPI スケール (これは、ディスプレイと標準的な表示距離に基づいてすべてのサイズを変更する) に依存したりする代わりに、ユーザーはテキストだけを 100% (既定のサイズ) から最大 225% までの範囲でサイズ変更するための設定にすばやくアクセスできます。Instead of using a magnifier app (which typically just enlarges everything within an area of the screen and introduces its own usability issues), changing display resolution, or relying on DPI scaling (which resizes everything based on display and typical viewing distance), a user can quickly access a setting to resize just text, ranging from 100% (the default size) up to 225%.

サポートSupport

ユニバーサル Windows アプリケーション (標準と PWA の両方) では、既定でテキストのスケーリングがサポートされています。Universal Windows applications (both standard and PWA), support text scaling by default.

Windows アプリケーションにカスタムコントロール、カスタムテキストサーフェイス、ハードコーディングされたコントロールの高さ、古いフレームワーク、サードパーティのフレームワークが含まれている場合は、ユーザーにとって一貫性のある便利なエクスペリエンスを確保するために更新を行うことが必要になる場合があります。If your Windows application includes custom controls, custom text surfaces, hard-coded control heights, older frameworks, or 3rd party frameworks, you likely have to make some updates to ensure a consistent and useful experience for your users.

DirectWrite、GDI、および XAML SwapChainPanels は、テキストのスケーリングをネイティブでサポートしていませんが、Win32 サポートはメニュー、アイコン、およびツールバーに限定されています。DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

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

ユーザーは、[設定] の [画面のサイズを大きくする] スライダーを使用してテキストのスケールを調整できます。 > > の視覚/表示画面が表示されます。Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

[コンピューターの簡単操作のビジョン/表示設定] ページのスクリーンショット。 [テキストの拡大] スライダーが表示されます。Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
[設定] からのテキストスケールの設定-> 簡単なアクセス > ビジョン/表示画面Text scale setting from Settings -> Ease of Access -> Vision/Display screen

UX ガイダンスUX guidance

テキストのサイズが変更されると、テキストとその新しいレイアウトに合わせて、コントロールとコンテナーのサイズも変更する必要があります。As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. 前述のように、アプリ、フレームワーク、プラットフォームによっては、この作業の大部分が実行されます。As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. 次の UX ガイダンスでは、そうでない場合について説明します。The following UX guidance covers those cases where it's not.

プラットフォームコントロールの使用Use the platform controls

これは既に言いましたか。Did we say this already? 繰り返します。可能であれば、さまざまな Windows アプリフレームワークに用意されている組み込みのコントロールを使用して、最小限の労力で可能な最も包括的なユーザーエクスペリエンスを実現します。It's worth repeating: When possible, always use the built-in controls provided with the various Windows app frameworks to get the most comprehensive user experience possible for the least amount of effort.

たとえば、すべての UWP テキストコントロールは、カスタマイズやテンプレートを使用せずにフルテキストスケーリングエクスペリエンスをサポートします。For example, all UWP text controls support the full text scaling experience without any customization or templating.

いくつかの標準のテキストコントロールを含む基本的な UWP アプリのスニペットを次に示します。Here's a snippet from a basic UWP app that includes a couple of standard text controls:

<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% にスケーリングするアニメーション。Animation of text scaling 100% to 225%.
アニメーション化テキストの拡大縮小Animated text scaling

自動サイズ調整を使用するUse auto-sizing

コントロールに絶対サイズを指定しないでください。Don't specify absolute sizes for your controls. 可能な場合は常に、ユーザーとデバイスの設定に基づいて、プラットフォームのサイズを自動的に変更します。Whenever possible, let the platform resize your controls automatically based on user and device settings.

前の例のこのスニペットでは、一連の Auto * グリッド列にと幅の値を使用して、グリッド内に含まれる要素のサイズに基づいて、プラットフォームでアプリのレイアウトを調整できるようにします。In this snippet from the previous example, we use the Auto and * width values for a set of grid columns and let the platform adjust the app layout based on the size of the elements contained within the grid.

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

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

アプリのレイアウトを可能な限り柔軟に使用できるようにするには、テキストを含むコントロールでテキストの折り返しを有効にします (多くのコントロールでは、既定でテキストの折り返しがサポートされていません)。To ensure the layout of your app is as flexible and adaptable as possible, enable text wrapping in any control that contains text (many controls do not support text wrapping by default).

テキストの折り返しを指定しない場合は、他の方法でクリップ (前の例を参照) を含むレイアウトが調整されます。If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

ここでは、とのテキストボックスプロパティを使用して、 AcceptsReturn TextWrapping レイアウトが可能な限り柔軟になるようにします。Here, we use the AcceptsReturn and TextWrapping TextBox properties to ensure our layout is as flexible as possible.

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

テキストの折り返しで100% から225% にテキストをスケーリングするアニメーション。Animation of text scaling 100% to 225% with text wrapping.
テキストの折り返しによるアニメーション化されるテキストの拡大縮小Animated text scaling with text wrapping

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

テキストの折り返しが優先されない場合は、ほとんどのテキストコントロールを使用して、テキストをクリップするか、テキストのトリミング動作に省略記号を指定できます。If text wrapping is not the preferred behavior, most text controls let you either clip your text or specify ellipses for the text trimming behavior. 省略記号はスペース自体を占有するので、省略記号を使用することをお勧めします。Clipping is preferred to ellipses as ellipses take up space themselves.

注意

テキストをクリップする必要がある場合は、先頭ではなく文字列の末尾をクリップします。If you need to clip your text, clip the end of the string, not the beginning.

この例では、 Texttrimming プロパティを使用して TextBlock 内のテキストをクリップする方法を示します。In this example, we show how to clip text in a TextBlock using the TextTrimming property.

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

テキスト領域で100% から225% に拡大縮小するテキストのスクリーンショット。Screenshot of text scaling 100% to 225% with text clipping.
テキスト領域を使用したテキストの拡大縮小Text scaling with text clipping

ツールヒントを使用するUse a tooltip

テキストをクリップする場合は、ツールヒントを使用してフルテキストをユーザーに提供します。If you clip text, use a tooltip to provide the full text to your users.

ここでは、テキストの折り返しをサポートしていない TextBlock にツールヒントを追加します。Here, we add a tooltip to a TextBlock that doesn't support text wrapping:

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

フォントベースのアイコンまたはシンボルをスケーリングしないDon’t scale font-based icons or symbols

フォントベースのアイコンを強調または装飾に使用する場合は、これらの文字の拡大/縮小を無効にします。When using font-based icons for emphasis or decoration, disable scaling on these characters.

ほとんどの XAML コントロールで、 Istextscalefactorenabled プロパティをに設定し false ます。Set the IsTextScaleFactorEnabled property to false for most XAML controls.

テキストスケーリングのネイティブサポートSupport text scaling natively

カスタムフレームワークとコントロールで Textscalefactorchanged uisettings システムイベントを処理します。Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. このイベントは、ユーザーがシステムでテキストの拡大率を設定するたびに発生します。This event is raised each time the user sets the text scaling factor on their system.

まとめSummary

このトピックでは、Windows でのテキストスケーリングのサポートの概要について説明します。また、ユーザーエクスペリエンスをカスタマイズする方法に関する UX と開発者向けのガイダンスも紹介します。This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

API リファレンスAPI reference