デザイン制作・レビュー・広告依頼のご相談はこちら ≫≫

【2020年版】最適なTwitterの全画像サイズ・比率まとめ【ツイート投稿・ヘッダー表示可能領域】

ブログ・SNS
この記事は約13分で読めます。

この記事では、Twitterで使われる画像サイズと比率を徹底解説し、ツイート投稿用の画像サイズと、リサイズ方法を画像20枚でご説明します。

おすん
おすん

僕自身、グラフィックデザイナーとして10年以上の経歴があり、普段からTwitter用ヘッダー画像やツイート用画像などのWEB画像を制作しているので、この記事にある程度の信用性はあると思います。

本記事でわかること
  • ツイート投稿用画像サイズと比率がわかる
  • ツイート投稿用画像の加工アプリとリサイズがわかる
  • ヘッダー画像サイズと表示可能領域がわかる
  • プロフィールアイコンサイズがわかる
Twitterでツイートしたあとに画像を見ると表示領域がおかしい…
ヘッダー画像を設定したらなんだか端が切れてる…

このようなTwitter画像の悩みを抱えるユーザーってけっこう多いと思います。

というのも僕がそうだったし色々なツイートを分析したところ、

「画像がうまく表示させられない」ってツイートが多かったです。

ただつぶやくだけの個人的なツイート ”なら気にしなくてもいいですが、Twitterでの集客やビジネスでの運用、または商用利用でTwitterを利用するなら画像を最適なサイズに作り込むことでクオリティの高いツイートに変わります!

おすん
おすん

それだけで集客率が格段にアップしますからね!

ヘッダー画像を『Canva』などご自身で作成される方は【ヘッダー画像作成用テンプレート】もあるので是非使ってみてください。

手っ取り早くTwitterでの画像サイズが知りたい方はこちら(クリックすると詳細に移動します)

「ツイートする画像の画質をほぼ劣化させずに投稿したい…」

その方法についてはほぼ劣化(圧縮)させずに画像を高画質でツイートする方法を参考にしてみてください。

「リストってどういう風に使えばいいの?」

そんな方はリストの使い方と特定のツイートだけ表示する(見る)方法の記事を参考にしてみてください。

おすん
おすん

下記より画像サイズの解説をしていきます。

Twitter用ヘッダー画像サイズ|横1500px × 縦500px

Twitterのヘッダー画像サイズは以下の通り。

内容サイズ・形式
画像サイズ1500px × 500px(横×縦)
表示可能領域1500px × 440px(横×縦)
画像の比率3:1(横×縦)
ファイルサイズ最大で10MBまで
画像ファイル形式JPG・PNG

Twitter用のヘッダー画像サイズは

横1500px × 縦500px 』です。

表示可能領域は

横1500px × 縦440px 』です。

比率は

3:1』になります。

上のアイコン部分(電波や電池アイコン)のせいで表示されなくなる可能性があるので、表示させたい部分を下から440pxの位置までに抑えると問題なく表示されます。(画像の一番上から60pxまではアイコンで見えづらくなります)

ちなみに僕がTwitterで設定してる下記のヘッダーも

横1500px × 縦500px』で、表示させたい部分を下から440pxに抑えてます。

※現在は下記の新しいデザインに変更してます。

おすん
おすん

僕のTwitterアカウント(@osunnotsubuyaki)で実際にヘッダーの配置確認ができます。

このヘッダーの場合はスマホで見たときに、スマホ画面上部にある『電波アイコン』や『時計表示』に被らないように少し下に寄せてます。

もうひとつ注意する点が左下のプロフィールアイコン部分

この部分に文字が重なると丸アイコンで文字などが見えなくなるので注意が必要です。

ヘッダー画像作成用無料テンプレート

表示されない領域を避けるためにテンプレート用画像を作成したので、画像作成アプリの『Canva』や『Illustrator』などでヘッダー画像を作るときにお使いください。

1500px × 500px の画像サイズ
Twitterヘッダーテンプレート
スマホの場合は長押しして保存してください

使い方は画像を最初に配置して、その上に置きたい素材やテキストなどを配置すればアイコンに被らないようにヘッダーが作成できます。

おすん
おすん

