piapia123
ja

モバイル 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)・分類の三通りで検索できます
  • 七つの分類は検索できるドロップダウンに。選ぶとその分類を一覧します
  • 空欄で全件を一覧。早見表として眺められます

使い方

  1. 機種名(例:iPhone 14 Pro)を入力すると、論理解像度と倍率が出ます
  2. または数値(例:390、44)を入力すると、それが何かを調べられます
  3. 分類で眺めたいときは「セーフエリア」などを入力するか、ドロップダウンから選んでください
  4. 空欄にすると全件を七つの分類ごとに一覧します

よくある質問

デザインは何 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 に集中」という範囲と代表的な二値、そして弾力的に作るべきという助言を与えています —— 機種一覧よりはるかに適応の役に立ちます。特定の機種についてはメーカーの公式仕様ページをご確認ください。

関連ツール