にーとのかがみ。

読者です 読者をやめる 読者になる 読者になる

にーとのかがみ。

沖縄在住のニートブロガーが沖縄のニートで頂点を取るべく書き綴るブログです。

にーとのかがみ。

Pick Up Entry

デザインセンス皆無の僕がブログのオリジナルヘッダー画像を作りかた教えます

f:id:bumpmania:20170308223337p:plain

※デザイナーの方はおそまつな記事ゆえスルー推奨ですw

 

相変わらずはてなの月初は運営報告記事が縦横無尽に駆け回ってますね、記事を見てて勢いついてる人が多くて羨ましい限り。

でもこのブログはマイペースに更新していくよ。

どうも、ケンヂです。

僕がいう必要もないと思うけど、気付いた?いや、お目が高い!(ウズウズ)

そう、ブログのヘッダー画像が変わりました!シンプルでちょっとオシャンティな感じになってない?

このブログを始めて見た人の為に説明すると

 

【Before】
f:id:bumpmania:20160928222836j:plain

 

【After】
f:id:bumpmania:20170303201059p:plain

 

って感じになりました!

ぶっちゃけ前のデザインも気に入っていたんですけど、僕の気分にはかないませんでした。

ちなみに前のヘッダー画像はブログ仲間のキヨスイさんところのデザイナーさんに描いてもらいました。多分ココナラで依頼を受けていると思います。

www.tairakenji.com

 

そしてこんなことをいうのも何ですが、僕にはあまりデザインセンスがありません。イラストも描けないしロゴやアイコンを作ろうにも何から手を付けて良いのかわからない、そんなレベル。

マジでデザインに関する勉強もあまりしていないので色々と下手くそですw

だからデザインをかじっている人がこの記事を見ると怒るかもしれない( ˘ω˘)ヤサシサ…

しかしですよ、恐らく一般人からすれば違和感がないであろうヘッダー画像が自分で作れるって凄くない?

何故作れちゃうのかというと、それはデザインセンスというよりも既にパターン化されたデザインの流れがあるから。

つまり、特にデザインセンスがなくてもあれくらいは作れちゃうってことなんです、時間はかかりますが、欲張ったデザインをしなければ絶対にできます。

そんなわけで今日は、ヘッダー画像の作り方をちょろっと解説していきます。

デザインセンスが無い人が簡単にヘッダー画像を作る手順

事前に用意しておくもの

  • 壊れてないパソコン
  • 画像加工ソフト(無料ならGIMP2がオススメ)
  • 私にはセンスが無いんだ!という強い想い(任意)

これだけ!3番目の奴は無くても大丈夫だけど、センス無いんだって思い込んでいる人ほど出来た時の達成感は半端じゃないですw

まずはどんなテイストにしたいか考えよう

ヘッダー画像を作る際に、というかデザインの基本だと思うのですが、最初にどんなテイストにしたいのか考えることが大切です。

ポップなテイストにしたいのか、シンプルなテイストにしたいのか、最初で決めておくことでデザインのブレを防ぐことが出来ます。

特にデザインセンスのない僕のような人間だと、行き当たりばったりで画像を作り始めると『あ、これ入れたらカッコよくね?』って感じでどんどん付け足していくので、気付いたら超絶ダサい画像が出来上がってるというね…( ˘ω˘)

多分みんなもそうなると思うから、最初である程度テイストは決めておこうね!

スポンサーリンク

オシャレなヘッダー画像はフォントが命!

もうね、これが何よりも大切ですよ。

フォントの力は非常に偉大で、フォントだけでサイトの雰囲気を伝えることだって出来ちゃいます。

f:id:bumpmania:20170308165942p:plain

ね?フォント1つで雰囲気ってかわるでしょ?

ちなみに、オシャンティな感じを全面に出したいなら日本語よりも英語のほうが良いです。

当ブログのヘッダー画像で名前の表記を英語にしているのもそれが理由で、英語だとフォントだけで形になっちゃうんですよね。

とはいえ、英語にはしづらいブログ名とかも色々あるでしょうし、今回は日本語フォントを上手く活用して作っていきましょう。

フォント選びはまとめサイトを活用しよう

