ソーシャルメディア 01-02
ソーシャルメディアで変わるWeb制作の現場（後編）

ソーシャルメディアが普及するにつれ、Web制作の現場にも変化が見られつつある。本記事ではソーシャルメディアによって生まれる現場レベルの変化について考える。

解説／澤村正樹（NTTレゾナント株式会社）

効果測定──ソーシャルメディアの影響力を測る

ソーシャルメディアと連携したWebサイトを作ったならば、それがどの程度の影響力があるかが気になってくるだろう。そこで、Klout【01】というサービスを使って効果測定をしてみよう。これはKloutスコアという独自の指標をもってソーシャルメディア上の影響力を数値化してくれる。ちなみにこのKloutスコアは空港ラウンジ割引に適用されるなど、米国ではおもしろい使われ方をしているようだ。他にも、Crowdbooster【02】というフォロワー数の伸びなどをグラフにして表示してくれるサービスがあるので、ぜひ活用してみてほしい。

Facebookでは、Facebookインサイト【03】という機能が提供されている。適切にOpen Graph Protocolを設定しておくと、Facebookインサイトを使ってどれだけ「いいね！」されているかなどを測ることができる。

では、最もポピュラーなソーシャルメディアであるFacebookとTwitterについてそれぞれ見ていこう。

【01】Klout（http://klout.com/）

【02】Crowdbooster（https://crowdbooster.com/）

【03】Facebookインサイト
（https://www.facebook.com/insights/）。ここで計測したいドメインを入力し表示されているメタタグをサイトのヘッダーに追加すればOKだ。

アプリケーション型のWebサイトとは

さて、ここまではコンテンツ型のWebサイト制作を中心に考えてきた。次は相互に情報発信と受信をユーザー同士で行うようなアプリケーション型のWebサイト制作における影響を見て行こう。

ここでアプリケーション型と呼ぶWebサイトの特徴は、コンテンツ型とは逆に、ログインを要すること、そしてログインして何らかの情報をポストすることができることだ。言い換えるなら、Webサイトが、それを通じて情報を共有しコミュニケーションを行う、ユーザー同士のプラットフォームになっているようなタイプを指す。

IDの認証機構としてのソーシャルメディア

まずはログインについて考えてみよう。匿名掲示板などの例をのぞいてユーザーが情報発信するにあたっては、何らかのIDでログインさせる必要があるだろう。であるならば、ログインする時にIDをどう扱うか決めなければならない。

独自IDからオープンなIDへ（そしてFacebookに収束）

ログインIDの扱いには次の３つのパターン（またはその組み合わせ）が考えられる。

①ユーザーに独自IDを登録してもらう
② Facebook（またはTwitter）などWebサイト側で指定したIDでログインしてもらう
③OpenIDでログインしてもらう

IDをどうするかにも移り変わりはある。インターネットの初期のころは、①のような、サイトごとに独自のID体系を持つことが一般的なやり方だった。たとえば、サイト独自のIDを作成し、ユーザーに性別や住所、また職業や趣味嗜好などを入力してもらい、その後のレコメンドや広告につなげる、という手法だ。

しかし、入力項目の多いID登録フォームはユーザーにとって負荷が高い。そのため、登録作業の途中で止めてしまうケースが多く見られ、ID登録フォームの項目は少なくなっていった。

このような流れの中で出てきたのが、③のような、OpenIDなどの仕組みを使って自サイトにログインさせるという方法である。これにより、ユーザーにとってはパスワードをいちいち覚える必要がなくなるというメリットが生まれた。この仕組みを取り入れたサービスが増えると、一つのIDでいろいろなWebサイトにログインすることができるようになる、と思われた。

だが、現時点で語るならば、どうやらID体系は、②ような、FacebookやTwitterのIDを使ってWebサイトにログインする方向に向かっていくように思われる。最近サービスを開始したアプリケーション型のWebサイトではFacebookのIDだけ、もしくはFacebookとTwitterのIDに両対応するというものが増えてきている。Facebookは実名主義であるからIDとして扱うのにマッチしているという話も聞く。日本だとTwitterの方が先に普及したため、しばらくはTwitterと両対応しておいたほうが無難だとは思うが、将来的にはFacebookが主体になるだろう。

