アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

Day7:SNSのバナー制作のサイズ感

f:id:simpledancer:20200419230815j:plain

技術的には特になにもしてないのですが↑文字を乗せて、不透明度を下げただけ。

Youtubeのバナーサイズが、規定どうり作ると、PCやスマホでみた時が全く違うということを知りました。

 

support.google.com

チャンネル アートは、パソコン、モバイル デバイス、テレビ画面で表示が異なります。大きい画像は切り抜かれる場合があります。すべてのデバイスで最適に表示されるように、2560×1440 ピクセルの画像を 1 枚アップロードすることをおすすめします。

  • 最小アップロード サイズ: 2048×1152 ピクセル。
  • テキストやロゴの最小安全領域: 1546×423 ピクセル。この範囲外にある画像は、一部のビューやデバイスではカットされて表示されることがあります。
  • 最大幅: 2560×423 ピクセル。この幅では、画面のサイズに関係なく「安全領域」が常に表示されます。チャンネル アートの両端の領域はユーザーのブラウザ ウィンドウのサイズに応じて表示される場合と表示されない場合があります。
  • ファイルサイズ: 6 MB 以下。

 

simpledancer.hatenablog.com

 2560×1440 ピクセルだとPCで見ると一部しか見えない

f:id:simpledancer:20200419231157p:plain

テレビ画面とかでみた場合は、バーンとサイズ通りできるのですが、一部を切り取られた形になるんですね。(知らなかった)

テレビ、PC、スマホ とサイズがバラバラに表示されるので、ちょっとちゃんと作らないと難しいな〜と思って、とりあえずこの文字だけのやつを仮で挿入しました。

他のSNSのバナーにしても、あまり画面ぴったり、とかに作っちゃうと違うデバイスでは大事なところが見えなかったり、アイコンに文字が隠れちゃったり。

意外といい感じに作るのが難しくて2時間ほどウンウン唸ってました。

そういうわけで、今日はちょっとサイズ調整と簡単バナーだけでデザインは終わってしまいました(あ、提出した商品ロゴは作った)

今日はアイディアが出なかったからバナー制作はちょっとストップで、ただ、バナーはなんだかんだ仕事もあるのでちょっとずつ面白いの作れるようになりたいなと思ってます。Gifの練習もしたかったけど、時間がかかるので今日は中止。

早寝早起きの人になります。(16時間断食も何気にはじめてみた)

simplelifedancer.hatenablog.com