【各種SNSのサイズ表】facebook・twitter・アメブロ・YouTubeなどのヘッダー&アイコンの推奨サイズ

web関連

facebookやtwitterを運営する際、こだわった画像を作ろうと思っても、適切なサイズを知るのに一苦労・・なんてことありますよね。

 

今回はメジャーなSNSやサイトで設定するヘッダーやアイコンの推奨サイズをまとめてみました。

ぜひお役に立ててくださいね。

スポンサーリンク

【各種SNSのサイズ表】facebook・twitter・アメブロ・YouTubeなどのヘッダー&アイコンの推奨サイズ

サイズ一覧

各種SNSのサイズ一覧です。

下の表に記載されている「PC」=パソコン、「SP」=スマートフォンのことです。

サイト名 項目 サイズ 備考
facebook カバー画像(ヘッダー) 横820px ×縦360px PC=横820px×縦312px

SP=横640pxx縦360px

facebook アイコン 横170px縦170px PCでは170x170px、

SPでは128x128px

twitter カバー画像(ヘッダー) 横1500px×縦500px
twitter アイコン 400×400
YouTube チャンネルアート(ヘッダー) 横2560px × 縦1440px ◆TV:横2560px × 縦1440px
(表示サイズの最大値)
◆Desktop:横2560px × 縦423px
◆Tablet:横1855px × 縦423px
◆Desktop:横1546px × 縦423px
(表示サイズの最小値。ロゴやテキスト、見切れると困るものはこの範囲内に入れる。)
YouTube エンドカード 横1280×縦720px(もしくはその比率 横1920px×縦1080pxなど)
YouTube サムネイル 横1280×縦720px(もしくはその比率 横1920px×縦1080pxなど)
アメブロ ヘッダー新サイズ 横1120px×縦300~400px
アメブロ ヘッダー旧サイズ 横980px ×縦300~400px
ココナラ プロフィールヘッダーサイズ 横2560px ×縦840px
ココナラ サービス(出品)ページのサムネイル 【制作系】
横1220px×縦1240px【その他】
6:5(横:縦)
「似顔絵・イラスト・漫画」、「デザイン」、「動画・写真・画像」、「Webサイト制作・Webデザイン」カテゴリのみサービス画像を最大1220px×1240px

  • 横長の画像の場合:横幅を1220ピクセルにあわせる
  • 縦長の画像の場合:縦幅を1240ピクセルにあわせる

Facebookのカバー画像(ヘッダー)&アイコン

Facebookのカバー画像(ヘッダー)

 

フェイスブックのカバー画像は、

パソコンのカバー画像(ヘッダー)表示サイズが横820px×縦312px。

スマホのカバー画像(ヘッダー)表示サイズが横640pxx縦360pxとなっています。

 

画像自体は、820px×360pxで作成しましょう。

 

またアイコンの表示位置が、

パソコンでは左下スマホでは中央

 

パソコンとスマホで見切れ範囲や、アイコン被りが起こる場所がだいぶ変わってくるので、作る際にはコツがいります。

 

以下記事で詳しく説明しているのでぜひ参考にしてみてください。

Facebookのカバー画像(ヘッダー)の推奨サイズ【2020年最新版】アイコンと被らない配置とコツ
にゃろしぃ 今回は、Facebookのヘッダー画像のサイズについて紹介するね! Facebookでは、ヘッダー画像のことを「カバー画像」と呼ぶよ♬ Facebookのヘッダー画像(カバー画像)の...

 

Facebookのアイコン

Facebookのアイコンは、

PCでは170x170pxスマホでは128x128pxで表示されます。

 

これより大きいサイズであれば、設定時に調整できるので事前にこのサイズにする必要はありません。

Twitterのヘッダー&アイコン

Twitterのヘッダー

Twitterのヘッダーは1500px×500pxです。

 

2019年の5月ごろまでは、パソコンでの表示時に上下に見切れる部分がありましたが、現在では見切れは発生しません。

アイコンがヘッダーの左下に半分程度重なるように表示され、パソコンとスマホでアイコンの位置が微妙にズレるのでその位置には文字や人・キャラの顔を入れないように注意しましょう。

