ヘッダー画像作成まだ悩んでる?Canvaで誰でもデザイナー級!

視覚情報は強烈に印象に残りますよね。ブログやFacebookなどのSNSのヘッダー画像(カバー画像)で世界観を印象付けたいものです!

今まではパワポなどでちまちま作っていましたが、便利なツールを見つけました。無料で使える”Canva”を使うと、思い通りのサイズで誰でも簡単にデザイナー級の世界観のあるヘッダー画像が作れますよ!

コンセプトが決まったら、早速ヘッダー画像を作成しましょう!

この記事では、

  • Canvaでヘッダー画像を作る方法
  • 無料で使える素材サイト
  • 各SNSのカバー画像サイズ、ワードプレスとアメブロのヘッダーサイズやYouTubeカバーとサムネイルのサイズ、LINEのリッチメッセージなどの画像サイズ

をご紹介します。

Canvaを使った画像の作り方

Canvaのサイトに行きます。

無料登録をします。 

Canva公式サイト登録へ

Facebookアカウント、Googleアカウント、メールアドレスで登録ができます。クリックすると、ポップアップが出ます。

登録したいアカウントをクリックし、流れに乗って登録してください。

ホーム画面から作成開始

こちらが、ホーム画面です。

デザインを作成を横にスクロールすると、様々なデザインが見られます。

また、下にスクロールするとあらゆるテンプレートが見られます。

サイズ指定

今回は、ワードプレスのサイト用に1200×500のサイズ指定で画像を作りますね。

デザインを作成の右端に、カスタムサイズという表示があるので、それをクリックすると、サイズを入力するポップアップが開きます。

サイズを入力して、新しいデザインを作成、をクリック。

今回はサイズ指定の単位をpx(ピクセル)にしました。他の単位の場合は、pxの隣の下▼を押して選んでください。

デザインの選択

すると、何もないキャンバスが出てくるので、左のデザインから好きなものを選びます。

千明
千明

画像やフォントは後から簡単に変えられるますよ。適当に選んでくださいね。

左欄のデザインをクリックして、デザインを選びました。

これから、画像と文字を変更します。

画像の変更

左欄の一番下のもっと見るをクリックします。すると、連携しているアプリが表示されるので、Pixabayをクリックします。

Pixabayは、無料の画像サイトです。Canvaと連携しているので、簡単に素敵な無料画像をふんだんに使用することができるのです! 

これは便利!

Pixabayの画像が表示されます。上の検索で画像検索してくださいね。

気に入った画像をクリックすると取り込めます。

もともとも背景はいらないので、右クリックして、削除ゴミ箱マークをクリック。

背景にしたい画像を右クリックし、最背面へ移動をクリックして、背景に設定します。

画像が小さいので、◯などをドラッグして、最適な大きさや位置に設置します。

Pizabay以外に、Canvaの中でも写真が用意されています。

左の写真をクリックすると、写真が現れます。ただし、Canvaの写真は、有料のものがあります。カーソルを上にしたときに王冠マークとマークが出たものは、有料です。無料のものは、無料と表示されます。

文字の変更

文字を変えたいときは、文字をクリックすると、上の欄に使用中のフォントが表示され、左に使えるフォントが出てくるので、気に入ったものをクリックします。

なお、有料のものは、王冠マークになっています。無料でも、豊富にあるので、いろいろな文字が選べますよ!

文字の大きさは、使用フォントの欄の右隣で変更できます。Vマークをクリックすると大きさが選べます。

文字や枠の位置は、ドラッグアンドで自由に変更可能です。

枠の大きさは、角の◯をドラッグアンドドロップで変えられます。

文字を加えたいときは、左のテキストをクリックすることで、加えられます。

これで出来上がり!

ダウンロードと保存

出来上がった画像をダウンロードして保存しましょう。

しばらく待ちます。

これで、出来上がりです。

エフェクトとフィルター

このほかに、エフェクトやフィルターなどがあるのでご紹介します。

画像をクリックすると上に出てきますよ。

フィルター

スマホの写真アプリのようなフィルターがあります。

調整

ぼかしも簡単にできます。

エフェクト

エフェクトもあります。(使えるかどうか別として。。)

ちなみに、Liquify をやってみました。 

水が揺れるような効果があります。

簡単にサイズ指定の画像が出来上がりました!

デザインテンプレート

デザインテンプレートから選ぶ方法もあります。ただし、無料ではCanva内でサイズ変更ができないので、お気を付けください。

