Twitter画像の問題ってけっこう多いと思います。
というのも僕がそうだったし色々なツイートを分析したところ、画像が切れて表示させたい部分がうまく表示させられてないツイートが多かったです。
Twitterでぼけない画像サイズをいまだよくわかっていない
— ぬん (@qgK8hv9ugLVhmOZ) January 13, 2020
twitterに載せる際の画像サイズで適切なのは何px×何pxですか？！？！
— mao (@mao110210) January 13, 2020
うーん、Twitter投稿用の画像サイズの調整がうまくいかない。
— 安城和城 (@AnjoKazuki) January 13, 2020
Twitterにあげるべき画像サイズがようわからん
— おむすび！ (@katteniyaruyo) January 12, 2020
“ただつぶやくだけの個人的なツイート”なら気にしなくてもいいですが、Twitterでの集客やビジネスでの運用、または商用利用でアカウントを使うなら画像を最適なサイズに作り込む必要があります。
それだけで集客率が格段にアップしますからね！
ヘッダー画像を『Canva』などご自身で作成される方は【ヘッダー画像作成用テンプレート】もあるので是非使ってみてください。
この記事でわかることはこちら
- ヘッダー画像サイズと表示可能領域
- プロフィールアイコンサイズ
- ツイート投稿用画像サイズと比率
- ツイート投稿用画像の加工方法（iPhoneとTwitterアプリ）とおすすめツール
手っ取り早くTwitterでの画像サイズが知りたい方はこちら（クリックすると詳細に移動します）
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』などでヘッダー画像を作るときにお使いください。
使い方は画像を最初に配置して、その上に置きたい素材などを配置すればアイコンに被らないようにヘッダーが作成できます。
端末によっては表示領域が違う場合があるので参考までにお願いします。
「自分でいい感じのヘッダーが作れない…」って方は
ココナラでデザイン作成のご相談に乗りますのでお気軽にお問い合わせください。
『おすんブックデザイン』で出品してます！
Twitterプロフィールアイコンサイズ｜400px × 400px
Twitterのプロフィールアイコンサイズは以下の通り。
| アイコン画像のサイズ・ファイルサイズ・ファイル形式 | |
| 画像サイズ（推奨） | 400px × 400px |
| ファイルサイズ | 最大で10MBまで |
| ファイル形式 | JPG・PNG |
Twitter用のアイコン画像サイズは
『横400px × 縦400px』です。
表示可能領域は
同じく『横400px × 縦400px』です。※1
比率は
『1：1』になります。
※1 プロフィールアイコンは四隅が切り取られるので注意が必要です。
ツイート投稿用画像サイズ｜1024px × 576px
ツイート投稿用画像の最適サイズは
『横1024px × 縦576px』です。
比率は
『16：9』になります。
| ツイート投稿用画像のサイズ・ファイルサイズ・ファイル形式 | |
| 横幅の最大値（推奨） | 1024px |
| ファイルサイズ | 最大で5MBまで、GIF画像は3MBまで |
| 画像形式 | JPG・PNG・GIF |
PC版でもある程度うまく表示させたいなら『506×253px』の画像サイズにしましょう。
スマホで見た場合に左右が少し切り取られるぐらいなので、伝えたいことはなるべく画面中央に配置すれば特に問題ありません。
ちなみにツイート投稿画像をキレイに4枚表示させる方法も『16：9』で加工すればOKです！
下記は4枚の画像を『16：9』で投稿したツイートです。
オススメの画像加工ツール
お持ちの画像が16：9になるとどう表示されるかアスペクト比計算ツールで確認できます。
使い方はアスペクト比計算ツールの使い方を参考にしてみてください。
実際に16：9に切り取り加工をしたい場合はILOVE IMGの画像変更ツールで縦横比を維持したまま切り取り加工ができます。
この比率さえ守っていれば切り取られずに表示されますが、スマホの横幅（大体が1080px）以下の横幅だと画像が荒くなります。
例えば16：9の『横400px × 縦225px』でも表示自体は問題ないですが、少し画像が粗くなります。
下記のツイート画像は『横400px × 縦225px』です。
ツイートを見てもらえるとわかりますが、若干画質が粗いです。
こちらは『横800px × 縦450px』です。
このサイズのほうがキレイですね！
こちらは『横1024px × 縦576px』です。
Twitter ツイート投稿用の最適な画像サイズは
『 1024 × 576 px 』です。
ちなみに添付してる画像も上記のサイズ。https://t.co/5GH3F5dmW4
☝️で詳しく解説してるので参考までにどうぞ‼️ pic.twitter.com/Yx8ETSg1HY
— おすんフリーランスデザイナー×ブロガー (@osunnotsubuyaki) March 11, 2020
画質も良く、最適でバッチリです！
iPhoneで画像の比率をリサイズすることができますよ。
下記ツイートもiPhoneで『16：9』にリサイズしてます。
以下でiPhoneでのリサイズ方法とTwitterアプリ内でのリサイズ方法を画像付きで説明します。
ツイート画像をiPhoneでリサイズする方法
① iPhoneの【写真フォルダ】内からリサイズしたい画像を選択して右上の【編集】をタップ
② 左下にある【矢印と四角のマーク】をタップ
③ 右下の【四角が重なったマーク】をタップ
④ リサイズする比率が出てくるので【16：9】をタップ
⑤ 右下のチェック【 ✔ 】をタップしてリサイズ完了！
これでTwitterで投稿ツイート用の画像サイズが最適化されたので、画像が切れることもなく投稿できます。
次にTwitterアプリ内でのリサイズ方法を説明します。
ツイート画像をTwitterアプリ内でリサイズする方法
① ツイートしたい画像を選んで画像右下の「筆アイコン」をタップ。
② 画面右下の【リサイズ】を選択
③ 画面下にある【ワイド（横長の四角）】を選択
（デフォルトではオリジナルのままになっています）
| メニュー名 | 比率 |
| オリジナル | 任意の画像比率 |
| ワイド | 横16：縦9 |
| スクエア | 横1：縦1 |
④ 切り取られる範囲が指定されるので画面右上の【適用】をクリックしたあと、同じく画面右上の【保存】をクリック。
⑤ すると画像では分かりづらいですが少し横長にリサイズされてます。
あとはツイートするテキストを入力してツイートするだけ。
TL（タイムライン）で見てもちゃんと表示されています。
ツイート用の画像はiPhone内でもTwitterアプリ内でも簡単に作ることができます。
ツイート用画像はJPGではなくPNG形式にしないと画像が劣化します
補足ですがTwitterで投稿した画像形式がJPGだと、画像がかなり圧縮されて劣化してしまいます。
せっかく撮った綺麗な写真や自分の作品を綺麗に表示させたいならPNG形式でツイートしましょう。
Twitterで投稿したJPG形式の画像はかなり圧縮されて劣化してしまいますが、PNG形式の場合は劣化しないため、可能であればPNGで保存してからツイートするようにしましょう。
JPGをPNGに変換するならJPEG・PNG 変換 Pro 〜画像フォーマットを変換で変換できます。
ヘッダー画像の作成に関しては下記のアプリがおすすめです。
かんたんにヘッダー画像の作成ができるアプリ
ヘッダー画像のデザインを細かくこだわる必要がなければ、CanvaやPhontoなどのアプリで簡単に作成が可能です。
Canvaのインストールはこちら
Phontoのインストールはこちら
そのほかにも【 無料で使える画像作成・加工アプリまとめ 】におすすめのアプリを色々紹介してるので是非参考にしてみてください。
ヘッダー画像の作成はこちらから。
まとめ：Twitter画像の適正サイズを理解して正しく表示させましょう
この記事でのまとめです。
せっかく良いツイート文を作ったのに画像がうまく表示されないともったいないですよね。
ヘッダー画像やプロフィールアイコンも同じで、ユーザーがTwitterで見る流れは、
- TL（タイムライン）で流れてきたツイート
- アイコン
- ヘッダー
- プロフィール
- 固定ツイート
- 過去ツイート
となります。
特に文章よりもまずは画像を見るので、この画像をしっかり作り込む必要があります。
Twitterの記事が気になった方はこちらの記事もおすすめ！
ヘッダー画像、ロゴデザイン制作のご依頼も受付中
ヘッダー画像やオリジナルのロゴデザインなどを制作しますので是非ご相談ください。
ブログやSNSを魅力的に！ヘッダー画像のデザイン制作承ります！
ヘッダー画像（一部）
ロゴデザイン（一部）
コメントはこちら ご質問・情報提供等ございましたらコメント欄に書き込んでください