成果を最大化するWordPressデザインに必要な5つのポイント

20160502-01
  • このエントリーをはてなブックマークに追加

“Webデザイン”というと、あなたはどういうものを思い浮かべるだろうか?おそらく大半の人は、見映えが良いものを作ることがWebデザインだと思っているかもしれない。

バズ部では「ビジネスの成長につながるデザイン」こそ、本当のWebデザインであると考えている。見映えだけの凝ったデザイン作りに、限られたあなたの貴重な時間や資源を無駄に投じてはいけない。

では成果の出るデザインとは、具体的にどういうものかを解説しよう。デザイナーでない方でも分かりやすい内容となっているので安心して読み進めてほしい。

成果を出すために活用すべきはブログサイト!
ここではコンテンツマーケティングの一環であるブログデザインの解説に特化する。コンテンツマーケティングとはサイトに訪れたユーザーに価値あるコンテンツを提供し、商品やサービスを買っていただく手法だ。またサイトはWordPressの利用を前提とする。

1.成果の出るWebデザインとは?

まず成果の出るWebデザインとはどんなものかを考えた時、次の2つに絞られる。

  • コンバージョン率が上がるデザイン
  • SEO効果を最大化するデザイン

コンバージョンとは、お問い合わせや資料請求など、企業の売り上げにかかわるWebサイトからの最終的な成果を指す。

この2つのパフォーマンスを同時に最大限に引き出すデザインが、ビジネスの成長につながる本物のデザインと言えるだろう。極端な話し、見映えが悪かろうがこれらを実現できるデザインは優秀なWebデザインとなるのだ。

それでは最初にコンバージョン率を向上させるデザインについて詳しく解説しよう。

2.コンバージョン率が上がるデザイン

コンバージョンはWebサイトから企業の売り上げに貢献する重要な指標だ。EC サイトからの商品購入もこれに含まれる。

そして、ページビュー数やユニークに訪問した人のうち、どれほどの割合でコンバージョンがあったかを示す指標をコンバージョン率と言う。コンバージョン率を利用すると他のサイトの成果状況とを比較することができるので便利だ。

さて、ここでコンテンツマーケティングの要となるブログサイトのコンバージョンについて明確にしていこう。それは、

  1. 見込み客のメールリストを獲得すること
  2. ソーシャルメディアのファンを増やすこと

の2つである。(冒頭の数字は優先順位を現している。)

なぜブログのコンバージョンの場合、お問い合わせではなく上記2つなのか?これは非常に重要なポイントなのでしっかり読み込んでほしい。

2−1.成果を見込み客のメールリストの獲得にすべき理由

ブログの第1の成果として設定すべきは、見込み客のメールリストを獲得することだ。

ブログは、あくまでキーワードで検索してくる人が、120%満足するコンテンツを提供する場である。価値あるコンテンツを提供した結果、あらゆるキーワードで自然と上位表示され、多くのアクセス数を獲得するブログとなる。

ここでもし、ブログのコンテンツにちょっとでも自社の商品やサービスを売りたいという下心があると、ユーザーはそれを敏感に感じて、そのブログを指示しようと思わなくなる。結果的にコンテンツマーケティングは失敗に終わるだろう。

しかし、ビジネスにとって良い商品やサービスを販売してお金を稼ぐことも当然重要だ。ここで役立つ効果的なツールとなるのがメールマガジンだ。

ブログと違いメールマガジンは1対1のコミュニケーションの場を作り出す。そこでは、本当に相手の役に立つ商品とかサービスであれば自信をもって紹介することができる。逆にブログやソーシャルメディアの場は、セールスには全く向かない。

だからこそ、ブログではユーザーの役に立つコンテンツの提供だけに集中して、セールス自体はメールマガジンで行うのが最も効果的な方法なのだ。

※ ブログで多くのアクセスを獲得し、メルマガでアプローチするフローはコンテンツマーケティングの重要な要となる。ここで深く理解しておきたい方は『コンテンツマーケティングの進め方』を読んでおこう。

2−2.成果をソーシャルメディアのファン獲得にすべき理由

もう一つ、ブログの成果として設定すべきは、ソーシャルメディアでのファン獲得だ。

理由はシンプルで、ソーシャルメディアのファンが増えれば増えるほどコンテンツが拡散する可能性が高まり、結果的により多くのユーザーにコンテンツを届けることができるからだ。

弊社クライアント様のサイトでは1日数万PVを超える拡散が起こることは珍しくない。一生懸命作ったコンテンツを一人でも多くみてもらうためにも、ソーシャルメディアのファンを獲得することを重視しよう。

さて、ソーシャルメディアでファンを獲得したいなら、Twitterで何度も同じツイートをしたり、セールスをし過ぎては絶対にダメだ。そんなことは誰も望んでいない。

