【コツ7つ】ブログでおしゃれなヘッダー画像の作り方【結論、不要です】

ヘッダー画像のおしゃれな作り方を知りたいですか？

この記事で紹介する「ヘッダー画像の作り方コツ7つ」を実践すると、デザインに自信のないブロガーさんでも、プロ並みなヘッダー画像を作ることができます。

そこで本記事では、ブログの"看板"となるヘッダー画像の作り方やコツ、WordPressでの設定方法を解説します。

この記事を読むと、ヘッダー画像をサクッと作れるだけでなく、肝心な記事作成にも集中できるようになります。

おしゃれなヘッダー画像を作るコツは、下記のとおりです。

• コツ①：ブログのテーマを表現する
• コツ②：適切なサイズで作成する
• コツ③：スマホ向けも用意する
• コツ④：サイトの配色を考える
• コツ⑤：投下背景を使う
• コツ⑥：シンプルにする
• コツ⑦：アイコンを活用する

なお、本記事の結論をネタバレすると、ぶっちゃけ、無理してヘッダー画像を作りこむ必要はありません。その点についても深堀りするので、ぜひ安らかにお読みください。

ブログのヘッダー画像とは？

ブログのヘッダー画像とは、サイト上部（ヘッダー）に表示される「ブログの看板」のイメージです。サイトコンセプトを表現した重要なサイトデザインになります。

• その①：画像のみ
• その②：ロゴ + サイト名
• その③：サイト名 + キャッチフレーズ
• その④：自社商品へのお申し込みURL

オリジナリティの高いヘッダーを設定することで、ブログを覚えてもらえたり、ブログのコンセプトも伝わりやすくなります。

また、自社商品への導線を組み込むことで、サイト全体の売上にも貢献できます。

ヘッダーとは？

ヘッダーとは、ウェブサイト最上部に位置するコンテンツのこと。ユーザーの目にもっとも触れやすく、クリック率の高い場所です。

• ブログ名｜キャッチフレーズ
• グローバルナビゲーション
• お知らせ
• ヘッダーコンテンツ

その他「サイドバー」「フッター」などのコンテンツ要素があります。

ブログにヘッダー画像は不要な理由3つ

ぶっちゃけ、ブログのヘッダー画像を無理して作る必要はありません。その理由は、下記のとおりです。

• 理由①：最重要は「集客」
• 理由②：そもそも画像は重たい
• 理由③：大切なのは「ファーストビュー」

とはいえ、最適なヘッダーは、ブログのコンセプトやターゲット層によって異なります。ご自身のブログ運営に合わせて、ヘッダーを最適化することが大切ですよ。

理由①：最重要は「集客」

ブログ運営でもっとも重要なのは「集客」です。ヘッダー画像ではありません。

つまり、ブログを読んでもらいたいお客さんを集めることでして、そもそもPVがないのにヘッダーデザインにこだわっても意味ありません。

ヘッダー画像やトップページというのは、集客した「後」のお話でして、まずは読者に役立つ有益な記事を積み上げることの方が先ですよ。

とはいえ、デザインも大切であるのは間違いないため、ブログの優先順位を明確にすべきですね。ぶっちゃけ、コテコテなデザインでも、稼げてるサイトはたくさんあります。

理由②：そもそも画像は重たい

WEB全般における画像は、総じて重たいです。つまり、画像を入れると、表示速度が遅くなることを意味します。

ヘッダー画像も例外ではなく、ページの読み込み速度はかなり遅くなります。ヘッダーは、個別記事に訪れた際も表示されますから、重たい画像はユーザーの離脱に影響します。

こーいったジレンマを抱えるため、大きなヘッダー画像を採用する場合、注意です。

個人的には、ページの読み込み速度が遅くなり、ユーザーの離脱を招くなら、無理に画像を入れる必要はないと思います。

理由③：大切なのは「ファーストビュー」

人は「見た目で、6割決まる」と言われるよう、ブログもファーストビューで印象が悪いと、ユーザーは離脱します。

ここでいう"印象"とは、デザインではなく「表示速度」でして、読み込み速度の遅いサイトは最悪ですね。下記のデータをご覧ください。

• ページの表示速度「1〜3秒」→直帰率が32％UP
• ページの表示速度「1〜5秒」→直帰率が90％UP
• ページの表示速度「1〜6秒」→直帰率が106％UP
• ページの表示速度「1〜10秒」→直帰率が123％UP