気に入ったデザインを取り込んで画像やテキストを変更することになります。やり方は上と同じです。

YouTubeサムネイルやFacebookカバー・投稿、Twitterヘッダー、Instagramストーリーなど、様々なテンプレートがありますので、ホーム画面から見てみてくださいね。

主なSNSやブログのヘッダーサイズ

ワードプレスサイト

使用しているテーマによってさまざまです。確認するのには、「テーマ名+ヘッダーサイズ」で検索するのが手っ取り早いです。人気のテーマなら、たいてい答えが見つかります。

横幅は、テーマ推奨に従いますが、高さは好みです。

PC、スマホ、タブレットによって形が変わり、特に、タブレットは縦使い、横使いも考慮に入れるので、縦の幅は想定よりも大きめにしています。

画像をサイトに設定してから、機器による見た目をチェックすることをお勧めします。

画像を作るコツとしては、重要な部分はうえの方に寄せたほうが良い、ということです。下の方にすると、切れたりするからです。

アメブロ

アメブロのヘッダーは、縦は自由で、横幅1120pxです。

Facebook

Facebookは、スマホとPCで、明らかにレイアウトが変わってしまうので、厄介です。

PCでは、では幅820ピクセルx高さ312ピクセル

スマートフォンでは幅640ピクセルx高さ360ピクセル

スマホでは中央下部分にプロフィール写真が入ってしまいます。

PCでは

こんな感じ。

プロフィール写真はほぼスマホ用画像の高さと同じ直径なので、文字や重要な要素は、中央下に入れないようにします。

YouTube

ヘッダー画像

チャンネルアートで推奨のサイズ  2560×1440px

YouTube側で公式にチャンネルアートテンプレート というものを提供してくれています。これに沿って作成すると、スマホ、PC、テレビなどで表示サイズの違いがありますが、文字などが見切れないように作成できます。

サムネイル画像

YouTubeヘルプセンターによると、

  • なるべくサイズは大きいほうが良い、ただし ファイルサイズは2MB以下
  • 縦横比は16:9がベスト 
  • 1280px×720px がベスト

ということなので、1280px×720px で作ればよいですね。

もっと詳しいサムネイル画像の設定方法の手順はこちらの記事で詳しく紹介しています。

Youtubeのサムネイルの設定方法。画像のサイズと全手順・PC版

Line

プロフィールのカバー画像


プロフィールのカバー写真の大きさは、公式によると

  • 横720×縦1280ピクセル
  • 画像のサイズ比率は、横:縦=1:1.8

大きい画像を使用すると、一部分しか使えないので注意が必要です。

リッチメッセージの画像サイズ

基本形は1040pxの正方形です。

これをテンプレートによって、1/2や1/3に分割しています。

  • 2分割の場合 520px
  • 3分割の場合 346px
  • 2分割をさらに2分割の場合 260px

リッチメニュー

リッチメニューは、トーク画面の下に固定できる画像です。

サイズは、
2500px × 1686px、2500px × 843px、1200px × 810px、1200px × 405px、800px × 540px、800px × 270px

ファイルサイズは 1MB以下

おすすめフリー画像サイト

ヘッダー画像だけでなく普段の投稿にもとても重宝している画像サイトです。

ここでご紹介しているサイトは、基本的にクレジット(出所)記載の義務もありませんし、商用利用OKです。詳しくはお使いになる前に必ず利用規約に目を通してください。

Pixabay

Pixabay は、美しい写真とイラストアートがログイン不要、無料で使えます。とても使いやすいサイトです。一番おすすめ。

写真AC (姉妹サイト・イラストAC、シルエットAC)

写真ACは、基本的に日本人のモデルがを使用しているので、使いやすい写真が多いです。とても豊富で姉妹サイトのイラストACにもお世話になっています。

無料登録が必要です。無料会員は、一日5回の検索までで、ダウンロード時に15秒かかります。たまにアンケートに答えると時間が短縮されます。

Freepik.com

Freepikは、無料で商標利用できる画像がふんだんにあります。利用するときリソース表示が必要です。

ヘッダー画像の作成方法のまとめ

Canvaでサイズ指定をして画像を作成すると、簡単に世界観のあるヘッダーになります。

サイズ指定をしなくても、テンプレートの中に、YouTubeやFacebookなどはあるので、それを使ってもよいでしょう。

手軽に作れるので、画像サイトとともに活用してくださいね。

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