Xのヘッダーに重なるボタンの位置と数
2026年8月 実機計測
先に結論
- スマホアプリでは、ヘッダーの上に丸いボタンが乗ります（PCでは乗りません）
- 数はiPhoneとAndroidで規則がまったく違います。iPhoneは1〜3個、Androidは常に3個
- iPhoneは機種の世代で縦位置が約9ptずれます
- 直径はどちらも 40pt / 40dp
- ボタンは半透明です。下の絵は透けるので、模様なら置いても問題ありません
- Android（実線）
- iPhone（破線・Dynamic Island世代）
- iPhoneで切れる範囲
PCには乗りません
まず前提として、PCのWeb版ではヘッダーの上に何も乗りません。 戻るボタンなどのナビゲーションバーはヘッダーの外（上）にあります。 ボタンを気にする必要があるのはスマホアプリだけです。
数は「誰のプロフィールか」と「アカウントの種類」で変わります
| 環境 | 誰のプロフィールか | 一般アカウント | プレミアム |
|---|---|---|---|
| iPhone | 自分 | 1つ | 2つ |
| 他人 | 2つ | 3つ | |
| Android | 自分 | 3つ | 3つ |
| 他人 | 3つ | 3つ |
iPhoneの規則は単純で、プレミアムだとGrokのボタンが1つ増えます。 ところがAndroidでは一般アカウントでもGrokが出るため、4通りとも3つで固定です。 同じアプリなのに規則が違います。8通りすべて実機で確認しました。
自分の画面で確認すると数を見誤ります。 自分のプロフィールを開いたときと、他人が見たときで数が変わるためです。 ヘッダーを見るのは主に他人なので、 iPhoneなら「他人が見たとき」の2つ（相手がプレミアムなら3つ）を前提に作るのが安全です。
横の位置
ボタンは左端に1つ、右端に1〜3つ並びます。中央には来ません。
| iPhone（pt） | Android（dp） | |
|---|---|---|
| 直径 | 40 | 40 |
| 左のボタン（左端から中心まで） | 35.8 | 32.4 |
| 右1つ目（右端から） | 36.2 | 32.8 |
| 右2つ目 | 84.2 | 81.1 |
| 右3つ目 | 132.2 | 129.5 |
| 右ボタンの間隔 | 48.0 / 48.0 | 48.3 / 48.4 |
右のボタンの間隔がきれいに揃っています。 iPhoneは 48.0pt / 48.0pt で完全な等間隔、Androidも 48.3dp / 48.4dp です。 左右も iPhone 35.8 と 36.2、Android 32.4 と 32.8 でほぼ対称でした。
縦の位置は、iPhoneだけ機種の世代で変わります
ここがこのボタンの厄介なところです。 iPhoneのボタンは画面上部のセーフエリアを基準に置かれています。 セーフエリアの高さはノッチ世代とDynamic Island世代で違うので、その分ずれます。
| 世代 | セーフエリア上端 | ボタン中心の位置 |
|---|---|---|
| ノッチ世代 | 50pt | 78pt |
| Dynamic Island世代 | 59pt | 87pt |
ボタン中心 ＝ セーフエリア上端 ＋ 28pt
どちらも1つの式で説明できます。Androidは 70.1dp で、機種による変化は確認していません。
アイコンとは基準が違います。 アイコンはヘッダーの下端を基準にしているので、機種が変わっても位置は変わりません。 ボタンは画面の上端（セーフエリア）が基準なので、世代で動きます。 基準が違えば、機種によって変わるかどうかも違ってきます。
1500×500の画像でどこに来るか
| 環境 | 縦 | 横（左） | 横（右） |
|---|---|---|---|
| Android | y 183〜329 | x 45〜191 | x 954〜1453 |
| iPhone ノッチ | y 193〜327 | x 178〜311 | x 868〜1321 |
| iPhone Dynamic Island | y 213〜340 | x 175〜302 | x 891〜1323 |
| 全部を避けるなら | y 183〜340 | x 45〜311 | x 868〜1453 |
中央（x 311〜868）にはどの環境でもボタンが来ません。 ロゴや文字を置くならここが安全です。 ヘッダー全体でどこが安全かは、 Xのヘッダー画像サイズと、機種で切れる範囲にまとめています。
ボタンの下は完全には消えません
左右の切れやアイコンと違い、ボタンは半透明です。 下の絵はうっすら透けます。
| 置くもの | ボタンの下でどうなるか |
|---|---|
| 文字・ロゴ | 読めなくなる。避ける |
| 模様・背景・グラデーション | 問題なし。透けて見える |
| 顔・被写体の目立つ部分 | 暗くなるので、できれば避ける |
ボタンの範囲を「全部避けなければいけない場所」と考えると、置ける範囲が必要以上に狭くなります。 避けるべきなのは、読ませたいものだけです。
Dynamic Island について
Dynamic Island世代では、画面の上端中央に黒い領域が重なります。 実測では上端11pt・高さ37pt・幅125ptでした。 画像の上のほうの中央に文字を置くと、ここに隠れます。
ノッチ世代の切り欠きの形は計測できていません。 iOSのスクリーンショットはフレームバッファ全体を撮るため、切り欠きの部分が画像に写りません。 分かっているボタンの位置だけを正確にして、形は推測で埋めないことにしています。
どうやって測ったか
実機のスクリーンショットと、こちらで用意した元のヘッダー画像を1画素ずつ突き合わせています。 画面の画素を元画像の対応画素で割った「明るさの比」を見ると、絵柄に左右されず、Xが上に重ねたUIだけを取り出せます。
測り方を間違えたことも何度かありました。単純に暗い画素を数える方法では、背景の暗い部分をボタンと誤検出します。 Xがヘッダー上部に敷いている薄い暗幕にも気づかず、全幅が反応したこともありました。
最後は「規則性が出るか」を検算に使いました。 ボタンの直径が4つとも同じ値に揃い、右の間隔が48.0 / 48.0と等間隔になり、左右がほぼ対称になったとき、検出そのものが正しいと判断できます。 単独の数値は正しさを主張できませんが、複数の値の間の規則は主張できます。
この数値について
2026年8月時点の実機計測です。 iPhoneはノッチ世代とDynamic Island世代、AndroidはGalaxy Z Fold 7のカバー画面（411dp幅、Xアプリ 12.14.0）で確認しました。
Xのアプリは更新で表示が変わります。 実際、調査中もバージョンや機種で値が違う場面がありました。 Androidは1機種でしか確認できていません。
お使いの機種で違っていたら、計測へのご協力から教えてください。 機種名とスクリーンショット1枚あれば、そこから全部測れます。
ボタンの数を1〜3個で切り替えながら、トリミングのガイドとプレビューの両方に反映できます。 Androidは常に3個で固定です。