ブログのヘッダー画像のサイズと作り方を解説|簡単におしゃれなトップページができる!

ブログのヘッダー画像のサイズと作り方を解説|簡単におしゃれなトップページができる!
この記事を書いた人
ねこまる
ねこまるブロガー

仕事が辛い人に向けて、生きやすくなるため方法論を発信しているブロガー。仕事が辛くて適応障害になり、サラリーマンレースから脱落。対人ストレスの少ない仕事を探してブログを開始。恐妻・娘2人と暮らす父親。

他の人のブログを見ていると、自分のブログもおしゃれにしたい!って思いますよね。

この記事では、ヘッダー画像のサイズと作り方を解説します。

「ヘッダー画像がブログの印象を決める!」と言っても過言ではありません。

読者にどんな印象を持ってもらいたいかによって、

ヘッダーのサイズやデザインも変える必要があります。

この記事では、ヘッダーの具体例をまじえて解説します。

どんなヘッダーにしようか考えながら読んでみてください。

ねこまる
意外と簡単におしゃれなヘッダーは作れます

この記事の監修者
ドム(工藤逸世)SEOコンサル&WPテーマ開発

㈱Woo代表。7桁ブロガー。WordPressを魔改造してSEO戦争する人です。 中央大学卒。元WEB系エンジニアでCMSやECサイト開発等をしてました。 2018年10月頃にブログを始めて、2020年独立。2021年法人化。 WEB集客に関わるアレコレをやってます。

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

ヘッダー画像のサイズ

  • 横幅:wordpressテーマに応じた適正サイズを選択
  • 縦幅:ヘッダーに載せたい画像や全体のバランスを考えて調整
ねこまる
一言で説明しづらいので、順番に解説します。

ブログヘッダー画像の横幅

wordpressテーマにより、以下のサイズが適正といわれています。

テーマ ヘッダー画像の横幅
cocoon 1900px
swell 1600px
sango 1000px
affinger 2200px
JIN 2400px

ブログヘッダー画像の縦幅

縦幅の基本サイズは、以下の通り。

  • ロゴのみ【横幅:縦幅 =12:1 】
  • 中間サイズ【横幅:縦幅 =6:1】
  • 大きいサイズ【横幅:縦幅 =2:1】

※テーマにより横幅が違うので縦横比で示しています。

デザインによっては調整したり、端数が出たらキリの良い数字にしてOK。

ねこまる
実際のサイトを紹介しながら解説します

どのサイズにするか、考えながら読んでみてください。

ロゴのみのヘッダー【基本サイズ:横幅:縦幅=12:1】

【メリット】

  • 記事が目立つ
  • ワンクリックで記事を開ける
  • シンプルなのでデザインに悩まない

【デメリット】

  • ロゴの印象が弱い
  • サイト名を覚えてもらいにくい
ねこまる
記事を一つでも多く読んでほしい!という人におすすめ

中間サイズのヘッダー【基本サイズ:横幅:縦幅=6:1】

【メリット】

  • 記事、ヘッダー共に目立つ
  • ヘッダー画像でブログの印象を伝えることができる

【デメリット】

  • ヘッダー画像にメッセージ性がないと、記事の邪魔になる
  • 全体のバランスを考え、ヘッダーサイズの微調整が必要
ねこまる
中間サイズは、バランスが良いので初心者におすすめ

大きいサイズのヘッダー【基本サイズ:横幅:縦幅=2:1】

【メリット】

  • トップページの印象が強く残る
  • 本格的なブログと捉えられる
  • ヘッダーでメッセージを伝えやすい

【デメリット】

  • 記事にたどり着くまでスクロールが必要
  • 記事が見つかりにくい
ねこまる
大きいサイズは、中級者向けです

以上をもとに、サイズを決めていきましょう。

横幅は下記から選択。

テーマ ヘッダー画像の横幅
cocoon 1900px
swell 1600px
sango 1000px
affinger 2200px
JIN 2400px

縦幅は下記び基本サイズから選択。

  • ロゴのみ【横幅:縦幅 =12:1 】
  • 中間サイズ【横幅:縦幅 =6:1】
  • 大きいサイズ【横幅:縦幅 =2:1】
ねこまる
サイズが決まったら、次は画像の作成です

ブログのヘッダー画像の作り方【canvaで簡単おしゃれ】

ヘッダー画像を自作する場合、canvaがおすすめ。

理由は、豊富なテンプレート操作性です。

canvaを使えば、だれでも簡単におしゃれなヘッダー画像をつくれます。

作成の手順は以下の通り。

  1. サイズ設定
  2. テンプレート選び
  3. カスタマイズ
ねこまる
実際の操作画面を見ながら解説します

canvaへのリンクはこちら

サイズ設定

手順1. 「デザインを作成」をクリック

手順2. 「カスタムサイズ」をクリック

ヘッダー作成手順

手順3. 「幅・高さ」を入力

手順4. 「新しいデザインを作成」をクリック

ヘッダー作成手順

テンプレート選び

画面左に表示されるテンプレートから、デザインを選択します。

ヘッダーのテンプレートを選択する

カスタマイズ

テンプレートをもとに、例えば以下のカスタマイズが可能

  • 文字の書き換え
  • 文字のフォント・サイズ・色変更
  • 背景画像の位置変更・差し替え
  • 画像素材の追加 (Canva内に無料素材あり)

ヘッダーのカスタマイズのデモ画面

ねこまる
5分でヘッダー作成完了です

子供向け英語教育のブログをイメージしました。

フォントや配色、キャラクターにより「子供向け」「英語教育」というメッセージを込めています。

そんな時は、外部の画像サイトで探してみましょう。

ブログのヘッダー用のフリー・有料画像おすすめサイト

