効果の最大化を図るWebデザイン・Webマーケティング戦略室

2014.12.12

有名ブログに学ぶ!多くの人に見てもらうためのブログのデザインとは

thumb_blog-design

コンテンツマーケティングの重要さが再認知されたここ数年、企業やお店だけでなく個人事業の方でもブログを活用したコンテンツ配信が増えてきましたね。情報を求めているお客様に対して良質なコンテンツを配信することで企業やお店を認知してもらい、ソーシャルネットワークサービス(FacebookやTwitterなど)を介してコミュニケーションを広げ、企業やお店に興味を持ってもらう。

本来あるべきマーケティングの姿なのかもしれません。せっかくビジネスとしてブログを活用するのであれば、「見やすくて分かりやすい、そしてファンが多く集まるブログ」を作りませんか?今回はWeb業界の有名ブログから「デザイン」や「必要な要素」を学んで「集客できるブログ」を作りましょう!

ブログのデザインについて

いきなりこんな事を言うのも変ですが、ブログのデザインに正解はありません。配信したいコンテンツや種類によってそのレイアウトは様々であり、これが正解!というようなものはありません。しかし、多くのファンを持つ有名ブログには「共通点」があります。その共通点を抑えることでより多くの人に見てもらえる(ファンの多い)ブログになるのだと思います。

ブログで一番大事なのはブログの「記事」ですが、いくら記事が良くてもデザインが悪かったり、記事間の回遊性が低ければ見る気も失せてしまい多くの人に見て頂くことは難しいです。だからこそ、ビジネスとしてブログを活用されるのであればしっかりデザインについて事前に設計することが大切です。

有名ブログから学ぼう

本題に入るその前に!まずはWeb業界の有名ブログを見てみましょう。多くのファンを持つ有名ブログは非常に使いやすく、回遊性も非常に高いです。一つ一つの要素が非常に勉強になるのでじっくり見てみましょう。

バンクーバーのうぇぶ屋

http://webya.opdsgn.com/

バンクーバーのうぇぶ屋

Webクリエーターボックス

http://www.webcreatorbox.com/

Webクリエーターボックス

Webデザインレシピ

http://webdesignrecipes.com/

Webデザインレシピ

バズ部

http://bazubu.com/

バズ部

有名ブログの共通点

有名ブログの「共通点」は何か分かりましたか?ファンが多いブログに共通して言えることはそのコンテンツの質の高さはもちろんですが、デザインやレイアウト的には「ユーザビリティが高く回遊性が高い」ことが共通しています。

ユーザビリティという言葉を聞き慣れない方も多いかと思いますが、要はいかに「使いやすいか」です。そしてここでいう回遊性は「いかに他の記事への誘導がスムーズか」です。

ではまず「ユーザビリティ」はどうすれば向上するのでしょうか?

世の中に沢山存在するWEBサイトには【よく使われている基本的なルール】があります。リンクは青。ボタンはクリックできる。フッターにはCopyright。ヘッダーにはナビゲーション。ロゴをクリックすればTOPページへ戻る。こういった多くのユーザーが当たり前だと記憶している【基本的なルール】をできるだけ守れば、それだけで十分使いやすいサイトになります。学習し直す必要が無いんですから。

上記の記事が非常に参考になりました。もしあなたがあるブログを見つけたとき、「このブログの名前って何だろう?」と思ったときはサイトの上部を見ますよね。「カテゴリーから記事を探そう!」と思った時はサイトの上部またはサイドメニューを探します。それがもし、サイト名が一番下(フッター)に書かれていてカテゴリーも一番下にあったらどうでしょう?「このサイト使いづらいな~」と思いますよね。

これはとても極端な例ですが、要は「よく使われている基本的なルール」に沿うことがユーザビリティの向上に繋がります。その上で、次に具体的な「ユーザビリティの向上」と「回遊性」の向上に必要なデザインや要素のご説明をします。

ブログのレイアウト

ブログのレイアウト

まず初めにブログのレイアウトから。ロゴは左上、ナビゲーションはその下、メインコンテンツは左、サイドは右に配置します。それはなぜか、これが「よく使われている基本的なルール」の一つであるからです。もちろん「ロゴは絶対左上!」と言いたいわけではありません。

デザインやコンセプトによっては中央に配置することのほうが使いやすかったりします。サイドメニューに関しても、例えば商品カテゴリーなど使用頻度が高いサイドメニューは左側へ配置します。ブログのサイドメニューは商品カテゴリほど頻繁に使用しないので右側への配置なのです。デザインやレイアウトひとつひとつには必ず「意味」があります。勘で配置するのはやめましょう。

メインコンテンツのデザインと必要な要素

続いてはメインコンテンツの「デザイン」と「必要な要素」について共通していることをご紹介します。ヘッダーやフッターに関してはほとんど要素がないので、省略させて頂きます。

デザインに関しては基本的に「コンテンツをいかに読みやすくするか」を優先するため、過度な装飾やアニメーションは控えシンプルでミニマルなデザインを心がけましょう。必要な要素に関しては、記事を読んでくれた人に対してもっと自分のブログに興味を持ってもらえるような「仕掛け」をし回遊性を高めましょう。

目を惹きつけ記事へ誘導するアイキャッチ

目を惹きつけ記事へ誘導するアイキャッチ

それぞれの記事に必ずと言っていいほど「アイキャッチ」が設定されています。アイキャッチは人々を惹きつけ記事に誘導する画像のことです。アイキャッチがあることによって人は「なんか面白そう!」「役に立ちそう!」と様々な想像をし、記事に興味を持ちます。

またWebサイトを閲覧している人は基本的に「流し読み」していると言われています。文字情報だけだと目が惹きつけられることもないので興味を持ってもらえません。ですから必ずアイキャッチを設定しましょう。

▼魅力的なアイキャッチを作る方法
ブログ集客を加速させる、アイキャッチの必要性とデザインパターンについて | 株式会社LIG

比較的大きめの見出し

比較的大きめの見出し

記事の見出し(文字サイズ)が26px~34px程度でデザインされています。見出しの文字サイズが大きいと記事ごとの区別が付きやすいのはもちろん、その記事に対する自信や情熱を伝えることができます。見出しが本文より小さかったらいかがですか?まず「見出し」と理解しづらいし自信や情熱が伝わりづらくなっているかもしれません。

本文の文字サイズ

本文の文字サイズ

本文の文字サイズが16px~18pxで、行間は文字サイズの1.5倍から1.8倍でデザインされています。アクセシビリティ(老若男女、利用環境問わず利用出来る環境)の観点から文字サイズは大きめに作り、行間を気持ち多めにとりましょう。

特にブログみたいな「テキストがコンテンツのベース」となるような場合は文字サイズが小さいと読みづらかったりします。文字サイズは大きめを意識しましょう。

ソーシャルボタン

ソーシャルボタン

見出しや本文の直後にWebマーケティングに必須の「ソーシャルボタン」が設置されています。ソーシャルボタンとはソーシャルネットワークサービス(FacebookやTwitterなどのサービス)と連携することの出来るボタンです。

ソーシャルネットワークサービスを利用している日本人は約6,000万人と言われています。これを設置することによって、配信した記事が多くの人に見てもらえるようになり、ブログのアクセス向上やファンの増加を見込むことができます。こちらも必ず設置しましょう。

▼ソーシャルボタンの種類について
SNS色々ありすぎ!各ソーシャルボタンの特徴を簡潔にまとめてみた | 株式会社LIG

関連記事一覧

記事の最後に「関連記事一覧」が設置されています。この要素に関しては設置しているブログもあれば設置していないブログもあります。これを設置する理由としてはブログのアクセス向上です。

あなたがもし記事を読んでいて、最後まで読み終わったらどうしますか?おそらくそのサイトを閉じる事が多いのではないでしょうか?もし記事の続きに「関連記事一覧」があれば、記事を読み終わったその流れで関連する記事に目を通しますよね。そして興味を惹く記事があればまたあなたの記事を見てもらうことができます。こちらもぜひ設置しましょう。

サイドバーのデザインと必要な要素

続いてはサイドバーの「デザイン」と「必要な要素」について共通していることをご紹介します。こちらもメインコンテンツ同様、過度な装飾やアニメーションは控えシンプルでミニマルなデザインを心がけます。必要な要素としては、「人気の記事一覧」や「新着の記事一覧」を設置して回遊性を高めましょう。またプロフィールを掲載することで仕事や事業に対する姿勢をお客様に伝えましょう。

人気記事一覧と新着記事一覧

ブログに訪れた人は「ブログの人気(または新着)記事はなんだろう?」と興味を持ちます。せっかく興味を持ってブログに来て頂けたのですからメインコンテンツに設置した「関連記事一覧」と同様、サイドバーにアクセスの多い記事を上位表示する「人気記事一覧」と、新しく投稿した記事を表示する「新着記事一覧」が設置しましょう。

そうすることで回遊性を高めアクセス向上が期待できます。また設置することによりあなた自身にとっても「こういう記事が需要があるんだ」とブログの運営に関して新たな発見に繋がることもあります。Wordpressでブログ運営を検討、またはされている方は「WordPress Popular Posts」という人気記事を表示するプラグインがおすすめです。

▼WordPress Popular Postsの設置
WordPress Popular Posts で人気記事を表示する方法

設置する際のおすすめは以下です。

  • 表示する記事の数は5~10記事程度
  • アイキャッチを設定する

プロフィール

プロフィール

ブログに訪れた人は「このブログはどんな人が運営しているんだろう?」と気になるものです。もしそのブログに「プロフィール」が書かれていれば、それを見た人は親近感が湧くだけでなく、仕事に対する姿勢や考え方まで感じ取ることができ最終的には信頼に繋がります。どんな人が運営しているか分からないブログより、経歴や趣味が分かる人が運営しているブログのほうがファンになりたいと思いますよね。有名ブログでは必ずと言っていいほど、プロフィールが書かれています。

事細かに書く必要はありませんが以下の項目を書いているブログが多いです。ただ書くだけでなく「共感される」書き方を意識しましょう。また可能であれば顔写真も載せられると良いです。

  • 名前(ニックネームなど)
  • 職業や経歴
  • 出身地や現在住んでいる地区
  • 趣味や好きなスポーツ
  • 企業やお店に対する事業理念

Like Box

Like Box

Like BoxとはFacebookのプラグインで、そのブログ(サイト)がどれだけ「いいね!」されているか一目で分かる機能です。ブログを訪れた人は「このブログはどれだけ評判が良いのだろう?」と気になるもので、Facebookの「いいね!」が多いと「このブログは評判が良いんだ!だから信頼できる!」と感じます。

これを「ソーシャルプルーフ」といいます。多くの人の評判によってそのブログの信頼度も向上するのです。ブログを始めた直後はもちろん「いいね!」は0人だと思います。ですがLike Boxを設置して、良質なコンテンツを配信することによって「いいね!」を頑張って増やしていきましょう(私も)!

まとめ

有名ブログに限らず、「良いサイト」というのは非常に使いやすく「読んでいる人の目線」に立って設計がされています。「自分がこれを伝えたいからこう!」ではなく「この要素を取り入れればもっと読者にとって見やすし分かりやすい!」というような感じでデザインや要素を取り込んでいけば、読者に優しいブログになります。

この記事をシェアする