もうレイアウトは崩れない！React Nativeのフォントスケーリング対策とアクセシビリティ

2025-06-06

It's a custom property
You might be referring to a property implemented within a specific project or a third-party library, not a core React Native feature.
It's a very niche or outdated concept
While less likely for a core feature, it's theoretically possible.

It's highly likely that:

You might be looking for information related to allowFontScaling, which is a standard Text component prop in React Native that controls whether the font size of the text scales with the device's font size settings.
There might be a misunderstanding or a typo in the property name. Perhaps you are thinking of a different property, or the name you're referring to is part of a non-standard usage.
You might be encountering a custom property defined within a specific project, a third-party library, or a highly customized component. In such a case, the errors and troubleshooting would depend entirely on how that custom property is implemented.

If you are seeing maxFontSizeMultiplier in your code, please provide more context, such as:

What is the surrounding code? This might help identify if it's a custom prop or part of a larger component.
Where did you find this property? Is it in a specific library's documentation, an example, or your own codebase?

As I've explained in our previous interactions, maxFontSizeMultiplier is not a standard or commonly recognized property of the Text component in React Native.

Therefore, there are no official or widely used example codes for it because it doesn't exist as a built-in feature.

If you are seeing maxFontSizeMultiplier in a React Native context, it is almost certainly:

A custom prop
Someone in your project or a third-party library has created a custom component that accepts a prop named maxFontSizeMultiplier to control font scaling in a specific way. In this case, the implementation and usage would be unique to that custom component.

Are you perhaps confusing it with allowFontScaling?
Are you working on a pre-existing codebase where this property is used? If so, can you share a snippet of how it's being used?
Are you looking at a specific third-party library's documentation? If so, which one?

maxFontSizeMultiplier というプロパティは、一部のライブラリやカスタム実装で見られることがありますが、React Native のコアでは存在しません。代わりに、以下の代替手段が一般的に用いられます。

allowFontScaling プロパティの使用

最も基本的な方法は、Text コンポーネントに用意されている allowFontScaling プロパティを使用することです。

allowFontScaling={false}
ユーザーのデバイス設定に関わらず、指定された fontSize が維持されます。
allowFontScaling={true} (デフォルト)
ユーザーのデバイス設定に応じてフォントサイズが拡大・縮小されます。

使い分け

レイアウトの崩壊を防ぎたい場合
タイトルやアイコンなど、特定のテキストが拡大されるとレイアウトが著しく崩れる可能性がある場合に限り、allowFontScaling={false} を検討します。ただし、これはアクセシビリティの観点からは非推奨とされることが多いです。
アクセシビリティを重視する場合（推奨）
ほとんどのテキストで allowFontScaling={true} を維持し、ユーザーの好みに合わせるべきです。

コード例

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.defaultText}>
        このテキストはデバイスのフォント設定に追従します。（デフォルト）
      </Text>
      <Text style={styles.fixedText} allowFontScaling={false}>
        このテキストはデバイスのフォント設定に追従しません。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  defaultText: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
  fixedText: {
    fontSize: 16,
    color: 'red',
    textAlign: 'center',
  },
});

export default App;

グローバル設定

アプリ全体で allowFontScaling のデフォルト値を変更したい場合は、アプリのエントリーポイント（例: index.js または App.js）で Text.defaultProps を上書きする方法があります。

import { Text, TextInput } from 'react-native';

// アプリ起動時に一度だけ実行
if (Text.defaultProps == null) {
  Text.defaultProps = {};
}
if (TextInput.defaultProps == null) {
  TextInput.defaultProps = {};
}

Text.defaultProps.allowFontScaling = false; // 全てのTextコンポーネントでフォントスケーリングを無効にする
TextInput.defaultProps.allowFontScaling = false; // 全てのTextInputコンポーネントでフォントスケーリングを無効にする

// 以降、通常のAppコンポーネントをエクスポート
// export default App;

注意点
allowFontScaling = false をグローバルに設定することは、アクセシビリティの観点から強く非推奨とされています。ユーザーのフォントサイズ設定を無視すると、視覚に障がいのあるユーザーがアプリを利用できなくなる可能性があります。

