理系学生の茶の間のちゃ

理系学生の茶の間のちゃ

理系の私が日々の少し役に立ちそうなそうでもない情報をお届けします!

理系学生の茶の間のちゃ

【初心者ブロガー】ブログの顔!良いヘッダーを作るために気をつけた3つのポイント

 

f:id:hyrasan:20170605210244p:plain

こんにちは、ブログ初心者ウタです。

今回から、ようやくブログの見た目を変更していこうと思います!

 

まずはブログの顔の「ヘッダー」です!

 

 

ブログを始めたときにこちらの記事を読んでカスタマイズのことを知り、

shiromatakumi.hatenablog.com

 

 こんないいデザインが使えるんだ!!と「Brooklyn」のテーマを導入しました

shiromatakumi.hatenablog.com

 最近、いろいろなブログを見に行って思ったのは、

みんな、同じ見た目に見える....

 

更に言うなら、みんな「Brooklyn」を使っている....ということでした。
(さすが、人気一位のテーマだ....!!)

しかし、やっぱり自分のブログだよ!!というのを出したくなって来ました。
そこでブログの顔とも言える「ヘッダー」を変えようと思います!!

 

ヘッダーって何?

ヘッダーとは ブログの中で一番上にあるブログ名などが書いてる部分のことをいいます。

f:id:hyrasan:20170605182232p:plain

 

どんなときでも表示されているため、いわばブログの顔とも言える部分です。
つまりここを変更することで、ブログのイメージそのものを変えることができます! 

意外とそのままの人も多い

今回ヘッダーを変えるべく、いろいろな方のブログのヘッダーを見ました!

そこで思ったのは、意外と変えていない人が多いということでした。
特に、ブログを初めたばっかりだと、ヘッダーを変えていないブログが多かったです。

 

しかし、変えていない人のブログってどうしても記憶に残りづらいので、もう一度辿り着くのが難しいです。

逆に、独自のヘッダーを作っている人は、イメージとして残っているので、記憶に残りやすく、またこのブログに来たなーと思ったりもします。

 

自分のブログだぞ!感を出すにはヘッダーを変えたほうがいいです!

気をつけた3つのポイント

ここからは具体的に自分がヘッダーを作るときに自分で気をつけたポイントを備忘録的に書いていこうと思います。
デザインも学んだことの無い初心者の意見なので、様々意見もあると思いますが、ご容赦ください。

背景の画像の色と文字の色に気をつける

とりあえず、背景に画像を置く人が多いと思います。

例えばこんなふうに作ったとします。

f:id:hyrasan:20170605183242p:plain

f:id:hyrasan:20170605183356p:plain

 

どうですか?

ブログ名が読めないですよね?

これは、極端な例で作りましたが、ブログ名の最後が背景の画像とかぶって読みにくいブログは何個かありました。

なので、背景画像を使うのであれば、背景の画像の色と文字の色に気をつけるようにしました。

フォント

最初に作るときにフォントを変えようと思っちゃいますよね。

初心者ブロガーウタ「よーし!おしゃれなブログにしたいから、英語のカッコいいのにするぞー!」

f:id:hyrasan:20170605184124p:plain

できた!!

 

.................。

いや、ブログの名前わからないでしょ。
なんだよCha no Ma no Chaって。

 

こうやって作り出すとどんどん凝ってしまってこんなのに行き着きますよね▼

f:id:hyrasan:20170603011335p:plain

だいたい、こんな読めない英語のフォントに、後ろはおしゃれな家具とかの写真がうっすら入りがちですよね。
(最初のうち、作っていたらこんなのになってました。)

 

完全に、自分が満足してしまうパターンになるのでならないように気をつけました。
しかし、凝り始めるとこんなヘッダーに収束していくので注意です。

フォントは、ぱっとみてわかる視認性のいいものを使いましょう

文字の大きさの強弱

文字の大きさは、私がヘッダーを変えようとした動機でもあります。

まずは最初のタイトルはこんなのでした▼

f:id:hyrasan:20170605185023p:plain

なんか、のぺーとしてしまって、躍動感がないですよね。

f:id:hyrasan:20170605185551p:plain

どうですが?
少し、ブログが読みやすくなったのではないのでしょうか?

「理系学生」より「茶の間のちゃ」のほうが大事なので、こういった文字の大きさの違いで躍動感を出したかったのです。

プロのデザイン、先輩ブロガーをみていいところを学ぶ

そしてデザイン的な注意ではないのですが、私はこれが一番大事だと思っています !

やっぱり、プロの方が作るデザインや、様々なブロガーの作るヘッダーを見るのは一番大事だと思います。

完全にコピーしてしまうのはダメですが、いいところを発見して、それを自分のデザインに取り入れていくことで、より良いデザインになるのではないかなと思います。

より多くのデザインを見るために私が参考にしたサイトはこちらです!▼

croppy.org

headerlove.com

design-gallery.biz

完成したのはこちら!

そんなふうにしてできたのがこちら!

f:id:hyrasan:20170605182946p:plain

実際にブログに適用したら、なんか違う気もしてきたので、これからもちょくちょく直していくと思います....

 

おわりに

今回はヘッダーを作るときに気をつけたポイントを上げていきました。
もちろん、もっと色々気をつけるべきポイントはあると思うので、まだまだ勉強が必要だと思います!

みなさんも、自分だけのヘッダーを作ってみてはいかがでしょうか?

 

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ
にほんブログ村

ブログランキング・にほんブログ村へ
にほんブログ村


デジモノ・ガジェットランキング