モバイルUIにおけるサイズについて

画面サイズ

内部で持っている解像度の数値をdp / ptと呼ぶ

各端末形式における、解像度設計の目安（実戦用）

Android：360～400dp を基準設計（横幅）

iPhone：375～430pt を基準設計（横幅）

iPad：820pt以上 設計が必要（レスポンシブ対応）

table:ReactNative タップ領域・文字サイズ目安

目的 推奨サイズ 備考

タップ可能領域 44〜48dp以上 iOS/Android共通で推奨。ミス防止のため広めに取る

本文サイズ 14〜16dp 可読性重視。小さくても12dp以上推奨

見出しサイズ 18〜24dp 目立たせたいなら24dp以上

table: ReactNativeで使用する単位

単位 説明 備考

dp / px（数値） React Nativeでは基本「数値 = dp」扱い iOS/Android間で自動スケーリングされる

Percentage（%） 画面サイズに対する割合指定 レスポンシブ設計に有効

PixelRatioとスケール計算

React Nativeでは端末ごとのピクセル密度（PixelRatio）を取得・利用可能。

code:js

import { PixelRatio } from 'react-native';

const scale = PixelRatio.get(); // 例: iPhoneなら 2 or 3

table:各デバイスの推奨サイズのサマリ

目的 Android（dp / sp） iOS（pt） メモ

タップ可能領域 小：48dp 小：44pt 片手操作なら大サイズ推奨

大：56～64dp 大：50～60pt

本文サイズ 小：12sp 小：11pt 小サイズは最低ライン、長文や高齢者向けは大サイズ推奨

大：16sp 大：16pt

見出しサイズ 小：18sp 小：17pt（iOS標準） 強調したいなら大きめが◎

大：24～28sp 大：22～28pt

table:Android端末の単位系

単位 読み方 主な用途 特徴・備考

dp（dip） density-independent pixel UIサイズ 基本単位。画面密度に依存せずスケーリングされる

sp scale-independent pixel 文字サイズ ユーザーの文字サイズ設定に連動する

px pixel 物理ピクセル 基本非推奨。ピクセル密度によって見え方が変わる

pt / in / mm ポイント / インチ / ミリ 印刷系 or 特殊用途 実用ではほぼ使わないが存在はする

実運用のポイント

UIサイズ指定 → dp

文字サイズ指定 → sp

物理ピクセル操作は非推奨（計算ミスしやすい）

table:iOS端末の単位系

単位 読み方 主な用途 特徴・備考

pt point UIサイズ / 文字サイズ iOSの基本単位。解像度に依存せずスケーリングされる

px pixel 物理ピクセル Retinaなど高解像度端末だと「1pt = 2px or 3px」になる

CGFloat シージーフロート 数値型（単位ではない） レイアウトや計算時によく使われる型

実運用のポイント

UIも文字も pt（ポイント） 指定が基本

画像やピクセル計算時のみ px を意識する

1ptの物理サイズは端末によって違う（UIScreen.main.scale で取得）

---

資料

操作対象の各UI要素には、少なくとも48dp×48dpのタップターゲットサイズを推奨

dpはdensity-independent pixel、spは文字サイズ用でユーザー設定に追従する

タッチ操作可能な部品は余白を含めて48dpを最小単位とするべき

すべてのタッチターゲットは44pt以上必要

視認性確保のため文字サイズは最小11pt以上推奨

タップ領域は44dp以上確保するのがベストプラクティス

文字サイズは14sp〜16sp程度が可読性の目安

PixelRatio.get() でデバイスのピクセル密度を取得可能

Dimensions APIでデバイスの画面サイズを取得しレイアウトに活用

モバイルターゲットサイズは48px（約9mm）が基本、押しやすさ優先

iOS HIGでは最小タップ領域44pt、文字は11pt以上が読みやすい基準

16px〜18px

42px〜72px, 60px推奨