国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

初心者のためのブログ始め方講座

国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

ブログのヘッダーを作る4つのポイントを解説!便利なフリー素材サイトも紹介

\この記事をシェアする/

T部長

当メディアはリンクフリーです。SNSやブログでご紹介いただけると嬉しいです。

【2024年12月25日更新】ヘッダー画像の作成手順を、より詳しい内容に更新。紹介する素材サイトも追加しました。

この記事のレベル

初心者 (3.0)
重要度 (3.0)
難しさ (2.5)

こんにちは、T部長です!

ブログのヘッダーを作りたいけど、「どうやって作ればいいの?」「自分では作れないかも……」と悩んでいませんか?

ヘッダーはとくに目立つ部分なので、ブログを開設したならぜひ作りたいですよね。
そこでこの記事では、自分でヘッダーを作る方法や上手く作るポイント、人に依頼する方法などを紹介します。

T部長

この記事は以下のような人におすすめ!

  • ブログのヘッダーを作ってみたい人
  • ブログのヘッダーの作り方が分からない人
  • ブログのヘッダーの作り方で悩んでいる人

オリジナルのヘッダーを用意すれば、訪れた人に自分のブログを早く覚えてもらえますよ!

それでは、どうぞ!

ブログのヘッダーとは

ヘッダーとはブログサイトの上部に表示されている部分のことです。

画像:当サイトのヘッダーに該当する部分(サイト最上部)

ブログに訪れた人が最初に目にする部分なので、ヘッダーはブログの顔ともいえる部分です。
ヘッダーのデザインはサイト全体のイメージを左右します

オリジナリティの高いヘッダーデザインにすることで、以下のようなメリットがあります。

ブログのヘッダーを整えるメリット
  • ブログ(名)を覚えてもらいやすい
  • ブログのコンセプトを伝えやすい
  • ブログ内のコンテンツに統一感が出る

ヘッダーは主に以下のようなもので構成されています。

ヘッダーの主な構成要素
  • ブログタイトル・ロゴ
  • ナビゲーションメニュー
  • ビジュアルイメージ
  • キャッチコピー
  • サイト内検索フォーム …等々

どんなヘッダーが最適かはブログのコンセプトやターゲットによって異なるので、一概にこうとはいえません。

テキストのタイトルだけ載せたもの、ロゴに画像を使って掲載したもの、全体的にビジュアル化されたものなど、さまざまです。

T部長

とくにビジュアルを用いたものは、ブログを強く印象付けやすいです

本記事では、ブログのヘッダーに利用するビジュアル(ヘッダー画像)の作り方を主に紹介します。

そのほか、ブログを印象づけるにはロゴも重要です。ヘッダー画像内にも使えます。
ロゴの作り方については、本記事では取り扱わないので、以下の記事を参考にしてみてください。

【無料】おしゃれなブログのロゴの作り方!初心者が意識したい3つのポイントも

【無料】ブログのヘッダー画像を自作する方法

ブログのヘッダー画像を作る場合、自分で作るか人に依頼するかのどちらかです。

ここでは自分で作る場合のおすすめの方法を紹介します。

ヘッダーの作成に役立つのが、「Canva」というサービスです。
「Canva」を使えば、ブラウザ上で簡単に画像を編集できます。

Canvaへログイン

まずはCanvaの公式サイトでログイン画面へアクセスします

画像:Canva公式サイトでログイン画面へアクセス

任意の方法を選んでログインします。

画像:Canvaへのログイン方法を選択

以下のような画面になったらログイン完了です。

画像:Canvaへのログイン直後画面
新しいデザインを作成

左上にあるデザインを作成をクリックします。

画像:「デザインを作成」をクリック

今回は自分でサイズを決めて作りたいと思いますので、カスタムサイズを選びます。

画像:「カスタムサイズ」を選ぶ

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

適切なサイズは、利用するブログサービスによって異なります。
WordPressの場合は、利用するテーマによって異なります。
提供元が推奨サイズを公開していないか確認してみましょう。