フリー・有料画像のサイトで画像素材を見つけて、canvaでヘッダーにできます。

おすすめサイトの概要をまとめた記事もあるので、画像サイト選びに活用してください。

ブログの画像サイト|フリー素材・有料素材のサイト15選【商用可】
ブログの画像サイト|フリー素材・有料素材のサイト15選【商用可】

フリー画像サイト

ねこまる
おすすめ順に並べているので、順番にサイトを見ていってもOKです

ねこまる
続いて有料画像サイトのおすすめ

有料画像サイト

おすすめの有料画像サイト

有料画像素材は下記のメリットがあります。

  • 画像の品質が高く、素材数も多い
  • 著作権等への対応が厳重

「ブログの質・信頼性・作業効率」を上げるための投資という考え方もありますよ。

ねこまる
ヘッダーデザインにこだわりたい人は、デザイナーに外注も検討してみましょう

ブログのヘッダー画像を外注する【中級者向け・有料】

ヘッダーを外注するなら、下記の2サイトがおすすめ。

サイト ココナラ twitter
料金 数千円~数万円 数千円~数万円
メリット 好きなデザイナーを選べる 依頼前に信頼関係を作れる
デメリット 質がまちまち 依頼したい人を見つけるのが大変
ねこまる
それぞれ紹介します。

ココナラ

coconala
引用元:https://coconala.com/

ココナラは、個人のスキルを売り買いできるスキルマーケット。

個人の趣味レベルから、プロ級に至るまで、多数のデザイナーが出展しています。

ヘッダーの料金は、デザイナー毎に提示され数千円~数万円。

デザイナーの数が多い分、気に入った人を選んで依頼できます。

coconalaヘッダー販売
引用元:https://coconala.com/
ねこまる
ココナラの登録者が増えているので、好みのデザインに出会いやすいです

ココナラのホームページ

twitter

twitterでデザインを発信している人に直接依頼します。

依頼の前にSNSの発信内容を見たり、交流することも可能です。

そのため、デザインの好みだけでなく人柄をわかったうえでの依頼

事前に、信頼関係を築くことができますね。

好きなデザイン・好きなデザイナーに出会えたら、ヘッダーをお願いしたいという人におすすめです。

以上が、おすすめの外注方法です。

ヘッダーの外注方法リンクまとめ

※リンクを踏むと各サイトに飛べます。

ヘッダー画像の例を紹介します。

最後に、おしゃれなヘッダーを作るうえでの注意点を説明していきます。

おしゃれなヘッダーを作るうえでの注意点

  • 伝えたいことを先に決める
  • 統一感を出す
  • ブログのテーマカラーを決める
  • 情報を入れすぎない
ねこまる
一つずつ解説します

伝えたいことを先に決める

まず始めにやるべきは「ヘッダーで読者になにを伝えるか」決めること。

ブログの記事作成にも共通しますが、ゴール(伝えたいこと)から逆算して作ることをおすすめします。

はじめは面倒ですが、成長速度は大きく変わります。

ねこまる
ぜひチャレンジしてほしいです

伝えたいことが決まれば、あとは作業を進めるだけ。

統一感を出す

ブログの中身もデザインも、統一感が大事です。

色や雰囲気がバラバラだったら、このブログ大丈夫かな?と不安になりますよね。

ねこまる
特に、ブログのテーマカラーを決めておくと統一感が出やすいです。

ブログのテーマカラーを決める

ブログのテーマカラーは、色が持つイメージを参考に決めましょう。

色には、人の感情を動かす心理効果もあるので、有効に使いたいところ。

以下に、色の心理イメージを載せます。

色のイメージ
引用元:https://www.hitachi-solutions.co.jp/column/tashinami/color/index05.html
ねこまる
色でブログの雰囲気は変わります

情報を入れすぎない

ヘッダーには情報を入れすぎないように注意しましょう。

ねこまる
ヘッダーの文章はほとんど読まれないんですよね

ヘッダーは、読まれても一行程度。

文字は、ブログ名とキャッチフレーズくらいにしましょう。

まとめ

この記事のまとめ

  • ブログのヘッダー画像の横幅はブログテーマ毎に合わせる。
  • 縦幅は、ヘッダーに載せたい画像や全体のバランスで調整する。
  • ヘッダーはcanvaで簡単おしゃれに作れる。
  • canvaでほしい画像がない場合は、フリー・有料画像サイトから素材を探す。

ヘッダーのサイズもデザインも自分で決められる。

ブログは、自分の手で育てていける楽しさがありますよね。

ねこまる
ヘッダーで、ブログの魅力を一段あげましょう!

本気でブログ収益を上げたい人限定

BLOGUSコミュニティ

BLOGUSでは本気でブログで稼ぎたい方をサポートするコンサルコミュニティを運営しています。

「ブログにコンサルはいらない」という人も多いですが、そう言ってる方のほとんどは運か才能で上がった方ばかりです。

それを信じた結果、稼げないでブログを辞めてる人を沢山見てきました。


そういった方をサポートして、運ではなく実力で勝ち続けられるトップブロガーを育成するコミュニティとなっています。


コミュニティがスタートして1年以内で、既に6桁ブロガーや7桁ブロガーを複数輩出しています。


収益をあげるノウハウを持った講師陣と最短距離でレベルアップしたい方は、是非詳細をご覧ください。

もちろん、未経験者の方もサポートする体制は整っています。


6ヵ月で初心者が5桁の売上、5桁の方は6桁、6桁の方は7桁を本気で目指すコミュニティです。


経験・未経験どちらでもOK。

早く収益を上げたい方、もっと収益を出したい方は、とりあえず無料相談へ。

ブログ