WordPressブログのヘッダー画像を無料で作る方法|初心者でも簡単にカッコよく。

ブログを訪れた人が、まず最初に目にする場所といえば、ブログのヘッダーです。

ヘッダーはブログの顔であり、ブログ全体のイメージに大きな影響を及ぼすものです。

いくらサイトの中身やコンテンツの質が良くても、ヘッダーがイマイチなら「このサイトは信頼できなさそう」と思われてしまうリスクも。

ブログ訪問者にちゃんと価値提供するためには、記事の内容だけでなく、ブログのデザインも力を入れていくべきですが、「カッコよくてオシャレなヘッダーを作る」のってデザインとかをやったことがない人やブログ初心者にとっては、とてもハードルが高く感じられますよね。

僕自身もデザインの専門的な勉強は一切やったことがなかったので、最初はヘッダー画像を作るのにとても苦労しましたが、ちょっとしたコツを覚えたり、使える無料ツールと出会ってからは、一人でも簡単にいい感じのヘッダーを作れるようになりました。

この記事では、

無料で、できるだけ簡単に、カッコいいブログヘッダー画像を作る方法

を紹介していきます。ぜひ参考にしてください。

目次

良いブログヘッダーの条件とは?

人によってヘッダーを見る際に意識するポイントは違うかもしれませんが、マーケティングやブランディングの視点から考える「良いブログヘッダーの条件」は以下の通りです。

  • ブログの内容がわかりやすいこと
  • デザインの見た目がいいこと
  • サイトの世界観が体現されていること

それでは順番に見ていきましょう。

ブログの内容やテーマ、コンセプトがわかりやすいこと

ただカッコよかったり綺麗だったり見栄えが良いだけでは、ブログのヘッダーとしては不十分です。

好ましいのは「このブログではどういう内容のコンテンツを発信しているのか」がパッと見ただけでわかるようなヘッダーです。

もちろん、ブログ運営の目的意識によってもこの辺りの考え方は変わってきます。

ただ、届けたいターゲット(ブログを読んでほしい人)やブログに書いていく内容が決まっているのなら、ヘッダーを見ただけで「このサイトはどんな人のためにどんな内容の情報を発信しているのか」がわかりやすい方がいいでしょう。

そうすることで、ユーザーの滞在時間が長くなったり、1つの記事だけじゃなく、他の記事も巡回して見てもらえて、SEO的な評価も高まる可能性も上がります。

基本的にブログ読者は「知りたいことや調べたいこと」があって検索をしてブログに到達します。

そんな時、目に飛び込んできたヘッダーを見て「このサイトは私が求めている情報がたくさんありそうだ!」と思ってもらうことができれば、もっと他の記事も見てもらいやすくなります。

デザインの見た目がイケてること

とは言え「デザインのカッコよさ」とか「オシャレさ」がいらないかというと僕はそうは思いません。

人は「感覚で好きになり、好きという感情を理屈で脳に納得させる生き物」だと言われているので、パッと見たときに「なんかカッコいい…!」と思われるのか「うわ…ダサい…」と思われるのかって、ブログをちゃんと読んでもらいファンになってもらう上では、かなり重要になってくるわけですね。

  • ダサいデザインのブログをブックマークしたいと思えるか。
  • ダサいデザインのブログ記事をSNSでシェアしたいと思えるか。

そう考えると、とてもわかりやすいかと思います。

この辺は「センス」と言ってしまえばそれまでですが、元々デザインについてのインプットが少ない状態では「どんなデザインがカッコいいか」の感覚を持つことはできません。

まずはとにかく色んな人のブログを見て、ヘッダーなどのデザインに触れる回数を増やしてあげるといいですね。

ブログの世界観が体現されていること

じゃあ「一目見ただけで内容がわかって、かつデザインがイケてればそれでいいのか」と言うと、それだけでは不十分で、もう1つ気にした方がいいことがあります。

それは「そのデザインが自分(or サイト全体)のブランドにふさわしいかどうか」ってこと。

例えば、ミュージシャンを例に出して考えてみると、『X JAPAN』と『ゆず』ってどちらも日本中に知らない人がいないようなトップアーティストですが、それぞれキャラクターやイメージって全然違いますよね。

これは僕のイメージですが、

  • X JAPAN:ビジュアル系、ハードロック、イメージカラーは黒などモノクロ、孤高のカリスマ、恍惚
  • ゆず:ポップで可愛らしい感じ、フォーク(or ポップス)、イメージカラーはカラフル、親しみやすい、笑顔

おそらくこんなイメージを持っている人は多いんじゃないかと思います。

ゆずがX JAPANのようなビジュアルイメージを身にまとったら違和感しかないですよね。

ヘッダーはサイトの顔と言われています。

どんな属性の読者がターゲットで、その人たちにどんな世界観のコンテンツを提供したいのかという点は、ブログ運営をしていく上で常に大事にしていきたいです。

ヘッダー画像を作る際に必要なもの

ゼロからヘッダー画像を作る際に、用意すべきものはパソコンと画像編集ソフト。それだけあれば十分です。

※スマホやタブレットでもできるとは思いますが、僕は基本的にPCを使ってます。

僕が使っている無料の画像編集ソフトは以下のとおりです。(全部使わない可能性もあります)

デザインに慣れている人や難しいことをやりたい人は、有料の専門ソフト(Photoshopなど)を使用してもいいですが、初心者の人が簡単にそれなりのものを作りたいのであれば、まずはこれだけで十分です。

CanvaはブログのヘッダーやYouTubeのサムネイル画像、あるいはお店のポスターなどのグラフィックデザインを簡単に作成することができ、Photoscapeを使えば、画像の編集を簡単に行うことができます。

