ヘッダー・サムネ・ロゴ作成のご相談はこちら ≫

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

スポンサーリンク
ブログ・SNS
この記事は約11分で読めます。
Twitterでツイートしたあとに画像を見ると表示領域がおかしい…
ヘッダー画像を設定したらなんだか端が切れてる…

Twitter画像の問題ってけっこう多いと思います。

というのも僕がそうだったし色々なツイートを分析したところ、画像が切れて表示させたい部分がうまく表示させられてないツイートが多かったです。

ただつぶやくだけの個人的なツイート”なら気にしなくてもいいですが、Twitterでの集客やビジネスでの運用、または商用利用でアカウントを使うなら画像を最適なサイズに作り込む必要があります。

おすん
おすん

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

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

この記事でわかることはこちら

  • ヘッダー画像サイズと表示可能領域
  • プロフィールアイコンサイズ
  • ツイート投稿用画像サイズと比率
  • ツイート投稿用画像の加工方法(iPhoneとTwitterアプリ)とおすすめツール

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

【Twitter】リストの使い方と特定のツイートだけ表示する(見る)方法
フリーランスが副業で稼げるサービス・アプリ・サイトまとめ【今は個人で稼ぐ時代です】
【2020年最新】サブスクのメリットやサービスの種類をジャンルごとに総まとめ!
中学生・高校生がネットで安全にお金を稼ぐ方法4選【アルバイト以外での稼ぎ方】
スポンサーリンク

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

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

ヘッダー画像のサイズ・ファイルサイズ・ファイル形式
画像サイズ(推奨)1500px × 500px
ファイルサイズ最大で10MBまで
画像形式JPG・PNG

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

横1500px × 縦500px』です。

表示可能領域は

横1500px × 縦440px』です。

比率は

3:1』になります。

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

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

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

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

ヘッダーの確認はこちら→ @osunnotsubuyaki

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

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

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

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

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

1500×500pxの画像サイズ

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』の画像サイズにしましょう。

おすん
おすん

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

おすん
おすん

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

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

https://twitter.com/osunnotsubuyaki/status/1237977161954291714?s=21
https://twitter.com/osunnotsubuyaki/status/1238381609792892930

オススメの画像加工ツール

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

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

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

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

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

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

https://twitter.com/osunnotsubuyaki/status/1164487425474744325
おすん
おすん

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

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

https://twitter.com/osunnotsubuyaki/status/1173174806147022848
おすん
おすん

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

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

おすん
おすん

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

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

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

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

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

スポンサーリンク

ツイート画像を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・PNG 変換 Pro 〜画像フォーマットを変換で変換できます。

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

スポンサーリンク

かんたんにヘッダー画像の作成ができるアプリ

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

Canvaのインストールはこちら

Canva: ポスター, フライヤー, ロゴメーカー

Canva: ポスター, フライヤー, ロゴメーカー
開発元:Canva
無料
posted withアプリーチ

Phontoのインストールはこちら

Phonto 写真文字入れ

Phonto 写真文字入れ
開発元:youthhr
無料
posted withアプリーチ

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

【2020年版】ブログで使えるおすすめ画像作成・加工アプリ【iOS・iPhone】

ヘッダー画像の作成はこちらから。

ブログやSNSのヘッダー画像を格安で作成!魅力的なデザイン制作承ります!
【2020年最新】サブスクのメリットやサービスの種類をジャンルごとに総まとめ!
スポンサーリンク

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

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

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

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

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

となります。

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

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

【Twitter】リストの使い方と特定のツイートだけ表示する(見る)方法
Twitterの過去ツイートを検索する方法まとめ!【日付・アカウント指定】
Twitterのフォロワー数を増やす方法【7日間で1000人増えました】
ブログのPV数が増えない!ツイッターから集客する方法
【2020年版】ブログで使えるおすすめ画像作成・加工アプリ【iOS・iPhone】

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

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

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

ヘッダー画像(一部)

ヘッダーデザインの制作実績こちら

ロゴデザイン(一部)

ロゴデザインの制作実績こちら

 

お問い合わせはこちらから

 

コメントはこちら ご質問・情報提供等ございましたらコメント欄に書き込んでください

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