やるべきことはただ1つ。記事を読んだ人が本当に満足し、悩みや願望を解決させることができるコンテンツを作ることだ。そして、それをソーシャルメディアで告知していこう。

そうすることで一人でも多くのユーザーに良質なコンテンツが届けられ、満足した人は自然とファンになってくれる。

ファン獲得を効率良く増やすためのデザインは後述する。

3.SEOの効果が上がるデザイン

次にSEO効果を最大化するデザインについて解説しよう。

前述の内容と同様にブログデザインを前提とするが、まずこのデザインを的確に設計することでSEOの改善につながり、結果的に上位表示が期待できる。そのデザインは次の3つを重視する。

  • ナビゲーションメニュー
  • パンくず
  • サイドバー

これはクローラーと呼ばれる検索エンジン・ロボットがサイト内を効率良く巡回してくれるからだ。

検索結果の表示の仕組みは、まずインターネット上にある膨大な数のWebページをクローラーがチェックする。その情報が検索エンジンのデータベースに蓄積されて行き、この蓄積されたページが検索サイトの独自プログラムによって評価される。そして検索結果に表示されるというのが大まかな流れだ。

ここでコンテンツがちゃんと検索結果に表示されるようになるには、クローラーにしっかり回ってもらえるサイト構造にする必要がある。

バズ部がお付き合いしているクライアント様の事例となるが、クローラーの巡回頻度がある回数を超えると、SEO で上位表示される関係性がわかった。詳しくは『robots.txtの書き方と効果的な活用法』の「2−1.クローラーの巡回頻度や効率はSEOにとって超重要!」でアクセス解析のイメージを使い、分かりやすく解説しているので確認しておこう。

これらを踏まえた上で後述するブログデザインのイメージを見ていくと理解しやすい。このやり方で弊社のクライアント様に成果をもたらしているので是非、読んで実践して欲しい。

4.ブログデザインで成果が出る5つのポイント

それではここから実践的な内容に移り、ブログデザインで成果の出る方法をご紹介しよう。主に

  • レイアウトは2カラム右サイドバーにする
  • CTAはコンテンツの直下に置く
  • ソーシャルメディアのフォローボタンを配置する
  • CTA はコントラストをつけて目立たせる
  • アイキャッチ画像は大きく目立たせる(特に飲食店やアパレル業界の方)

の5つがある。なぜ押さえておくべきなのかの理由も合わせて一つひとつ解説しよう。

※ ここで紹介する内容(特に冒頭の3つ)は、WordPressを活用するとすぐに設定できる。こだわりながら自分で作っていきたいなら『初めてのWordPressで集客できるブログを作るまでの使い方まとめ』を参考にしよう。CTAなど、最も簡単に設定したい方は、WordPressの無料オリジナルテーマ『Xeory』の使用をお勧めする。

4−1.レイアウトは2カラム右サイドバーにする

次の図を見ていただきたい。いったいどちらのレイアウトの方がコンテンツが真っ先に目に入ってくるだろうか?

2コラムと3コラムの図

そう、答えは「①2カラム(右サイドバー)」だ。

ここで最も大事なことは、コンテンツを求めて訪れてきた検索ユーザーを一切迷わせないことだ。レイアウトが2カラムの場合、すぐにコンテンツが見つけられる。

では2カラムの左サイドバーがダメな理由は説明できるだろうか?

まずユーザーが Web ブラウザを閲覧する際、一般的には最初に左上から読み始める。これは、グーテンバーグの法則のZ字型、ヤコブ・ニールセン博士のF字型からも理解できる。(詳しくは『売れるサイト作成に必須!たった4つのWEBデザインの基本法則』を参照しよう)

また、3カラムの場合、2つもサイドバーがあり、ヘッダーに情報が詰められていることも多い。これにより、コンテンツを探すという労力を与えてしまい、少しでもストレスに感じたユーザーは離脱してしまう。さらに、コンテンツ意外の情報がウジャウジャありすぎて、読み進めてもらえない欠点もある。

ユーザーが満足しないブログでは、ユーザーはメールアドレスを落としていってくれない。

4−2.CTAはコンテンツの直下に置く

「CTA」とはコール・トゥ・アクション(Call To Action)の略で、簡単に言うとユーザーに行動換気を促す仕掛けのことだ。ここでの CTA の役割はメールアドレスの獲得となる。

では、この CTA をどこに配置すると見込み客獲得という成果を最大限にするデザインになるか、次の3つイメージから選んでみよう。

記事の直下にCTAを置く場所

答えは「② CTAを記事の直下に置く」だ。これは少し難しかったかもしれない。この理由について主に次の2つが挙げられる。

  • ユーザーの求めているコンテンツを最初に読んでもらう
  • そして、質の高い見込み客だけに絞る

ユーザーが読みたいのはコンテンツだ。コンテンツの冒頭や途中に CTA を置くことをユーザーは望んでいない。徹底してユーザーの求めているものをしっかり提供するためにも、CTA は記事の最後に置くと良い。