基本的なヘッダー作成はCanvaで、ヘッダーに使う画像の編集はPhotoscapeで行うのがオススメです。

また素材となる画像の探し方については「オシャレな海外のフリー素材画像サイト10選|ブログのアイキャッチにおすすめ!」にて紹介をしているので、ぜひ参考にしてください。

あわせて読みたい
【厳選】オシャレな海外のフリー画像素材の配布サイト9選【無料】 カッコよくてオシャレなフリー画像を無料で使いたい!でも日本の無料画像サイトはちょっとイマイチ…海外のオシャレな写真素材を探したいけど見つけ方がわからない! こ...

ヘッダー画像作成の流れ

ヘッダー,カッコいい

僕が普段やっているようなヘッダー画像作成の流れを解説していきます。

注意

もし、画像を使わずテキストロゴだけで完結させたい場合は1〜3の手順はカットしてください。

1.フリーの画像素材を見つける

画像をベースとしたヘッダーを作るなら、まずは素材となる画像を用意するところから始めましょう。

あまりゴチャゴチャしていなくて、シンプルで洗練されたモノが良いですね。

画像素材は載せるだけで雰囲気が出るような、海外の素材サイトで配布されている画像がオススメです。画像を探す用のサイトは上で記しましたが、念のためもう一度貼っておきますね。

参考:オシャレな海外のフリー素材画像サイト10選|ブログのアイキャッチにおすすめ!

もし、画像を使わずテキストロゴだけで完結させたい場合は1〜3の手順はカットしてください。

2.ダウンロードした画像をPhotoscapeで表示する

先ほど紹介した無料画像編集ソフト、Photoscapeに先ほどダウンロードした画像を表示させましょう。

ここから本格的に画像を編集していきます。

3.必要に応じて画像を修正する

用意した画像のサイズを変えたり色合いを変えたい場合、切り抜きをしたい場合は、Photoscapeを使って画像を修正していきましょう。

Photoscapeでヘッダー用の画像を編集する画面

この画面のように色々と機能がついていますが、全て無料で使うことができます。

全て直感的に作業ができますし、失敗したら「取り消し」ボタンをクリックすることで、1つ前に戻ることができるので初心者の方にも簡単です。

Canva内でもサイズ等の細かいことはできますし、後からまた編集をしに戻ってきてもいいので、Photoscapeで色々とやっていてもイメージがわかない場合は、とりあえず次へ行ってしまいましょう!

4.Canvaを使ってデザインとコピーの調整をする

使用する画像の編集がだいたいできたら、Canvaを使って実際にヘッダー画像に落とし込んでいきます。

Canvaを使ってwordpressのヘッダー画像を作成する画面

「Blogバナー」や「ロゴ」等を選択すれば、目的に応じたサイズでの作成画面をCanva側が提示してくれますが、サイズはデザインに応じて微調整したくなるもの。ここは「カスタムサイズ」を選択しましょう。その際の「横幅」は使用するwordpressテーマに準じたサイズを指定してください。(わからなければ使用するテーマのマニュアルを参照)

先ほどPhotoscapeに落とした画像を使って、適当に作ってみましょう。

wordpressブログのヘッダー画像作成画面

右側に先ほどの画像を配置し、左側にはコピーを載せてみました。

これくらいのクオリティで構わないなら、5分くらいあれば余裕で作ることができます。

仮にデザインのセンスがなくても「テキスト」から「フォントの組み合わせ」を見れば、色んなパターンのロゴが表示されますし、左のサイドバーから「テンプレート」をクリックすれば、選択したサイズに合ったデザインの例を何パターンも表示してくれます。

Canvaのヘッダーデザイン例

こういうところから着想を得てヘッダーデザインを決めていくのもいいですね。

Canvaを使えば直感的な作業でカンタンに良い感じデザインを仕上げることができますし、何よりフォントの数がかなり多いのも魅力的です。ぜひご活用ください!

5,完成したヘッダー画像をWordPressのヘッダーに反映させる

最後に、完成したヘッダー画像をWordPressのヘッダーに反映させれば完了です!

やり方はWordpressのテーマによって異なるので、お使いのテーマのマニュアルをご参照ください。もしサイズ等が合わないという場合は、Canvaの画面に戻って調整をしていきましょう。

一度方向性さえ決まってしまえば、ヘッダーを作る作業は非常に簡単なので、ぜひいろんなサイトやブログをチェックしてヘッダー画像作成の参考にしてくださいね。

プロに発注するか自分で作るか

ここまでは「自分で無料でカンタンにブログのヘッダー画像を作る方法」をお話ししてきましたが、もちろんお金をかけてプロに頼んだり、ココナラ等のサイトでデザイナーを探すのもアリだと思います。

実際に僕も以前のヘッダー画像は、知人や僕のWEBマーケティングのコンサルを受講されていたクライアントさんに依頼をして、お金を払って作ってもらっていました。

その時の画像がこの辺りです。

ブログのヘッダー画像

本当にクオリティが高すぎますし、自分ひとりでは絶対に作れません…!

一方で自分で作るメリットとしては、やっぱり微調整が自由にできる点が挙げられます。(WEBマーケティングにおいては細かいテストもめっちゃ大事です)

また、誰かに依頼する場合でも、一度自分で作った経験があるのとないのとでは、やっぱり依頼をする時の伝え方の精度も変わってきますよね。

なので、いずれにしても「ブログのヘッダー画像を自分で作る経験」はしておくに越したことはないですし、今回お伝えした方法で取り組めば、誰でも簡単に、そして無料でクオリティの高いヘッダー画像を作ることができます。ぜひご参考にしていただけたら幸いです!

目次
閉じる