FacebookとTwitterは両方ともオープンなプロトコルであるOAuth【04】（ただしバージョンは違う）を採用している。それらを扱うための各種ライブラリも多数在しているので実装自体はそれほど手間ではない。それよりも、年齢などの追加パラメータをユーザーに入力させるか、複数IDを紐づける場合のデータの持ち方をどうするか、などについてWebサイトとしてのIDのポリシーを先に決めておく必要があるだろう。

ソーシャルメディアのIDを利用する例としてユニークだと感じるサービスの一つにQiita（キータ）【05】というエンジニア向けの情報共有サイトがある。想定されるユーザーの多くがエンジニアであることから、ソーシャルメディア型のソースコード共有サービスであるgithub（ギットハブ）のIDでログインできるようになっている。この例からわかるように、もし自分の作るサービスが特定の分野を対象としており、その分野でメジャーなID体系がすでに存在する場合はそれを優先的なログインIDとするとよいだろう。

【04】OAuth認証関連ライブラリ左： Ruby : Omniauth（https://github.com/intridea/omniauth）、右：PHP facebook/sdk.php（https://github.com/facebook/php-sdk）

【05】Qiita（http://qiita.com/）

ソーシャルメディアへ自動でフィードする

ソーシャルメディアと連携したアプリケーションでは外部ソーシャルメディアにアプリケーション内の出来事を通知する機能をつけることが定番である。

Facebook連携やTwitter連携の機能などを見たことのある読者も多いだろう。実装にはログインの際に外部ソーシャルメディアから受け取ったトークンを保持しておき、それを使ってデータをポストする形をとる【06】。

ただ注意しなければならないのは、ソーシャルメディアへフィードすることを嫌がるユーザーも少なからずいるという点だ。そのため、設定項目としてオン／オフを切り替えられるようにしておき、初期状態ではオフにしておくことが望ましい。ユーザーがはじめて何か行動をした時点で、ダイアログでユーザーに確認し、同意の上でフィードするようにしないとクレームにつながりかねない。

残念なことに、最近では、流入動線欲しさでむやみにフィードするアプリケーションが増えてきている。ユーザーの間でも「Facebookでログインするとどうフィードされるかわからないから怖い」という意見も聞く。せっかく利便性向上のためにソーシャルメディア連携を組み込んだからには、丁寧に実装してユーザーを不安がらせないように努力するべきだろう【07】。

【06】SoundTracking（http://soundtracking.com/）で投稿したもの（上）がFacebookにも反映される（下）。

【07】PitapadではFacebookのログインボタンにユーザーを安心させるための注意書きが添えられている。

外部ソーシャルメディアのソーシャルグラフをとりこむ

最初にログインしたときに何もコンテンツがない状態からはじめるのはできるだけ避けたい。そんな場合には外部のソーシャルメディアの友達関係をインポートすることで、最初から同じようなユーザー関係を構築してしまう、という仕様がよく見受けられる。また、そのサービス内に同じユーザーがいないかを検索する機能も一般的である【08】。

この場合もどこまで自動でやるかについては議論が必要だ。いちいち同じ友達を探してフレンド申請するのは面倒というユーザーもいれば、サービスごとに友達関係を使い分けたいと考えるユーザーもいる。もちろんWebサイトを運営する立場だと、より多くの人とつながってもらって活発なコミュニケーションを期待するものだ。その部分については、チームで明確なコンセンサスをとっておく必要がある。可能であれば想定するユーザーに話を聞いてみるのもいいだろう。

【08】Quora（http://www.quora.com/）
Quoraには先に登録したユーザーの友達が後から登録してくると、メールでお知らせする機能がついている。

FoursquareやInstagramなど

TwitterやFacebookなどのメジャーなソーシャルメディア以外についても眼を向けてみよう。たとえば、位置情報サービスとして有名なFoursquare（フォースクエア）や写真共有として人気のあるInstagram（インスタグラム）、それにブログをシンプルにしたTumblr（タンブラー）などなど、ある分野に特化したソーシャルメディアはまだまだたくさんある。サービスによってはそれらのソーシャルメディアと連携すると、よりユーザー体験としてリッチなものが作れる場合があるだろう。たとえば、食事の写真をアップロードするFoodspotting（フードスポッティング）というサービスでは、写真をアップすると同時に、食べたお店にFoursquareでチェックインすることができる仕組みが実装されている【09】。これによって、場所のライフログと食事ログとを同時に残すことが可能になる。

