ブログのトップページをおしゃれにしたい!ブログヘッダーの作り方5ステップ【アイキャッチとの相性が重要】

ブログのデザイン
ブログのトップページが少しさみしいのでもう少し華やかな感じにしたい。
おしゃれなブログのヘッダーの作り方を知りたい。

こういった方に向けて今回はおしゃれなブログヘッダーの作り方を解説します。
作り方の手順自体は単純ですが、おしゃれにするにはポイントがあります。

  • ブログの内容に合ったデザイン
  • ブログのテーマカラーに合った配色
  • アイキャッチとの相性

とにかく統一感をもたせるのがコツです。

私が実際に作ってみたヘッダーがこちらです。
 

 
やはりヘッダーのあるなしで「トップページらしさ」が違いますね。
 

 
もし「ブログの内容に合ったデザイン」が何かわからない、「ブログのテーマカラー」なんて決まってない、という方もご安心ください。
読み進めていけばひとつずつ解決するように解説しています。

デザインやブログ初心者の方にもわかりやすいよう図をたくさん使って説明してるのでぜひご覧ください。

ブログのヘッダーの作り方とおしゃれにするコツ

さっそくヘッダーを作る手順です。

  1. CANVAを利用
  2. サイズを指定
  3. テンプレートを選ぶ
  4. アレンジする
  5. ダウンロードと圧縮

おしゃれにするコツとともに順番に説明していきます。

手順①CANVAを利用


 
まずCANVAというデザイン作成ツールを使ってブログのヘッダーを作ります。

  • ブラウザ上で使える
  • デザイン初心者に使いやすい
  • おしゃれなテンプレートが豊富

こういった理由でゼロから自分でデザインを考えるより完成度が高いです。

グーグルアカウントがあればログインしてる使えるようになります。
 

 

手順②サイズを指定

CANVAにログインできましたか?
まず初めに作るヘッダーのサイズを指定します。
 

 
 

 
サイズはワードプレスのテーマによって推奨サイズが違います。
あなたのテーマの公式サイトなどで確認してくださいね。

私の場合(ワードプレスのテーマ:スワロー)は「2400 × 800px」で作っていきます。

サイズの注意

あまり縦のサイズを長くし過ぎないことです。

ヘッダーが縦に長いと読者がどんどんスクロールして記事をクリックしなければならず、不便です。

自分の好きなサイズより読者の見やすさが大事です。

手順③テンプレートを選ぶ

サイズが決まったらいよいよテンプレート(デザイン)を選びます。
 

 

ブログのテーマ内容にあったテンプレートにするのがポイントです。
ブログの世界観がでますよね。

たとえば

  • ミニマリスト向けブログならシンプルなデザイン
  • ペットのブログならほっこり系デザイン
  • 旅系ブログなら旅の写真

などなど。
 

 
トップページを訪れた読者が「何をテーマにしたブログなのか」がわかる方がいいですよね。

私のブログはブログのデザインについて発信してるので、少しモダンでクリエイティブな雰囲気をだしたく、このテンプレートにしてみました。
 

 
あなたのブログの世界観がでるデザインはどんなものかじっくり考えてみましょう。

手順④アレンジする

テンプレートが決まったらあなたのブログに合わせて色やテキストをアレンジしていきます。

主にこういった部分を変更します。

  • レイアウト
  • カラー
  • イラスト素材
  • 画像
  • テキスト

レイアウト

基本的にレイアウトはあまり大きく変更する必要はないです。

いらない素材を削除したり、要素を移動させる程度でOKです。
 

 
デザイン初心者の場合はあまり大幅に変えず、原型に近いまま使った方が全体のバランスが良いです。

カラー

ヘッダーの色はブログのテーマカラーに合わせます。
トップページで配色が揃ってるとキレイです。
 

 

もしブログのテーマカラーが決まっていない人はこれを機に決めてしまいましょう。

【簡単】ブログ配色の決め方|色を統一するだけでおしゃれなブログに変身します

そしてヘッダーの配色を決める際に注意するのが、3色以内に抑えることです。
3色以内だとデザインにまとまりがでて失敗しづらいです。
 

 

さきほどのブログ配色の決め方に関する記事でも、ブログのテーマカラーは3色までをおすすめしてます。

イラスト素材

イラスト素材があればあなたのブログ内容に合ったものに変えます。
例えばペットブログのヘッダーなら関係するイラスト素材(犬、うさぎ等)への変更です。
 

 
CANVAには色を変更できるイラスト素材が豊富にあります。
 

 

様々なテイストのイラストがあるので、あなたのブログの雰囲気にあった素材を選びましょう。
 

 

もしスッキリさせたいならイラスト素材は削除するのもいいと思います。
私のブログはシンプルにさせたいのでイラストは配置しませんでした。

画像