今回は「幅1200px」「高さ400px」を指定して作ります。

画像:デザインのサイズを指定して作成する

新しいデザインを作成をクリックして作成完了です。

画像:新規デザインの作成が完了
テンプレートの適用

手軽におしゃれなデザインが作りたいなら、テンプレートが便利です。

左のメニューにあるデザインを選ぶと、現在のデザインサイズで利用できるテンプレートが表示されます。

画像:テンプレートメニューの表示

利用するテンプレートを選ぶと、キャンバスに反映されます。

画像:テンプレートが反映されたキャンバス
テンプレートの編集

最初から含まれている文字類やグラフィック類は自由に編集できます。

移動や、色の変更もできます。

画像:テンプレート内の文字を編集

また、任意のグラフィックを追加することもできます。

ここではCanvaから提供されるグラフィック素材を追加してみます。

左のメニュー内にある素材を選ぶと、利用できるものが表示されますので、使いたいものを選びましょう。
デザインに合わせた素材をおすすめしてくれるので便利です。

画像:素材メニューの表示

配置した素材は、位置・サイズ角度などの変更が可能です。

画像:素材の配置・サイズ・角度を変更
ヘッダー画像の完成

以下のようなヘッダー画像ができました。

テンプレートも素材もおしゃれなものが数多くあるので、色々工夫してみてください。

画像:テンプレートを利用したヘッダー画像の完成

以上でテンプレートを利用したヘッダー画像は完成です。

テンプレートを利用せず、自分で用意した画像を使って作ることもできますので、続いて手順を紹介します。

新規デザインを作成したあと、以下のような手順で作れます。

ファイルをアップロード

まずは用意した画像をアップロードします。

左上のファイルメニューから、ファイルをアップロードを選びます。

画像:ファイルのアップロードメニューを選択

利用する画像を選んでアップロードします。

画像:画像のアップロードメニュー表示
アップロードした画像を挿入

アップロードが完了すると、アップロードメニュー内に画像が表示されます。

画像:アップロードした画像を確認して選択

画像を選ぶとキャンバス内に挿入されます。

画像:アップロードした画像を挿入

画像は配置やサイズなどを自由に変更できます。

今回はサイズいっぱいに表示するように配置しました。

画像:挿入した画像の配置とサイズを変更
テキストを挿入する

続いて、ブログタイトルなどの文字を載せましょう。

左のテキストメニューをクリックします。

画像:テキストメニューの表示と文字の挿入

最初から整えられたテキストのスタイルが用意されているので便利です。

自分でフォントを選ぶこともできますが、今回は用意されたスタイルを利用して作ります。

テキストを選択していると、上部に表示されるメニューバーからさまざまな編集が可能です。

色の編集も可能です。「写真の色」を選ぶと、統一感のある見映えにしやすいです。

画像:テキストを挿入して編集する
ヘッダー画像の完成

以下のようなヘッダー画像が完成しました。

テンプレートを使っても、用意した画像を使っても、非常に簡単におしゃれな画像が作れます。

画像をダウンロード

左上のファイルメニューから、ダウンロードを選びましょう。

画像:ダウンロードメニューを選択

PNGやJPGあたりを選択したうえで、ダウンロードをクリックしましょう。

写真を使っていたり、グラデーションのある画像の場合はJPGがおすすめです。
シンプルな単調カラーの場合はPNGがおすすめです。

画像:画像形式を選択してダウンロードボタンをクリック

以下のような表示が右下に出たらダウンロード完了です。

画像:ヘッダー画像のダウンロード完了

一度使ってみると分かりますが、非常に簡単にデザインが作れるツールです。

テンプレートも素材も数多く用意されていますし、おしゃれなスタイルも自動で提案してくれます。

オリジナリティの高い、自分だけのヘッダー画像をぜひ作ってみてください!

【有料】ブログのヘッダー作成を依頼できるおすすめサービス

