Wordpress

ブログのヘッダー画像を作り方を解説!【デザインセンス無くてもOK】

この記事の内容

この記事ではヘッダー画像の作り方を解説していきます。

ブログ運営者のほとんどはデザイナーじゃないはずなので、デザイナーではない僕の視点も参考になろうかと思います。

デザインセンスが無くてもOKなので、ブログを始める方は是非参考にしてみて下さい。

田村カツオ
田村カツオ
ポイントをまとめます。
  • 究極的にはヘッダーは外注が良い。
  • 無料で作る場合はポイントを抑えた上でやらないと失敗する。
この記事を読むことでヘッダー画像で失敗する可能性が低くなります。
カッパ君
カッパ君
内容に入っていくよ!

【確認】ブログのヘッダーは外注するのが一番!

外注はおススメ。

まず、最初に述べておきたいのですがブログのヘッダーは外注するのが一番です。

デザインの知識が乏しい素人がどうあがいた所で、プロのデザイナーが作るヘッダーより良いものは作れないからです。

田村カツオ
田村カツオ
これは究極の答えです。

このブログもヘッダーは外注さんにお願いしました。

知り合いや近くのデザイン会社に頼むのも手ですが、ココナラなどを利用すると予算にあった良いデザイナーが見つかると思います。

田村カツオ
田村カツオ
僕のブログのヘッダーで使っているロゴは3万円で作っていただけました。

 

外注する時の注意点ですが、自分がして欲しい事を分かりやすく外注の方に伝えるという事。

全部丸投げだとデザイナーさんもめっちゃ困るはずです。

  • ヘッダー画像のサイズ。縦横比。
  • 納品時のファイル形式。
  • 写真かイラストか?
  • 納期はいつを希望しているか?
  • どういうブログで使うものなのか?
  • 使いたい色の系統は?
  • 自分がイメージしているものに近いサンプル画像をいくつか。
  • 「ここはこうして欲しい」という要望。

最低でもこれくらいは実際にデザインを作ってもらう前に打ち合わせておきましょう。

田村カツオ
田村カツオ
はやる気持ちは分かりますが、出来上がった後に「やっぱり違う」だと後悔しますから。

特に「この画像が自分がイメージしてるものに近いです。この部分を〇〇して、ここを●●して…」という風にサンプル画像を用意すると、かなりイメージが伝わりやすくなります。

無料でブログのヘッダーを作る時に抑えておくべき2つのポイント。

ここからは無料で自分でブログのヘッダー画像を作る時のポイントなどについて述べていきます。

ポイントは2つです。

  1. とにかくシンプルに!
  2. デザインの4つの原則

とにかくシンプルにしよう。

ここでも述べる事は色々あるのですが、とにかく「なるべく要素を減らしてシンプルにする」というのが重要です。

ごちゃごちゃと色々な要素を入れると、かなりのセンスがない限りカッコ悪くなるからです。

 

百聞は一見に如かずという事で下記の例をご覧ください↓

シンプルな例
シンプルじゃない例

シンプルな方が良いと思いませんか?

カッパ君
カッパ君
ごちゃごちゃしてるとダサいw

 

何をどのようにシンプルにするべきかについては下記表にまとめました↓

フォント なるべく1種類のフォントしか使わない。限界でも2種類まで。
文字色と背景色で全体で2色がベター。限界でも全体で3色までが無難。
画像 ワンポイントとして使う画像がある場合、1つまでにしておくべき。限界でも2つまでが無難。
情報量 ヘッダーに載せる文章はなるべく短く。(読者が一目で意味が分かる程度の文章量)

これらを守れば、デザインが得意でなくてもある程度のものは出来るでしょう。

デザインの4つの原則

ヘッダー画像を作る上でデザインの「4つの原則」は抑えておきたい所です。

超細かく理解しなくてもいいので、概要は頭に入れた上でヘッダー画像作成に挑みましょう!

 

4つの基本原則とは下記の4つ。

  1. 近接
    関連する項目は近づける。
  2. 整列
    要素はきちんと整列する。
  3. 反復
    デザインの要素を繰り返す。
  4. コントラスト
    はっきりとした差をつける。

 

「近接」とは関連する項目はなるべく近づけた方がきれいにまとまるという事です。

名刺や広告のデザインなどで特に重要になる事が多いですが、ブログのヘッダーを考える上でも知っておいた方が良いです。

「整列」とは各要素をしっかり整理して並べるという事。

バラバラ状態要素がバラバラになっている状態。

近接・整列近接・整列させる。

 

「反復」というのは同じ要素を繰り返すという事です。

僕のブログではサムネイルの右下に毎回、僕とカッパ君が表れていますが、これは反復。

いつも特定の色を使うとか、特定のフォントを使ういうのも反復です。

カッパ君
カッパ君
このブログといったらコレだ!みたいな何かを作るのが「反復」ね。

こうする事でデザイン全体に一体感が出て組織化されます。

反復ブログのサムネイルでいつも登場させてるキャラを右下に設置する事で反復とした。

 

最後に「コントラスト」ですが、これははっきり異ならせることです。

コントラスト

文字のサイズの差を大きくする事でメリハリが出ました。

 

これらの4原則は、全てのデザインで全部が毎回必ず使われている訳ではなく、必要なものがその場に応じて使われています。

無料でブログのヘッダーを作る方法。

「シンプル」と「4つの原則」を頭に入れた上で、自分自身でヘッダー画像を作っていきましょう。

