デザインで訴えかけるFacebookページ

2011.02.23

RedBull Page

こんにちは、守谷です。

各地でのデモのニュースを初め、最近耳にしない日のなくなってきた Facebook ですが、企業やアーティスト等が活用できるFacebookでの顧客へのアプローチ方法として「Facebookページ」があります。
以前から、このSINAPlogでも企業のFacebookページの活用法に注目しており何例かフィーチャーしてきましたが、今回は見せ方によっても訴求力が変わるFacebookページの表現をデザイナー目線でピックアップしていきます。

ちなみに、こちらの見出し画像でキャプチャさせていただいたのは、Red Bull のFacebookページの一部です。明らかに「いいね!」ボタンを押させようとしている画像が画期的で、この表現からインスピレーションを得た企業も多かったのではないでしょうか。
以下に近い表現のものをピックアップしました。

いいね!ボタンを押させるデザイン
ANAテラモーターズGoogleMashable

さて、このキャプチャ、左右で一部表現が違うことにお気づきでしょうか?

「Facebookページ」はつい先日「ファンページ」から名称(和訳名)変更されるとともに、仕様のアップデートが行なわれました。
中にはファンページという名称の方が馴染みのある方も居るかもしれません。名称変更については、「ファン」という語の持つ意味がFacebookページの本来の機能に影響を与えないように、という意図も込められているようです。

機能的な変更点として大きい部分は、上のキャプチャの左右の差でもわかるように、よりユーザーページとFacebookページの表現を近づけたことにあるでしょう。左側2件で見える「いいね!」ボタンすぐ下のタブが、左カラムのロゴの下に移動しました。それと共に、ロゴの下に位置していた「友達○人が『いいね!』と言っています。」と有ったアイコンの羅列部分が、右カラムに移動しました。
詳細な変更点については一つ前の記事でご紹介していますので、ご覧ください。

表示の変更によってFacebookページの見せ方も変わってきたように感じます。
今までの(ファン)ページでは先述の通り、いかにタブの上にある「いいね!」ボタンをユーザーに押させるか、という表現が用いられていました。用いられていたというよりは、制限された表現の中での苦肉の策とも言えるでしょう。
しかし、FBMLが廃止されるとの発表と共に通常のHTMLサイトと同様HTMLやCSS、JSをiframeを使って表示できるという仕様変更によって、より柔軟な(Facebook)ページの入り口作りが可能となっています。

グルーポンの改編

こちらのキャプチャでは、Groupon Japan のファンページ(旧)バージョンとFacebookページ(新)バージョンの入り口ページを比較しています。右の新バージョンでは、左の旧バージョンで表示されていたコンテンツ内容が画面一杯の画像に隠されているような画像を使っています。いいねボタンを押して初めてコンテンツにアクセスできるようになることを明示しています。実際、ページのソースとしてもそこに存在しているのですが、「いいね!」を押さないことには下のコンテンツが見えない、という仕組みです。(今までのFBMLでの記述だとソース内には情報は存在していませんでした。)

Facebookページにアクセスした時に「いいね!」だけが表示されるということでも、表現の自由度が増しています。先に上げたような「いいね!」に注意喚起するデザインではなく、「いいね!」を押さなければコンテンツを楽しめないという表現に移行していっているFacebookページも複数出てきました。

新Facebookページ活用事例
SonyEricssonCHANELsatisfaction guaranteedKAUPON

また、仕様変更によってFacebookページ自体がユーザーと同じように「いいね!」をつける等できるようにもなったことで、他ページとの繋がりもよく見えるようになりました。Disney や歌手の Britney Spears のFacebookページでは、左カラムでの「いいね!」表示が上手く機能しています。

新仕様活用のDisneyとBritney Spears

新しい仕様への完全移行は3月10日です。既存ながら古いタイプのFacebookページにもこれから表現の修正が入っていくことになるでしょう。Facebook内のFacebookページを活用というコンテンツでも、多くの新旧Facebookページが紹介されています。
仕様の変更によって表現が変更されるページが沢山出てくるタイミングですので、表現方法に注目して見るのも面白いかもしれません。

この記事をシェアする
このサイトでは、利用状況の把握などのために、プライバシーポリシーに基づき、Cookieを使用してアクセスデータの取得・利用等を行います。