端末によっては表示領域が違う場合があるので参考までにお願いします。

「自分でいい感じのヘッダーが作れない…」って方はココナラでデザイン作成のご相談に乗りますのでお気軽にお問い合わせください。

おすん
おすん

『おすんブックデザイン』で出品してます!

チェック

Twitterのアップデートで画像サイズの仕様変更がたまにあるので、最新情報はこちらのTwitterアップデート情報から詳細が確認できます。

Twitterプロフィールアイコンサイズ|400px × 400px

Twitterのプロフィールアイコンサイズは以下の通り。

内容サイズ・形式
画像サイズ(推奨)400px × 400px
ファイルサイズ最大で10MBまで
画像ファイル形式JPG・PNG

Twitter用のアイコン画像サイズは

横400px × 縦400px』です。

表示可能領域は

同じく『横400px × 縦400px』です。※1

比率は

1:1』になります。

※1 プロフィールアイコンは四隅が切り取られるので注意が必要です。

おすん
おすん

画像サイズ以外はヘッダーと同じです!

Twitterのアイコンは画像サイズが400×400px以上だとリサイズされ、その時にPNGの透過部分(丸枠以外の透明部分)が無効になるので注意。

ツイート投稿用画像サイズ|1024px × 576px

ツイート投稿用画像の最適サイズは

横1024px × 縦576px』です。

比率は

16:9』になります。

内容サイズ・形式
横幅の最大値1024px
ファイルサイズ最大で5MBまで、GIF画像は3MBまで
画像ファイル形式JPG・PNG・GIF

PC版でもある程度うまく表示させたい場合、『506×253px』の画像サイズにしましょう。これは2:1のアスペクト比になり、スマホでもPCでもある程度うまく表示されるサイズになります。

おすん
おすん

スマホで見た場合に左右が少し切り取られるぐらいなので、伝えたいことはなるべく画面中央に配置すれば特に問題ありません。

おすん
おすん

ちなみにツイート投稿画像をキレイに4枚表示させる方法は『16:9』で加工すればOKです!

 下記は4枚の画像を『16:9』で投稿したツイートです。

ツイート画像を高画質で投稿したい場合は、画像をほぼ劣化(圧縮)させずに高画質でツイートする方法の記事を参考にしてみてください。

ツイート画像を加工するおすすめツール

アスペクト比計算ツール

お持ちの画像が16:9になるとどう表示されるかアスペクト比計算ツールで確認できます。

画像赤枠に数字を入れるか、お持ちの画像を添付することで簡単にアスペクト比がわかります。

詳しい使い方に関してはアスペクト比計算ツールの使い方を参考にしてみてください。

ILOVE IMG

実際に16:9に切り取り加工をしたい場合はILOVE IMGの画像変更ツールで縦横比を維持したまま切り取り加工ができます。

この比率さえ守っていれば切り取られずに表示されますが、スマホの横幅(大体が1080px)以下の横幅だと画像が荒くなります。

例えば16:9の『横400px × 縦225px』でも表示自体は問題ないですが、少し画像が粗くなります。

下記のツイート画像は『横400px × 縦225px』です。

おすん
おすん

ツイートを見てもらえるとわかりますが、若干画質が粗いです。

こちらは『横800px × 縦450px』です。

おすん
おすん

このサイズのほうがキレイですね!

こちらは『横1024px × 縦576px』です。

おすん
おすん

画質も良く、最適でバッチリです!

iPhoneでも画像のリサイズをすることができます。

下記ツイートもiPhoneで『16:9』にリサイズしてます。

下記のツイートは506×253pxの2:1の画像。

解像度は低いですが、画像中央に表示したい素材を寄せればサイズはあまり気にしなくて大丈夫です。

以下でiPhoneでのリサイズ方法とTwitterアプリ内でのリサイズ方法を画像付きで説明します。

ちなみにRTするとTwitterの機能上、画像サイズが変形したり著作者名の表示が消えたりするので(アスペクト比が変わったりする)、元の画像から同一性が失われ変形したものとみなされ著作権違反になることもあるので、RTする場合は少し注意が必要です。

ツイート画像をiPhoneでリサイズする方法