Twitterヘッダー画像の推奨サイズ!【2020年最新版】見切れない最適サイズは?
にゃろしぃ 今回は、Twitterのヘッダー画像のサイズについて紹介するよ! Twitterヘッダー画像の最適サイズ Twitterにおけるヘッダーの推奨サイズは? Twitterのヘッダーの推奨...

Twitterのアイコン

Twitterのアイコンは、400px×400pxです。

たまに、アイコンが荒れている(画像が汚い)人がいますが、そういった人はこのサイズより小さいサイズを設定している人です。

 

画像が荒れていると、「拾い画感」が出てちょっと胡散臭さが漂ってしまうので、アイコンの画像は400px以上のものを設定するようにしましょう。

アメブロのヘッダーサイズ

アメブロのヘッダーサイズ(ブログヘッダー)

アメブロのヘッダーサイズは、横1120px×縦300~400pxです。

 

実は縦幅に特に決まりはありません。

なので、縦500pxなどでも大丈夫ですが、記事が視界に入りにくいのでお勧めできません。

 

ただし、気を付けるべき点があります。

それが以下のとおり。

  • ブログのデザインを「CSS編集用」にすること。
  • CSSにコードを記載すること。
  • CSSに縦幅を記載すること。
  • ヘッダーが表示されるのはパソコン閲覧時だけであることを認識しておくこと。

 

詳しくは、下記の記事で詳しく説明していますので、参考にしてみてください。

アメブロで独自のヘッダーを設定する方法【2020年最新版】
アメブロを運営していく中で、「自分だけのヘッダーを設置したいなぁ」と思ったことはありませんか? 今回はやり方がわからないという方に向けて、アメブロでの独自ヘッダーの設置方法を紹介したいと思います。 ぜひ、この記事を読んで、あなた...

 

アメブロのヘッダーサイズ(プロフィールヘッダー)

アメブロでは、ブログのヘッダーとは別に、プロフィールのヘッダーがあります。

プロフィールのヘッダーは、1120px×256pxです。

 

ブログのヘッダーはアイコンと被りませんが、プロフィールのヘッダーは、ヘッダーに被る形で左下にアイコンが表示されますので、注意しましょう。

また、プロフィールヘッダーは、スマホでも表示されます。

ヘッダー画像を用意する方法

ヘッダー画像などを無料でつりたい人は、下記記事を参考にしてください。

簡単に自分用の画像が作成できます。

 

無料で画像作成!初心者でも簡単にヘッダーやサムネイルを作成できるwebツール【Canva】
ブログやSNSのヘッダーや、YouTubeのサムネイルなど、自分が運営しているものに独自の画像を入れたい場合ってありますよね。 でも、 「誰かに依頼するほど、収益をあげているわけでもない」 「画像は簡単なものでいい...

 

無料でヘッダーやサムネイルなどの画像が作れる!会員登録不要!【editor AC】の使用方法
個人ブログやYouTubeなどのサムネイル、SNSのヘッダーや投稿で、独自の画像が欲しいな、と思ったことはありませんか? 依頼するほどしっかりしたものである必要がないなら、自分で作ってみましょう。 今回は、特別なソフトや...

 

「自分で作れきれない。」

「しっかりしたものがほしい」

 

そういう方は、ココナラなどで、気軽にクリエイターに依頼することができますので、利用すると良いでしょう。

>> ココナラのクリエイターに依頼する

「【各種SNSのサイズ表】facebook・twitter・アメブロ・YouTubeなどのヘッダー&アイコンの推奨サイズ」まとめ

今回は各種SNSのサイズを紹介しました。

 

各SNSで、推奨サイズやアイコンとの被り方などが異なるため、同じ画像を使うことはオススメできません。

同じ画像を使う場合は、風景やモノなど、上下左右、どこかが見えなくても成り立つような画像にしましょう。

 

文字やキャラクターなどを入れる場合は、それぞれに調整しなおして適したサイズを使う用にしましょう。

タイトルとURLをコピーしました