Xのヘッダー画像サイズと、機種で切れる範囲
2026年8月 実機計測
先に結論
- 作るサイズは 1500 × 500 px（3:1）。これは変わりません
- ただしiPhoneのアプリでは、左右が片側 8.33%（各 125px）切り落とされます
- PCとAndroidでは切れません。切れるのはiPhoneだけです
- さらに左下はアイコンに隠れ、上部には丸いボタンが重なります
- 文字やロゴは x 430〜1370 / y 350〜500 の中に置くと、どの環境でも見えます
- iPhoneで切れる（左右 各125px）
- ボタンが乗る（半透明なので透ける）
- アイコンに隠れる
- どの環境でも見える
なぜiPhoneだけ切れるのか
ヘッダーの表示領域の縦横比が環境によって違うためです。
| 環境 | 表示領域の比率 | 左右の切れ |
|---|---|---|
| PC Web | 3:1 | なし |
| Androidアプリ | 3:1 | なし |
| iPhoneアプリ | 2.5:1 | 片側 8.33% |
iPhoneの表示領域は 2.5:1 で、3:1より縦長です。 そこに3:1の画像を高さいっぱいに合わせて表示するので、幅が余ってはみ出します。
はみ出す量は計算で出ます。高さを 1 とすると、必要な幅は 3、画面の幅は 2.5。 差の 0.5 が左右に半分ずつなので、
(3 − 2.5) ÷ 3 ÷ 2 = 1 ÷ 12 ≒ 8.33%
1500pxの画像なら片側 125pxです。 実際にiPhoneのスクリーンショットと元画像を突き合わせて計測した値は 8.35% で、 計算どおりでした。
アイコンが重なる位置
ヘッダーの左下には、プロフィール画像（アイコン）が重なります。 重なる範囲は環境によって違い、いちばん大きく覆うのはPCです。
| 環境 | アイコン直径 | 中心の位置 | 画像座標での範囲 |
|---|---|---|---|
| PC Web | 134px（600px幅時） | ヘッダー下端の 2.2px 上 | x 50〜385 / y 327〜500 |
| Androidアプリ | 79.2dp | 下端の 28.2dp 下 | x 46〜335 / y 458〜500 |
| iPhoneアプリ | 80pt | 下端の 27.5pt 下 | x 154〜422 / y 458〜500 |
PCだけアイコンの中心がヘッダーの内側にあります。 スマホのアプリはヘッダーの下にはみ出す形で置かれるので、隠れるのは下端の一部だけです。 まとめると、左下の x 0〜422 / y 327〜500 は隠れる可能性があります。
ヘッダーに重なるボタン
スマホのアプリでは、ヘッダーの上に戻る・検索などの丸いボタンが乗ります。 これが厄介で、数も位置も一定ではありません。
数はアカウントの種類と、誰のプロフィールかで変わります
| 環境 | 誰のプロフィールか | 一般アカウント | プレミアム |
|---|---|---|---|
| iPhone | 自分 | 1つ | 2つ |
| 他人 | 2つ | 3つ | |
| Android | 自分 | 3つ | 3つ |
| 他人 | 3つ | 3つ |
iPhoneはプレミアムのときだけ Grok のボタンが増えますが、Androidは常に3つです。 同じアプリでも規則が違います。4通りとも実機で確認しました。
縦の位置は、iPhoneでは機種の世代で変わります
ボタンの縦位置は画面上部のセーフエリアを基準に置かれています。 セーフエリアの高さはノッチ世代とDynamic Island世代で違うので、その分だけずれます。
| 世代 | セーフエリア上端 | ボタン中心の位置 |
|---|---|---|
| ノッチ世代 | 50pt | 78pt |
| Dynamic Island世代 | 59pt | 87pt |
どちらもセーフエリア上端 + 28pt で説明できます。 アイコンがヘッダー下端を基準にしていて機種によらず一定なのとは対照的です。 基準が違うので、機種依存の出方も違います。
ボタンの直径はiPhone・Androidとも 40pt / 40dp です。 画像座標にすると、上部の y 183〜340 の帯に、 左端寄り（x 45〜311）と右端寄り（x 868〜1453）で乗ります。
ボタンの下は完全に見えなくなるわけではありません。 ボタンは半透明なので、下の絵はうっすら透けます。 文字を置くと読めなくなりますが、模様や背景なら置いても問題ありません。
結局どこに置けばいいのか
ここまでの範囲を全部避けると、x 430〜1370 / y 350〜500 が残ります。 上の図の緑の枠です。ロゴや文字など「読ませたいもの」はこの中に置いてください。
| 場所 | 状態 |
|---|---|
| 左右 各125px | iPhoneで完全に切れる |
| 左下（x 0〜422 / y 327〜500） | アイコンに隠れる |
| 上部の帯（y 183〜340 の左右寄り） | ボタンが乗る（半透明なので透ける） |
| 中央〜右下（x 430〜1370 / y 350〜500） | どの環境でも見える |
なお中央の上のほう（y 0〜180 あたり）にはボタンが来ません。 ただしスマホでは時計や電波表示が重なる位置なので、文字を置くなら下側のほうが安全です。
アイコン側の話
左下に重なってくるアイコンそのものにも、 円形に切り抜かれて四隅が消えるという別の制約があります。 そちらはXのアイコン画像サイズと、円形で切れる範囲にまとめています。
設定するときは、ブラウザ版のXから
せっかく調整しても、スマホアプリから設定すると、Xに送られる前にアプリ側で
もう一度圧縮がかかることがあります。
スマホしか手元にない場合も、ブラウザで x.com を開けば同じことができます。
パソコンのブラウザから設定したヘッダーについて、Xが配信している画像を取得し直して 元画像と1画素ずつ比べたところ、750,000画素すべてが完全に一致しました。 ファイルはXによって再圧縮され容量は半分以下になっていましたが、色は1つも変わっていません。 ただしこれは色数の少ない画像での結果で、 写真のように色数の多い画像はブラウザから設定してもX側で再圧縮されます。
この数値について
ここに書いた数値は2026年8月に、iPhone・Android・PCの実機とブラウザから 直接計測したものです。スクリーンショットの画素を、こちらで用意した元画像の画素と 突き合わせる方法で測っています。推測や、他サイトからの引き写しは含みません。
ただしXのアプリは更新で表示が変わることがあります。 実際に調査中も、バージョンや機種によって値が違う場面がありました。 参考値としてお使いください。
お使いの機種で表示が違っていたら教えてください。 手元にある機種には限りがあるので、 計測へのご協力からスクリーンショットを送っていただけると、 実測して反映します。
ここに書いた範囲を、画像に重ねたガイドとして表示します。 PC・Android・iPhoneの切り替えにも対応しています。