ソーシャルボタンのデザイン・エリアの最適化 (SNSボタンの設計をゼロから考える）

最近のブログやキュレーションメディアなど読み物系サイトにおいて、ソーシャルボタン（SNSボタン）を見かけないことはないかと思います。

 

先日、とあるWebマガジンを運営されているクライアント様から「SNSによる拡散がされにくいようなので調査と、課題があればその解決策を考えてくれないか」という相談をいただいたので、まず自分のサイトを振り返ってみました。

 

このmisleadブログも記事の上下にソーシャルボタンを実装していますが、ブログ構築時の設計を振り返ってみると、

• シェアされて、少しでも記事が多くの人の目に触れれば嬉しいな
• 参考にしたサイトの多くは、記事の上下にソーシャルボタンが配置されていた

 

程度の考えしか無く、正直、深い考えはありませんでした。。。

 

う〜ん、これでは相談を受ける資格はないですね。。。（涙）

 

とは言え、お断りするわけにも行かないので、今回はソーシャルボタンについて考えてみたいと思います。

 

ソーシャルボタンとは

説明の必要はないと思いますが、一応軽く触れておきます。

（もう知ってるわいっ、という方は飛ばしていただければと思います）

 

SNSとは「ソーシャル・ネットワーキング・サービス」の略で、Web上でコミュニティを構築するツールのことでです。

有名なSNSには、Twitter、Facebook、LINE、Google+、Instagramなどがあります（※）。

※明確なSNSの定義が存在しないため、解釈しだいではブログや掲示板もSNSになるそうです。またTwitter社自身は「TwitterはSNSではない」と述べているなど、自社の思惑と世間一般の考えがマッチしていないようです。

 

ソーシャルボタン（SNSボタン）は、各種SNSとWebサイト（ないしはサイト内のページ）を連携するもので、このmisleadサイトにおいても以下の画面キャプチャのとおり実装されています。

 

 

このソーシャルボタンをクリックすることで、当該ページのURL・タイトル・記事本文をSNSに投稿することができます。投稿すると、SNSでつながっている友人・知人たちへ投稿内容がシェアされます。

TwitterとFacebookのタイムライン表示

 

次に、なぜソーシャルボタンを実装するのかについて深掘りしてみたいと思います。

 

ソーシャルボタンを配置する目的

ソーシャルボタンがSNSとサイトを連携することができることは、先の説明のとおりですが、何のためにSNSとサイトを連携するのでしょうか。

 

この答えは、サイト運営者のニーズ（ビジネスニーズ）と、閲覧者のニーズ（ユーザニーズ）の思惑を深堀する必要がありますので、それぞれについて考えていきます。

 

サイト運営者のニーズ（ビジネスニーズ）

今回、相談を頂いたクライアントもそうですが「多くの人の目に触れるようにすることで、ビジネスチャンスを増やしたい」が目的となります。

 

例えば、不動産を紹介する企業が、自社で取り扱っている商業ビルやビル周辺を紹介する記事を公開したとします。
この場合、記事が多くの人の目に触れ、興味を持ったユーザから問い合わせや資料請求があることを期待するはずです。（見込み顧客の獲得ですね）

 

また、個人ブログであればアフィリエイトバナーをクリックしてもらうことで収入を得るケースが考えられます。
（中には、見返りを期待せず、自分の体験やナレッジを公開している方もいるかもしれませんが、多くの場合は、上記のようなチャンスにつなげたいと考えています）

 

また、SNSでシェアされることによるメリットとして、「検索エンジン以外からの流入が期待できる」という点があります。

 

先ほど紹介した不動産会社を例に挙げると、ターゲットとなるユーザは自分が必要としている情報をGoogleやYahooなどの検索エンジンを利用した結果、記事にたどり着くというユーザの能動的なアクションがイメージできると思います。

 

ところが、SNSに投稿された内容は、自分のタイムラインに勝手に表示されるため、SNSユーザはこの投稿内容を受動的に取得することが可能です。

 

SNSはサービスの特性上、同じ趣味・思考の人がつながることが多いので、シェアされれば同じ趣味・思考のユーザに見てもらえる可能性が高くなります。

 

運営者がここまで意識してSNSでのシェア（自サイトの記事拡散）を狙っていることはないかもしれませんが、このようなメリットを享受できるのです。

 

閲覧者のニーズ（ユーザニーズ）

残念ながら今の僕には調査会社を使って、ユーザのインサイトを探るほどの資金は無いため、「人はなぜコンテンツをシェアするのか」を調べてるサイトを調べたところ、なんとありました。

 

マイナビ社のサイトを参考にすると、人がSNSでコンテンツをシェアする理由は大きく以下の4つのようです。

• ニュース＆宣伝
• 情報を共有
• 趣味＆興味のために
• 純粋におもしろいから

引用元：情報共有？ それとも宣伝……SNSで「シェア・リツイート」をする目的はなに？ 社会人に聞いてみた

 

ニュース＆宣伝については、どちらかと言うとビジネスニーズに近いので除外すると、残りの3つの目的がユーザのインサイトとなります。

 

引用元サイトに各目的のユーザのコメントがありますので見てみると、「役に立った」「面白いと感じた」など、良いと感じた自分の体験を他人にも共有したいという気持が「SNSでページをシェアする」というアクションを引き起こしていると考えられます。

 

つまり、記事を読んで「おっ！これは！」と感じてもらうことが必要で、逆に「ふ〜ん」くらいの印象しか残らないのであればそれで終わりということです。

 

なので、よくブログの最後に見かける「ポチッと応援よろしく」とありますが、そのようなお願いするよりも「応援したい気持ちにする記事を書くこと」が必要ということですね。

（まぁ当たり前ですが、、、）

 

また、上記の調査にはありませんが「時間がないから後で読もう」「何度も読みそうだから保存しておこう」と言ったソーシャルブックマークとしての利用もあると思っています。

（こちらは調査できていないので機会があれば調査してみたいと思います）

 

どのソーシャルボタンを利用すべきか

現在、世の中で利用されているSNSはかなり多いです。すべてのSNSのソーシャルボタンを配置しようとすると数が多くなりすぎるため、おすすめできません。

 

また、利用者の少ないSNSのソーシャルボタンを配置してもシェアによる拡散の効果が薄いのは容易に想像できます。

 

よって、一番利用者の多いSNSをピックアップして利用するのが望ましいと思います。

 

ターゲットユーザの国や、サイトのジャンルなど、いくつかの軸があると思います。

本ブログが日本向けということもあり、ここでは、参考までに日本のSNS利用率を紹介します。

 

総務省のサイトによると、利用されている順に上から

1. LINE
2. Twitter
3. Facebook
4. Instagram
5. Google+
6. Skype
7. mixi

参照元：ICT総研 2016年度 SNS利用動向に関する調査

 

となっています。

世論的に上位のLINE、Twitter、Facebookのソーシャルボタンを配置するのに異論はないかと思いますので、他に追加したいものがあれば、導入を検討すれば良いかと思います。

 

ちなみにこのサイトでは、LINEは入れずに「Google+」と「はてなブックマーク」を加えています。

LINEは、友人にピンポイントでシェアする機能なので、「多くの人の目に触れる」という点で効果が薄いと思って入れていません。

 

また、「Google+」は世界シェアがFacebookについて2位のため、海外に住んでる日本人ユーザ向けに見てもらえればと思って導入しています。

 

「はてなブックマーク」は、ユーザニーズにて触れましたが、「記事を後で読もう」「何回も読みそうなので保存しよう」といったブックマーク（お気に入り）としての使い方をするユーザ向けに導入しています。

 

ページのどこにソーシャルボタンを配置するべきか

では、次にソーシャルボタンをページのどこに配置するべきかについて考えてみたいと思います。

 

ソーシャルボタンをクリックするのは、サイト閲覧者であるユーザになりますので「ユーザにとって、どうあるべきか」という視点でエリアを定義してみます。

 

ユーザは先の利用目的のとおり、自分が読んだ記事に共感したり、面白いと感じたときにシェアするわけなので、当然、記事を読み終えた直後にソーシャルボタンがあるのが望ましいです。

 

ところが、記事はすべて読まなくとも途中でシェアしたくなる場合もあります。たとえば、ひとつの記事ページにいくつかのテーマがあるような場合、自分が知りたい情報があった時点で満足するので、そのタイミングで「なるほど、シェアしよう」という態度変容を引き起こす可能性があります。

 

この点を考慮すると、「テーマの終わりや、文脈の区切りの箇所に都度ソーシャルボタンの配置する」となりますが、区切りのタイミングでいちいち目につくのでユーザにとってはノイズです。

そこでHTML5・CSS3を利用することで、邪魔にならない位置で画面に追従させることが可能なので、こちらの方法をおすすめします。

 

ワイヤーフレームの位置はあくまで参考なので、どの位置から追従させるかについては、自身で考えてみてください。

 

さらに、今回の調査でいろんなサイトを見たのですが、どのサイトも記事開始直後にもソーシャルボタンが配置されていることがわかりました。

 

以前、コチラの記事で述べた通り「他のサイトもやってるから」といった盲信である可能性があるので、この配置の意味についても考えてみます。

 

まず、多くのサイトが記事の最初にソーシャルボタンを配置していることから、「大抵の場合、ページ上部にある」という学習性については言えると思います。

 

ソーシャルボタンはハンバーガーメニューとは異なり、一瞬でそれが何かがわかるので、ユーザが「シェアしたい」となった場合、「画面の一番上に行けばあるだろう」という動きにマッチします。

 

次に、ユーザニーズでも触れた「時間が無い、何回も読みそう」というSNSをブックマーク的な感じで利用しているユーザにとっては、記事の最初に配置しておくことでブックマークを促し、再訪が期待できます。

 

もう1点、「記事の人気度」を示すことができます。

調査中、実に多くのサイトが「シェア数」を表示させていました。

 

これは配置の話だけではなく「表示要素をどうするか」という点にも触れることになりますが、シェア数が多ければ「この記事ページは読まれている」という印象を与えることで、記事を読み進めようという気持ちにさせることはできると思います。

 

当然デメリットとして、公開当初や読まれていないコンテンツの場合は「面白くないのかも」という印象を与える可能性があります。

 

すでにファンがいるような場合は良い記事を書けば拡散してもらえますが、駆け出しブロガーやメディアサイト立ち上げの場合は、敢えて数字を表示させないようにするのもいいかもしれません。

 

ソーシャルボタンのデザイン

次にデザインですが、「ソーシャルボタン デザイン」で検索するとわんさか出てきます。

かなり大幅なデザイン変更が可能のようですが、デフォルトのデザインが望ましいと思います。

 

理由は、各社SNSの提供しているソーシャルボタンを利用しているサイトが多いこと、また、各SNSのカラーの印象があるので、色や形を変更すると、ユーザに気づいてもらえない可能性があるためです。

 

何を隠そうこのサイトも白と黒がベースのデザインのため、ソーシャルボタンのデザインを以下のような白黒デザインのボタンにしようと考えていました。

 

デザインにはマッチするのですが、「そもそも気が付かれないのではないか？」という課題は残ります。

この課題を解決するためにボタンを大きくするなど考えたのですが、自分自身を納得させることはできなかったので断念しました。

 

いくらデザインに統一性があっても、気づかれないのでは意味がありませんよね。。。

 

シェア数の表示

先に述べたとおり、シェア数は「どれだけ読まれているか」の指標になるため、人気があるのかどうかの判断基準になります。

 

よって、ある程度シェア数が見込めるコンテンツであれば、ファーストビューの範囲にソーシャルボタンにシェア数を表示させるべきですし、そうでなければシェア数は非表示にしておいたほうが良いかもしれません。

 

ソーシャルボタンの設計まとめ

これまでの情報をまとめると、以下のとおりです。

 

配置場所

ソーシャボタンの追従と記事終わりに固定配置は実装すべきであること、また、ユーザの学習性への考慮したいということであれば、画面上部にも配置するのが望ましい

 

デザイン

デザインは各SNS社が提供しているデフォルトのものが望ましい。また、人気記事であることを伝えたい場合は、シェア数も表示すべき

 

ワイヤーフレームを作って見ました。つまり、こういうことですね。

 

このサイトは、追従ができていないので時間ができたら対応しておこうと思います（汗）

 

最後に

いくら、ソーシャルボタンの設置エリアやボタンのデザインボタンを最適化しても、やはり記事の中身が重要です。

 

先にあげたユーザの利用シーンのとおり、「共感した！」「みんなに伝えないと！」といった記事でないと、いくら最適な箇所のSNSボタンを配置しても「シェアしよう」という態度変容を引き起こすことはできません。

 

最近は、某医療系キュレーションメディアが記事の転載・流用を組織的に行っていたことが明るみになり、社会問題となりました。

 

今後、ますますユーザの目が厳しくなると思いますので、情報発信する際には十分な調査、社会貢献度の高い記事を心がけたいと思います。

 

おまけ

提案後の質疑応答の中で、「SNSでの投稿・シェアはSEOの効果があるのかという質問をされたのですが、答えられなかったので持ち帰りとしました。。。

 

調べたところ、

 

SNSでの投稿・シェアはSEOの効果がない

 

ということがわかりました。

 

理由は、各種SNSに表示されるリンクは実はnofollow属性だという、とてもシンプルなものでした。

 

とはいえ、拡散されて人の目に触れる機会が増えれば、純粋にアクセス数増加に伴い、検索ランキングは上位になるので、間接的な効果はあると言えると思います。

 

繰り返しになりますが、記事を読み終えた後に「あーこの記事良かった。シェアしよっと」と思ったときにソーシャルのボタンがそこにあれば、勝手に拡散されます。

 

SEO目的のためにソーシャルを利用するのではなく、良い記事をより多くのユーザに読んでもらうよう心がけましょう。