ヘッダー画像を自分で作るのが難しい場合は、プロに依頼して作ってもらいましょう。

ヘッダーの作成におすすめのサービスはココナラです。

画像:ココナラ公式サイト

出典:ココナラ

ココナラでは、アマチュアからプロまでさまざまなクリエイターに依頼できるので、予算や求めるデザインに合ったクリエイターを探してみてください。

ヘッダー1枚であれば3,000円~8,000円程度で依頼できます。

「Webサイト制作・Webデザイン」の「バナー・ヘッダーデザイン」カテゴリーから出品されているサービスを探してみてください。
または検索窓から「ブログ ヘッダー」などと検索しても数多くヒットします。

販売実績の多い人や評価の高い人、レビューの口コミがよい人を選ぶのが、失敗しないポイントです。

ブログのヘッダー画像を作る時の4つのポイント

ヘッダーを作る時のポイントを4つ紹介します。

いきなり凝ったものを作ろうとすると、まとまりのないデザインになりがちです。

まずはこれらのポイントを意識して、シンプルなデザインで作ってみましょう。

ブログのコンセプトが伝わるデザインにする

ヘッダーはブログを開いたとき最初に目に入ってくる部分です。パッと見でコンセプトが伝わるデザインにすれば、訪れた人にブログを読んでもらいやすくなりますよ。

とくに画像やイラストなどを使えば、何について発信しているブログかすぐにわかります。

画像:ヘッダーデザインがブログのコンセプトをよく表している事例

出典:kuraku

こちらは主婦の方が運営している「食」の情報を発信しているブログです。

食材の画像を大きく表示しているので、パッと見で食べ物に関するブログであることがわかりますね。

検索して訪れる人は、何か知りたいことや悩みがあって記事にたどり着きます。
読者に「このブログは自分の知りたいことが書いてありそう」と思われるヘッダー作りが大切です。

色は3色程度におさえる

色を使いすぎるとごちゃごちゃして見えるので、3色程度に抑えておくのがおすすめです。

全体の色使いに合わせて、テーマカラー、ベースカラー、アクセントカラーの3色程度でまとめてみましょう

主に利用するカラーの種類
  • テーマカラー:ブログのメインとなる色
  • ベースカラー:背景などの広い部分に使う色
  • アクセントカラー:注目させたい要所に使う色
画像:ヘッダーデザインの色使いが整っている例

出典 :アカリノオト

こちらのサイトは、多くの色が利用されていますが、領域が広い部分は落ち着いたカラーで整えられており、全体のトーンも統一されています。

そのため、イラスト部はカラフルであるものの、ごちゃついた印象は無く、よいアクセントとなって適度なメリハリを生んでいます。

どんな色を組み合わせればいいかわからないという方は、以下のような配色の参考になるサイトを見てみるとよいですよ!

配色の参考になるサイト
  • Color Hunt
    世界中のユーザーが投稿したカラーパレットを多数掲載しており、人気のある配色を参考にできます。
  • Grabient
    グラデーションの配色パターンを多数紹介しています。色・色数を調整してプレビューできます。
  • 配色の見本帳
    選択したカラーをベースに多彩な配色パターンを提案してくれます。

サイト全体のデザインと統一させる

ヘッダー単体で見るのではなく、サイト全体のデザインと統一感を持たせるよう意識しましょう。

サイトのテーマカラーや文字のフォント、全体のイメージに対して、ヘッダーのデザインが馴染んでいないとヘッダーだけ浮いて見えます。

画像:サイト全体のデザインが統一されている事例

出典 :すまいるらいふ

こちらのママさん向け子育てブログでは、ヘッダーに家のアイコンと、手書き風の英字・ひらがな表記のブログ名が書かれています。

続くビジュアルも柔らかい雰囲気で、全体のイメージとも合っていますね。

読んでほしいターゲットはどんな人なのかを考えて、その読者層に合ったブログ・ヘッダーデザインにすることが大切です。