① iPhoneの【写真フォルダ】内からリサイズしたい画像を選択して右上の【編集】をタップ

② 左下にある【矢印と四角のマーク】をタップ

③ 右下の【四角が重なったマーク】をタップ

④ リサイズする比率が出てくるので【16:9】をタップ

⑤ 右下のチェック【 ✔ 】をタップしてリサイズ完了!

これでTwitterで投稿ツイート用の画像サイズが最適化されたので、画像が切れることもなく投稿できます。

次にTwitterアプリ内でのリサイズ方法を説明します。

ツイート画像をTwitterアプリ内でリサイズする方法

① ツイートしたい画像を選んで画像右下の「筆アイコン」をタップ。

Twitterアプリでのリサイズ方法

② 画面右下の【リサイズ】を選択

Twitterアプリでのリサイズ方法

③ 画面下にある【ワイド(横長の四角)】を選択
(デフォルトではオリジナルのままになっています)

メニュー名比率
オリジナル任意の画像比率
ワイド横16:縦9
スクエア横1:縦1

④ 切り取られる範囲が指定されるので画面右上の【適用】をクリックしたあと、同じく画面右上の【保存】をクリック。

Twitterアプリでのリサイズ方法

⑤ すると画像では分かりづらいですが少し横長にリサイズされてます。

加工前の画像
Twitterアプリでのリサイズ方法
加工後の画像
Twitterアプリでのリサイズ方法

あとはツイートするテキストを入力してツイートするだけ。

Twitterアプリでのリサイズ方法

TL(タイムライン)で見てもちゃんと表示されています。

Twitterアプリでのリサイズ方法

ツイート用の画像はiPhone内でもTwitterアプリ内でも簡単に作ることができます。

ツイート用画像はJPGではなくPNG形式にしないと画像が劣化します

補足ですがTwitterで投稿した画像形式がJPGだと、画像がかなり圧縮されて劣化してしまいます。

せっかく撮った綺麗な写真や自分の作品を綺麗に表示させたいならPNG形式でツイートしましょう。

Twitterで投稿したJPG形式の画像はかなり圧縮されて劣化してしまいますが、PNG形式の場合は劣化しないため、可能であればPNGで保存してからツイートするようにしましょう。

JPGをPNGに変換するなら下記のアプリで変換できます。

JPEG <-><noscript><img   alt=

 

ブラウザで変換したい場合は JPEG ⇄ PNG でサクッと変換できます。

ヘッダー画像の作成に関しては下記のアプリがおすすめです。

かんたんにヘッダー画像が作れるアプリ

ヘッダー画像のデザインを細かくこだわる必要がなければ、Canvaのアプリで簡単に作成できます。

Canva-名刺,カード,チラシ,ポスター,サムネイル作成

Canva-名刺,カード,チラシ,ポスター,サムネイル作成

Canva無料posted withアプリーチ

そのほかにも【 無料で使える画像作成・加工アプリまとめ 】におすすめのアプリを色々紹介してるので是非参考にしてみてください。

まとめ:Twitter画像の適正サイズを理解して正しく表示させよう

この記事でのまとめです。

せっかく良いツイート文を作ったのに画像がうまく表示されないともったいないですよね。

ヘッダー画像やプロフィールアイコンも同じで、ユーザーがTwitterで見る流れは、

  1. TL(タイムライン)で流れてきたツイート
  2. アイコン
  3. ヘッダー
  4. プロフィール
  5. 固定ツイート
  6. 過去ツイート

となります。

特に文章よりもまずは画像を見るので、この画像をしっかり作り込む必要があります。

ヘッダー画像、ロゴデザイン制作のご依頼も受付中

ヘッダー画像やオリジナルのロゴデザインなどを制作しますので是非ご相談ください。

ブログやSNSを魅力的に!ヘッダー画像のデザイン制作承ります!

ヘッダー画像(一部)

Twitterの記事が気になった方はこちらの記事もおすすめ!

 

おすん
おすん

お問い合わせは下記よりご都合の良い連絡方法でお問い合わせください。(24時間受け付けてます)

お問い合わせ先一覧

 

コメントはこちら

トップへ戻る
タイトルとURLをコピーしました