ヘッダー画像を作る手順は下記の通り↓

  1. ソフトを準備。
  2. 全体の構図を決める。
  3. 背景を決める。
  4. 入力する文字を決める。
  5. ワンポイントで使う画像を決める。
  6. 調整する。
  7. それでも決められないという人の為に。

ソフトを準備。

無料でブログのヘッダーを作るには何らかのソフトを使います。

 

まず、無料で画像が編集できるソフトとして一番おススメなのがPhotoScapeです。

これは無料とは思えないほど様々な機能が使えます。

使い方も難しくはなく感覚的な操作が可能なので万人におススメ。

PhotoScapeの使い方を説明!画像の結合や文字入力、トリミングなど超有能ここでは無料画像編集ソフトであるPhotoScapeの使い方を解説していきます。PhotoScapeはかなり機能が多く、いざ使おうとしても訳が分からないと泣く寸前の方に読んで欲しい!ぜひ使いたい機能をピックアップして分かりやすいように説明していきますね!...

PhotoScapeの使い方を説明!画像の結合や文字入力、トリミングなど超有能

 

もう一つおすすめなのがCanvaです。

Canvaは手軽に簡単にかっこい・おしゃれなデザインを作る事が出来ます。

用途別にテンプレートも用意されてますので(↓)、それを選んで文字だけ変えるだけでもそれなりのものが出来てしまいます。

テンプレート

全体の構図を決める。

色々とデザインを決めていく前に、全体の構図を決めましょう。

シンプルなブログのヘッダー画像と言えども、いきなり何の考えも無しに作っていくと高確率でカオスな失敗作が出来上がりますので…

 

目的は全体像を掴んで自分がヘッダーを作りやすくする事なので、メモ帳に鉛筆で書くなりやりやすい方法で全体の構図を決めて下さい。

カッパ君
カッパ君
大体でOKだよ。
全体図

今回は文字とワンポイントの画像を使う、という例で考えてみます。

背景を決める。

次に背景を決めましょう。

シンプルという観点でおススメなのは画像じゃない単色の背景。

ケバい色は避けて淡い色にした方が失敗は少ないです。

画像を使うのであればなるべくごちゃごちゃしていないものが良いですね。

クリーム色の背景

今回はクリーム色にしましたが、白背景でも全然OKです。

入力する文字を決める。

ブログのヘッダー画像には何らかの文字を入れるのがベターです。

分かりやすく、端的にメッセージが伝わるから。

田村カツオ
田村カツオ
もちろん、文字を入れないでも見た人に何かを伝える事が出来る人もいるでしょうが、それは達人の域です。

 

ブログのヘッダーに入れる文字は

  1. ブログのタイトル
  2. ブログの説明書き(短く)

の2種類でOK。

②については省いてもOK。

これ以上入れるとマジでカオスになりますので要注意。

カッパ君
カッパ君
デザイン経験がない人がやるならシンプルが一番無難。
サンプルなブログ

ブログ名は大きなフォントサイズで。説明は小さく。

ワンポイントで使う画像を決める。

別に文字だけのヘッダー画像もありだとは思いますが、ワンポイントで画像を使っても良いでしょう。

画像を入れたヘッダー

右下にキャラクターの画像を入れてみました。

ちなみに僕が運営している地域特化ブログのヘッダーは文字だけです。(しかも白背景)↓

カツオの群馬探検

これでも全然形にはなってますので、悩んだら文字だけのヘッダーでとりあえずOKです。

調整する。

出来上がったヘッダーを必要があれば微調整しましょう。

背景色や文字の配置はこれでいいのか、色々調整して無料で出来る範囲でより良いものを目指します。

 

この時のポイントは要素を追加するのではなく、削る事を意識する事。

新たに文字を増やしたり、画像を増やすとカオスになり、まとまらなくなります。

文字数を削ったり、画像を消したりする事でより無難になる傾向があるので覚えておきまししょう。

それでも決められないという人の為に。

「シンプル」と「4つの原則」をある程度意識しつつ、画像編集ソフトを使ってヘッダーを作ろうと頑張ってみた。

それでも中々決まらないという人、結構いると思います。

そういう方はとりあえず「白背景で文字だけのヘッダー画像」を作ってください。

↑僕の運営する地域特化ブログのヘッダーです。

デザインを本格的に勉強した事もなく、経験もない方がちょっとした時間で満足の行くブログのヘッダー画像を作るのは不可能です。

深みにはまると抜け出せなくなります。

ですので、悩むくらいなら究極にシンプルな形でブログのヘッダー画像を作ってしまいましょう。

 

それからブログを運営していって、ある程度収益も出てきて…という時に外注さんにヘッダー画像の作成を依頼したり、自分で作り直したりするのがベターです。

 

今回の内容は以上ですが、ヘッダー画像作成以外でもWordPressの初期設定でやるべき事は多いです。

下記記事にて包括的に説明していますので、漏れが無いかチェックしてみてくださいね↓

WordPressの設定方法を解説!【ここまでやればブログの形は全部整う!】この記事ではWordPressブログの詳細な設定方法について解説していきます。基本的な設定からプラグイン、各種ツールとの連携など、ここに書いてある事をやれば後は記事を書くだけの状態のブログが完成します。これからWordPressブログの設定していくという初心者の方は是非参考にしてみて下さい。...

WordPressの設定方法を解説!【ここまでやればブログの形は全部整う!】

ABOUT ME
田村カツオ
副業お坊さんブロガー。YouTubeとTwitterもよろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。

ten + twelve =