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

Traveling Creator's Life

旅するクリエイターちびまやのライフスタイルマガジン!

あなただけのブログに!差をつけるブログデザインで読者を印象付けよう!

あなただけのブログに!差をつけるブログデザインで読者を印象付けよう!

READ MORE

こんにちは、ちびまや(@Mayayan6)です。

現役webデザイナーとして活動中の私が、デザイナー目線で、一瞬で印象に残るブログデザインについて考えてみたいと思います。

 

ブログを印象づけるのはヘッダー!

 

ブログに関わらず、すべてのwebサイトの中で一番重要と言われているものが、「ヘッダー」です。サイトの第一印象はヘッダーで決まります!

 

このヘッダー(正確には、スクロールせず1画面で入るエリア)部分は、web業界では「サイトのファーストビュー」と言うのですが、このファーストビューが、見に来たユーザーの興味をそそることができるかどうかで、直帰率※が大きく変わります。

 

↓ファーストビューの例はこんなかんじ。 

f:id:ogimaya26:20160624004039j:plain

このサイトは、「シンプル」を軸にデザインしています。基本的に画像は使わず、webフォントを使いながら、シンプルの中でも個性をだせるようにしています。

 

どんなにいい記事を書いていても、サイトに訪れた瞬間に「あ〜ちがうな」と帰られてしまってはもったいないので、ブログのコンセプトに沿った、オリジナルのヘッダーを用意しましょう*

 

※直帰率とは:サイトに訪れたユーザーで、1ページしか見ずにサイトを出てった割合のこと。

 

ヘッダーがきちんとデザインされたブログの例

 

f:id:ogimaya26:20160626135149j:plain

「バンクーバーな僕ら」

カナダのバンクーバー在住の、フリーでweb制作をされているセナさんの日常を4コマ漫画でお届けしてくれるブログです。

 

f:id:ogimaya26:20160626141411j:plain

「webデザインレシピ」

webデザイナーとして有名なのりさんのサイト。女性らしい雰囲気で統一感があり、きゅんとくるデザインです。

 

f:id:ogimaya26:20160626144014j:plain

『LITERALLY』

はてなブログの中でもファンが多いcatnoseさんのブログ。はてなブログとは思えないほどクールにカスタマイズしつくされています!白と黒のシックで惹きつけられるデザインです。

 

f:id:ogimaya26:20160626143130j:plain

『やぎろぐ』

大学生ブロガーとして一躍有名になり、現在はフリーランスとして自身のメディアを運営されている八木さん。自分の名前と特徴と掛け合わせた可愛らしいヘッダー画像です^^

 

個性が出る、印象に残るデザインの特徴

 

印象に残って、思わずスクロールして中身を読みたくなるようなサイトばかりでしたね。

こんな素敵なヘッダーにするためには、いくつかのポイントがあります。

 

・何について書いているブログなのか一目でわかる

統一感がある

何をしている人なのか、どういう人なのかが明確に描いてある

印象に残りやすい、個性のあるイラストやロゴがある

 

一瞬で読者を引きつけるためには、はっきりとしたブログタイトルと、「なんのブログなのか」というキャッチコピー的なものがあると解りやすいです。

そして、さらにそれが少しでも個性が出るようにデザインされたものなら、さらに◎!

 

統一感が出ない!よくやりがちな失敗。

 

文字を詰め込みすぎ

若手起業家のサイトなどでたまに見かけます。

「名前」「何をやっているか」「どんなことを目指しているか」「連絡先」「プロフィール」などなど....これでもかというほど文字を詰め込んだヘッダー画像。

1画面で全部わかるのはいいかもしれませんが、読んでる方はしんどいです。

これらを、いかに短く一言でまとめられるかが、重要だと思います。

 

内容とデザインがちぐはぐ

例えば時事系ニュースのブログなのに、ヘッダーのタイトルがふにゃふにゃの手書き風だったら....なんだか違和感がありますよね。

他にも、断捨離系ミニマリストブログなのに、やたらとゴテゴテして騒がしいヘッダーだったら。「本当にこの人断捨離してるのか?」なんて私は思ってしまいます。笑

 

「なんだか違和感があって読みづらい・・」そんなことを思われてしまうと、読者の読む気持ちを損ねてしまうことになりますので、ブログのコンセプトに沿った、デザインを考えていきましょう!

 

まとめ

今回は、現役デザイナー目線で印象に残るブログのファーストビューについて考えてみました。

 

要は、ブログのコンセプトに沿った自分の個性を表現する!

といった感じでしょうか。最初が引き付けられれば、自然とユーザーは下にスクロールして記事を読んでくれるようになります。

その入り口がヘッダーエリアを含めたファーストビューです。

 

みなさんも、ぜひオリジナルのヘッダーを作って、あなただけの素敵なブログにしてください^^また、おすすめの作り方などもいろいろと紹介していけたらと思います!