Photo by MARUYAMA Takahiro (CC BY-NC-SA 2.0)
仕事で運営しているサイトで共有ボタンを設置するので、ユーザはなぜ「いいね！」をクリックしたり、Twitterで情報を共有しようとするのかをもう一度考え直してまとめてみた。とりあえず仮説でしかありませんが、検証の際に役に立てたいと思っています。
まずはユーザがソーシャルメディアで情報（ウェブサイト）を共有する主な理由について。
僕は以下の2つが主な理由だと考えています：
- 自分のためのブックマーク
- 知人に教えてあげたい情報
では、共有ボタンはどんなタイミングでページのどこでユーザに提供するべきなのでしょうか？
共有ボタン設置の注意点
ユーザの行動を考えたうえで以下のようなことに注意して共有ボタンを設置するべきではないでしょうか？
- 「いい！」と思った瞬間に共有ボタンがクリックできる場所にある
- 「いい！」と思った瞬間に、共有ボタンのある位置を一度認識できている
- 共有ボタンをクリックすることで、なにが共有されるかが明確になっている
そう考えると、共有ボタンの位置はページの上部とコンテンツの終わりの両方に設置するのが良さそうです。
たとえば、「自分のためのブックマーク」をする場合、以下のような状況が考えられる：
- ページを最後まで読んでいなくても、あとで読むためにブックマークする
- ページを最後まで読んで、リソースとしてブックマークする
そのため「このページは役に立ちそうだ」と思った瞬間、つまり、#1の場合はページの上部に、#2の場合は、ページの下部に共有ボタンが欲しい。
また、「知人に教えてあげたい情報」の場合、内容を最後まで読んで（もしくは内容の全体を把握して）から共有することが多いと思われるため、共有ボタンはページの最後（コンテンツの最後）にあるのが良いでしょう。ただ、ページの上部で「共有」ができるということを認識してもらうために、ボタンを設置しておくのも良いと思います。
実際に設置してみて、データを検証してみないと分かりませんが、だいたいこんな感じでしょうか？
設置の際の技術的な注意点メモ
時間があったらより細かくまとめたいと思いますが、共有ボタンの設置の際は、以下のようなことにも注意する必要がありそうです。
- ウィジェットやJavaScriptのSSL対応
SSLを使用したページがある場合、Chromeなどではアドレスバーの「https://」が赤くクロスアウトされ「安全でない他のコンテンツが含まれています」などと表示されてしまいます。SSLでの対応を確認して、対応していたらスクリプトには相対パス（たとえば「//platform.twitter.com」など）を指定するのが理想です。 - パフォーマンス
共有ボタンを設置することによって、ページの表示速度が遅くなってしまったら本末転倒。ボタン以外の部分の表示に影響がないように、スクリプトは極力HTMLコードの最下部に設置するなど、細心の注意をはらいたいですね。 - レスポンシブ・ウェブでのレイアウト確認
デスクトップでは普通に表示されるボタンも、スマホで見るととんだ場所に表示されていたり、または、隠れてしまっていたり可能性もあります。ブラウザ・チェックやボタンの動作確認なども含め、リリースする前にしっかりテストをしたいですね。 - 効果測定について
せっかく設置したんですから、どれだけクリックされているかなどの効果測定もしたいですね。FacebookではInsightsでLikeの数やLikeボタンがクリックされたページなどの細かい情報が見られます。Insightsの設置の方法はこちらのブログ記事などを参照すると良いかと。
2011年11月22日に公開され、2011年11月25日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。