ブログヘッダーの作り方|Canvaでおしゃれ・かわいく仕上げるコツとサイズ一覧

目次
  1. Step1. ヘッダー画像のサイズを確認しよう
  2. 作る前に考えるといいこと
  3. 無料のデザインツールCanvaを使ってヘッダー作成
  4. 簡単おしゃれにデザインするコツ
  5. まとめ

ヘッダーは、ブログやSNSを表示させた時にまず一番上に表示される大きな画像のこと。

そのアカウントの目印にもなる部分です。

プロに頼むほどではないけれど、自分でもおしゃれなヘッダーがほしい!という方のために、簡単&無料でできるヘッダー画像の作り方をご紹介します。

Step1. ヘッダー画像のサイズを確認しよう#

ブログサービス、SNSによって、ヘッダー画像のサイズが違います。

まずは作りたい画像のサイズを確認しておきましょう。

サービス横幅縦幅
アメブロ1120px300px~400px
ライブドアブログテーマによって変わる
900px以上が多い
テーマによって変わる
300px~400px
はてなブログ(PC)1000px
(スマホ)350px
(PC)200px
(スマホ)200px
note1,920px1,006px
ツイッター1,500px500px
Youtube2,560px1,440px
Facebook(PC)820px
(スマホ)640px
(PC)312px
(スマホ)360px

ブログ・SNSのヘッダー画像サイズ

WordPressは各テーマによって推奨サイズが変わってくるので、お使いのテーマの公式HPをご確認ください。

作る前に考えるといいこと#

  • ヘッダーに載せる文字
  • 使う画像
  • 使いたい色

ヘッダーに載せる文字#

ブログのタイトル、名前、キャッチコピーなどを入れておくと、印象に残りやすいです。

使いたい画像を用意しよう#

ヘッダーの画像にいれる写真やロゴなどを用意しましょう。

なくても、OKです。

動画でも紹介しています。

色#

  • 2〜3色に絞る
  • 画像で使われている色と揃えるとまとまりやすい

無料のデザインツールCanvaを使ってヘッダー作成#

Canvaは無料でおしゃれな画像が使えるデザインツールです。

さまざまなテンプレートをもとに、ヘッダー画像はもちろん、ブログのサムネイル、インスタなどSNSの画像など、ありとあらゆる画像をつくることができます。

無料でも十分使えますので、「ヘッダー画像を自分で作りたいけど、どのデザインツールを使っていいかわからない?」というときには、一度使ってみてください。

動画でもヘッダー作り方を解説しています。

Canvaのアカウントを登録してログインします。

STEP 1 デザインを新規作成

右上の「新しいデザインを作成」をクリックします。

Canvaでヘッダー画像を作成

作りたいヘッダー画像のサイズを指定します。

Canvaでヘッダー画像を作成

今回は、アメブロのヘッダーサイズ(幅1120px,高さ400px)で作っていきます。
そのままのサイズだと、粗く表示されてしまうことがあるので、大きめの2倍サイズ(幅2240px,高さ800px)に設定しています。

STEP 2 使いたいテンプレートを選ぶ

左側のテンプレートから好きなデザインを選びます。

STEP 3 文字や写真を入れる

右側の作業用スペースで好きな写真に差し替えたり、文字や色を変更することができます。

また、左側のメニューからイラストや写真を追加することもできます。(有料の画像には透かしがはいっているのでご注意ください!)

Canvaでブログヘッダーを作成

STEP 4 画像が完成したらダウンロード

右上の共有→ダウンロード→ファイル形式を選択→ダウンロード

Canvaでブログヘッダーを作成

Canvaでブログヘッダーを作成

ブログヘッダーの例

できあがり!

簡単おしゃれにデザインするコツ#

楽におしゃれに見えるコツをご紹介します。

縦横のど真ん中にタイトル#

画像の端は表示サイズによって見切れてしまうことがあります。

文字は中央にいれると使いやすいです。

タイトルは枠で囲んだり、薄い背景色を重ねると目立たせることができます。

ヘッダーデザインのサンプル

左右対象に並べる#

写真を等間隔に並べるのも作りやすくて、綺麗に見えるデザインです。

ヘッダーデザインのサンプル

余白のある写真を使う#

左右どちらかに大きく余白がある写真を用意し、空いた場所に文字を入れるのも綺麗に見えやすいデザインです。

ヘッダーデザインのサンプル

まとめ#

いかがでしたか?

おしゃれなヘッダーができると、ブログやSNSのイメージがグッと変わりますので、ぜひお試しください♪

ヘッダー画像をアメブロに設定する方法はこちら↓

【動画で解説】アメブロヘッダー画像をカスタマイズ

えみ
えみ

作って、遊んで、世界を広げる