PixelRatio.getFontScale() を利用した動的なフォントサイズ調整

ユーザーのフォントスケールをプログラムで取得し、それを基にフォントサイズを動的に調整する方法です。これにより、極端な拡大を防ぎつつ、ある程度の柔軟性を持たせることができます。

PixelRatio.getFontScale() は、デバイスのシステム設定におけるフォントスケール（例えば、標準が1.0の場合、2倍に設定されていれば2.0）を返します。

コード例

import React from 'react';
import { View, Text, StyleSheet, PixelRatio } from 'react-native';

const FONT_BASE_SIZE = 16; // 基準となるフォントサイズ
const MAX_FONT_SCALE_MULTIPLIER = 1.5; // 最大フォントスケール倍率

const App = () => {
  const fontScale = PixelRatio.getFontScale();
  
  // ユーザーのフォントスケールを考慮しつつ、最大倍率を設定
  const adjustedFontScale = Math.min(fontScale, MAX_FONT_SCALE_MULTIPLIER);
  const scaledFontSize = FONT_BASE_SIZE * adjustedFontScale;

  return (
    <View style={styles.container}>
      <Text style={[styles.text, { fontSize: scaledFontSize }]}>
        現在のフォントスケール: {fontScale.toFixed(2)}{'\n'}
        調整後のフォントサイズ: {scaledFontSize.toFixed(2)}px
      </Text>
      <Text style={styles.normalText}>
        このテキストは常に16pxで表示されます。
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    marginBottom: 20,
    textAlign: 'center',
  },
  normalText: {
    fontSize: 16,
    color: 'blue',
    textAlign: 'center',
  },
});

export default App;

この方法では、MAX_FONT_SCALE_MULTIPLIER を設定することで、フォントが拡大されすぎないように制限できます。例えば、MAX_FONT_SCALE_MULTIPLIER を 1 に設定すれば、allowFontScaling={false} と同様の効果が得られますが、より細かく制御できます。

より複雑なロジックを適用したい場合や、一貫したフォントスケーリングをアプリ全体で実現したい場合は、カスタムユーティリティ関数を作成するのが効果的です。

例として、画面幅に基づいてフォントサイズを調整し、さらにユーザーのフォントスケール設定にも対応するような関数を考えられます。

import { Dimensions, PixelRatio } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

// 基準となる画面幅（例: iPhone 11の幅）
const BASE_WIDTH = 375;

// フォントサイズを画面幅に基づいて調整する関数
export const scaleFontSize = (size) => {
  const scale = SCREEN_WIDTH / BASE_WIDTH;
  const newSize = size * scale;
  
  // ユーザーのフォントスケールと組み合わせる（必要に応じて制限を設ける）
  const fontScale = PixelRatio.getFontScale();
  const MAX_USER_FONT_SCALE = 1.5; // ユーザーのフォントスケールが適用される最大倍率
  const effectiveFontScale = Math.min(fontScale, MAX_USER_FONT_SCALE);

  return Math.round(newSize * effectiveFontScale);
};

// アプリケーションでの使用例
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { scaleFontSize } from './utils/fontScaling'; // 上記のユーティリティをインポート

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: scaleFontSize(20), marginBottom: 10 }}>
        大見出しテキスト
      </Text>
      <Text style={{ fontSize: scaleFontSize(16) }}>
        本文テキスト
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export default App;

このアプローチでは、以下の利点があります。

一貫性
アプリ全体で同じスケーリングロジックを適用できます。
アクセシビリティ
ユーザーのフォント設定をある程度尊重しつつ、極端な拡大を制限できます。
応答性
画面サイズに応じてフォントが適切にスケーリングされます。

Text#maxFontSizeMultiplier という直接的なプロパティはReact Nativeにはありませんが、allowFontScaling プロパティや PixelRatio.getFontScale() を利用した動的なサイズ調整、さらにはカスタムユーティリティ関数を組み合わせることで、ユーザーのアクセシビリティとアプリのレイアウトの両方を考慮した柔軟なフォントスケーリングを実現できます。