ブログ

24の人気ブログ&バイラルメディアのSNSソーシャルボタンを徹底比較!デザイン傾向を分析

2015年10月16日

e0053_800x600

Facebook、Twitter、Google+、はてなブックマーク、LINE……

世の中がSNSで溢れかえり既に久しいですが、ブログをやる上でSNSの存在は非常に重要です。納豆ご飯における納豆くらいの重要度です。もしくはそれ以上です。

ブログでは記事を読み終わった直後が、読者が一番アクションを起こしやすいと言われています。つまり、記事の下に上記のようなSNSのソーシャルボタン(シェア・ツイートなどのボタン)を配置するのが最も効果的ということです。

ですが、

 

どう配置したら効果的なのか?

どんなデザインが効果的なのか?

 

その辺で悩むことと思います。

 


 

ソーシャルボタンのデザインとレイアウトを徹底比較&分析!

…というわけで、アクセスやSNSでのシェア数が多い人気ブログを集め、それらの「記事下のソーシャルボタンがどんなデザインでどう配置されているか」を比較します!

そこから傾向をつかんで解説&感想を書いていきます。それを参考に、皆さんのブログ制作に役立ててもらえればと思います。そして私自身もこの記事をちょいちょい見返すと思います笑。

また、傾向が掴みやすいように、ソーシャルボタンのデザインタイプやブログのタイプ(雰囲気)別で4つの項目に分けて紹介しています。

では早速いきましょう!

 

人気ブログの記事下ソーシャルボタン一覧! ①公式ボタン系

コンテンツだけで勝負をしているような感じのブログは、デフォルトの公式ボタンをそのまま使用しているケースが多いです。

また、おしゃれブログではソーシャルボタンは大抵フラットデザインですが、公式ボタンでもうまく使うとおしゃれになるものです。そのため、デザイン性が優れたブログでも公式ボタンが使われるケースはあります。

 

まだ東京で消耗してるの?

キャプチャ

http://www.ikedahayato.com/20151015/41222942.html

有名ブロガー、イケダハヤトさんのブログです。SEOとかあんま気にしない感じの、コンテンツと話題作りで勝負のブログですが、ソーシャルボタンもこだわっておらずシンプルです。
そんなものにこだわるなら一つでも多くの記事を書く…というスタンスと思われます。

 

ももねいろ

キャプチャ

http://momonestyle.com/wrong-saving-surgery-of-household-management

デザインを気にしていないようには見えないブログですが、それよりもやはりコンテンツの質が高いことで有名です。
また、オシャレすぎない方がブログのターゲット層である主婦には受けがいいのかも知れません。

 

ナナオクプリーズ

キャプチャ

http://7oku.hatenablog.com/entry/2015/09/05/193322

これこそ完全にコンテンツ勝負のブログです! もはや男気ある侍ブログです。検索流入よりも、単純に面白さによるSNSでの拡散で人気が出ているブログです。特に桃太郎ネタは面白いです。

そしてコンテンツ勝負のブログは大抵自分自身のブランディング化もしていますが、ナナオクプリーズでは自らの書籍の宣伝を記事下に入れています。

 

Hiroki-Suzuki.com

キャプチャ

http://hiroki-suzuki.com/access-huenairiyuu

こちらはデザイン性と機能性・わかりやすさを重視したブログです。公式のソーシャルボタンはやっぱりわかりやすさでは一番ですからね。
また、こちらのブログでもイケダハヤトさん同様、ドメイン名からも自分のブランディングを行っていることがわかります。(というか、ブログ名からわかりますね。)そういったブログでは、やはり記事下でメルマガや書籍紹介で自己ブランディングを行っています。

 

和洋風KAI

キャプチャ

http://wayohoo.com/mono/aeron-chair-herman-miller.html

言わずと知れた有名ブログです。この、「記事のアイキャッチ画像+いいね!ボタン」という形は後ほど紹介する「バイラルメディア」で非常によく使われる形です。
個人ブログでも結構取り入れているところは多いです。(当ブログでも2015/10現在は取り入れています。)

 

おまスキャ

キャプチャ

http://ushigyu.net/2015/10/14/lightroom-image-watermark/

