COLUMNコラム
ブログのヘッダーの作成方法は?作成のポイントや役立つツールやサイトを紹介!
ブログのヘッダーはサイト上部にあり、サイト全体のイメージを決める重要な部分です。
しかし、これからブログを始める方や既にブログを運営している方の中にも、ヘッダーの作成方法がわからないという方も少なくないでしょう。
本記事では、ブログのヘッダーの作成方法や作成のポイントについて解説するとともに、便利で役立つサイトやアプリを紹介します。
ブログのヘッダーを作成する方法は?
ブログのヘッダーは、具体的にどのような手順で作成すればいいのでしょうか。
ブログのヘッダーの作成方法について解説していきます。
ヘッダーに載せる文字を考える
ヘッダーには、何についてのブログか分かるようにブログのタイトル、キャッチコピーなどの文字を20文字前後を目安に短めに載せます。載せる文字は、テキスト形式だと表示できるフォントに制約がある場合がありますが、テキストを画像に変換すれば使用したいフォントのまま表示できます。
ヘッダーにロゴを載せたい場合や文字をビジュアル的に見せたい場合には、テキストを画像として使用します。
使用する画像を用意する
画像をヘッダーに載せることは必須ではなく、画像を使用しないテキストだけのシンプルなヘッダーも多くあります。
ヘッダーに画像を使用する場合は、画像素材サイトからダウンロードして使用する方法と、自分で撮影した画像を使用する方法があります。
ただし、Web上で使われている画像を勝手に使用することは著作権の侵害になるため、絶対に避けましょう。
使用する色を決める
自分のブログのテーマやイメージはどのようなものかを考え、適切な色を選びましょう。
また、色を選択する際は、画像に使われている色と揃えると全体がまとまります。
どのように色を組み合わせればいいかわからない場合は、「配色見本」などの配色の組み合わせ見本を参考にしましょう。
ヘッダーのサイズを決める
ヘッダー画像のサイズはブログサービスやSMSによって異なるため、使用するブログサービスに合ったヘッダー画像のサイズを確認しましょう。
以下に一部を紹介します。
- アメブロ:縦幅:1120px、縦幅:300px~400px
- Twitter:縦幅1,500px、横幅:500px
- Youtube:縦幅:2,560px、横幅:1,440px
ヘッダーを作成するときの4つのポイント
ヘッダーはブログを開いたときに最初に目に入る重要な部分です。
ブログのヘッダーを作成する際に押さえておきたいポイントを4つ紹介します。
ブログのコンセプトに合ったデザインにする
ブログの上部に表示されるヘッダーは、ブログの顔のような役割を持ちます。
一目でブログのコンセプトが伝わるようなデザインであれば、初めて訪れた人にも読んでもらいやすくなります。
一方、ヘッダーがブログの内容に全く合わないデザインのものだと、ブログを訪れた人は戸惑ってしまいます。
自分のブログのイメージはどのようなものかよく考えて、ヘッダーやサイトのデザインはブログのテーマやコンセプトに合ったものにしましょう。
色数を抑える
ヘッダーに使用する色数が多いと、ごちゃごちゃした印象になってしまうため、以下のような配色で色数を3色程度に押さえます。
- メインカラー:ブログのメインとなる色
- ベースカラー:背景などの広い部分に使う色
- アクセントカラー:重要な部分に使う色
ヘッダーの色は、配色のバランスを考えながら色数を絞って使用することが大切です。
サイト全体のデザインと統一する
ヘッダーは、それだけで見るものではなく、サイトの一部として見られるものです。
ヘッダーがサイト全体のデザインに馴染んでいない場合、ヘッダーだけが浮いて見えてしまいます。ヘッダーのデザインは、サイト全体のデザインやテーマカラーと統一したものにしましょう。
適切なサイズにする
ヘッダーは、大きすぎたり小さすぎたりすることがないよう、サイト全体のバランスに合ったサイズで作成することが大切です。
使用するブログサービスによって推奨するヘッダーサイズがあるため、よく確認して作成しましょう。
ヘッダーに使用する画像の容量が大きいとページの表示速度が遅くなり、読者の離脱につながってしまいます。
サイズが大きすぎたり縦が長すぎたりしないよう、適切なサイズで作成しましょう。
ヘッダーを作成してみよう!
ブログのヘッダーを作成する場合は、無料で自作する方法とプロに依頼して有料で作成する方法があります。
それぞれの作成方法について解説します。
Canvaを使用して無料で作成する
「Canva」は、無料でおしゃれな画像を作成できるデザインツールです。
Canvaにはさまざまなテンプレートが用意されているほか、ブラウザ上で文字や画像を簡単に編集することができます。
また、パーツも豊富に揃っているので、その中から好きなものを選んでオリジナルを作成することも可能です。
無料版と有料版がありますが、無料版でも機能が充実しています。
Canvaを使用したヘッダー作成は以下の手順で行います。
- Canvaのアカウントを登録してログインする
- 使用したいテンプレートを選び、デザインを新規作成する
- 文字や写真、イラストを入れる
- 画像が完成したらダウンロードする
有料で作成する
ヘッダーを自作するのが難しい場合は、料金を払ってプロに作成を依頼します。
ヘッダーの作成に便利なサービス「ココナラ」を使用すると、多くのデザイナーの中から予算や希望するデザインに合ったデザイナーを探してヘッダー作成を依頼できます。
フリー素材サイトを利用する
ヘッダー作成にはフリー素材サイトを使用することもおすすめです。
「ICONFINDER」は、アイコン素材をダウンロードできる素材サイトです。
アイコンイラストとブログ名を並べるとオリジナルのヘッダーを作成できます。ヘッダーにイラストを載せたいという方は、イラスト系の素材サイト「ジャパクリップ」や「illustAC」が便利です。
ヘッダーに大きく写真を使いたい場合は、フリー素材サイトの画像をまとめて検索できる「O-DAN」が役立ちます。
どのサイトも無料プランで十分に使用できるため、自分のブログのテーマに合った素材を探して組み合わせるとよいでしょう。
まとめ
今回はブログのヘッダーの作成方法や作成のポイント、役立つツールやサイトについて紹介しました。
ブログのヘッダーはブログのイメージを大きく左右する重要な要素です。
ブログの内容に合った個性的なヘッダーは読者にブログの印象が残りやすくなり、多くの人にブログを読んでもらえるきっかけになるでしょう。
これからブログを始める方はもちろん、自分のブログをもっと見やすくおしゃれなものにしたい方にもヘッダーの変更は効果的です。
新たなヘッダーを作成してブログの雰囲気を変えてみてはいかがでしょうか。