発注仕様書に活用してね！X（旧Twitter）のアイコンとヘッダーの落とし穴
投稿 最終更新
Xのヘッダー画像とプロフィールアイコンを発注するときの仕様を、1ページにまとめました。発注する側は、このページのURLや表、チェックリストを発注仕様書にそのまま貼って使ってください。描く側は、サイズと「表示されたときに隠れる場所」をここで確かめられます。
きっかけは、株式会社佐野組でイラストレーターの方に発注するたびに、同じ説明を繰り返していたことです。アイコンが重なる場所や、スマホで切れる場所は、公式の推奨サイズだけでは分かりません。そこで、公式の値と、実際の表示を測った値を分けて書きました。
概要
このページの数字の根拠は、次の3種類です。
| 表記 | 意味 |
|---|---|
| 【公式】 | X ヘルプセンターに書かれている値 |
| 【測定】 | 令和8年10月3日に、x.com（ブラウザ）とiPhone 16のXアプリを実際に表示して測った値 |
| 【目安】 | 公式の値と測定した値をもとに、佐野組で決めた値 |
Xの画面はアップデートで変わるので、【測定】と【目安】の値は今後変わる可能性があります。
ヘッダーの仕様
| 項目 | 内容 | 根拠 |
|---|---|---|
| サイズ | 1500×500px | 公式 |
| 縦横比 | 3:1 | 上のサイズから計算 |
| ファイル形式 | JPG、PNG、GIF（アニメーションGIFは使えません） | 公式 |
| 容量 | ヘッダーの上限はヘルプに書かれていません。アイコンと同じ2MB以内なら安心です | 目安 |
| カラープロファイル | sRGB | 目安 |
X ヘルプには「ヘッダー画像の推奨サイズは1500x500ピクセルです」と書かれています。英語版では「Recommended dimensions for header images are 1500x500 pixels.」です。
アニメーションGIFについては「プロフィール画像やヘッダー/バナー画像では、アニメーションGIF画像はサポートされていません」とあります。
表示されているヘッダー画像を2つのアカウントで調べたところ、どちらもJPEGで配信されていました。アップロードしたあとにX側で変換されていると考えられます。細い線や細かいグラデーションは、少し荒れて見えることがあります。
アイコンの仕様
| 項目 | 内容 | 根拠 |
|---|---|---|
| サイズ | 400×400px | 公式 |
| 縦横比 | 1:1 | 上のサイズから計算 |
| ファイル形式 | JPG、PNG、GIF（アニメーションGIFは使えません） | 公式 |
| 容量 | 2MBまで | 公式 |
| 表示の形 | 円形に切り抜かれます | 測定 |
| カラープロファイル | sRGB | 目安 |
アイコンのサイズと容量は、X ヘルプの「プロフィール画像の推奨サイズは400x400ピクセルです」「プロフィール画像の最大ファイルサイズは2MBです」という記述によるものです。
円形になることはヘルプには明記されていませんが、実際の表示では円形に切り抜かれます。金色のチェックマークがついた組織アカウントは例外です。X ヘルプの「金色のチェックマークと四角形のプロフィール画像」という項目のとおり、アイコンが四角く表示されます。四角の場合も、角は少し丸くなっていました【測定】。
プロフィール画面のアイコンは、PCでは128px角、スマホのブラウザでは画面幅によって約74〜92px角、iPhone 16のアプリでは約80px角（画面上の大きさ）で表示されました【測定】。投稿の横に出るアイコンはこれよりも小さくなります。細かい描き込みは潰れやすいので、小さく縮めても何の絵か分かるデザインをお願いします。
アイコンは円の外側の四隅が見えません。顔、ロゴ、文字は、外周から40px内側の円（直径320px）に収めてください【目安】。
隠れる場所（セーフエリア）
ヘッダーは、見る環境によって端が切れたり、アイコンが上に重なったりします。下の図の緑の枠（セーフエリア）に、文字、ロゴ、キャラクターの顔を入れてください。背景はキャンバスの端まで描いてください。
上下60px【公式】
X ヘルプには、推奨サイズの画像でも「画像の上下の60ピクセルが表示されなかったりします」と書かれています。英語版では「60 pixels on the top and bottom could be cropped」です。ヘルプでは、その理由をモニターのサイズやブラウザの違いとしています。
測ってみると、x.com のヘッダーは高さが200px（画面上の大きさ）で固定され、幅は画面に合わせて変わっていました。幅が600pxより広いと上下が切れ、狭いと左右が切れます。PCの通常の表示（ヘッダー幅598px）では、ほぼ全体が見えていました。画面幅768pxのときはヘッダー幅が751pxになり、元画像の上下が約50pxずつ切れていました【測定】。iPhone 16のアプリでは、上下は切れていませんでした【測定】。
スマホのブラウザでは左右が切れる【測定】
スマホのブラウザで表示すると、ヘッダーの高さは200pxのまま、幅だけが画面幅に合わせて狭くなるため左右が切れます。1500×500pxの元画像で、左右それぞれ次の幅が見えなくなりました。
| 画面幅 | 左右で切れる幅（それぞれ） | 見える範囲（x座標） |
|---|---|---|
| 430px | 約212px | 約212〜1288 |
| 390px | 約262px | 約262〜1238 |
| 360px | 300px | 300〜1200 |
iPhoneアプリでは左右が切れ、上部にボタンや時刻が重なる【測定】
iPhone 16のXアプリ（iOS）で、佐野組のアカウントのプロフィール画面を表示して測りました。ヘッダーは画面の一番上から表示され、元画像の高さ500pxがそのまま入ります。左右は約125pxずつ切れて、見える範囲は x 約125〜1375 でした。ほかの解説サイトには「アプリでは上下が切れる」という説明が多いのですが、iPhone 16では上下ではなく左右が切れていました。
ヘッダーの上には、次のものが重なります。
| 重なるもの | 位置（元画像の座標） | 根拠 |
|---|---|---|
| 時刻 | x 約266〜437、y 約73〜112 | 測定 |
| 電波・Wi-Fi・電池 | x 約1022〜1272、y 約71〜113 | 測定 |
| Dynamic Island | x 約550〜950、y 約35〜154 | 目安 |
| 戻るボタン（丸） | 中心(240, 276)・半径63px。x 約176〜302、y 約213〜339 | 測定 |
| 検索ボタン（丸） | 中心(1260, 276)・半径63px。x 約1197〜1323、y 約213〜339 | 測定 |
Dynamic Islandはスクリーンショットに写らないため、iPhoneの画面の大きさから位置を出しました。
アプリではヘッダーの上のほうに暗いグラデーションがかかり、白い背景が上端では薄いグレーに見えていました。
Androidのアプリは測っていません。
左下はアイコンが重なる【測定】
ヘッダーの左下にはプロフィールアイコンが重なります。
PCでは、アイコン（白い縁を含む）は元画像の中心(210, 500)・半径170pxの円の位置に来ます。範囲でいうと、x 40〜380、y 330〜500です。
スマホのブラウザでは、画面幅によってアイコンの位置と大きさが変わります。画面幅360〜430pxでは、x 約250〜550、y 約375〜500の範囲に重なりました。この範囲はセーフエリアの左下の角にかかるので、そこには文字やロゴを置かないでください。
iPhone 16のアプリでは、アイコン（縁を含む）は中心(281, 588)・半径139pxの円の位置に来ます。ヘッダーにかかるのは x 約142〜420、y 約449〜500 です。
右下のボタン【測定・目安】
ログインしないで表示したブラウザの画面では、フォローボタンはヘッダーの下に置かれていて、ヘッダー画像には重なっていませんでした。iPhone 16のアプリでも、「プロフィールを編集」などのボタンはヘッダーの下にありました。ただ、ボタンはヘッダーのすぐ近くに来るので、右下（x 1150〜1500、y 390〜500）にも大事なものは置かないでください【目安】。
セーフエリア【目安】
ここまでの内容から、ヘッダーのセーフエリアを x 320〜1180、y 160〜440（860×280px）とします。PCとスマホのブラウザ、iPhoneアプリのどれで見ても、切れたり何かが重なったりしにくい範囲です。
左右は、画面幅360pxのブラウザで切れる線（x 300と1200）と、アプリの戻るボタン・検索ボタンの端（x 約302と約1197）から、20px前後内側にしました。上端は、アプリの時刻・電池の表示とDynamic Islandの下端（y 約154）より下にしました。下端は、ヘルプにある60pxに合わせています。
セーフエリアの中でも、左下の x 320〜550、y 375〜440 あたりはスマホのブラウザでアイコンと重なります。セーフエリアの外も画面には映るので、背景やイラストは描いてかまいません。文字、ロゴ、顔だけをセーフエリアに入れてください。
納品形式のお願い
佐野組では、次の形で納品をお願いしています。発注仕様書に使うときは、自社の運用に合わせて書き換えてください。
- 原寸のPNG（ヘッダー1500×500px、アイコン400×400px）
- 可能であれば、2倍サイズ（ヘッダー3000×1000px、アイコン800×800px）のレイヤー付きPSD
- ロゴや文字は、イラストとは別のレイヤーに分ける
- カラープロファイルはsRGB
- 背景は透過にせず、塗った状態にする
- テンプレートのレイヤーは非表示にするか、削除しておく
PNGが2MBを超えてもかまいません。アップロード用の圧縮は佐野組で行います。ファイル名は「sanogumi_x_header_1500x500.png」「sanogumi_x_icon_400x400.png」のように、用途とサイズが分かる名前にしてください。
テンプレート
描くときに重ねて使えるテンプレートです。印刷所の入稿テンプレートと同じように、隠れる場所をガイドで示してあります。2倍サイズで描いて、原寸に縮小して書き出すのがおすすめです。PSDはレイヤー付きのテンプレート、PNGはガイドだけを描いた透過画像です。
| テンプレート | ダウンロード |
|---|---|
| ヘッダー 2倍 3000×1000px | PSDをダウンロード（2.9MB） PNGをダウンロード（377KB） |
| ヘッダー 原寸 1500×500px | PSDをダウンロード（981KB） PNGをダウンロード（164KB） |
| アイコン 2倍 800×800px | PSDをダウンロード（882KB） PNGをダウンロード（151KB） |
| アイコン 原寸 400×400px | PSDをダウンロード（320KB） PNGをダウンロード（64KB） |
まとめてダウンロード：x-header-icon-templates.zip（2.0MB。PSD 4点、PNG 4点、使い方を書いたREADME.txt）
PSDは、sRGB・8bitのRGB画像です。ガイドはレイヤーごとに表示と非表示を切り替えられます。レイヤーは上から次の順に入っています。
- ヘッダー：「ガイド（書き出す前に非表示）」フォルダー（セーフエリア／ボタン付近／PCのアイコン／スマホのアイコン／アプリ上部（時刻・電波・Dynamic Island・ボタン）／アプリの左右／スマホブラウザの左右／上下60px（公式））、「ここに絵を描く」、「背景」（白）
- アイコン：「ガイド（書き出す前に非表示）」フォルダー（推奨余白／四角の枠（金色チェックの組織）／円形マスクガイド）、「描画」、「背景」（白）
書き出す前に、「ガイド（書き出す前に非表示）」フォルダーを非表示にするか、削除してください。そのうえで、ヘッダーは1500×500px、アイコンは400×400pxのPNGで書き出します。
PNGは、背景が透明でガイドだけが描かれた画像です。PSDを開けないソフトでは、このPNGを一番上のレイヤーに読み込んで重ねてください。塗りが半透明なので、絵を見ながら位置を確かめられます。
チェックリスト
- ヘッダーは1500×500px、アイコンは400×400pxになっている
- ヘッダーの文字、ロゴ、顔がセーフエリア（x 320〜1180、y 160〜440）に入っている
- ヘッダーの上部（アプリで時刻やボタンが重なる場所）に文字やロゴがない
- ヘッダーの左下（アイコンが重なる場所）に大事なものがない
- ヘッダーの右下（ボタンの近く）に大事なものがない
- ヘッダーの背景がキャンバスの端まで描かれている
- アイコンの顔、ロゴ、文字が直径320pxの円に入っている
- アイコンを小さく縮めても何の絵か分かる
- アニメーションGIFを使っていない
- カラープロファイルがsRGBになっている
- 原寸PNGと、可能なら2倍サイズのレイヤー付きPSDがそろっている
- ロゴや文字が別のレイヤーに分かれている
- テンプレートのレイヤーを非表示にするか、削除してある
出典
X ヘルプセンター（令和8年10月3日確認）
【測定】の値は、令和8年10月3日に調べたものです。ブラウザでは、x.com のプロフィールページをログインしない状態のChromeで開きました。画面幅320〜1920pxで表示して、ヘッダーとアイコンの位置と大きさを調べています。アプリでは、iPhone 16のXアプリ（iOS）で佐野組のアカウントのプロフィール画面のスクリーンショットを撮り、元のヘッダー画像と重ねて位置を出しました。Androidのアプリは測っていません。