フォントは無料のやつが結構配布されているので、とりあえずGoogle先生に【無料 フォント 商用】というキーワードで検索をかけてみましょう。

多分上の方にコリスというサイトが出てくると思いますので、そちらの記事を参考にすると探しやすいかも。

今回はちょっとカクカクした無機っぽい感じにしようと思いついたので、廻想体というフォントをチョイスしました。

【とりあえず文字だけぶち込んでみた】

f:id:bumpmania:20170308173900p:plain

色味がわからなくてもカラーテンプレートがあれば良い

フォントを選んだら次は色味を決めましょう。白黒だけじゃ寂しいですからね。

以前のヘッダーは僕がデザイナーさんに【フラットカラー】でまとめて下さいとお願いしたのであんな感じになりましたが、新ヘッダーはレトロカラーでまとめたかったので、Google先生に【レトロ カラーパターン】というキーワードをぶち込んで検索したらいい感じのカラーパターンが出てきました。

他にも【シンプル カラーパターン】とか【マテリアルデザイン 配色パターン】とかで検索すると色々と出てくるのでお好みのカラーパターンを探してみましょう。

使用する色は3~4色でまとめよう

カラーパターンを選ぶときに注意して欲しいんですが、使用する色はあまり増やしすぎないようにしましょう。

1つの画像に色を詰め込みすぎるとごちゃごちゃしすぎてダサくなるので…( ˘ω˘)

【色味を決めて思いついたサブタイトルを追加してみました】

f:id:bumpmania:20170308181104p:plain

背景色は端から端まで同じ色にしないとイマイチかっこよくないので、CSSカスタマイズなどに自信の無い方は既存の背景色に合わせることをオススメします。
(下の図のようになるとちょっとかっこわるい…( ˘ω˘))

f:id:bumpmania:20170308182242p:plain

ちょっとしたアクセントを加えれば完成

さて、ここまで来たらあともう少し!ちょっとだけアクセントを加えていくよ!

当ブログの新ヘッダーのアクセントはクマ・ネコ・鳥などの動物になります。

シンプルなヘッダーに仕上げたい場合は、ロゴやシルエット画像やアイコンを使うと良いかも。

新ヘッダーに使われている動物はシルエットデザインというサイトからダウンロードして使用しています。

【参考になりそうなサイト達】

シルエット素材01→シルエットデザイン
シルエット素材02→human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
アイコン素材→「icooon-mono」
ロゴ素材→ロゴマルシェ

 

そして、シルエットや文字の大きさ・位置を適当に動かして出来たのがこちらになります。

f:id:bumpmania:20170308220029p:plain

うん、なんかセンスのなさをアピールしている気がするけど気にしない。

こんな感じで作れば少なくとも他とはかぶらないブログヘッダーを作ることができちゃうよ!

素材を提供しているサイトは他にも沢山有るから、気になる方は調べてみてね。

スポンサーリンク

オリジナルのヘッダー画像は絶対に持っておくべき

やはりね、ブログをやってるならオリジナルのヘッダー画像は持っておいたほうが良いかなと思います。

ヘッダー以外のデザイン部分で他と差別化出来るなら話は別ですが、ヘッダー画像が一番他のブログと差別化を図りやすい部分なんですよ。

下手くそな絵だろうがなんだろうが、他と被っていなければそれはオリジナリティに溢れたものとなり、唯一無二のヘッダーとなります。

僕が何を言いたいのかというとね、『他のブログと同じデザインで埋もれてほしくない』ってこと。

それに、やっぱり他とは違う部分が1つでもあるとブログに愛着が持てるじゃないですか。

だから、オリジナルのヘッダーは必要だと思います。

アイコンとかロゴはココナラで依頼すると良いかも

上記でアイコンやロゴのフリー素材を提供しているサイトを共有しましたが、もしかしたら他のサイトやブログと被ってしまうかもしれません。

そういうのはちょっと…というかたはココナラでオリジナルのアイコンやロゴを作ったほうが良いと思います。

1つあたり500円~3,000円程で作る事が出来るのでオススメです。ちなみに僕も今度ココナラでプロフィール画像を作ってもらう予定です(‘ω‘ )

まとめ

さーて、真面目に記事書いたから暫くはクソ記事量産するかー!

そんじゃー

おわりっ!