【デザイナー直伝】ブログ用ヘッダー画像のサイズと３分で作る方法

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

この記事を書いた人

ヘボ

ブログの神様になる男

• 引きこもり専業ブロガー
• ６年目（2018年12月〜）
• 執筆記事数500本以上（３サイト運営）
• 最高「33万PV／月」達成
• 元Webデザイナー

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

ヘッダー画像は、「Webデザイン」に分類されます。

ヘボ

ボクは元Webデザイナーで、これまでにもゼロから「LP・バナー・名刺」などを制作してきました。

そこで、記事の前半で「ブログのヘッダー画像の最適サイズやおしゃれに作成するコツ」を。

後半では「ブログ用ヘッダー画像の作り方〝無料編と有料編〟」を解説します。

本記事を最後まで読むことで、初めてでも「３分でおしゃれなヘッダー画像」を作成できますよ！

ブログのヘッダーとは「あなたのお店の外観」

ブログ及びWebサイトは、次の３つの要素で構成されています。

ブログの構成

ヘッダーは、読者が最初に目にする部分（ファーストビュー）です。

例えるなら、「あなたのお店の外観」ですね。

関連記事【雛形コピペ可】ブログ用プライバシーポリシー・免責事項の書き方

ブログのヘッダー画像とは【トップ画像とも言う】

サイト名をテキストや、背景を透過したロゴ画像にしたブログが多いですよね。

ヘッダー画像の種類

この記事では、ヘッダー画像を「④：サイト名やキャッチフレーズ（コンセプト）を含めた１枚の画像」と定義します。

なぜなら、SNSのヘッダー画像と併用できて便利だからです。

関連記事【無料】ブログのロゴ作成術｜元Webデザイナーが初心者に力説！

ブログのヘッダー画像のサイズ一覧【トップ画像】

WordPress・無料ブログ・SNSの「ヘッダー画像のサイズ」を、あなたの代わりに調査しました(｀・ω・´)ゞ

表は横にスクロールできます

WordPressはテーマ公式に推奨されてない限り、「横幅」だけ合わせればOKです。

なぜなら

たとえば、当ブログのテーマ『AFFINGER』の推奨サイズは「2,200px × 500px」ですが・・・

そのサイズで表示されることは、まずありません。読者のデバイスによって変動します。

それに、ヘッダー画像に高さがあると、デバイスのかなりの範囲を占めることになるので、そこは好みで決めるべき。

その他のWordPressテーマについては「テーマ名 ヘッダー画像 サイズ」で検索してみてくださいね。

補足SNSのヘッダー画像のサイズ一覧

表は横にスクロールできます

※FacebookとYouTubeは「16:9」の比率で作ればOK。

ブログのために「X（旧Twitter）」をやってるブロガーも多いですよね。

おすすめのヘッダー画像サイズ

「1,500px × 500px」以上で上下に余白を残して作り、ブログ用に高さをトリミングする。

これがコスパいい作り方になります。

ヘボ

では、サイズを押さえた上で「おしゃれなヘッダー画像を作るコツ」を見ていきましょう！

ブログのヘッダー画像をおしゃれに作成する３つのコツ

ブログのヘッダー画像を「おしゃれに作成するコツ」は次のとおり。

この章のもくじ

結論、ヘッダー画像は「シンプル・イズ・ザ・ベスト」！

コツ①サイト名とコンセプトを決めておく

ヘッダー画像を作る前に「サイト名もしくはロゴ」と「キャッチフレーズ」は決めておきましょう。

キャッチフレーズも、サイト名と同じようにテキストでも入力できます。

デフォルトで「Just another WordPress site」と書かれていた部分ですね。

当ブログのコンセプト

スペースが限られているので、サイトの「コンセプト」を一言で表すキャッチフレーズがベスト！

合わせて読みたい

ぜんぶ記事を用意したので、合わせてどうぞ🙌

コツ②サイトのデザインに合わせる

ヘッダー画像は、それ単体で考えるのではなく、サイト全体との調和を目指しましょう。

とくに、「色」は重要です。

表は横にスクロールできます

この３つのカラーを決めてから、ヘッダー画像を作った方が効率よさそうですね。

また、これはデザイン全般に言えることですが・・・

ヘッダー画像に限らず、記事内の装飾もカラフルにするのはやめましょう。

ダサくなる一方ですからね。

当ブログのテーマ『AFFINGER』には〝ヘッダー画像〟が別に用意されています。

ヘッダーのグローバルメニューの下に表示されるイメージ画像のようなものです。

ヘッダー画像をネタバレ

よかったら「トップページ 」でも確認してみてくださいね（別タブで開きます）。

関連記事【ハイブリッド】ブログのトップページをサイト型＋一覧型にする方法

関連記事【Canvaで５分】ブログ用アイキャッチ画像の作り方と最適サイズ

コツ③シンプルにする

つまり、ヘッダー画像はシンプルにしましょう。

シンプル・イズ・ベスト

とくに「カラー」は難易度高いはずなので、配色サイトを参考に決めれば間違いないです。

配色サイト

あとは「背景」だけですね。

こちらも商用利用OKな「フリー素材サイト」を用意したので、次章でサクッと解説します👇

ブログのヘッダー画像に使えるフリー素材サイト５選

表は横にスクロールできます

このあたりを押さえておけば、素材にはまず困らないです。

では、フリー素材サイトを駆使して作った「ボクのヘッダー画像」を参考までに、どうぞ。

【実例】ボクのブログとX（旧Twitter）のヘッダー画像３選

①
②
③

