モバイル UI サイズ
早見表処理はすべてブラウザ内で完結します。データは送信されません
モバイルの画面を作るときに何度も引く数字を一つの表にまとめました。機種の論理解像度(デザインを何 pt 幅で作るか)、セーフエリア(ノッチ・Dynamic Island・ホームインジケータにどれだけ空けるか)、タッチターゲットの最小サイズ(押せる大きさの下限)、iOS と Material の文字サイズ段階、余白と角丸、そしてブレークポイントです。機種名・数値・分類のいずれからでも引けます。 これらの数字を扱ううえでの分寸。 タッチターゲットが小さければ押せませんし、文字サイズを誤れば実機で大きすぎたり読めなかったりします —— 間違えると現実に影響が出る種類のデータです。そこで三つの原則を置いています。第一に、公式の規定または公式の推奨値だけを収録すること。タッチターゲットは Apple・Google・W3C が明記した値、文字サイズは各社の公式な段階、余白と角丸は公式デザインシステムの階梯、ブレークポイントは Material 3 のウィンドウ サイズ クラスです —— 経験で見積もった値は一つもありません。第二に、機種データは検証できるものでなければならないこと。そして新機種ごとに変わり得るため、画面に検証時点を明記し、メーカーのページを優先するよう求めています。第三に、「公式の規定」と「業界の慣習」を分けて書くこと。前者はそのまま、後者は慣習であると説明に明示し、規定に混ぜません。 一つはっきり書いておくべき点があります。Android に統一された画面幅はありません。メーカーごとの dp 幅は 360〜412 に集まっているので、特定の幅に決め打ちせず、その範囲を弾力的なレイアウトで受け止めるのが確実です。
機能
- 一般的な iPhone・iPad の論理解像度(pt)、倍率、実解像度
- Android で一般的な dp 幅。統一値がないことも明記
- セーフエリア:Dynamic Island 機 59pt、ノッチ機 47pt、ノッチなし 20pt、ホームインジケータ 34pt
- Android のステータスバー 24dp、ナビゲーションバー 48dp
- 最小タッチターゲット:Apple 44×44pt、Material 48×48dp、WCAG AA 24×24px、WCAG AAA 44×44px
- iOS の文字サイズ段階 11 段(Large Title 〜 Caption 2)
- Material 3 の文字サイズ段階 15 段(Display 〜 Label)
- 余白の基準 8pt / 8dp と一般的な段階、Material 3 の六つの角丸レベル
- Material 3 の五つのウィンドウ サイズ クラス(ブレークポイント)
- 機種名・数値(390、44)・分類の三通りで検索できます
- 七つの分類は検索できるドロップダウンに。選ぶとその分類を一覧します
- 空欄で全件を一覧。早見表として眺められます
使い方
- 機種名(例:iPhone 14 Pro)を入力すると、論理解像度と倍率が出ます
- または数値(例:390、44)を入力すると、それが何かを調べられます
- 分類で眺めたいときは「セーフエリア」などを入力するか、ドロップダウンから選んでください
- 空欄にすると全件を七つの分類ごとに一覧します
よくある質問
- デザインは何 pt 幅で作り始めるべきですか?
- iOS では 375pt と 390pt が二つの一般的な起点です。375 は旧来の基準(iPhone SE や 8 の世代)、390 は iPhone 12 以降で一般的な幅で、偶数なので半分や三分割がしやすい。唯一の正解はありませんが、一つの幅に決め打ちしないでください —— 同じデザインがおよそ 375〜440 の範囲で成立する必要があるため、幅ごとに版を作るのではなく、弾力的なレイアウト・パーセンテージ・適応的な制約で受け止めます。Android も同じ理屈で、dp 幅は 360〜412 に集まっています。
- 機種データは古くなりますか?
- はい、必ずなります。 新機種のたびに新しい論理解像度が生まれ得るためで、本ツールは検証時点を画面に明記しています。したがって既存の機種を調べるのに使い、発表されたばかりの機種についてはメーカーのページを優先してください。常用機種に絞り、網羅を狙わないのはこのためです —— 「全機種収録」を名乗る表こそ、どこか一箇所が静かに古くなるものです。
- タッチターゲットの四つの数値はどれを使えばいいですか?
- プラットフォームと準拠要件によります。iOS アプリなら Apple の 44×44pt、Android アプリなら Material の 48×48dp —— どちらも各プラットフォームの公式規定なので、そのまま従ってください。ウェブの場合は WCAG に注意が必要です。AA は 24×24px しか求めず、上の二つよりかなり緩く、さらに「ターゲット間に十分な間隔がある」という代替手段も認めています。AAA の 44×44px は Apple の数値と一致します。実務的には 44px で作るのがおすすめです —— 三つの基準すべてを満たし、4pt の差は指では分かりませんが、準拠上の問題をまとめて避けられます。
- Android が pt ではなく dp を使うのはなぜですか?
- 同じ考え方に二つの名前が付いているだけです —— どちらも画素密度に依存しない論理単位で、iOS は point、Android は density-independent pixel と呼びます。どちらもシステムが画面密度に応じて物理ピクセルへ換算するため、幅 360dp の Android 端末と 375pt の iPhone は物理的に近い大きさになります。CSS で対応する概念はデバイス非依存の CSS ピクセルです。名前が違うと別物に見えますが、換算の理屈は同一です。
- Android の具体的な機種がないのはなぜですか?
- 機種が多すぎ、解像度も雑多で、列挙するとかえって誤解を招くからです。どの機種表も使用中の端末の多くを落としますし、落ちたものが利用者の手元にある可能性こそがあります。そこで Android 側は「dp 幅は 360〜412 に集中」という範囲と代表的な二値、そして弾力的に作るべきという助言を与えています —— 機種一覧よりはるかに適応の役に立ちます。特定の機種についてはメーカーの公式仕様ページをご確認ください。
関連ツール
用紙サイズ
早見表ISO A・B・C 判と北米サイズの mm・cm・インチ、および 72 / 150 / 300 DPI でのピクセル数を掲載。ブラウザ内で完結し、オフラインでも使えます。
記号の英語名
早見表記号の英語名と中国語名を調べます。~ は tilde、# は number sign であり hash、| は pipe。英語のドキュメントを読むときの対照表です。
単位換算
変換長さ・重さ・温度・エネルギー・圧力・流量・力・密度など 26 分類の単位を換算します。1つ値を入れると、同じ分類の全単位での結果が一度に見られます。
元素周期表
早見表元素の原子番号・名称・原子量・分類・周期・族・電子配置を検索。周期や分類ごとの一覧も出せます。
干支・動物調べ
早見表年から干支と動物を、動物名から該当する年を調べます。前後の年も一覧表示し、旧正月との境目についても明記します。
中国歴代王朝
早見表年からその時代の王朝を、王朝名から期間・都・建国者を調べます。並立した政権も併記し、空欄では一覧を表示します。