ポイント!
- チャンネルのバナー(チャンネルアート)は、見る媒体によって表示範囲が異なります
- 目立たせたい部分、伝えたい情報などは、スマホでも表示されるようにバナーを作りましょう
- ブラウザ上で画像が作れる「Canva」を使えば、サクッとバナー画像が作れます

どうもー!トールです(@tooru_medemi)
チャンネルのバナー画像って、スマホとパソコンでは「表示範囲が異なる」から、しっかりと調節して画像を作るといいです。
でも、このバナー画像の調整って、意外と難しいんですよね。
わたしの「YouTube歴」2022.8 現在
- YouTube活動:約6年
- 運営チャンネル総数:これまでに10以上
- 動画投稿本数:1,000本以上
- 愛用編集ソフト:Wondershare Filmora
- 愛用画像作成ツール:Canva Pro
ちなみに、YouTubeが推奨してるバナー画像のサイズは「2,560×1,440」なので、サイズ的には結構大きめです。
わたしのチャンネルでは、以下の画像を作ってバナーに設定しています。ブラウザ上で使える「Canva Pro」というツールを使ったら、作業時間5分くらいでサクッとバナー画像が作れました。


パソコンからチャンネルを見たときは、次のようになります。


チャンネルのバナーには、画像の中央部分が「帯状」に表示されます。
さらに、スマホからチャンネルを見ると、以下のように。


このように、チャンネルのバナー画像を作るときは「パソコンとスマホ表示」の両方を意識しながら、画像をデザインしていきましょう。
ということで今回は、画像編集ツール「Canva」を使ったバナー画像の作り方について、操作方法などを含めて解説していきます。
ちなみに、Canvaではバナー画像の他にも、以下のようなことができるんです。
「Canva」で作れる画像
- サムネイル
- チャンネルバナー
- チャンネルアイコン
- Instagram投稿画像
- Facebook投稿画像
- ブログのアイキャッチ画像 etc
チャンネルのバナー画像を作るときの注意点
冒頭でもお伝えしたように、チャンネルのバナー画像はパソコンやスマホなど「視聴者が見ているデバイス」によって、表示される範囲が変わります。
一例として、以下の画像を見てください。












このように、パソコンでもスマホでも表示される「中央部分」に、一番アピールしたいものを載せておくことがポイント。
大事なものが見切れたりすることだけは、絶対に避けましょう。
スマホでの見た目を意識して画像をデザイン
視聴者がチャンネルを見たときに、バナー画像は一番目立つ部分です。たとえば、以下のような情報を載せておくのもあり。
- 伝えたいメッセージ
- キャッチフレーズ
- チャンネル名
- 紹介したい商品 etc
画像の中心にこいうった情報を入れておけば、チャンネルを見に来た視聴者にアピールできます。わざわざ手の込んだ画像にする必要もなし。
ただ1つだけ忘れないで欲しいのが、スマホユーザーを意識してバナー画像を作ること。これが重要なポイントです。
それでは「Canva」を使ったバナー画像の作り方について、具体的な解説をしていきます。
「Canva」を使ったチャンネルバナー画像の作り方
Canvaはブラウザ上で使えるツールなので、パソコンにソフトをインストールする必要もありません。登録したらすぐに使えます。
ということで、まずは「Canva Pro」に登録しましょう(無料プランでもOK)。
- Canvaにログインをする
- 画面右上にある「デザインを作成」をクリック
- 「YouTubeチャンネルアート」をクリック


- 画面左側にある「アップロード」をクリック
- STEP1でダウンロードした画像を選択(ドラッグ&ドロップでもOK)


- アップロードした「テンプレ」をクリック
- 右側のシートに表示されるので四隅を合わせる(ピッタリ合わせる)


- 左側にある「素材」をクリック
- 「線と図形」をクリック


- 「枠型」の図形をクリックして挿入


- 枠線の色を変えたいときは「左上のカラー」をクリック
- 枠線のサイズをテンプレのスマホ表示範囲に合わせる(Desktop minimum and mobile)
- テンプレにカーソルを合わせて右クリックして「削除」をクリック


- アピールしたいことは「枠線の中」に入れる


- バナー画像に使う素材画像をドラッグ&ドロップ


- 文字を入れるときは「テキスト」をクリック
- 「見出しを追加」をクリック
- 文字のフォントや大きさを調整


【デザインのテンプレートを使う場合】
- 「ページを追加」をクリック
- 左側にある「テンプレート」をクリック
- 使いたいテンプレを選んでクリック


- 先ほどの枠線をコピペ
- あとは自由にカスタマイズ


- 画像が完成したら「枠線」を削除する
- 右上にある「ダウンロード」をクリック
これでバナー画像の作成は終了です。あとはチャンネルトップに設定するだけ。
バナー画像の設定方法については『YouTubeチャンネルのアイコン&バナー画像の変え方【画像サイズに注意しよう】』で解説しているので、参考にしてください。
チャンネルのバナー画像を設定したら、パソコンとスマホの両方でしっかり表示されているか確認しておきましょう。
チャンネルのバナーでアピールするときのポイント
では次に、チャンネルのバナー画像を作るときのポイントです。バナーのポイントは、視聴者がスマホで見ても「アピールしたい情報が目に入るようにする」こと。
たとえば、下記のことなどをアピールするのもあり。
- チャンネル名
- 配信時間
- 販売商品
- イベント告知 etc
チャンネルのバナー画像は「看板」としても使えるので、ぜひ有効活用しましょう。
それでは、いくつか例を挙げてみます。
例①:配信時間が一目で分かるチャンネル
【AbemaTV公式 YouTube】(パソコン表示)


【AbemaTV公式 YouTube】(スマホ表示)
- 「配信時間・頻度」がしっかり明記されています(毎晩9時)
- チャンネルの信用に関わるので、配信時間や頻度は守りましょう
例②:人気商品が一目で分かるチャンネル
【Nintendo 公式チャンネル】(パソコン表示)


【Nintendo 公式チャンネル】(スマホ表示)
- 人気商品を載せて、ブランド力をアピールしています
- 視覚に訴えかけることで、購買意欲が掻き立てられます
例③:イベントの告知が一目で分かるチャンネル
【バンダイナムコアーツ チャンネル】(パソコン表示)


【バンダイナムコアーツ チャンネル】(スマホ表示)
- 映画の公開日を載せて、宣伝をしています
- イベント終了後、忘れずに画像を変更しましょう
このように、チャンネルのバナー画像はチャンネルの「看板」になるもの。以下のような視聴者に「伝えたいこと」や「アピールしたいこと」を載せておきましょう。
- 配信時間
- 販売する商品
- イベント情報
- ロゴなどのブランド
- チャンネル名 etc
また、画像を作るときはスマホ表示でも分かるように、位置や大きに気をつけてください(見切れてしまわないように)。
なお、今回紹介した「Canva Pro」はブラウザ上で使える便利なツールで、バナー以外にもサムネイル作りにも役立ちます。ぜひ試してみてください。
コメント