公式のSNS拡散ボタンと、スッキリとしたデザインのSNSフォローボタンが配置されています。フォローボタンはフラットデザインの一歩手前的な感じになっていますね。

 

monograph

キャプチャ

http://number333.org/2015/04/05/solidex/

私がよくデザインの参考にしているブログです。あまり真似できてはいないですが、おしゃれかつスッキリして見やすいので、非常に参考になります。
こちらは公式のソーシャルボタンを使用していますが、ボタンのバックがデザイン性のある背景なので、全体的にオシャレな感じに仕上がっています。

 

 

人気ブログの記事下ソーシャルボタン一覧! ②フラットデザイン系

アップルやグーグルのロゴがフラットデザインになったことで今流れが来ているデザインです。
フラットデザインは画像を使わないため軽くて読み込みが早く、なおかつレスポンシブデザインにも対応しやすい合理的なデザインです。

デザインに気を遣ったブログはこの形のソーシャルボタンを配置しているケースが多いです。IT系・WEBデザイン系のブログはほとんどこのパターンだと思います。

今村だけがよくわかるブログ

キャプチャ

http://www.imamura.biz/blog/cms/wordpress/tips/23561

スッキリして見やすく、なおかつシャレオツなデザインのソーシャルボタンです。
まさにWeb制作に関するブログです。ちなみに、お気に入りのデザインです。

 

NxWorld

キャプチャ

http://www.nxworld.net/material/halloween-materials-2015.html

こちらもWEBデザイン系のブログ。フラットデザインがモダンな感じになっています。
ブログ全体もオシャレな1カラムで最先端な感じです。

 

あなたのスイッチを押すブログ

キャプチャ

http://bamka.info/blog-no-shugo-ha

こちらのブログも管理人さんがウェブディレクターと書いてあります。
記事下にソーシャルボタンに加えてプロフィールを持ってくるパターンも、自己ブランディング系ブログではよく見られます。

 

ネタフル

キャプチャ

http://netafull.net/ingress/051547.html

力強い大きさのフラットデザインに加え、バイラルメディアでよく使用される「いいね!」ボタンのレイアウトを使っています。
拡散されそうな空気がプンプンするデザインですね。

 

gori.me

キャプチャ

キャプチャ

http://gori.me/iphone-accessories/anker/81493

こちらもブログデザインでよく参考にしています。フラットデザインのソーシャル拡散ボタンに加え、例の「いいね!」ボタンのレイアウト…という鉄板の組み合わせです。
加えて、FeedlyやLINE、ツイッターのフォローボタンも配置しており、「SNS対策は万全!」といった感じですね!

 

ままはっく

キャプチャ

キャプチャ

http://mama-hack.com/material

こちらもまたまたよく参考にしているブログです! スタイリッシュ系ではないのですが、程よく親しみがあり、なおかつ機能性に優れたデザインがツボに刺さります。
ももねいろさん同様、子育て系のコンテンツが強いですが、やはり主婦層ターゲットのブログはスタイリッシュ過ぎない方がいいのかも知れません。

ボタン風のデザインが、押したくなる気持ちをくすぐりますね。

 

WordPressブログ作ってみる?

キャプチャ

http://hublog.biz/bwpb/social-buttons_customize_to_flat-design/

こちらもタイトルの通り、ブログ制作系のブログです。ただ、こちらはまさかの「公式ソーシャルボタン」+「フラットデザインソーシャルボタン」の二刀流ですね!
ここまで完全に丸かぶりさせているのは珍しいケースだと思います。

 

 

人気ブログの記事下ソーシャルボタン一覧! ③その他・ちょっと特殊系

公式ボタンでも普通のフラットデザインでもないボタンを使用しているブログを紹介します。
ブログ自体をブランディング化したい場合に有効な手法です。

クリエイティブメモメモ

キャプチャ

http://creativememomemo.com/wcan2015autumn_speaker2/

シェア数まで含めてオリジナル性溢れる、かわいいデザインのソーシャルボタンです!
ブログ全体をデザインでブランディングしたい場合はこういった演出は効果的ですね。

 

mog-mog(もぐもぐ)

キャプチャ