コンテンツを最後まで読んだ後、ブログサイトを気に入ってくれたユーザーは自然と見込み客になっていく。これが2つ目の「質の高い見込み客だけに絞る」につながる。

見込み客を増やすためにブログサイトのあらゆる場所にCTAを設置すると、サイトに興味があれば誰かれかまわず見込み客になる。そこで問題なのが、見込み客として質の悪いユーザーからの問い合わせも増えることだ。

すべて無料で済ませようとするユーザーに振り回されると、本来注力すべき良質な見込み客への労力が手薄となり、結果的にブログサイトが重荷になる、という事態は本末転倒だ。

コンテンツをしっかり読んでもらい、その後に CTA を訪れるユーザーの方が良質な見込み客になりやすい。

補足:CTAを右サイドバーに置くのは本当にダメか?
バズ部ではコンテンツ直下の方がお問い合わせの質が高かった。そのため、自サイトで右サイドバーの CTA 設置を検証してみて、本当に質が悪いかどうかを試した後に判断するのも良いだろう。

4−3.ソーシャルメディアのフォローボタンを配置する

ソーシャルメディアのフォローボタンはファンを獲得するために重要だ。これを CTA の直下と右サイドバーの上部に設置すると良い。もちろんこれには明確な理由がある。

記事の直下にCTAを置く場所

CTAの下にソーシャルボタンを置くと、記事を最後までしっかり読み込んでブログを気に入ったユーザーは、ボタンを押してファンになってくれる。必然と質の高いユーザーからの流入の可能性が高くなる。

また、ソーシャルボタンを右サイドバーの上部に置くことで、初めて訪れたユーザーは多くのファンがいることを認知し、サイトに信頼感を抱く。結果、コンテンツを安心して読み進めてくれる。

結果、前述した「2−2.成果をソーシャルメディアのファン獲得にすべき理由」の通りまさに良質なファンの獲得が可能となる。

4−4.CTA はコントラストをつけて目立たせる

CTA とコンテンツはコントラストをつけてはっきり区別できる色味にしよう。区別させないと CTA に気づかずにユーザーが離脱してしまう可能性が高くなるからだ。

バズ部では次の図の通り色をつけることで CTA を目立たせるようにしている。

記事の直下にCTAを置く場所

そうすることで記事を読み終わった後、CTA を気づかれずにスルーされることを防いでいる。

さて、ここで勘の良い読者なら上図でコントラストを強めに使っていないことに気づいたかもしれない。コントラストにこだわりすぎてCTAが目立ってしまっては本末転倒だ。あくまで検索ユーザーが欲しているコンテンツを第一に考えた配色を心がけよう。

いずれにせよ、問い合わせ数を確実に増やしたいなら、まずは実践することをオススメする。 

4−5.アイキャッチ画像は大きく目立たせる

アイキャッチ画像はユーザーの目を引くための画像で、記事に誘導する効果がある。

飲食業界やアパレル関連など特に写真をしっかり見せたい場合、コンテンツの横幅いっぱいにして目に飛び込ませるくらいが良いだろう。また、写真のクオリティにはこだわる必要がある。初めて訪れたユーザーはその写真で読み進めるかどうかを瞬時に判断することもあるからだ。

下のブログサイトはアパレル系のサイトだがとても参考になる。

まとめ

イメージを見ながらの方が、より理解が深まったのではないだろうか。また、大事なことなのであらためてお伝えすると、

  • コンバージョン率が上がるデザイン
  • SEO効果を最大化するデザイン

の2つのパフォーマンスを同時に最大限に引き出すデザインであることがポイントである。これがビジネスの成長につながる本物のデザインだと考えている。

もちろん、このデザインを施して成果を高めるには、良質なコンテンツ作りが前提となる。記事を読んだ人が本当に満足し、悩みや願望を解決させることができる素晴らしいコンテンツの作成に何よりも時間を割いてほしい。

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. 4-3について。
    SNSソーシャルボタンの配置については2カ所あることに対してとてもいいと思いますが、このページをスマートフォンで見たときに、PCだとサイドバーのあるアイコンが記事下に移り、ソーシャルアイコンがダブってしまい、ユーザービリティに影響が出るのではないかと考えているのですが、それについてはどのようにお考えでしょうか?

    1. 只内さん、鋭いご指摘ありがとうございます。

      おっしゃる通り、スマートフォンでの表示の場合は1つだけ表示させる仕組みにすべきです。
      その方がソーシャルボタンがダブらず、ユーザービリティの視点からもストレス無い見せ方ですね。

      バズ部はPCからの訪問者がスマホよりも圧倒的に多いため、
      その目線での記事となってしまいました。

      今後はスマートフォンに対応したデザインのコンテンツもしっかり提供していく必要がありますね。
      貴重なご意見、誠にありがとうございました。