モバイルテキストスケーリングガイド

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

モバイルアプリケーションはWCAG 1.4.4テキストのリサイズに準拠し、情報や機能性を損なうことなく、より大きなフォントサイズを必要とするユーザーのためにコンテンツをスケーリングする必要があります。このガイドでは、iOSおよびAndroidプラットフォームでテキストスケーリングをサポートするための推奨方法を紹介します。

プラットフォーム固有の機能

iOS - ダイナミックタイプ

ダイナミックタイプは、ユーザーの好みに基づいて、iOS全体でフォントサイズをスケーリングできるアクセシビリティ機能です。このオプションはデバイスのアクセシビリティ設定で見つかります。 Appleのテキスト表示についての詳細はこちら上の。

Android - テキストと表示スケーリング

Androidデバイス13以上では、アクセシビリティ設定で好みのテキストとコンテンツサイズを変更できます。ユーザーはフォントサイズと表示サイズを独立して調整できます。これらの設定の変更についての詳細は Googleのテキストと表示設定ガイド上の。

ビューの準備

コンテンツがスクロール可能であることを確認

iOS: テキストが大きなフォントサイズにスケールされると、重要なコンテンツが画面外に押し出される可能性があります。すべてのスクリーンでコンテンツがある場合はUIScrollViewまたはScrollViewを実装してください。

Android: レイアウト要素（制約、線形、相対）のコンテナとしてScrollView要素を使用します。ScrollViews は画面の高さ（または水平方向のスクロールの場合は幅）が埋まるまでスクロールしません。

例外：

Android: RecyclerViewsはScrollView内に埋め込む必要はありません。アイテムを縦や横に拡張させることを許可します。
Android: Navigation elements (bottom bars, tabs, toolbars) should be at the same level as the containing ScrollView, not within it.

コンテンツが拡張可能であることを確認

iOS: contentHuggingPriority、contentCompressionResistancePriority、greaterThanOrEqualTo、lessThanOrEqualToを活用してビューを拡張できるようにします。コンテンツを含むビューの高さと幅を固定することを制限します。

Android: テキストのリサイズに関する問題の多くは、ビューの高さや幅を制限しないことで解決できます。TextViewが制約を設定した際に拡張可能にします。高さにはwrap_content、幅にはmatch_parentまたは0dpを使用します。

レイアウト固有の考慮事項

Android ConstraintLayout: ビューの幅をmatch_parent、高さをwrap_contentに設定するか、制約間のスペースを埋めるために0dp幅を使用します。常にコンポーネントが縦に拡張できることを確認してください。

Android RelativeLayout: コンポーネントが画面内に留まるように、兄弟要素の開始と終了のガイドラインを定義します。

Android LinearLayout: ScrollView内にあり、match_parent高さを設定しない場合は、コンテンツサイズの変更に適応できます。特定の高さ要求にはandroid:minHeightを使用します。

行数を設定する

iOS: オーバーフローの可能性があるテキストにはnumberOfLinesプロパティを0に設定します。UIButtonの場合は、numberOfLinesをtitleLabelの0に設定します。

Android: すべてのテキストにはDPではなくSP（スケール依存ピクセル）を使用してください。SP使用の問題を見つけるためにAndroid Studioのアクセシビリティリンターを利用できます。

実装

iOSの実装

SwiftUIビュー（iOS 14+）

デフォルトフォントを使用する場合：

.font(.system(.largeTitle, design: .rounded))

カスタムフォントを使用する場合：

.font(.custom("FontName", size: 16, relativeTo: .body))

UIKitビュー

デフォルトフォントを使用する場合：

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

UIFontMetricsを使用してカスタムフォントを設定する場合：

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

手動で動的タイプを処理する場合：

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Androidの実装

基本設定：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

ConstraintLayoutの例：

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

プログラムによるテキストの修正：

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

テストとベストプラクティス

一般的なガイドライン

コンテンツが期待通りに表示されることを確認するために、さまざまなフォントサイズに対してテストします。
見出しを短くして、アクセシビリティを向上させます。
不適切な制約によって操作性が損なわれないことを確認してください。
すべてのテキストコントロールがスケーリングをサポートし、コンテンツが画面外に押し出されることのないようにします。

プラットフォーム固有の考慮事項

iOS:

Appleのタイポグラフィガイドラインおよび動的タイプサポートのドキュメントに従ってください。
適切なTextStyles（.body、.title1、.caption1など）を使用してください。
SwiftUIでは、多くの考慮事項がデフォルトで提供されていますが、確認する必要があります。

Android:

ツールバーには短いタイトルを使用し、動的なタイトルにはツールバーウィジェットを使用しないでください。
ボトムナビゲーションには、説明的なコンテンツ説明付きの明確なアイコンを提供してください。
タブ、ViewPager、およびTabListコンポーネントには、スクロール可能なビューを利用してください。
コントロールの高さを制限しないでください。

重要なポイント

オーバーフローする可能性のあるコンテンツに常にスクロール可能なコンテナを実装するを使用します。
プラットフォームに適したスケーリング単位を使用する（AndroidではSP、iOSではTextStyles）。
異なるフォントサイズやアクセシビリティ設定に応じた徹底的にテストする。
ビューが拡張できるようにする、固定された寸法に制約するのではなく。
最適なユーザー体験のためにプラットフォームのガイドラインに従う。