WordPressブログのヘッダー画像をフリー素材を使ってカッコよく作る方法

ブログのヘッダー

ブログを訪れた人が、まず最初に目にする場所といえば、ブログのヘッダーです。

ヘッダーはブログの顔であり、ブログ全体のイメージに大きな影響を及ぼすもの。いくらサイトの中身やコンテンツの質が良くても、ヘッダーがイマイチなら『このサイトは大したことなさそう・・・』と思われてしまいかねません。

それに今って空間的価値や体験的価値が重視されている時代で『どんな空間に身を置いているか』がユーザー満足度に大きく関わってくるんですよ。

だから訪問者に対して『カッコいいサイトを見ている自分(訪問者自身)』を提供すべきだし『可愛くてワクワクするサイトを見ている時間』を提供した方がいいわけです。

だから、心地よいユーザー体験を提供するためには、ブログのデザインも力を入れていく方がいいですし、ブログの顔であるヘッダーにも力を入れてくべきなのですが、『良い感じのヘッダーを作る』ってデザインとかやったことがない人やブログ制作に明るくない人にとっては結構難易度の高いミッションですよね。

実際に僕もどうやって良い感じのヘッダー画像を作ればいいのかわからず、今のヘッダーに落ち着くまでに結構な時間がかかりました。

そこで、本記事では無料で、できるだけ簡単にカッコいいヘッダー画像を作る流れを紹介していきます。ぜひ参考にしてください。

最後に、このサイトのヘッダーの制作過程についても触れさせていただきます。

良いブログヘッダーの条件とは?

 

人によってヘッダーを見る際に意識するポイントは違うものですが、マーケティングやブランディングの戦略的に『良いブログヘッダーの条件』は以下の要素があると考えます。

ブログの内容やテーマ、コンセプトがわかりやすいこと

ただカッコよかったり綺麗だったり見栄えがするだけではなく、『このブログではどういう内容のコンテンツを発信しているのか』がわかりやすい方が好ましいです。

もちろん、ブログをやっている目的意識によってもこの辺りの考え方は変わってきますが、届けたいターゲット(ブログを読んでほしい人)や届けたい内容(ブログのコンセプト)がある程度は決まっているなら、ヘッダーを見ただけで『このサイトがどんな人のためにどんな内容の情報を発信しているのか』はわかりやすくしてあげるといいですね。

例えば、ヘッダーに使うコピーとして以下の2つの案を考えてみましょう。

  • NO MUSIC NO LIFE
  • EDM初心者のための作曲&編集講座

カッコいいのは前者かもしれませんが、どんなブログかわかりやすいのは後者ですよね。

基本的にブログ読者は『知りたいことや調べたいこと』があってブログを見ています。そんな時、目に飛び込んできたヘッダーを見て『このサイトは私が求めている情報がたくさんありそうだ!』と思ってもらうことができれば、もっと他の記事も見てもらいやすくなります。(サイト内滞在時間やサイト内巡回率が上がる)

そのため、ターゲットとしている読者に『このサイトは私の悩みと関係がありそうだ』と思ってもらえるようなヘッダーを作っていくといいでしょう。

デザインの見た目がイケてること

とは言え『デザインのカッコよさ』とか『オシャレさ』がいらないかというと僕はそうは思いません。

人って『感覚で好きになり、好きという感情を理屈で脳に納得させる生き物』だと言われているので、『役に立ちそう』みたいな機能面だけだと『感覚』に刺さらないので不十分なんですよ。

それではどうすれば感覚に刺さるかというと非言語的な部分、すなわちデザインがイケてるかどうかだと思うんです。

この辺は『センス』と言ってしまえばそれまでですが、元々デザインについてのインプットが少ない状態では『どんなデザインがイケてるかどうか』の感覚を持つことができないので、まずはとにかく色んな人のブログを見て、ヘッダーなどのデザインに触れる回数を増やしてあげるといいですね。

自分(or サイト全体)のブランドを体現していること

じゃあ『一目見ただけで内容がわかって、かつデザインがイケてればそれでいいのか』と言うと、もう1つ気にしてあげた方がいいことがあります。

それは『そのデザインが自分(or サイト全体)のブランドにふさわしいかどうか』ってこと。

例えば、ミュージシャンを例に出して考えてみると、『X JAPAN』と『ゆず』ってどちらも日本中に知らない人がいないようなトップアーティストですが、それぞれキャラクターやイメージって全然違いますよね。

これは僕のイメージですが、

  • X JAPAN:ビジュアル系、ハードロック、イメージカラーは黒などモノクロ、孤高のカリスマ、恍惚
  • ゆず:ポップで可愛らしい感じ、フォーク(or ポップス)、イメージカラーはカラフル、親しみやすい、笑顔

おそらくこんなイメージを持っている人は多いんじゃないかと思います。

だから、仮にそれがカッコよかったとしても、ゆずがX JAPANのようなビジュアルイメージを身にまとったら違和感しかないですよね。

デザインはブランドを体現するものであるべきだし、サイトの顔であるヘッダーのイメージと、サイト全体のイメージにギャップがあるのもよくないですよね。