サイト名をロゴにしただけのシンプルなヘッダー画像です。

ボクは画像編集が大好き＆『Photoshop』に課金しているので、X（旧Twitter）のヘッダー画像は少しアレンジしています。

それぞれの違い

それぞれのジャンルに合わせて、世界観を統一しています。

表は横にスクロールできます

とはいえ、ほとんどの方は無料で作りたいですよね？

そこで、ソフトのインストール不要＆ブラウザ上で作成できる『Canva』で新しくヘッダー画像を作ってみました！３分で！笑

【無料】ブログ用ヘッダー画像の作り方【Canva編】

『Canva』とは、無料かつオンラインで画像編集ができるデザインツールのことです。

この章のもくじ

まずは、『Canva』に無料登録しておいてくださいね。

ステップ①ヘッダー画像のサイズを決める

右上の「デザインを作成 › カスタムサイズ」をクリック。

「幅と高さ」を入力して、「新しいデザインを作成」をクリック。

別タブが開きます。

ステップ②ヘッダー画像を作る

数ある「テンプレート」の中からこちらを選びました（サイズによって表示されるテンプレートが変わります）。

Canvaでできること

テキストやフォントを変えて、『O-DAN』でダウンロードした画像をアップロードすると・・・

たった３分でできあがり！笑

さっそくダウンロードしてみましょう。

右上の「共有 › ダウンロード」をクリック。

ステップ③ヘッダー画像をダウンロードする

ファイルの種類は「PNG（推奨）」のまま、ダウンロードをクリック。

完成品がダウンロードできました。

このままだとサイトが重くなってしまうので、アップロードする前に、ヘッダー画像を圧縮して、軽量化しましょう。

補足ヘッダー画像を軽量化してアップロードする

『Squoosh』とは、Googleが開発したWebサービスです。無料かつ登録不要で使えます。

ヘッダー画像をドラッグ＆ドロップ。

右下のQualityを調整して、「80KB」ほどに圧縮してください。なぜなら・・・

「ダウンロード」マークをクリックすれば終了！おつかれさまでした＼(^o^)／

【有料】ブログ用ヘッダー画像の作り方【ココナラ編】

『ココナラ』とは、Web上でスキルを売買できるプラットフォームのこと。

ヘッダー画像の作り方

ヘッダー画像は「1,500円〜」から作ってもらえますよ。

ココナラの取引の流れ

その前に「見積もりやカスタマイズの相談をする」ことも可能です。

そこで、トークルームに送る最初のメッセージの「テンプレート」を用意しました👇

右上のCopyをクリック

はじめまして、ヘボと申します。

◯◯さんのデザインがめちゃくちゃ好みで購入させていただきました！

ブログに設置する「ヘッダー画像」をお願いしたいです。

・ブログのURL：example.com
・サイト名：◯◯
・キャッチフレーズ：◯◯
・WordPressテーマ：AFFINGER
・サイズ：2,200px × 500px

「参考イメージ」と「ロゴ画像」を添付しますので、合わせてご確認ください。

・形式：png
・解像度：300dpi以上
・納品希望日：◯月◯日
・その他の要望：X（旧Twitter）にも使えると嬉しいです。

お取引終了まで、よろしくお願いいたしします。

※「見積もりやカスタマイズの相談をする」には専用のフォーマットが用意されています。

プロが作ったヘッダー画像を、X（旧Twitter）と併用できたら、コスパいいですよね！

\ 300円割引クーポンがもらえる /

ココナラ公式サイトをみる

無料で会員登録

【Q&A】ブログのヘッダー画像に関するよくある質問

ブログのヘッダー画像に関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：Cocoonのヘッダー画像のサイズは？

AWordPressの無料テーマ『Cocoon（コクーン）』のヘッダー画像に推奨サイズはありません。

とはいえ、ボクが実際にブラウザのデベロッパーツールで検証した結果・・・

つまり、2,560pxのワイド画面で見れば、1,900pxで作ったヘッダー画像も2,560pxで表示されます。

そんな読者はあまり多くないので、気にしなくていいと思いますが、大きめで作った方が劣化は少ないでしょう。

Q2：アメブロのヘッダーのサイズは？

A「CSS編集用」か「簡単カスタマイズ用」で変わります。

表は横にスクロールできます

参考までにどうぞ。

ヘボ

ここまで読んでくれたあなたへ

最後に、大切なお知らせです。

【まとめ】ブログ用ヘッダー画像のサイズは横幅が大事

「ブログのヘッダー画像」について解説しました。

まとめ

『Canva』を使えば、誰でもそれっぽいヘッダー画像を作ることができます。

ブログで使う画像

ロゴやプロフィール画像と合わせて、プロに任せるのもいいですね👇

\ 300円割引クーポンがもらえる /

ココナラ公式サイトをみる

無料で会員登録

ブログを始めたい方へ

当サイト経由で、国内シェアNo.1レンタルサーバー『エックスサーバー』に申し込むと、最大10,000円割引になります。

しかも、今ちょうどやっている「お得なキャンペーン」との併用もOK！

\ 初期費用無料！ /

エックスサーバーにアクセスする

開設手順をみる

キャンペーンは予告なく変更・終了する可能性あり

人気記事【初心者でも10分】WordPressブログの始め方を画像で解説

人気記事【14大特典】AFFINGER6本音レビュー！３年使ったメリット

人気記事【必須ツール】Rank Trackerの料金・使い方・無料版との違い

人気記事【５万稼ぐ】A8.netのセルフバックのやり方とおすすめASP・案件６選