http://mog-mog.me/chiba/cafe-grove/

こちらはボタン自体は普通の公式ソーシャルボタンです。…が、配置が変なのと、ソーシャルボタンを押させる煽り文が独自性に溢れています。
「シェアお願いします!」とか「拡散していただけると嬉しいです」とかではなく、「もぐもぐ」ですからね。これもブログ全体のブランディングに一役買っているタイプです。ディズニーみたいなものです。

 

ふらふーむ

キャプチャ

http://fla-hoom.com/wordpress/wordpress-blog-ogp

これは比較的普通のデザインですが、ベタ塗りのフラットデザインとは一味違う仕上がりのソーシャルボタンです。
スッキリしていていい感じです。次はこういうのが流行るかもしれませんね。

 

 

バイラルメディア・キュレーションメディアの記事下ソーシャルボタン一覧!

フラットデザインのボタンが基本で、それに加えて記事のアイキャッチ画像+「いいね!しよう」的な煽り文。そして、その下には「最新情報をお届け」的な文言が入る。これが鉄板です。
この形は人気個人ブロガーもちょいちょい真似して取り入れており、実際にかなり効果があると思われます。

 

TABI LABO

キャプチャ

http://tabi-labo.com/192236/thank_the_parent/

先ほどの説明の例にドンピシャのパターンです。フラットデザイン+鉄板の「いいね!」レイアウト。加えて、ニュースレター登録を促しているのがバイラルメディア・キュレーションメディア的です。
だいたいこういうのは企業が運営しているので、最終的にはメールアドレスをゲットしたがっているものです。

 

ログミー

キャプチャ

http://logmi.jp/98244

これも先ほどのパターンとほぼ同じです。ニュースレターの代わりにアンケートボタンが配置されています。

 

by.S(バイ・エス)

キャプチャ

http://by-s.me/

これも似たデザインですね。ただ、アメブロのボタンがあるのはかなり珍しいと言えます。
記事の投稿も募集しているのですが、それもアメブロの会員でないとできないようなので、アメブロを有効活用していると思われます。

 

ViRATES

キャプチャ

http://virates.com/funny/38156142

言うことがないくらい同じデザインです。「この記事が気に入ったらいいね!しよう」というこの文言は、日本のそこら中のブログで見ることができます。
シェアボタンがFacebookとTwitterの2種類だけですが、スペースが余っているからか、「Facebookでシェア」「Twitterでシェア」と説明まで書いてあります。

 

https://retrip.jp/

キャプチャ

https://retrip.jp/

こちらは「いいね!」がないパターン。こちらも「Facebookでシェア」「Twitterでシェア」との説明付きです。

 

BuzzFeed

キャプチャ

http://www.buzzfeed.com/dominicholden/kim-daviss-lawyers...

こちらは海外のバイラルメディアです。海外はシンプル志向が強いのか、完全にロゴだけです。
ただ、メールのアイコンがあるのがバイラルメディア的です。

 

当ブログの記事下SNSボタン(2015/10/16現在)

おまけです。いろいろ真似しています。(しょっちゅういじってるので、すぐ変わると思います。)

回転ブログ ~典型的な回転木馬ブログ~

キャプチャ

https://storyinvention.com/autumn-manga-matome

ところどころ捻くれて差別化を図っていますが、吉と出るか凶と出るかは謎です。

 

 

まとめ

各サイト工夫が見られて面白いですね。
…が、ある程度押されやすいデザインや配置の仕方、文章は決まっています。特にバイラルメディア・キュレーションメディア系はその辺りを相当研究してると思われるので、試しにその辺りの真似をしてみるのはアリだと思います。

ブログ全体をショップ風にしたり、なにかに特化させたい場合は、ソーシャルボタンのデザインや煽り文も独特なものにするとよいでしょう。逆に、信頼感あるお堅い雰囲気を出したい場合は、公式のソーシャルボタンかフラットデザインがよいでしょう。

これも時代の流れで変わっていくものなので、各自で色々試してお気に入りのソーシャルボタンを見つけるのも面白いと思います。

さてさて、当ブログの今のソーシャルボタンはどうなっているのか…この後、お楽しみに!!