この辺りは『ヘッダーを先に作って、ヘッダーにサイト全体を合わせていく』のでもいいですけど、ヘッダーはブランドを体現するものという感覚は忘れないようにしたいです。

ヘッダー画像を作る際に必要なもの

ゼロからヘッダー画像を作る際に、用意すべきものはパソコンと画像編集ソフト。それだけあれば十分です。

※スマホやタブレットでもできるとは思いますが、僕は基本的にPCを使ってます。

オススメ(僕が使っている)無料の画像編集ソフトは以下のとおりです。

  • Photoscape
  • Keynote(Windowsの場合はPower Point)

 Photoscapeは無料とは思えないほどクオリティの高い画像編集ソフトで、しかも初心者でもすぐに慣れることができる優れ物のソフトです。

  • 画像のサイズ変更や切り抜き
  • テキストや図形、他の画像の挿入
  • 明度や彩度など色合いの調整

などなど。やりたいことは割とほとんどできてしまうので、Photoscepeをメインでやりつつ、難しい部分はKeynoteかパワポで補っていくといいです。

もちろん、Photoshopなど有料のソフトを購入してもいいし、実際にそっちの方ができることはめちゃくちゃ多いです。

ただkeynote、パワポなどのスライド制作ソフトとPhotoscapeがあれば、特に不便することなく作業を行えますし、何より簡単ですので。(僕もPhotoshopを使ったことがありますが、とにかく難しかった)

なお、PhotoscapeはMac版とWindows版で違うので、ご使用のPCに応じてダウンロードをしてください。

ヘッダー画像作成の流れ

ヘッダー,カッコいい

僕が普段やっているようなヘッダー画像作成の流れを解説していきます。

1,フリーの画像素材を見つける

画像をベースとしたヘッダーを作るなら、まずは素材となる画像を用意するところから始めましょう。

あまりゴチャゴチャしていなくて、シンプルで洗練されたモノが良いですね。

画像素材は載せるだけで雰囲気が出るような、海外の素材サイトで配布されている画像がオススメです。

参考:ブログをオシャレに彩る!海外のフリー画像素材サイト8選

もし、画像を使わずテキストロゴだけで完結させたい場合は1〜3の手順はカットしてください。

2,ダウンロードした画像をPhotoscapeで表示する

先ほど紹介した無料画像編集ソフト、Photoscapeに先ほどダウンロードした画像を表示させましょう。

ここから本格的に画像を編集していきます。

3,画像をリサイズ・トリミングし大きさを整える

用意した画像はサイズが大きすぎると思うので、リサイズやトリミングの機能を使って画像サイズを変えていきましょう。

使用するWordPressテンプレートによって最適な画像サイズは異なりますが、目安は横が900~1000、縦が200~300くらいですね。

後は実際にサイトに貼り付けてみて見た目を確認しながらサイズの微調整を行っていきます。

4,画像にテキストを入力する

用意した画像のサイズを変えただけだと、そのサイトが何についてのサイトかわかりにくいので、サイトのヘッダー画像としては不適当です。

したがって、サイトのタイトルやキャッチフレーズ、概要などをPhotoscapeでテキストとして入力していきましょう。

画像と文字が重なって文字が読みにくい時は、テキストの背景に色付きの四角形を配置するなどして分かりやすくする工夫を施すといいです。

また、イラスト付きのロゴを無料で簡単に作りたいのなら、『Squarespace Logo』(http://www.squarespace.com/logo)というサイトがオススメです。

Squarespace Logoで作成したロゴはPNG形式の画像としてダウンロードできるので、その画像を作成途中のヘッダー画像に貼り付ければOKです。

5,完成したヘッダー画像をWordPressのヘッダーに反映させる

最後に、完成したヘッダー画像をWordPressのヘッダーに反映させれば完了です!

一度方向性さえ決まってしまえば、ヘッダーを作る作業は非常に簡単なので、ぜひいろんなサイトやブログをチェックしてヘッダー画像作成の参考にしてくださいね。

お金を払ってヘッダー制作をプロに頼むのもオススメです。

今までは『無料でヘッダー画像を作る方法』についてお伝えしてきましたが、資金に余裕があれば『お金を払ってプロにやってもらう』のもオススメです。

『餅は餅屋』という諺もありますが、素人が時間をかけて何とかしようと考えるより、プロのデザイナーに作ってもらった方が時間と労力も節約できますし、何よりクオリティは段違いです。

当サイトも最初は自分で何とか頑張っていましたが、現在のヘッダーはデザイナーさんにお願いしたもので、昔の自作ヘッダーとはハッキリ言って比べ物にならないほどハイレベルで、自分史上最高に気に入ってます。

ちなみに、制作過程を紹介した記事がこちら。

参考:デザイナーが教える、制作の裏側大公開!メイキング解説付き【Part1】

よかったらぜひチェックしてみてください。

ブログのヘッダーは『ブログの顔』であり、ブランドを体現するものです。

しかし読者の存在を置いてけぼりにしては単なる自己満足なので、ぜひ読者にとってもわかりやすく魅力的なヘッダーを作っていきましょう。