デザインに自信のない方も多いと思うので、無理すると、かえって「逆効果」かもしれませんよ。ヘッダーにこだわりすぎても、見にくいデザインになったら本末転倒です。

>> 関連：【13個】WordPressブログの表示速度を高速化する方法【プラグインなしで実現】

ブログのヘッダー画像の作り方【方法2つ】

上記を読んで「それでも僕は、ヘッダー画像を作りたいんだ！」という方のみ、お読みください。ヘッダー画像の作り方は、大きく2つあります。

• 方法①：自作｜Canva
• 方法②：外注｜ココナラ

無料で作りたい方は「方法①」を。お財布に余裕があり、デザインのプロにお任せしたい方は「方法②」をどうぞ。

方法①：自作｜Canva

デザインツールの定番といえば「Canva」ですね。デザイン初心者でも、直感的に画像を編集できることで人気です。

Canvaに登録・ログインしつつ、下記の手順にてヘッダー画像を作りましょう。

• 手順①：ヘッダー画像のサイズを決める
• 手順②：テンプレートを活用する
• 手順③：編集する

手順①：ヘッダー画像のサイズを決める

ヘッダー画像には、WordPressテーマごとに推奨サイズが定められてる場合が多いので、まずはそちらをご確認くださいませ。

Canvaにアクセスしたら、画面右上の「カスタムサイズ」をクリックします。

推奨サイズに設定し「新しいデザインを作成」をクリックして、ヘッダー画像の枠組みを作ります。

手順②：テンプレートを活用する

すると左側に「ヘッダーテンプレート」が表示されますが、ここから気に入ったテンプレを選んでも構いません。もしくは、デザインできる方は自作しましょう。

テンプレを活用する場合、パーツを組みかえるだけで、誰でもカンタンにおしゃれなヘッダー画像を作れます。

手順③：編集する

編集方法はカンタンでして、直感的なマウス操作でポチポチするだけ。すぐ慣れますよ。たとえば、下記のテンプレは、4つの要素から構成されてます。

• その①：背景
• その②：アイコン
• その③：テキスト（大）
• その④：テキスト（小）

素材はアップロードもできますし、左メニュー「素材」から好きなパーツを追加できます。画面上部からは、フォントの種類や大きさ、エフェクトなどもかけられます。

上記テンプレから、オリジナルのヘッダー画像を作ってみました。誰でもカンタンに作れるので、初心者でもサクッとできますよ！

自由に画像やテキストを編集して、オリジナルのヘッダーを作ってみてください。ヘッダー画像が完成したらダウンロードして、WordPressにアップロードしましょう。

方法②：外注｜ココナラ

自分でデザインするのが苦手、もしくはメンドくさい方は、プロのデザイナーに依頼しましょう。おすすめは「ココナラ」です。

ヘッダー画像1枚であれば「1,000円〜5,000円」ほどで依頼できます。 制作者を探す場合は「Webサイト制作・Webデザイン」>「バナー・ヘッダーデザイン」からどうぞ。

とはいえ、ブログのコンセプトや設計をうま〜く伝えられないと、イメージとは違ったデザインになってしまうかもしれません。そのため、下記の事項を伝えましょう。

美容院で「おまかせで...」とフワッと注文したにも関わらず、後で文句をブーブーいう人と同じですので。

>> プロのデザイナーに依頼する

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

下記の「コツ7つ」を実践することで、デザイン初心者でもヘッダー画像をオシャレにできますよ。

• コツ①：ブログのテーマを表現する
• コツ②：適切なサイズで作成する
• コツ③：スマホ向けも用意する
• コツ④：サイトの配色を考える
• コツ⑤：投下背景を使う
• コツ⑥：シンプルにする
• コツ⑦：アイコンを活用する

コツ①：ブログのテーマを表現する

訪れたユーザーが、まず目にする部分が「ヘッダー」です。パッと見で雰囲気やコンセプトが伝われば、ブログを読んでもらいやすくなり、固定ファンの獲得にもつながります。

たとえば、僕が大好きな「GODIVA」の公式サイト。高級チョコで有名ですが、シックな色合いやチョコ感といい、パッと見でチョコレートに関するサイトだな...とわかります。

