この記事ではヘッダー画像の作り方（自作・無料）を解説していきます。
ブログ運営者のほとんどはデザイナーじゃないはずなので、デザイナーではない僕の視点も参考になろうかと思います。
デザインセンスが無くてもOKなので、ブログを始める方は是非参考にしてみて下さい。
カツオ
- 究極的にはヘッダーは外注が良い。
- 無料で作る場合はポイントを抑えた上でやらないと失敗する。
（好き勝手に作ると終わる…）
カッパ君
【念の為の確認】ブログのヘッダーは外注するのが一番！
まず、最初に述べておきたいのですがブログのヘッダーは外注するのが一番です。
デザインの知識が乏しい素人がどうあがいた所で、プロのデザイナーが作るヘッダーより良いものは作れないからです。
カツオ
このブログもヘッダー（ロゴ）は外注さんにお願いしました。
知り合いや近くのデザイン会社に頼むのも手ですが、ココナラなどを利用すると予算にあった良いデザイナーが見つかると思います。
（僕のブログのヘッダーで使っているロゴは3万円で作っていただけました）
外注する時の注意点ですが、自分がして欲しい事を分かりやすく外注の方に伝えるという事。
全部丸投げだとデザイナーさんもめっちゃ困るはずです。
- ヘッダー画像のサイズ。縦横比。
- 納品時のファイル形式。
- 写真かイラストか？
- 納期はいつを希望しているか？
- どういうブログで使うものなのか？
- 使いたい色の系統は？
- 自分がイメージしているものに近いサンプル画像をいくつか。
- 「ここはこうして欲しい」という要望。
最低でもこれくらいは実際にデザインを作ってもらう前に打ち合わせておきましょう。
カツオ
特に「この画像が自分がイメージしてるものに近いです。この部分を〇〇して、ここを●●して…」という風にサンプル画像を用意すると、かなりイメージが伝わりやすくなります。
無料でブログのヘッダーを自分で作る時に抑えておくべき2つのポイント。
ここからは無料で自分でブログのヘッダー画像を作る時のポイントなどについて述べていきます。
外注に頼むの良いですが、最初は自分で作りたいって人も多いと思いますから。
ポイントは2つです。
- とにかくシンプルに！
- デザインの4つの原則
とにかくシンプルにしよう。
ここでも述べる事は色々あるのですが、とにかく「なるべく要素を減らしてシンプルにする」というのが重要です。
ごちゃごちゃと色々な要素を入れると、かなりのセンスがない限りカッコ悪くなるからです。
百聞は一見に如かずという事で下記の例をご覧ください↓
この2つ比べるなら、上のシンプルな方が良いと思いませんか？
カッパ君
何をどのようにシンプルにするべきかについては下記表にまとめました↓
| フォント | なるべく1種類のフォントしか使わない。限界でも2種類まで。 |
| 色 | 文字色と背景色で全体で2色がベター。限界でも全体で3色までが無難。 |
| 画像 | ワンポイントとして使う画像がある場合、1つまでにしておくべき。限界でも2つまでが無難。 |
| 情報量 | ヘッダーに載せる文章はなるべく短く。（読者が一目で意味が分かる程度の文章量） |
これらを守れば、デザインが得意でなくてもある程度のものは出来るでしょう。
デザインの4つの原則
ヘッダー画像を作る上でデザインの「4つの原則」は抑えておきたい所です。
超細かく理解しなくてもいいので、概要は頭に入れた上でヘッダー画像作成に挑みましょう！
4つの基本原則とは下記の4つ。
- 近接
関連する項目は近づける。 - 整列
要素はきちんと整列する。 - 反復
デザインの要素を繰り返す。 - コントラスト
はっきりとした差をつける。
近接
「近接」とは関連する項目はなるべく近づけた方がきれいにまとまるという事です。
名刺や広告のデザインなどで特に重要になる事が多いですが、ブログのヘッダーを考える上でも知っておいた方が良いです。
整列
「整列」とは各要素をしっかり整理して並べるという事。
要素がバラバラになっている状態。
↓
近接・整列させる。
反復
「反復」というのは同じ要素を繰り返すという事です。
僕のブログではサムネイルに毎回、僕とカッパ君が表れていますが、これは反復。
いつも特定の色を使うとか、特定のフォントを使ういうのも反復です。
カッパ君
こうする事でデザイン全体に一体感が出て組織化されます。
ブログのサムネイルでいつも登場させてるキャラを右下に設置する事で反復とした。
コントラスト
最後に「コントラスト」ですが、これははっきり違いを出す事です。
文字のサイズの差を大きくする事でメリハリが出ました。
これらの4原則は、全てのデザインで全部が毎回必ず使われている訳ではなく、必要なものがその場に応じて使われています。
無料でブログのヘッダーを作る方法。
「シンプル」と「4つの原則」を頭に入れた上で、自分自身でヘッダー画像を作っていきましょう。
ヘッダー画像を作る手順は下記の通り↓
- ソフトを準備。
- 全体の構図を決める。
- 背景を決める。
- 入力する文字を決める。
- ワンポイントで使う画像を決める。
- 調整する。
- それでも決められないという人の為に。
ソフトを準備。
無料でブログのヘッダーを作るには何らかのソフトを使います。
まず、無料で画像が編集できるソフトとして一番おススメなのがPhotoScapeです。
これは無料とは思えないほど様々な機能が使えます。
使い方も難しくはなく感覚的な操作が可能なので万人におススメ。
PhotoScapeの使い方を説明！画像の結合や文字入力、トリミングなど超有能
もう一つおすすめなのがCanvaです。
Canvaは手軽に簡単にかっこい・おしゃれなデザインを作る事が出来ます。
用途別にテンプレートも用意されてますので（↓）、それを選んで文字だけ変えるだけでもそれなりのものが出来てしまいます。
カツオ
全体の構図を決める。
色々とデザインを決めていく前に、全体の構図を決めましょう。
シンプルなブログのヘッダー画像と言えども、いきなり何の考えも無しに作っていくと高確率でカオスな失敗作が出来上がりますので…
目的は全体像を掴んで自分がヘッダーを作りやすくする事なので、メモ帳に鉛筆で書くなりやりやすい方法で全体の構図を決めて下さい。
カッパ君
今回は文字とワンポイントの画像を使う、という例で考えてみます。
背景を決める。
次に背景を決めましょう。
シンプルという観点でおススメなのは画像じゃない単色の背景。
ケバい色は避けて淡い色にした方が失敗は少ないです。
画像を使うのであればなるべくごちゃごちゃしていないものが良いですね。
今回は例としてクリーム色にしました。（が、白背景でも全然OKです）
入力する文字を決める。
ブログのヘッダー画像には何らかの文字を入れるのがベターです。
分かりやすく、端的にメッセージが伝わるから。
カツオ
ブログのヘッダーに入れる文字は
- ブログのタイトル
- ブログの説明書き（短く）
の2種類でOK。
②については省いてもOK。
これ以上入れるとマジでカオスになりますので要注意。
カッパ君
ブログ名は大きなフォントサイズで。説明は小さく。
ワンポイントで使う画像を決める。
別に文字だけのヘッダー画像もありだとは思いますが、ワンポイントで画像を使っても良いでしょう。
右下にキャラクターの画像を入れてみました。
ちなみに悩んだら文字だけのヘッダーでも全然OKです。
調整する。
出来上がったヘッダーを必要があれば微調整しましょう。
背景色や文字の配置はこれでいいのか、色々調整して無料で出来る範囲でより良いものを目指します。
この時のポイントは要素を追加するのではなく、削る事を意識する事。
新たに文字を増やしたり、画像を増やすとカオスになり、まとまらなくなります。
文字数を削ったり、画像を消したりする事でより無難になる傾向があるので覚えておきまししょう。
それでも決められないという人の為に。
「シンプル」と「4つの原則」をある程度意識しつつ、画像編集ソフトを使ってヘッダーを作ろうと頑張ってみた。
それでも中々決まらないという人、結構いると思います。
そういう方はとりあえず「白背景で文字だけのヘッダー画像」を作ってください。
文字だけのヘッダー画像の例
デザインを本格的に勉強した事もなく、経験もない方がちょっとした時間で満足の行くブログのヘッダー画像を作るのは不可能です。
深みにはまると抜け出せなくなります。
ですので、悩むくらいなら究極にシンプルな形でブログのヘッダー画像を作ってしまいましょう。
それからブログを運営していって、ある程度収益も出てきて…という時に外注さんにヘッダー画像の作成を依頼したり、自分で作り直したりするのがベターです。
今回の内容は以上です。
カッパ君
