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

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：ナビゲーション要素（ボトムバー、タブ、ツールバー）は、コンテナ ScrollViewと同じレベルにする必要があり、その中に含めないでください。

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

iOS： contentHuggingPriorityや contentCompressionResistancePriority、 greaterThanOrEqualToを使用してビューを拡張できるようにします。コンテンツを含むビューに定数の高さと幅を設定することを制限してください。 lessThanOrEqualTo to allow views to expand. Limit setting constant height and width for views containing content.

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 を 0 に設定します。 titleLabel上の。

Android：すべてのテキストにSP（スケール非依存ピクセル）を使用し、DP（密度非依存ピクセル）は使用しません。Android Studioのアクセシビリティリンターを利用して、SPの使用問題を検出できます。

実装

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

Android：

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

重要なポイント

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