このように、ブログテーマを連想させるカラーをヘッダーに採用しましょう。

基本的にユーザーは、気になることや悩みを解決するためにググります。ヘッダー画像だけでなく、サイト全体のテーマやデザインも意識して「統一感」を出しましょう。

コツ②：適切なサイズで作成する

適切なヘッダー画像の推奨サイズを知るには「WPテーマ名＋ヘッダーサイズ」とググりましょう。

繰り返しですが「ファーストビュー」が大切です。ページの表示速度はユーザーの離脱率に直結します。なるべく画像の容量は、少ない方が良いですよ。

画像の圧縮・軽量化方法については【神】EWWW Image Optimizerの設定&使い方ガイド【画像のWebP化方法】をお読みください。

コツ③：スマホ向けも用意する

大半のユーザーは「スマホ」であり、必ずスマホ用のヘッダー画像も用意してください。

• PC：横に長い→横長のデザインを用意する
• スマホ：縦に長い→縦長のデザインを用意する

こちらも、WordPressテーマによって設定が異なります。スマホの画面サイズを「検証」機能などで確認しつつ、スマホ最適化したヘッダーサイズでお作りください。

コツ④：サイトの配色を考える

ヘッダー画像は「2色」がおすすめです。多くても「3色」までですね。色がゴチャゴチャしてると、統一感がなく、気持ち悪い印象を与えてしまいます。

• 背景：ブログのメインカラー
• テキスト：テキストが目立つ色（白・黒など）

色を組み合わせがわからない方は「Color Hunt」という配色見本サイトがおすすめです。

コツ⑤：透過背景を使う

おしゃれなデザインに仕上げるコツとして「透過背景」をおすすめします。

下記は、透過背景の有無における比較です。

どーでしょう？透過背景をつけた方が、テキストがかなり読みやすいですよね？

透過背景は「Canva」でカンタンに作成できるので、ぜひ挑戦してみてください。

コツ⑥：シンプルにする

デザインに自信のない方は、シンプルを追求しましょう。つまり「ヘッダーを画像を作らない」ということです。

• ロゴはいらない
• 配色も白黒のみ
• ブログ名に設定する

デザインは、時間を無駄にしガチです。奥が深いため、マジでキリがありません。デザインにこだわっても、ブログが読まれるワケではないですし、稼げるワケでもありません。

そのため、ヘッダー画像は後からで良く、最初はシンプルなデザインで時短をおすすめします。肝心な「記事を書く」ことに集中できるので、その方が成長も早いですよ。

コツ⑦：ロゴを活用する

上級者向けですが、自社サイトの「ロゴ」を作ってみるのも、差別化できておすすめです。

セルフブランディングになりますが、自分でデザインすると、どうせ破滅します。

どうしても作りたい場合は、プロに依頼しましょう。失敗を限りなく回避できます。金銭的に余裕のある方は「ココナラ」でどうぞ。

ブログのヘッダー画像に使えるおすすめフリー素材3選

ブログのヘッダー画像に使える無料おすすめなフリー素材サイトを3つ紹介しますね。どれも商標利用OKでして、使い勝手は抜群です。

• 写真系：O-DAN
• アイコン系：FLAT ICON
• イラスト系：いらすとや

写真系：O-DAN

O-DAN（オーダン）は、世界中のフリー素材サイトをまとめて検索できるサイト。

ドローンを使った空撮写真もあるので、マジおすすめです。「Unsplash」「Pixabay」といった海外のおしゃれな写真を、日本語で一括検索できます。

アイコン系：FLAT ICON

アイコン素材でかなり重宝するのが「FLAT ICON（フラットアイコン）」です。

ブログ名とアイコンを並べるだけで、誰でもカンタンにオリジナルヘッダーを作れますよ。

詳しいアイコンの作り方は【センス不要】初心者でもできるブログアイコンの作り方【無料でおしゃれデザイン】をどうぞ。

イラスト系：いらすとや

最近、テレビやYouTubeでもよく見かける「いらすとや」も超おすすめです。

特に、ターゲット =「初心者」なら、絶対に活用した方がいいですね。可愛いは「正義」ですので。

おすすめフリー素材サイトは【22選】おしゃれブログに大変身！フリー素材・無料画像おすすめサイト【用途別に紹介】にまとめました。