もし画像を使う場合は、やはりブログのテーマと関係ある写真がいいです。
そしてできる限りブログのテーマカラーを意識するのをおすすめします
 

 

注意点は粗い画像を使わないことです。
画像が粗いとダサくなってしまう原因になるので鮮明で美しい画像を使います。

CANVAにもキレイなフリー画像はたくさんありますが、特にクオリティの高いフリー画像サイトを紹介しますね。

<unsplash>

(引用:https://unsplash.com)

海外のセンス良い写真が揃ってるサイトです。
アイキャッチにも使える画像がたくさんありますよ。

テキスト

ヘッダーは飾りに近いのでテキストはあってもなくてもOKだと思います。
好みだと思いますがブログテーマが伝わる文章だと訪れてくれた読者にわかりやすいですよね。

このブログのヘッダーは自分のブログテーマが端的に伝わる文章を入れてみました。
 

 

テキストの注意点は、書体によってブログと雰囲気が合わなくなってしまうことです。
たとえばこのブログのアイキャッチに使用してる主な書体は、ゴシック体とサンセリフ体です。
 

 
もしヘッダーにタイプの違うセリフ体を使ってしまうと、なんとなく違和感があるはずです。
 

 

つまり書体によって雰囲気が全然違うんですね。
 

 

 

かなり細かい話ですが、こういった細部に気を配ることで全体の統一感を演出できます。

ブログを始めた当初はそこまで考えられないかもしれませんが、なんとなくの方向性(シンプル、エレガント、ポップ等)を決めるといいと思います。

なおどんなフォントが向いてるかはフォントの基本でも解説してるのでぜひご覧ください。

伝わる文字の配置とは?レイアウト6つのコツをわかりやすく解説します

手順⑤ダウンロードと圧縮

テンプレートが完成したらダウンロードします。
WordPressの容量の負担を考えて、JPGがおすすめです。
 

 
保存されたJPGファイルを圧縮させてからWordPressにアップロードさせます。
画像圧縮サイト

(WordPressへのアップロードは後述)

ブログヘッダーをおしゃれに作る上での注意点

以上がヘッダーの作り方の手順でした。
ここからはブログ全体からの視点でヘッダーの注意点を説明します。

アイキャッチとの相性

ヘッダーはアイキャッチとの相性を意識したいです。

ブログのトップページで、アイキャッチ一覧と一緒にヘッダーは並びます。
 

 
テイストの違い過ぎるヘッダーだと違和感がでてしまうので注意です。

具体的には

  • イラスト素材の雰囲気
  • 配色
  • 書体

といった点をアイキャッチと調和させます。

なおブログがおしゃれになるアイキャッチの作り方を解説した記事もぜひご覧ください。

【おしゃれなのに時短】ブログのアイキャッチ画像の作り方5ステップ【初心者こそこだわりたい理由】

余白を意識する

ヘッダーをデザインする際は余白をしっかり意識したいです。

ヘッダー周辺はどうしても圧迫感を与えやすい場所だからです。
 

 

  • ブログタイトル
  • カテゴリ名
  • スライダー記事

などが配置されてることが多いですよね。

なので派手な色合いやぎゅうぎゅう詰めのデザインはやめておくのが無難です。
ヘッダーの主張が強すぎてカテゴリ名が目立たない、なんてことは避けたいですよね。

デザインでの余白の効果的な使い方はこちらの記事で解説しています。

【簡単なのに効果的】余白のスゴイ効果とデザインに取り入れるコツをわかりやすく解説します

各端末から見え方をチェックする

ヘッダーを設定したら、必ず各端末からの見え方をチェックします。

特にスマホのチェックを忘れがちなので注意です。
ブログの閲覧はパソコンよりスマホからの方が多いですからね。

しかもスマホで見るとヘッダーはとても小さいので、わかりやすいデザインか確認しましょう。

ワードプレスへのアップロード

ヘッダーをダウンロード&圧縮までさせたら、WordPressにアップロードします。

アップロードの方法はお使いのワードプレステーマによって違いますが、今回はスワローを例に説明します。
 

 

 

 

 

 

ワードプレスに設定できましたか?

まとめ

最後に手順をまとめます。

  1. CANVAを利用
  2. サイズを指定
  3. テンプレートを選ぶ
  4. アレンジする
  5. ダウンロードと圧縮
最初から自分の気に入る完璧なヘッダーはなかなか作れないんですよね。
私も何度も作り直したし、今後も作り直すかもしれません。

まず自分のブログの世界観を演出できてるか?を意識してみましょう。

もし「自分でヘッダーのデザインを考えるのが面倒くさい」「センスに全く自信がない…」という方は私がデザインさせていただきます。

ココナラからお申し込みくださいね。

おしゃれアイキャッチ・サムネイル・ヘッダー作ります 【格安&最短1日】あなたのメディアをおしゃれにします♪