適切なサイズで作成する

ヘッダーのサイズは、使っているWordpressテーマやブログサービスによって異なります。

それぞれ推奨サイズがあるので、「テーマ名+ヘッダーサイズ」で検索して、使っているテーマやサービスの推奨サイズを確認してみてください。

また、まずは縦幅の小さい(高さが低い)シンプルなヘッダーから作成するのがおすすめです。

大きな画像はインパクトが強く、見映えもよいですが、スペースを広く使ってしまいます。
ページを開いたとき画面の大部分が画像になってしまい、ユーザーを困惑させ、離脱させる要因にもなりえます。

T部長

画像の容量が大きいとページの表示速度が遅くなることもあるので注意が必要です。

ファーストビューの印象やページの表示速度はユーザーの離脱率にかかわるので、サイズの小さいヘッダーから作成してみましょう。

ブログの最適な画像サイズとは?最適化する理由やおすすめツールも紹介

ブログのヘッダー画像作成に役立つフリー素材サイト

ヘッダーを作るときに役立つ、無料で使える素材サイトを紹介します。

まず紹介するのは、フリーのアイコン素材をダウンロードできる素材サイトです。

アイコンのフリー素材サイト
  • ICOOON MONO
    さまざまな種類のシンプルなアイコンが提供されています。
  • Icon-rainbow
    シンプルで洗練された色付きのアイコンが数多く提供されています。
画像:ICOOON MONO公式サイト

出典:ICOOON MONO

シンプルなアイコンはヘッダーに最適
ブログ名とアイコンイラストを横に並べるだけで、簡単にオリジナルヘッダーが作成できますよ。

アイコンだと少し味気ないという方は、イラスト系の素材サイトがおすすめです。

イラストのフリー素材サイト
  • ソコスト
    手描き風の温かみのある、かわいいテイストのイラスト素材が提供されています。
  • Loose Drawing
    柔らかく親しみやすいイラスト素材が数多く提供されています。
  • Linustock
    シンプルで使いまわしやすいイラストが数多く提供されています。線画のものとカラーのものがあります。
画像:ソコスト公式サイト

出典:ソコスト

カラフルなかわいいイラストも多いので、ポップなデザインのヘッダーも作れます。

ヘッダーに大きめの写真を使いたい方には、「O-DAN」という検索サイトがおすすめです。

画像:O-DAN公式サイト

出典:O-DAN

「O-DAN」は複数のフリー素材サイトの画像をまとめて検索できるサイトです。
「Pixabay」や「Unsplash」といった海外のおしゃれな素材サイトを、日本語で一括検索できます。

どのサイトも無料プランで十分使えるので、自分のブログコンセプトに合った素材を組み合わせて使ってみてください。

以下の記事でも素材サイトを網羅的に紹介していますので参考にしてみてください。

写真・イラストフリー(無料)素材サイト26選!国内・国外も紹介

まとめ

今回の記事では、ブログのヘッダーを自分で作る方法と上手く作るためのポイント、人に依頼する方法などを紹介しました。

ポイントは以下の通りです。

まとめ
  • ヘッダーはブログの顔、コンセプトが伝わるようにする
  • ヘッダーのポイントは、ブログ全体の統一感
  • ヘッダーのサイズはテーマやブログサービスによって異なる
  • 自分で作る場合はCanvaがおすすめ、作成を依頼する場合はココナラがおすすめ
  • 自分で作る場合は、素材サイトを活用すると便利

個性的なヘッダーを作れば、訪れたユーザーにブログの存在を覚えてもらいやすくなります

多くの人に読んでもらえるブログを作るためにも、ぜひヘッダーを作成してみてください!

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2025年3月4日(火)17時まで、サーバー利用料金が最大30%オフになる期間限定キャンペーンを開催中です!

今なら月額693円~とお得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にWordPressブログをご検討ください!

※ 2024年10月時点、W3Techs調べ。

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!

URLをコピーしました!