- ブログのヘッダーが何かよくわからない
- ヘッダーの作成方法を知りたい
- お洒落なヘッダーが作れない
こんな悩みを解決する記事です！
本記事の内容
- ヘッダーの作成方法3ステップ
- ヘッダーデザイン具体例4個
- おしゃれヘッダーを作る為のヒント3つ
本記事ではライバルと差別化できるヘッダーの作り方を紹介。
読み終えればライバルとヘッダーで差別化して、上位表示しやすいサイトを作ることが出来ますよ。
執筆者紹介
アフィラ(@afilasite)
ブログ歴5年の私がブログヘッダーの簡単な作り方を紹介します。
目次
ブログヘッダーとは？【差別化でアクセスUP】
まず、ブログのヘッダー画像とはブログの上部に表示される画像のこと。
ヘッダー画像はどのページにも表示されるため、ブログの玄関口のようなものです。
なのでおしゃれでインパクトのあるヘッダー画像にしておくと、訪問者の反応が良くなり、また訪れてもらえる可能性が高くなります。
ちなみに当ブログ(作業ロケット)のヘッダー画像はこちら。
厳密には私の場合サイトロゴです
このヘッダーはサイトコンセプトである「キャラ」と「ロケット」をベースに作成しました。
Twitterアイコン・ヘッダー画像等とも連携しているため、Twitterから来た方にも違和感なく読んでもらえています。
そのおかげもあってかSocialからも高い流入率を誇っていますし、ブクマ登録等が多くなっていてダイレクト流入11%の好反応を得られていますよ。
ブログヘッダー画像のサイズは？大きさはどれくらい？
ブログヘッダー画像のサイズは、使用しているサイトテーマによって異なってきます。
有名なサイトテーマ別にリストアップしたので、お使いのテーマのヘッダー画像サイズを確認してください。
✅有名テーマ別ヘッダーサイズ
- JIN：横幅2400px以上
- Cocoon：横幅800px以上
- SANGO：1000px×470px
- The THOR：1280px×853px
- アフィンガー：2200px×500px
上記のように適切なヘッダー画像のサイズは、使用しているテーマによって異なります。
解像度が低い画像サイズを設定してしまうと、画像がぼやけたりしてしまうこともあるので要注意。
ヘッダー画像のサイズは、使用しているサイトテーマの推奨サイズにすればOKです。
ブログヘッダーはロゴ画像だけのシンプルでもOK
ブログのヘッダーはロゴ画像だけのシンプルなスタイルでもOK。
全体的に整っていて無駄のないサイトデザインの場合、ヘッダーはサイトロゴだけのシンプルなのもアリですね。
実際シンプルなブログテーマには、ロゴ中心のヘッダー画像のパターンの方がマッチすることもあります。
ブログヘッダーは必ずしも大きな画像を作り込む必要はなく、ロゴ＋αのシンプルに仕上げても良いですよ！
ブログのヘッダー画像を作成する方法3ステップ
ブログのヘッダー画像を作成するには、次に紹介する簡単な3ステップで出来ます。
- フリー素材探し
- デザインを決める
- canvaで作成
まずフリー素材（画像）を探し、ヘッダーのデザインをメモ帳か何かに下書きします。
その後、canvaという無料の画像加工サイトでヘッダーを作成すればOKです！
(※更に高品質を求めるならPhotoshopを推奨)
ではここから更に詳細を深堀していきますね。
ブログヘッダー作成①：フリー素材探し
ブログのヘッダー画像を作成するためには、まず使う素材を集めないといけません。
このヘッダー素材は上手く探すと、無料なのに超クオリティが高いものを見つけることも可能！
例えば「イラストAC」というサイトは、素材数の多さがピカイチで種類も豊富なのが最高です！
ブログバナーに使えそうなこんな画像がたくさんあります。
その他おすすめのブログヘッダーのフリー素材やサイトは[ブログ用のフリー素材おすすめサイト20選]で紹介していますよ！
【無料】ブログ用のフリー画像素材おすすめサイト20選【初心者必見】
ブログヘッダー作成②：デザインを決める
ブログのヘッダー素材を集めたら次に行うのがデザインの決定です。
「初めてだしデザインなんてわからない…」という人はテンプレートを探して、少しカスタマイズするのが手っ取り早いでしょう。
その他、他のブログをみてどんなヘッダーにしているのか参考にするのもいいですね！
また、ヘッダー画像だけでなくファビコン(サイトアイコン)も入れるのも推奨。
✅ファビコンとは
・ブックマークやタブを表示した時に、Webページ名の横に並ぶ小さなアイコン
ファビコンもヘッダー画像と同様、ブランディングに役立つのでマッチするデザインを考えるのがベター。
素材を集めたらブログヘッダー作成に入る前にデザインを固めましょ！
ブログヘッダー作成③：canvaで作成
素材とデザインが整ったら、早速ブログヘッダーの作成をしていきましょう。
ブログ初心者でも簡単にヘッダー画像が作れるのが「canva」というサイトです。
操作が簡単でテンプレが充実している上、無料なので初心者に優しいですね。
canvaでのヘッダー画像の作成手順は以下の通り。
- トップページから「デザインを作成」を選択
- デザイン案に沿って素材・テキストを入れる
- ダウンロードする
それぞれ説明していきます。
トップページからデザインを作成を選択
トップページの右上から「デザインを作成」を選択します。
カスタムサイズを選択してサイトテーマに合ったサイズにしましょう。
予め考えていたデザインに沿って画像、テキストを挿入
予め考えていたデザインに沿って、事前に準備した画像やテキストを入れて作っていきます！
✅canvaでよく使う操作
・[アップロード]で自分のPCの画像を使う
・[素材]でテンプレ素材を使う
・[テキスト]で自由に文字を入れる
canvaにもたくさんの背景画像やアイコンが用意されているので、必要に応じて活用しましょう。
ダウンロードし保存
ヘッダー画像が完成したら、右上のボタンからダウンロード保存。
ファイルの種類は、特にこだわりがなければ「JPG」が軽いのでおすすめ。
こんな感じでブログのヘッダー画像は、初心者でも簡単に作成可能です。
オリジナルのアイキャッチ画像や、見出し下画像の作成にも使えるので、canvaの使い方を覚えておくといいですね。
ブログヘッダーのデザイン具体例3個
これから作るブログ初心者の方向けに、ヘッダー画像のデザイン例を4つ紹介します。
画像を作るといっても、なかなかイメージがわかない方はデザインの参考にしてみて下さい。
ブログヘッダーデザイン例①：manablog
1つ目に紹介するブログヘッダーのデザイン例は、マナブさんのmanablogです。
https://manablog.org/
ロゴを使ったシンプルでコンパクトなデザインが特徴。
サイト全体が黒・白を基調とした、見やすくカッコいい設計になっていておしゃれです。
manablogのようにロゴ画像中心のヘッダーはカッコいい
ブログヘッダーデザイン例②：副業コンパス
2つ目に紹介するブログヘッダーのデザイン例は、クニトミさんの副業コンパスです。
https://tabinvest.net/
副業コンパスのヘッダー画像のデザインは「アイコン画像＋サイト名」となってます。
サイトカラーの淡いオレンジと統一感があり、コンパスのアイコンを使っている工夫も素敵ですね。
ファビコン(サイトアイコン)にも合わせていて、ブランディングが物凄く上手いので勉強になります。
副業コンパスはサイト名・方針・ヘッダー等の統一感が凄くいい
ブログヘッダーデザイン例③：作業ロケット
最後のブログヘッダーのデザイン例は、当ブログの作業ロケットです。
✅意識したこと
・シンプルにする
・サイト名をアピール
・サイトカラーのネイビーに合わせる
・サイト名にあわせてロケット配置
・Twitter、ブログで使っているキャラを設置
とにかくブランディングを戦略的に実行するのが鍵です。
ブログヘッダーをおしゃれに作る為の3つのヒント
おしゃれなブログヘッダー画像を作りたい人へ、3つのヒントをお伝えします。
- 使えるフォントを知る
- 使えるイラストサイトを知る
- デザインセンスの工夫
それぞれのヒントを解説していきますね！
ブログヘッダー画像に使えるフォント10個
ブログのヘッダー画像をおしゃれにしたい時、使える10個のフォントがこちら。
- 陽炎
- Ubuntu
- Forum
- M+ fonts
- リュウミン
- Montserrat
- ラノベpop
- 源柔ゴシック
- ヒラギノ角ゴシック
- じゆうちょうフォント
※一部、canvaでは無いものがあります
これらのフォントで試してみて、お洒落なヘッダーを作成してみると良いですよ！
ブログヘッダー画像に使えるイラストサイト3選
ブログのヘッダー画像に使える「イラストサイト」は以下の3つです。
- いらすとや
- いらすとん
- イラストAC
「いらすとや」は柔らかいタッチのイラストで種類が豊富で、使いやすいですね！
「いらすとん」はかわいいイラスト系に特化しているので、こちらもチェックしておくといいです。
「イラストAC」は素材数の多さハンパなく、背景等に使えるのが沢山あるのが特徴。
もっとフリー素材サイトが知りたい場合は、[ブログ用のフリー素材おすすめサイト20選]でチェックしてみてください。
ブログヘッダー画像のデザインセンスの工夫
ブログヘッダー画像は「色の組み合わせ」を工夫するだけでセンスよく見えます。
たとえば「黒 × 白」「橙 × 黄」などが考えらますね。
配色を意識して使うことで見た目のおしゃれさはもちろん、読者に与える印象を決めることが出来ます。
実際に私が配色を考える際に使っているのは[カラーピッカー]というサイト。
このようにおしゃれに見える色の組み合わせを提案してくれます。
最終的には自分で色の組み合わせを決めますが、その参考にもってこいの優良サイトですよ！
このように配色を意識してヘッダー画像を作成すると、初心者の方でもお洒落なサイトが作れます。
ブログヘッダーとは？画像作成を3ステップで簡単に解説まとめ
今回はブログのヘッダー画像の作成方法について、情報をまとめてみました。
ココがポイント
- シンプルでおしゃれなものにする
- フリー素材等を集めてつくればOK
- おしゃれにする工夫も忘れずに
検索ユーザーが初めてあなたのブログに訪れ、目にするのがヘッダー部分。
ヘッダーの質が高ければ読んでもらえますし、リピーターになってもらえる可能性も高ります。
なので、しっかりと考え抜いた質の高いヘッダーを作成すると良いですよ！
今すぐできる具体的TODO
早速、ヘッダー画像を作成してブログ全体のクオリティを上げましょう。
全ページにプラスの影響が出れば、検索順位も上がって収益額UPに繋がる可能性が高い改善点ですよ！
アフィラの小言
ブログ全体に影響を及ぼすような、「サイト名」「ヘッダー画像」「サイトテーマ」「キャラアイコン」などは時間とお金を使って質の高いものにした方がコスパがいい。
何故なら何度も使われる部分なので、質が高くなれば全体で大きなプラスが生まれるからです。
ビジネスセンスが高い人は「費用対効果」を考えて時間やお金を投資できるので、よりお金を稼ぐことが出来、どんどん伸びていきます。
逆にコスパを考えず何でもテキトーに無料のものばかり使っていると、どんだけ積み上げをしても成果が出ません。
そんな悲惨な状況にならないよう、力を入れるべきところを見極めてブログを作成していくのが賢い運用ですよ！
