WEBデザイン youtube

youtubeチャンネルアートをPC・スマホ・アプリでちゃんと表示できるデザインにするためサイズを調べた

youtubeのチャンネルページのヘッダー画像にあたる「チャンネルアート」ってPC・スマホ・アプリで見え方違うけどどうデザインすればいいの?っていうのを調べてみました。

2019年10月現在の調査です。

youtube推奨サイズは2560 X 1440 ピクセルだけど

自分のyoutubeチャンネルページでチャンネルアートを登録しようとすると「チャンネルアートの推奨サイズ:2560 X 1440」って書いてますけど、2560 X 1440ピクセルの範囲内目一杯使ってデザインしちゃうと、PC・スマホ・アプリそれぞれでトリミングされて、チャンネルタイトルなんかが半分くらい消えちゃったりして見えなくなってしまった。

ちゃんとそれぞれのデバイスできちんと表示させたいので、いろいろ調整してどの範囲に配置すれば見栄えの良いデザインになるのかを調査。

私のyoutubeチャンネルに使用したこの画像で検証です。

Otometic Jet Channel

ちなみにAdobe Illustrator を使用しています。

 

推奨サイズのフルサイズは「テレビ」用

PC・スマホでフルサイズで表示されることはなく上下がカットされるので、フルサイズの2560 x 1440ピクセルっていうのはApple TVなどでテレビで表示させるときを想定したサイズなんでしょう。

Apple TV 持ってないんで検証してないですけど。

チャンネルアート選択画面

少なくとも、PC・スマホでは上下がバッサリとトリミングでカットされてしまう。

メインターゲットはやっぱりPC・スマホユーザーでしょうから、やはりPC・スマホ向けに最適化されたデザインにします。

PCのサイズは1680 x 270

youtube PCでの見え方

チャンネル登録者数がめっちゃ少ないのは気にしないでください。友達がいないんです(´・ω・`)

閲覧環境によって多少違いがあるのかもしれませんが、実測で使用した環境はWindows10でモニタ解像度は1920 x 1080 72dpi、ブラウザはChromeの最大ウィンドウサイズの場合、チャンネルアートのサイズは1680 x 270ピクセルでした。

横幅は全体が入るように縮小表示、縦は上下トリミング。

これが2560 x 1440 サイズのデザイン上でどのサイズ・どの範囲になるかと言うと、

youtube チャンネルアート 制作画面 PC

この範囲です。

2560 x 411ピクセル相当で、上部のトリミングは507ピクセル、下部のトリミングは523ピクセルでした。

iPhone Safari は 826 x 136

youtube safariで見た画面

スマホはiPhone11 で検証。

ブラウザはSafariで、チャンネルアートのサイズはピクセル値で826 x 136でした。

PCと同様に横幅は全体が入るように縮小表示、縦は上下トリミングという仕様です。

これが2560 x 1440 サイズのデザイン上でどのサイズ・どの範囲になるかと言うと、

youtube チャンネルアート 制作画面 スマホ

この範囲です。

2560 x 420ピクセル相当で、PC表示よりも少し縦幅が大きいです。
上部のトリミングは511ピクセル、下部のトリミングは509ピクセルでPC表示と若干の誤差がありました。

 

iPhone youtubeアプリでは 828 x 176

youtube アプリの画面

iPhone11 のyoutubeアプリでは、ピクセル値で828 x 176ピクセルです。
しかし、左右もトリミングされPC・スマホよりも表示範囲が狭まります。

これが2560 x 1440 サイズのデザイン上でどのサイズ・どの範囲になるかと言うと、

youtube チャンネルアート 制作画面 アプリ

この範囲です。

中央部分を切り取る感じで、1548 x 330ピクセル相当になります。
上下のトリミングは555ピクセル、左右は506ピクセルで丁度中央部分になり、PC・スマホよりもかなり範囲が狭いです。

まとめますと

イラストレーターのアートボード上でガイドラインを引くとこんな感じ。

youtube チャンネルアート 制作画面

中央赤枠の最小サイズのyoutubeアプリできちんと表示されるよう、中央の赤枠部分にアイキャッチやメインビジュアルとタイトルロゴなどを配置するのがいい感じですね。

あとは他のデバイス表示でもスカスカ感がなくなるように背景画像などを工夫するといいんじゃないでしょうか。

最後まで読んでいただきありがとうございます。

せっかくなんで、「Otometic Jet Channel」見て、よかったらチャンネル登録してもらえると嬉しいです。

チャンネル登録お願いします!!!

チャンネル登録お願いします!!!!!!

 

-WEBデザイン, youtube
-

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.