【ノンデザイナー必見】美しくオシャレなブログヘッダーの作り方
ヘッダーはその名の通り、ブログの頭、つまり顔になる部分です。
ヘッダーがどんなものになるのかによってブログ全体のイメージもかなり違ってくるし、ヘッダーがあまりにもダサいとブログを開いた瞬間になんとなく「見なくても良いかな…」と思われてしまうかもしれません。
それに、愛着を持っているブログであればやはりかっこいいヘッダーを作りたくなるものですね。
そこで今回はノンデザイナー向けにセンスの良いヘッダーを作る方法について解説をしていきます。
Contents
ヘッダーの完成図
今回作成したヘッダーはこちらです。
白黒をベースにして、道の一部だけ色を残し、ゴールドの色を使うことでちょっとした高級感を出しました。（標識が反転してしまっていますが、まああまりお気になさらず）
さらに右下には前回の記事で作ったロゴもいれてみました。
今回はこのヘッダーを作成する上で僕が気をつけたポイントなどを解説していきます。
美しくオシャレなブログヘッダーの作り方
今回使ったツールなどなど
・https://unsplash.com（道路の素材）
・PhotoScape（画像加工ソフト）
・Colour My Photos（画像の一部だけ色をつけるスマホアプリ）
・Keynote（プレゼンテーションソフト）
今回は全て無料のツールを使って作成しました。
素材をとってくる
まずはhttps://unsplash.comなどの海外のサイトからフリー素材をとってきましょう。
今回の元画像はこちらです。
PhotoScapeで加工
そしてこの画像をPhotoScapeを使って加工していきます。
好きな箇所でトリミングをしましょう。（僕の場合はここで反転もさせました）
また、https://unsplash.comにおいてある画像はかなりサイズが大きいので、この時にサイズの変更も同時にしておくと良いです。
このサイトのヘッダーは640 × 190で作っていますので、それを参考にしてみて下さい。
Colour My Photosに取り込む
ここから一部だけ色が残るような加工をしていきます。
Photoshopを使っている方は簡単にできるみたいですが、僕はPhotoshopは使っていないのでスマホのアプリで代用しました。
使ったアプリはこちらのColour My Photosです。
このアプリでカメラで撮影した写真や、ライブラリーから写真を選択します。すると、写真がモノクロ調に変わり、画面を指でなぞるとなぞった部分だけがカラーに戻ります。
これで先程の画像の車線部分だけ色をつけます。
Keynoteで文字を追加していく
Macなら”Keynote”、Windowsなら”PowerPoint”を使ってここに文字を入れていきます。
“DESIGN YOUR HEADER”の文字色は車線と同じ色をカラーピッカーで探して使いました。
さらに右下にロゴも入れて完成です。
ヘッダー作成時に気をつけるべき点
配置
パット見て美しいものというのは、配置がかなりよく決まっています。
図を見て頂ければ分かると思いますが、タイトルとタグラインは上下のスペースを揃え、さらにそれぞれの幅も揃えています。
ロゴもイラストと文字の高さを揃えました。
これがグチャグチャになっていると
こんな感じになり、あまり見栄えがよくありません。
また、基本的に人間は左から右へと読み進めていくので、ブログ名やメッセージを置くときには左側に置くのが良いでしょう。
今回、元の画像から左右を反転させた理由も左側に文章を載せようとすると道路の線と被ってしまうからです。
フォント
フォントの基本は和文には和文のフォント、欧文には欧文のフォントを使うということです。
和文フォント ⇒ 明朝体、ゴシック体
欧文フォント ⇒ セリフ体、サンセリフ体
結論だけ言うと和文フォントはメイリオやヒラギノ角ゴ、欧文の場合はCalibri、Segoe、Times New Roman、Helvetica Neueなどがオススメです。
今回はHelvetica Neueを使っています。
コントラスト
こちらは文字の色を黒にしてみたバージョンです。
かなり見にくいですね。
実はそれぞれの色には「補色」という対極にあたる色が存在します。
上の図のように色相環の図で表した際に、対極にあたるものがその色の補色です。
補色の関係にあるもの同士は、色が真逆なのでたとえ隣に配置しても目立ちます。
背景とブログメッセージのどちらも目立たせたい場合は補色の関係にあるものを使うとお互いが目立ちやすくなります。
色
このヘッダーでは色は黒白、そしてゴールドの３色しか使っていません。
あまりたくさん色を使いすぎると色同士が主張し合って見にくくなってしまいます。
よって色を使うとしても不要には使いすぎず、なるべく核となる色は３色や４色ぐらいで最初限にすることがオススメです。
まとめ
デザインに関してはその人の好みによるところも多分にあるので正解や不正解は存在しません。
しかしそんな中でも、ある程度は見やすくするためのルールというものがあります。
なかなかピタっと収まるものを考えるのが難しいと思いますが、ヘッダーはそのブログを訪れた人が一番最初に見るものであり、第一印象を決めるのはヘッダーです。
ヘッダーが良いと「あっ、このサイトなんかセンスいい」と思ってもらうことができ、結果的にそれがサイトのマネタイズに影響してきたりします。
基本的にブログのどのページにいっても表示される非常に重要な部分ですので、ぜひ気合を入れて作っていきましょう。
