「ソーシャルカタログ」と名付けられたトヨタ・ハチロクのブランドサイト

このエントリーをはてなブックマークに追加

読了時間:5分

このブログでは、企業のウェブサイトをファンが集まるメディアとして活用している事例を取り上げていきます。ファンを集めるウェブサイトに散りばめられた仕掛けは、ウェブデザインやプログラミングによってどのように実現されているのか。その技術を研究します。

初回は、トヨタ・ハチロクの「ソーシャルすぎる」ウェブサイトです。

トヨタ・ハチロクサイト

トヨタ・ハチロクサイト

トヨタ・ハチロクは、2011年の東京モーターショーでプロトタイプが公開され話題となった、小型FRスポーツカー。スバルとの共同開発によるFR・水平対向4気筒自然吸気エンジンを世界で初めて搭載したクルマとしても、ファンからの注目を集めています。

そんな先進的なトヨタ・ハチロクのブランドサイトをひとことであらわすと「ソーシャルカタログ」です。

 

トヨタ・ハチロクサイトの特徴

1) 各コンテンツのサムネイル画像に「いいね!」数や、ファンのコメントを表示させている。

各コンテンツのサムネイル画像に「いいね!」数や、ファンのコメントを表示させている。

各コンテンツのサムネイル画像に「いいね!」数や、ファンのコメントを表示させている。

2) サイト全体の「いいね!」数ランキングをグローバルナビゲーションよりも目立つ位置に配置している。

サイト全体の「いいね!」数ランキングをグローバルナビゲーションよりも目立つ位置に配置している。

サイト全体の「いいね!」数ランキングをグローバルナビゲーションよりも目立つ位置に配置している。

 

 

 

 

 

 

 

 

 

 

 

 

 

3) 各コンテンツの「いいね!」数に応じて、サムネイル画像の大きさを変化させている。

各コンテンツの「いいね!」数に応じて、サムネイル画像の大きさを変化させている。

各コンテンツの「いいね!」数に応じて、サムネイル画像の大きさを変化させている。

 

では、このようなユニークな仕掛けを実現するために用いられているウェブデザインやプログラミングの技術をご紹介します。

 
 

各コンテンツのサムネイル画像に「いいね!」数や、ファンのコメントを表示させる。

これを実現するには、大きく2つの方法があります。「プラグインを利用する方法」と「手動で設置する方法」です。

・プラグインを利用する方法:

これは自社サイトにWordpressやMovable TypeなどのCMSを利用している場合に使います。それぞれのCMSのプラグインを検索すれば容易に見つけられるでしょう。ここではWordpressのいいね!プラグイン「Facebook Comment For WordPress」を紹介しておきます。弊社サイトでも使用しているプラグインです。各記事にいいね!ボタンとコメントを挿入できます。

Wordpressのいいね!プラグイン「Facebook Comment For WordPress」

Wordpressのいいね!プラグイン「Facebook Comment For WordPress」

 

 

 

 

 

 

 

以下の記事が参考になります。
 
- WordPressにFacebookコメントプラグインを設定する方法
 
- WordPressのプラグイン「Facebook Comment For WordPress」のインストール&追加方法(動画)

 

・手動で設置する方法:

キャンペーンページやカスタマイズしたトップページにいいね!ボタンを導入するときなどには、手動で設置することがあります。この場合はfacebook側でテンプレートを用意しているのでそれを使います。

- Like Button

- Comments

 

また、facebookが用意しているいいね!ボタンではなく、カスタマイズしたいいね!ボタンを使うこともできます。こちらの記事に方法が詳しく書かれているのでご参照ください。

- Facebookの「いいね!」ボタンをオリジナルデザインに変更する

 

 

サイト全体の「いいね!」数ランキングをグローバルナビゲーションよりも目立つ位置に配置する。

ここでは「いいね!」数ランキングをつくる仕組みを解説していきます。「いいね!」の情報の取り方と、それによって取得出来る情報の種類を書きます。

・取得する方法

情報を取得する方法は2種類あります。Graph APIを使用する方法とFQLを使用する方法です。Graph API、FQLとはfacebookから提供されている情報の種類です。それぞれ参考記事を紹介しておきます。

- 【Graph API】2011年9月版 Facebookの「いいね!」ボタンが押された回数を取得する方法

- 【FQL】FQLで特定のページの「いいね!」ボタンが押された回数などを取得する方法

 

・取得出来るいいね!の情報

次に取得出来る情報です。それぞれ見ていきます。

【Graph API】Graph APIでは以下の情報がJSON形式で返ってきます。

- いいね!を押された回数

- コメント数

【FQL】FQLでは以下の情報を検索して取得できます。

- ユーザがFacebook上でシェアした回数

- ユーザがページをLikeした回数

- シェア時に足したコメント数

- ユーザがURLをシェア、Like、もしくはコメントした総数

 

下記記事が参考になります。

Facebook開発者向けドキュメントの日本語訳とTips

 

実際にランキングを作成するときは、FQLを使うのがいいかもしれません。サイト内でいいね!数が0以上の記事を拾ってきて、それをソートすれば出来ると思います。

また、それぞれのいいね!からではどんな属性の人がいいね!をクリックしたかまでは判定できません。ただし、ページ単位ではなく、サイト単位であれば可能です。ちょっと本題からそれてしまいますが、あまり知られていないと思うので紹介しておきます。

 

・サイトごとのいいね!から取得できる情報

こちらは非常に簡単です。Facebookのインサイト機能を使います。自分で行う必要はなく、Facebookが勝手にやってくれます。「インサイト」で知ることのできる主ないいね!の属性は以下です。

-「いいね!」ボタンCTR(「いいね!」数、コメント付「いいね!」数)

-「いいね!」記事CTR

- 記事への反応(記事が「いいね!」された数、コメントされた数)

- 人口統計データ(年齢・性別、言語、国)

- 人気のページ(指定期間内のトップ10位まで)

以下の記事が参考になります。

- 【Facebook】OGPを設定したら、「インサイト」でデータ解析

Facebookインサイト

Facebookインサイト

 

 

 

 

 

 

 

 

 

 

 

各コンテンツの「いいね!」数に応じて、サムネイル画像の大きさを変化させる。

ここまで来れば、あとは取得されたいいね!数に応じて、javascriptなどで動的に大きさを変化させてあげればできます。javascriptを使う場合、原理としては下記記事のように要素を指定してリサイズしてあげます。

- jQuery :: 画像を指定サイズにリサイズして表示する

 

企業のサイトは通常、企業側が打ち出したいコンテンツを訴求する場所。しかしトヨタ・ハチロクのサイトは、これとは逆の発想で、「利用者の声」を前面にしているところに新しさがあります。これはトヨタ自身が、自社ブランドに対して自信があることの裏返しなのかもしれません。

ソーシャルメディアと連動させるのではなく、自社のウェブサイトそのものをソーシャル化し、ファン同士のコミュニケーションを後押ししてみてはいかがでしょうか。

 

■ 関連リンク

J-CAST会社ウォッチ / ウェブサイト拝見 トヨタ・ハチロクの「ソーシャルすぎる」ウェブサイトに未来の予感

トヨタ・ハチロクサイト

 

 

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