また、有料画像をお探しの方は【3選】ブログに有料画像を使うべき？おすすめ有料画像サイト厳選【結論、必要なし】をどうぞ。

ブログのヘッダー画像を設定する方法3つ

WordPressブログのヘッダー画像の設定方法です。事前に推奨サイズの画像ファイルを用意しておきましょう。

• その①：ロゴ画像の設定方法
• その②：サイトタイトルの設定方法
• その③：ヘッダー画像の設定方法

ヘッダーには上記の設定ができるので、それぞれ解説します。なお、パソコン用とスマホ用、それぞれ2つの画像を用意してくださいね。

テーマ：AFFINGER

とその前に、WordPressでヘッダー画像を設定するなら「テーマ」が必須です。

詳しいWordPressテーマについては【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】にまとめておりますので、この中から選んでみてください。

この記事では「AFFINGER」を使った方法を紹介します。テーマによって、設定方法は異なるので、参考程度にお読みください。

その①：ロゴ画像の設定方法

ヘッダーに「ロゴ画像」を設置したい場合の設定方法です。

WordPress管理画面 >「外観」>「カスタマイズ」>「ロゴ画像/サイトのタイトル」に進みます。

• ①：ロゴ画像→PC用のヘッダーロゴ画像（フッターロゴも設定可能）
• ②：スマホロゴ画像→スマホ用のロゴ画像
• ③：アイコンロゴ画像→サイトタイトル前に表示されるアイコン

アイコンの高さについては一概に言えないので、ご自身で調節してみてください。

その②：サイトタイトルの設定方法

ヘッダーに「サイトタイトル」をテキスト表示させたい場合の設定方法です。

WordPress管理画面 >「外観」>「カスタマイズ」>「サイト基本情報」に進みます。

その他、キャッチフレーズやファビコンも設定できます。キャッチフレーズを非表示させたい場合は、テーマごとに設定が異なります。

その③：ヘッダー画像の設定方法

ヘッダーに「ヘッダー画像」を設置する場合の設定方法です。

ヘッダー画像とは、ヘッダーの直下に表示される画像のこと。AFFINGERでは、下記の位置ですね。

WordPress管理画面 >「外観」>「カスタマイズ」>「ヘッダー画像」に進みます。

AFFINGERのヘッダー画像の推奨サイズは「2200 × 500px」です。画面が埋まるほど大きいので「画像圧縮」をしないと、表示速度が遅くなると思います。

可能であれば、PC用とスマホ用のヘッダー画像をそれぞれ用意しましょう。なお、画像を綺麗に表示させるためには「横幅100%」を設定してください。

こーすることで、画像が横いっぱいに広がり、見栄えが良くなります。画像にインパクトも出て、オシャレになりますよ！

AFFINGERでは、ヘッダー画像周辺にテキストやボタンなどをカスタマイズできます。本記事では解説しませんが、お好みで設定してみてください。

プレビュー確認せよ

ヘッダー画像などを設定できたら、カスタマイズ画面下にある「デバイスアイコン」をクリックします。

とはいえ、実際のブラウザ表示と異なることがよくあります。いったん保存・公開しつつ、その都度、適切に表示されてるか、しっかり確認した方が良いですね。

なお、スマホ表示を確認する際は、実際にお手持ちのスマホでも、自分のブログにアクセスしてみると良いですよ。

AndroidやiPhoneによって、若干、表示が異なります。ユーザーによってはスマホの種類も異なるため、むずかしいところではありますが、各デバイスごとに確認しましょう。

ブログのヘッダー画像でおしゃれにデザインしよう

本記事では、ブログヘッダー画像の作り方について解説しました。

ぶっちゃけ、ブログのヘッダー画像を無理して作る必要はない...というのが結論です。シンプルに「サイト名」でもよく、読者に役立つ渾身の記事を積み上げましょう。

ブログの優先順位を明確にしつつ、デザインで時間を無駄にしないよう気をつけてください。

自作する場合は「Canva」をおすすめします。お金に余裕があり、プロに依頼する場合は「ココナラ」をどうぞ。

ヘッダーは、一番みられる場所です。クリック率が高く、売上にも貢献します。多くの人に読んでもらえる、サイトコンセプトに最適化したヘッダー画像を作りましょう！

WordPressブログの始め方

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

続きを見る

最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！