またジョギング共有のNike+ では、FacebookやTwitterとあわせてPath（パス）というソーシャルメディアにフィードする機能を搭載している。Path というのは基本的には家族や恋人同士などごく限定された範囲で使われることを想定したソーシャルメディアであるため、FacebookやTwitterでは、デフォルトでは表示しない、走ったルートを示す地図をポストするようになっている。それぞれのソーシャルメディアのプライバシー感をうまく考えた切り分けだと言えるだろう。

【09】Foodspotting - Foursquareの連携。

利用規約に気をつけよう

ここまで書いたように、現在のWebサイト制作では、ソーシャルメディアとの連携は避けて通れない要素になってきている。ただ一つ気をつけなくてはいけないのが、外部ソーシャルメディアのAPI利用規約についてである。意外と見落としがちではあるが、うっかり規約に違反していて、結果的にアカウントが停止になってしまうとサービス自体に重大な損害を与えかねない。下記にFacebookのAPIを利用する上でよく見落としがちな規約条項をリストアップしてみた。

・ユーザー自身が事前に作成したコンテンツである場合を除き、投稿フォームの入力欄を埋めてはならない。

・ユーザーがあなたのアプリケーションにパブリッシュの許可を与えたとしても、あなたがユーザーの代わりにコンテンツを投稿したりイベントを作成したりする際にはその都度ユーザーの同意を得なければならない。

・ @Facebook.comのアドレスはアプリケーションがユーザーにメッセージを送るためのものではない。ユーザー同士がコミュニケーションするためのものである。

上記以外にも、ついやってしまいがちな落とし穴はいくつも見受けられる。また、Twitterでも、たとえば@ユーザー名でのツイートをアプリケーションからの通知として大量に使ってしまうと、利用規約違反でアカウントが停止されることがある。そのような事態を避けるためにも、ぜひ一度は規約に目を通しておいてほしい。

ケータイとPCからスマートフォンへ

最後にページレイアウト的なトピックスについても触れておこう。ソーシャルメディア連携を考えるとスマートフォンやタブレットでどう見えるかという点も気にしなければならない【10】。

スマートフォンやタブレット上で動くソーシャルメディアアプリはアプリ内ブラウザで記事中のリンクを開く仕様になっているものが大半だ。ソーシャルメディアでの広がりを期待するのなら、それらの端末からでもきちんと見えるように気を配る必要がある。たとえば、スマートフォン専用のビューを用意する、あるいはブラウザの画面サイズにあわせてレスポンシブにCSSでレイアウトされるようにするなどの工夫を取り入れて、スマートフォンやタブレットユーザーが得られる体験の質を上げるように心がけたい。またタッチパネルではオンマウスという現象が発生しないので、オンマウスでナビゲーション情報を表示するようになっている場合は、それなしでも混乱しないようにする必要がある。

iPhoneやiPadのことも考えると、レイアウトだけでなく、なるべくFlashを使わないなどの配慮も必要だ。PC向けに動画をflvで提供する場合もFlashに対応していない端末のための別の動画フォーマットも合わせて用意するなどの工夫をしよう。もっとも動画についてはYouTubeやVimeoなどの動画専用ソーシャルメディアを使うのも手だ。そういったサービスではすでに端末に合わせたフォーマット分けがされているため、制作側の手間を減らせるだけでなくユーザーにとってもメリットがある。流入動線が増える効果も多少は期待できるかもしれない。

ソーシャルメディアとどう連携していくかはWeb サイト制作の現場においても外せないトピックスになってきている。「いいね！」ボタンをつけるだけの簡単なものから、ID連携や自動フィードなどのより踏み込んだ機能まで、制作するWebサイトの特性に合わせて上手に組み込んでいこう。

【10】iPhone用のTwitterクライアントソフト。

（後編に続く）

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。