SNSサイトのカバー・プロフィール画像のサイズまとめ
最終更新日: Update!!
先日YouTubeのチャンネルアートの制作依頼があり、サイズや作成時の注意点などを調べていると結構細かく記載があったので、この機会に代表的な SNSサービスのカバー画像サイズ等をまとめてみました。サイズだけでなく、ファイル形式やデータサイズなども作成する際には参考にして頂けると思いま す。
表示サイズはカバー画像が幅851pxで高さが315pxになっています。このサイズより小さい場合は表示サイズまで拡大されて表示されるようです。
またアップロードする画像は最低幅399pxで高さが315px以上である必要があります。キレイに表示させる為にも出来るだけ推奨サイズでのアップロードをおすすめします。
プロフィール画像の表示サイズは幅160pxと高さ160pxの正方形で表示されますが、最低幅180pxと高さ180pxでアップロードする必要があります。また拡大表示の際は幅404pxと高さ404pxで表示されるのでこちらが最大サイズになります。
データ形式や容量については、カバー画像がjpgファイルで100KB未満のものを、またプロフィール画像にはpngファイルが適しているようです。
カバー画像は表示サイズが幅1500pxと高さ400pxになっていますが、推奨サイズは幅1500pxと高さ500pxとなっており、カバー画像については100px分が見切れるので注意が必要です。
またプロフィール画像について推奨サイズは幅400pxの高さ400pxになっています。
データ形式と容量ですが、jpg / png / gif(アニメーションgifを除く)となっており、サイズ制限は2MBまでとなっています。
カバー画像は表示サイズが幅950pxと高さ540pxになっています。アップロード時の推奨サイズは幅1080pxで高さ608pxで表示サイズよりも多きサイズになっています。
プロフィール画像は幅120pxと高さ120pxの円形で表示され、推奨サイズは特に指定は無いですが正方形である事が望ましいようです。
画像のファイル形式はjpg / png /gifとなっています。
チャンネルアートですが、表示サイズは下記のとおりデバイスによって異なりますが、推奨サイズは幅2560pxで高さ1440pxとなっています。
データ形式はjpg / png /gif(アニメーションgifを除く) / bmpが対応しています。
各デバイスごとの表示サイズは次の通りです。
Facebook(フェイスブック)
SNSといえば代表的なイメージのフェイスブックです。利用されている方も多くビジネスでも活用できるのでカバー画像はとても重要ですね。キレイなカバー画像があるとページの印象もぐっと良くなりますね。
twitter(ツイッター)
おなじみの短文投稿サイトです。友達や親しい人と気軽にやり取りが出来る事に特化したSNSサービスです。企業でも報告や連絡用に導入しているところも多いのではないでしょうか。
Google+(グーグルプラス)
SNSの知名度ではフェイスブックには及ばないものの、独自の機能も魅力的なグーグルプラスです。公開範囲の設定が簡単な点ではプライバシーを守りやすいというメリットもあります。
YouTube(ユーチューブ)
おなじみの動画投稿サイトのYouTubeでは各チャンネルごとにチャンネルアートと呼ばれるカバー画像を設定する事が出来ます。デバイスによって表示サイズが変わるようになっているため、作成時にはレイアウトやデザインに注意する必要があります。
- パソコン(最大サイズ) / 幅2560px × 高さ423px ※濃いグレーのエリア(安全領域+柔軟領域)
- パソコン(最小サイズ) / 幅1546px × 高さ423px ※グレーのエリア(安全領域)
- タブレット / 幅1855px × 高さ423px ※少し横長に表示されます
- モバイル / グレーのエリア(安全領域)が各ディスプレイに合わせて縮小表示されます
- テレビ / 幅2560px × 高さ1440px(アスペクト比16:9)が表示されます ※黒色のエリア(画像全体)
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories