人気ブログを徹底解剖して分かった共通する9つのデザイン要素

nicedesign-1-s

ブログを立ち上げたからには、誰だって、書いた記事を多くの人に読んでもらいたいものです。とくにブログをビジネスに活用するのであれば、尚更のことです。

しかし、実際は、ブログを立ち上げても思うように、アクセスが集まらず困惑してしまう方も少なくありません。

そこで、今回は、私が人気ブログを50個以上、リサーチし、調べたブログデザインの共通点を9つ紹介します。

nicedesign-s

それでは、各パーツを見て行きましょう。

目次

  1. タイトル&ヘッダー
  2. ナビゲーション
  3. パンくずリスト
  4. ソーシャルプラグイン
  5. 質の高いコンテンツ
  6. コール・トゥ・アクション(CTA)
  7. 右サイドバー
  8. アバブ・ザ・フォールド(Above the fold)
  9. フッター
  10. 最後に

1. タイトル&ヘッダー

ブログのタイトルやヘッダーは、一番、最初に訪問者の目に留まる部分です。

そのため、ブログのタイトルは簡潔で覚えやすく、何についてのサイトなのかが明らかである必要があります。

訪問者がわざわざ時間を割いて、ブログを読むのは、何かしらのメリットがあったり、役立つからに他なりません。

仮にブログのタイトルが「○○の日記」や「○○のサイト」となっていたらどうでしょうか。

一体、何について書かれているブログなのかも分かりませんし、そもそも、他人の日記に興味を持つ人は少ないでしょう。

また、ブログのタイトルは読み手だけでなく、SEOの観点から見てもとても重要です。したがって、ブログのタイトルを付けるときは、以下の点を意識しましょう。

  • タイトルに重要なキーワードを含める
  • 重要なキーワードを前の方に持ってくる
  • 全角32文字程度の長さにする
  • 何についてのブログでどう役立つのかを明確にする

なお、全角32文字程度の長さに収めるというのは、検索エンジンやソーシャルブックマークの結果一覧に表示される文字数が32文字程度だからです。

  • Google:全角30文字前後
  • Yahoo:全角28~33文字程度
  • はてなブックマーク:全角32文字前後

2. ナビゲーション

ナビゲーションは、タイトルやヘッダー同様に訪問者に重宝されるため、直感的に動けるような使いやすいナビゲーションにすることが重要です。

中でも「トップページ」と「初めての方へ(自己紹介ページ)」というボタンはクリック率が高いので、必ず用意しておきましょう。

下図は、リッチマーケティングのトップページにおけるクリックの割合を示したものですが、「トップページ」と「初めての方へ」の2つのリンクだけで全体の28.7%を占めることが分かります。

nicedesign-2-s

また、自信のあるコンテンツやこれだけは見て欲しいというコンテンツがあれば、ナビゲーションメニューに表示すると良いでしょう。

ただし、『ネットでモノを売るために使える7の人間心理とスゴイ活用術』のマジカルナンバー7の項でも解説しているとおり、メニューが多すぎるもの良くないので、多くても7つまでに抑えましょう。

3. パンくずリスト

パンくずリストとは、下図のようにサイトの訪問者が今、どの位置にいるのかを表すものです。

nicedesign-3-s

パンくずリストは、ユーザビリティ(利便性)の向上とSEOの2つの観点から重要な要素と言えます。

  • ユーザビリティ:今どこにいるかをユーザーに伝えることができる
  • SEO:検索エンジンにサイトの論理的な構造を伝えることができる

WordPressを利用している場合、Breadcrumb NavXTというプラグインを使うことで、簡単にパンくずリストを設置することができます。

参考:リッチ スニペット – パンくずリスト

4. ソーシャルプラグイン

ブログの記事内の上部と下部に、ソーシャルプラグインを設置しておこう。

ソーシャルプラグインの設置は、ソーシャルメディアからのアクセスが増えるだけでなく、訪問者の反応を数値で可視化できるというメリットもあります。

例えば、自分ではよいコンテンツと思っていても、思いのほか、ユーザーの反応がないのであれば、コンテンツを見直すきっかけにもなります。

nicedesign-4-s

WordPressを利用している場合、『WordPressブログに必ず導入しておきたいおすすめのプラグイン15選』で紹介しているShareBarやWP Social Bookmarking Lightというプラグインを使うことで、簡単に設置することができます。

それ以外の場合や個別に設置するのが面倒な場合は、忍者おまとめボタンなどを利用すると良いでしょう。

5. 質の高いコンテンツ

Content is King(コンテンツは王様)と言われるようにブログのコンテンツは最も重要です。

オリジナルで付加価値のあるコンテンツは、既存のユーザーのリピートや新しいユーザーの獲得にもつながります。

あなたのブログが、どれだけ多くの人にシェアされ、広まって行くかはコンテンツの質次第といっても過言ではありません。

なお、先ほど「オリジナルで付加価値のあるコンテンツ」と言ったのは、GoogleのMatt Cutts(マット・カッツ)氏に対して行ったインタビューで、以下のように言っているからです。

仮にオリジナルの文章だとしても誰でも知っているような内容の文章は評価されない(Matt Cutts and Eric Talk About What Makes a Quality Site

nicedesign-5-s

つまり、Googleは「オリジナルであることが前提で、さらに、そこでしか読めないような独自の情報が含まれるコンテンツ」を高く評価するということです。

この話からも分かるように、ただ、オリジナルというだけではなく、そこでしか手に入らないような情報を入れたコンテンツを作成することが重要と言えます。

6. コール・トゥ・アクション(CTA)

コール・トゥ・アクションとは、ブログの読者に対して最終的にとってもらいたい行動を示したものです。

ブログの目的によってもコール・トゥ・アクションは変わってきますが、例えば、以下のようなものです。

  • メールマガジンに登録してもらう
  • 資料請求してもらう
  • 問い合わせしてもらう
  • 商品を購入してもらう
  • Facebookページのいいね!を押してもらう
  • Twitterアカウントをフォローしてもらう

そして、コール・トゥ・アクションの設置場所は、記事の下と右サイドバーの最上部が反応率が高くなります。

また、コール・トゥ・アクションの反応率を最大化するためにも魅力的なオファーを提示することを忘れてはいけません。

魅力的なオファーとは、あなたが求めている行動を読者が取ることによって、もたらされるメリットを提示することです。

例えば、あなたが求める行動がメールマガジンへの登録であれば、読者がメールマガジンに登録してでも欲しいと思えるオファーを用意する必要があります。

なお、オファーについては、『必ず覚えておきたい!最も効率良く売上を上げるための3つの超実践的ステップ』の見込み客を集める方法(集客)の項で解説しているので、チェックしておこう。

7. 右サイドバー

サイドバーのメニューは、しっかりと目的を絞って構成することが大切です。数ある要素の中でも必須と言えるものは以下のとおりです。

7-1. コール・トゥ・アクション

コール・トゥ・アクションの項でも紹介しましたが、右サイドバーの最上部はCTR(クリック率)が最大化する場所です。

したがって、ビジネスの最大の資産となるメールマガジンの登録フォームを設置するなどして、スペースを有効活用します。

7-2. リピーター獲得の仕組み

ブログに定期的にアクセスしてもらうために、TwitterのフォローボタンやFacebookページのいいね!ボタン、RSSのリンクなどを設置して、ブログ読者と繋がれる仕組みを用意します。

7-3. 最新記事やおすすめ記事

ブログ読者により多く記事を読んでもらえる仕組みを用意することで、PVや滞在時間を伸ばすことができます。

中でも初めてブログに訪れたユーザーは、おすすめ記事や人気記事を重宝する傾向にあります。

7-4. 自己紹介

サイドバーにプロフィール写真や自己紹介文を用意しておくと、信頼度を高めることができます。

また、掲載できる実績や受賞歴、資格などがある場合は積極的に掲載しましょう。

award-s

また、右サイドバーをおすすめするのは、ウェブページは左から右に読むため、コンテンツが左側にあった方が読みやすいからです。

なお、ブロガーとして、数々の賞を受賞しているMatthew Woodward(マシュー・ウッドワード)氏による左サイドバーと右サイドバーの比較テストによると、わずかながら右サイドバーの方が効果的だったそうです。

nicedesign-6-s
※Originalが右サイドバー

参考:Left vs Right Sidebar – Which One Performs Better?

8. アバブ・ザ・フォールド(Above the fold)

アバブ・ザ・フォールドとは、直訳すると折り目より上という意味で、WEBマーケティングの世界では、ページをスクロールしなくても目に入る位置と解釈されています。

下図は、Googleの検索結果になりますが、太い赤線の上の領域がスクロールしなくても見える範囲(アバブ・ザ・フォールド)となります。

Abovethefold-s

Above the foldは、ユーザーのモニター(ディスプレイ)のサイズによって変化しますので、Where is the fold?を使って、表示範囲を測定し、コンテンツの配置を検討しましょう。

9. フッター

フッターには、一般的に以下の要素を配置します。

  1. 自己紹介ページへのリンク
  2. 問い合わせのリンク
  3. 利用条件や利用規約のリンク
  4. 個人情報保護方針へのリンク
  5. 特定商取引に関する法律に基づく表示へのリンク
  6. サイトマップへのリンク
  7. ページトップへ戻るリンク
  8. 連絡先情報

この8つの要素のうち、あなたのブログの配置すべきものを必要に応じて設置しましょう。

最後に

最後に、Googleのデザインガイドライン(Google’s Design Guidelines)が素晴らしく示唆に富んでいるので、紹介します。

  1. Useful: focus on people – their lives, their work, their dreams.
    (役立つ:人の生活、仕事、夢に焦点を当てよ)
  2. Fast: every millisecond counts.
    (速い:ミリ秒単位で)
  3. Simple: simplicity is powerful.
    (シンプル:簡潔であることは力なり)
  4. Engaging: engage beginners and attract experts.
    (魅力的:初心者を惹き付け、エキスパートを魅了せよ)
  5. Innovative: dare to be innovative.
    (革新的:敢えて革新的であれ)
  6. Universal: design for the world.
    (普遍的:世界に向けてデザインせよ)
  7. Profitable: plan for today’s and tomorrow’s business.
    (有益:今日、そして明日のビジネスのためにプランせよ)
  8. Beautiful: delight the eye without distracting the mind.
    (美しい:気を散らすことなく見て楽しめるようにせよ)
  9. Trustworthy: be worthy of people’s trust.
    (信頼に値する:人々の信頼に値する価値を持て
  10. Personable: add a human touch.
    (人に好かれる:人間味を加えよ)

内容はとてもシンプルですが、いずれも、Webサイトの本来あるべき姿をついている、名文だと思います。

いずれにしても、デザインをする上で最も重要なことは、運営者の視点(主観)ではなく、ユーザーの目線(客観)に立ったデザインを心掛けることです。

ぜひ、ここで紹介した9つの要素を参考にして、あなたのブログを最適化してみてください。

Speak Your Mind

*