BiND for WebLiFE*5で作る魅せるFacebookページ

010

Chapter Section Sample Data Author

Text

Title

Chapter 2Chapter 5

Chapter 4Chapter 6

Chapter 3Chapter 1

BiND for WebLiFE*5 with Facebook

ソーシャルメディアとウェブサイトを繋ぐ意味Twitter、Facebook、Ustream……。世界中の人々とスピーディ、かつオープンに交流ができるこれらのインターネットメディアは多くの人を魅了し、最近ではビジネス面でも重要なものと言われています。では、ホームページはもう終わったものなのでしょうか？　いいえ、本書では改めて、ウェブサイトの重要性を振り返ることからはじめてみたいと思います。

宮崎綾子1 1

情報発信には、“ホーム”が必要

2010年はTwitterやUstreamが一気に流行し、2011年は、Facebookブームが巻き起こり、現在その勢いはさらに増すばかり。こういったサービスが使われるようになり、誰でも簡単に、「つぶやき」、「いいね !」や「リツイート」で気持ちや意見を親しい人や知り合いに、インターネット上で伝えあうことができるようになりました。これまではブログ、さらにさかのぼれば掲示板や手作りのホームページなど、根気のいる更新作業やホームページ制作のスキルがなければ「情報発信」できないといった時代は終わり、誰でも携帯電話やモバイルデバイスさえ持っていればインターネットで意見が交わせます。それほど、情報発信の敷居は下がってきました。TwitterやFacebookなどのソーシャルメディアは、その会話の内容もオープンに扱われるので、賛同を得たり応援したり、正しい方向へと導かれていったりと人間らしいコミュニティが形成されているのも魅力ですし、反響が反響を呼び、ときに、小さな声が遠くまで伝わる可能性をも秘めています。では、ソーシャルメディアがあれば、もうホームページは不要でしょうか？　いいえ、むしろ、より重要になっていくでしょう。ソーシャルメディアは道端で人々が会話をしているような状態で、交流の場です。でも、出会った人に自分の会社やお店のことをもっと知ってもらいたいならば、お招きする「ホーム」が必要です。あなた自身も、毎日、クチコミをもとにたくさんのホームページやブログを読んでいませんか？　つぶやきは、情報発信には重要ですが、本当に伝えたいことには、もっとガッシリとしたスペースや文字数、表現力が必要なのです。今後もホームページをより魅力的で新鮮に保ちつつ、ソーシャルメディアを上手に使ってあなたのファンを増やしていきましょう。

1.1

010


Text

Title

Chapter 2

Chapter 5

Chapter 4

Chapter 6

Chapter 3

Chapter 1


ソーシャルメディアとウェブサイトを繋ぐ意味Twitter、Facebook、Ustream……。世界中の人々とスピーディ、かつオープンに交流ができるこれらのインターネットメディアは多くの人を魅了し、最近ではビジネス面でも重要なものと言われています。では、ホームページはもう終わったものなのでしょうか？　いいえ、本書では改めて、ウェブサイトの重要性を振り返ることからはじめてみたいと思います。

宮崎綾子11

情報発信には、“ホーム”が必要

2010年はTwitterやUstreamが一気に流行し、2011年は、Facebookブームが巻き起こり、現在その勢いはさらに増すばかり。こういったサービスが使われるようになり、誰でも簡単に、「つぶやき」、「いいね !」や「リツイート」で気持ちや意見を親しい人や知り合いに、インターネット上で伝えあうことができるようになりました。これまではブログ、さらにさかのぼれば掲示板や手作りのホームページなど、根気のいる更新作業やホームページ制作のスキルがなければ「情報発信」できないといった時代は終わり、誰でも携帯電話やモバイルデバイスさえ持っていればインターネットで意見が交わせます。それほど、情報発信の敷居は下がってきました。TwitterやFacebookなどのソーシャルメディアは、その会話の内容もオープンに扱われるので、賛同を得たり応援したり、正しい方向へと導かれていったりと人間らしいコミュニティが形成されているのも魅力ですし、反響が反響を呼び、ときに、小さな声が遠くまで伝わる可能性をも秘めています。では、ソーシャルメディアがあれば、もうホームページは不要でしょうか？　いいえ、むしろ、より重要になっていくでしょう。ソーシャルメディアは道端で人々が会話をしているような状態で、交流の場です。でも、出会った人に自分の会社やお店のことをもっと知ってもらいたいならば、お招きする「ホーム」が必要です。あなた自身も、毎日、クチコミをもとにたくさんのホームページやブログを読んでいませんか？　つぶやきは、情報発信には重要ですが、本当に伝えたいことには、もっとガッシリとしたスペースや文字数、表現力が必要なのです。今後もホームページをより魅力的で新鮮に保ちつつ、ソーシャルメディアを上手に使ってあなたのファンを増やしていきましょう。

1 .1

011

Section 2Section 3

Section 5Section 6

Section 4Section 1

Chapter 1　ウェブサイト運営者のためのソーシャルメディア入門

本書でこれから扱っていくFacebookページは、SNSのFacebookで運営する交流ページで、ビジネスシーンでも注目されて、第2のホームページブームのようになり、インターネットニュースで話題にならない日はありません。Facebookからあなたのホームページへと繋げる「出会い」を作るには、Facebook

ページが効果的です。むしろ、Facebookでビジネスを考えるならばFacebookページはマストの存在です。また、SNS的な要素やホームページ的な要素、さらにはウェブアプリといった顔もあわせ持つFacebookページは、さまざまな運営のされかたが試されているところで、現在もっともワクワクするインターネットサービスです。凝ったデザインのページが追加できるのも魅力です。ホームページの運営をがんばりたい、より多くの人を集客したいと考える場合こそ、Facebookページをオープンしてみましょう（もちろん、小さなメディアとしてFacebookページだけを試したい！というのもアリだと思います）。本書では、Facebookページの運営方法、魅力的なFacebookページの制作について順を追って紹介していきます。そしてあなたのファンや顧客と繋がることで、さらなるホームページへの集客や、本業の活性化を達成させましょう。

Facebookページはファンと繋がるための接点1 .2

ソーシャルに向けて発信することで、これまで出会えなかった人たちにホームページを知ってもらえるチャンスが広がります。

012


Text

Title

Chapter 2

Chapter 5

Chapter 4

Chapter 6

Chapter 3

Chapter 1


世界でナンバーワンのSNS

F a c e boo kとはどんなもの？

Facebookをひとことで説明するなら「世界で最も利用者が多いSNS」ということになるでしょう。全世界で8億人がユーザー登録し、うち5億人がアクティブに利用※しています。日本でもすでに500万人以上のユーザーがいると見られています。そもそもSNSは、この後で詳しく書きますが、自分の身近な人と繋がるサービスなので、身近な人が入っているサービスに集まる傾向が強く、地域・国によって流行っているサービスにはバラツキがあります。特に言葉の壁が大きな東アジア圏では自国のSNS

が最も身近で、日本でもご存知のようにmixiがナショナルブランドのSNSとして2500

万人以上の利用者を抱えています。

本書の目標はビジネスの役に立つFacebookページを構築することですが、そのためにはまずFacebookというサービスがどういうものかを理解しておく必要があります。ここでは、Facebookをまだ使いはじめていない、またはアカウントを登録したばかりという方でもわかるように、Facebookの概要を駆け足で紹介したいと思います。

2.1

毛利勝久21

Facebookページの自分のプロフィール画面。写真、経歴、近況などが表示されます。

※2011年9月22日にサンフランシスコで開催されたFacebook主催の技術者向けカンファレンスf8で発表された。

1

013

Section 3Section 5

Section 6Section 4

Chapter 1　ウェブサイト運営者のためのソーシャルメディア入門Section 2

Section 1

そんな中でFacebookはワールドワイドに利用者を獲得し、グローバルブランドとしての地位を確立しています。映画化もされているのでご存知の方も多いでしょうが、Facebookはマーク・ザッカーバーグというハーバード大学の学生（当時）が、大学内ネットワークに全学生の写真付き名簿サービスを立ち上げたことに端を発します（ 2）。初期のFacebookは、大学が発行したメールアドレスを持っていなければ利用できない学生専用のサービスだったのです。それが徐々に利用者層と展開する国や地域を広げながら拡大を続け、2004年のスタートから10年も経たずに世界8億人にリーチしているのですから、驚異の成長性だと言えるでしょう。

Facebookを深堀りするまえに、SNSについて少し説明しておきましょう。SNSとは、ソーシャル・ネットワーキング・サービス（Social Network Service）の頭文字を取ったものです。最近では、Twi t te rのようなつぶやきサイト、あるいは各種のクチコミサイトやブログなどをまとめて「ソーシャルメディア」と呼んだりします。SNSは一般に、ユーザー登録した利用者だけが読み書きできる、会員制サイトの一種です。SNSに日記や写真を載せても、ブログとは違って世界中の誰でもが読めるわけではありません。自分のよく知った身近な人にだけ写真を公開したり、共通の趣味を持った仲の良い知り合いと情報を共有したり、会話を楽しんだりするサービスです。ネットはよくバーチャルの世界、仮想空間だと言われますが、SNSはそうではありません。現実の世界での友人・知人・趣味の同人・同窓生・同僚・家族といった社会的に繋がっている人たちと、そのままネットでも繋がります。これまでなら電話やメールなどで連絡を取り合っていた人とネットでも繋がって、会話したり情報を共有するのがSNSです。たとえば、これまでは年に1度の年賀状を交換する程度だった地元の友達でも、SNSを介せば日々の暮らしや故郷の様子もごく自然に入ってきます。仕事が忙しくて飲みに行けなくても、音楽仲間の間でどんなバンドが流行っているかわかります。親戚の子どもの成長に目を細めたり、ボランティア運動をはじめた友人を応援したり、SNSは現実の暮らしとリンクし、実の友人知人とより深く、または意外な一面を知り合える機会を得られます。

知っている人同士で繋がるソーシャル2.2

Hint

mixiはモバイルが中心

日本のSNSでは、mixiはFacebookの何倍ものユーザーを獲得しています。ところが、ニールセンのネット視聴率調査ではmix iが1,400万人、Facebookが1,100万人とそれほど大きな違いがありません（2011年9月の月間利用者数）。これはPC利用者の調査だからです。mix iでは月間に250億近いPVを誇りますが、実にその78％が携帯電話（スマートフォンではなく、いわゆるガラケー）からの利用です（mixiのIR資料より）。PCの世界に限れば、日本でもFacebookがmix iに肉薄しています。今後は、層の厚い携帯電話利用者層を取り込めるかどうかが普及の課題となるでしょう。

http://facebook.com/zuck映画『ソーシャルネットワーク』ですっかり有名になったFacebook創設者。

2

Chapter 5

064

Chapter 4

Chapter 6

Chapter 3

Chapter 1

Sample Data AuthorSection

Text

Title

Chapter

Chapter 2


12

1 .1

BiNDでの作業は、テンプレートを選ぶ［サイトシアター］（1）、サイト全体の設定や管理を行う［サイトエディタ］（2）、そしてページの編集を行う［ブロックエディタ］（3）の３つのステップに分かれます。その中でも、1つのページを要素ごとのブロックに分けて編集する方法は、BiNDの大きな特徴の1つです。これまでほかのホームページ作成ソフトを利用したり、HTMLを書いたりしたことがある人はBiNDの作法に最初はとまどうかもしれません。しかし、ブロック単位でページを組み立てるBiNDの考え方を理解すればスムーズに作業が進められるようになるでしょう。

BiNDのインターフェース

BiNDは、あらかじめ用意されたサイトテンプレートを元に、必要な箇所にテキストを入力したり、サンプルの画像をオリジナルの写真に置き替えたりすることで簡単にウェブページを作成できるのが特徴です。ここではBiNDによるFacebookページの制作を実践する前に、BiNDの基本的な使い方を解説します。

村田有紀

B iND5を使ったホームページ制作入門

BiNDで作成したウェブページ

Chapter 1

065

Section 7Section 6

Section 5Section 4

Section 3Section 2

Section 1Chapter 2　BiNDで簡単ウェブサイト制作

初めてBiNDを起動すると［新規サイトを作る］が開くので、ここでテンプレートを選びます。２回目以降は、［マイサイトを編集］が開きます。このタブを切り替えて新規作成や編集を開始します。また、［チュートリアルビデオ］では、BiNDの使い方や最新情報などを動画で見ることができます。

さまざまなタイプのテンプレートが揃っているBiNDですが、バージョン５からFacebookページ用のテンプレートと、BiND Serverを経由して直接Facebookページのアプリケーションを作る機能が新たに加わりました。また、B i N Dサイトには、［いいね ! ］ボタンやFacebookソーシャル・プラグインなどが簡単に埋め込めるため、Facebookページとメインサイト双方向の連携、運用が実現できます。

左カラムの［サイトマップ］は、編集するページを選択するほか、ページの表示／非表示、ディレクトリや階層の設定などを行います。右のメインブラウザは、編集モードへの切り替えが可能で、編集モード時にはページをブロックに分割して表示します。

サイトシアター

ブロックエディタ

Facebookページの作成にも対応

サイトエディタ

モードの切り替え

テンプレートのカテゴリーを選択する

画面の切り替え

各種設定ボタン

ページがブロックに分割される

サイトマップ

4

［サイトエディタ］で編集するブロックをダブルクリック、あるいは［BLOCK編集］ボタンをクリックして開きます。テキスト入力や画像の挿入はもちろん、SiGN ProやSYNCなどBiNDに付属する各種ツールも、この［ブロックエディタ］から呼び出します。

3

1 2

Chapter 2

Chapter 5

114

Chapter 4

Chapter 6

Chapter 3

Chapter 1


1 .3 BiNDでFacebook用のサイトを作成

1BiNDでサイトを作成する

BiNDでFacebookページのオリジナルページを作っていきましょう。B i N Dを起動して、［新しいサイトを作る］をクリックします。そして［Facebookページ］をクリックします。続いて確認画面が表示されるので［このカテゴリーで作る］をクリックします。

2

3

テンプレートを選択する

3種類のテンプレートから使うものを選びます。ここでは［P h o t o B o x］をクリックで選択します。

カラーを選択する

カラーバリエーションから好きなものを選択します。ここでは［White］を選択します。［このテンプレートを使用する］をクリックします。続いて保存先を確認するダイアログでローカルまたはD ro p b o xを任意に指定し、サイトを作成します。

Hint

テンプレートの数

テンプレートの数は、BiNDのバージョンによって異なります。図はプロフェッショナル版なので複数のFacebookページ用テンプレートがありますが、スタンダード版では付属しません。追加テンプレートが欲しい場合は、追加テンプレートの購入を検討するとよいでしょう。http://www.digitalstage.jp/bind/template/collection05.html

Chapter 1

115

Section 5Section 4

Section 3Section 2

Section 1Chapter 3　Facebookページを作成しよう

1 .4 BiNDでFacebookページのデザインを編集する

1BiNDサイトが作成される

BiNDサイトが作成されます。通常サイトとの違いを少し確認しておきましょう。Facebookページでは左右にメニューが表示されます。図の赤枠で表示された中央のエリアのみ編集可能です。その両側の「ウォール画像を編集する」や「F a c e b o o kページ公開までの手順」はダミーとなり編集はできません。

2

3

ページを編集する

［このページを編集する］をクリックして編集可能な状態にして、ページの内容を編集していきます。ここではまず、「Non-Fan（non fan .h tm l）」をサイトマップで選択します。［いいね ! ］ボタンを押すように訪れたユーザーに促すページです。1枚の画像で手早く作ります。

［ビルボード］エリアのブロックエディタを開く

ビルボードエリアのブロックを選択し、［編集］ボタンをクリックします。ブロックエディタが開いたらテンプレートに入っている画像を選択し、［S i G Nを起動する］ボタンをクリックします。

編集可能なエリア

「Non-Fan（nonfan.html）」を選択

クリックしてブロックエディタを開く

Chapter 1

Chapter 2

Chapter 3

Chapter 5

150

Chapter 4


Text

Title

Chapter 6


4

1.1

瀧上園枝BiND5SAMPLE/4_1/1

複数の写真と［スタンプ］を組み合わせて、スクラップブックのようなウェルカムイメージ画像を作成します。［フレーム］カテゴリの［スタンプ］を利用すると、ステッカーのようなイメージを表現することができます。複数の画像や［スタンプ］をランダムにレイアウトして、手作り感を演出します。彩度の低いカラーのみで構成すると、ノスタルジックな印象をより強めることができます。

スクラップブックのようなデザインを画像とシェイプの組み合わせでつくる

複数の画像を組み合わせる

SiGN Proを利用して、複数の画像を組み合わせたウェルカム画像を制作しましょう。それぞれの画像は、ランダムに貼り付けたようなイメージで、異なるサイズ・角度に設定します。また［スキャンライン］エフェクトを追加すると、ノスタルジックな印象の画像になります。写真のほかに［スタンプ］レイヤーを追加して文字と組み合わせて、日付ステッカーを貼ったスクラップブックのような印象に仕上げます。

スナップ写真をスクラップブックに貼り付けるようなイメージで、画像のサイズや角度を変えて組み合わせ、ウェルカムページ用の画像を制作します。SiGN Proに用意されているさまざまなかたちのオブジェクトを作成する機能の［スタンプ］を、日付スタンプのように利用します。

ウェルカムページ用メインビジュアルを制作する

Chapter 1

151

Chapter 1

Chapter 1

Section 2Section 3

Section 5Section 7

Section 6Section 8

Section 4Section 1

Chapter 4　Facebookページのデザインを充実させる

2

1.2

1

ブロックを選択して［ブロックエディタ］を開く

B i N Dのサイトシアターで［新規サイトを作る］をクリックして、［Facebookページ制作用ブランクページ］テンプレートを選択、B i N Dサイトを設定します。ページ編集モードに入ったら、［ビルボード］ブロックを選択し、［BLOCK編集］をクリックして［ブロックエディタ］を開きます。初期設定で挿入されているダミー画像は削除しておきます。※ここで選んだ［F a c e b o o k制作用ページブランクページ］は、B i N D 5プロフェッショナル版にのみ収録されています。ここでは、主に画像のみ加工するので、このFacebookページ用のテンプレートを使用しなくても、同様の作業を試すことができます。

使用する画像を用意する

B i N Dでの制作に入る前に、あらかじめ使用する画像を用意しておきます。旅先で撮影したスナップ写真のほか、和紙をデジカメで撮影した画像を背景として利用するために準備しました。

画像制作の準備

②［ビルボード］ブロックを選択

①クリック

③クリックして［ブロックエディタ］を開く

④［ブロックエディタ］のダミー画像を削除する

背景用の「和紙」画像

Chapter 1

Chapter 2

Chapter 3

Chapter 5

164

Chapter 4


Text

Title

Chapter 6


瀧上園枝

SiGN Proを使用して、カフェのFacebookページに掲載するプロフィール画像を制作します。［シェイプ］レイヤーで円形にマスクした写真と、背景色だけを設定した円形の［シェイプ］レイヤーを組み合わせてデザインします。Facebookページのプロフィール画像に登録したら、サムネールとして表示されるエリアをトリミング指定しておきます。

写真画像と文字やシェイプを組み合わせて縦長サイズの画像を作成し、F a c e b o o kページのプロフィール画像として設定する

プロフィール画像は、制作サイズに制限がありますが、スペースを有効活用するために縦長なものを採用すると面白いでしょう。ここでは、縦のスペースを有効に利用できるように写真をトリミングし、また、上部にロゴをあしらいます。

縦長のデザインを採用する3.1

プロフィール画像は、Facebookページを閲覧したときに最初に目に入る大切な要素です。どのタブを開いていても、左上のプロフィール画像は固定して表示されるため、Facebookページのイメージの「アイコン」ともなります。ニュースフィードに表示されるサムネール画像にもなるため、ページのタイトルが表示された構成にするとよいでしょう。

プロフィール画像を制作する

BiND5SAMPLE/4_3/4 3

Chapter 1

165

Section 1Section 2

Section 5Section 7

Section 6Section 8

Section 4Section 3


2

3.2

1

ブロックを選択して［ブロックエディタ］を開き

SiGN Proを起動する

あらかじめサンプル画像がレイアウトされている［ビルボード］ブロックを選択して、［BLOCK編集］ボタンで［ブロックエディタ］を開きます。［ブロックエディタ］ではサンプル画像を削除し、右サイドのメニューから［S i G N P ro］をクリックしてS iGN P roを起動します。

ウォール画像を編集するためのページを用意する

プロフィール画像やウォールに投稿するための写真など、ページ全体ではなく画像だけをBiNDやS iGN Proで作成したいときは、専用のページを利用しましょう。F a c e b o o kページを作成するときのテンプレートには、画像パーツを編集するための専用ページ［w a l l . h t m l］があらかじめ用意されています。テンプレートを選択してサイトの設定を行ったら、左サイドの［サイトマップ］から［Wa l l（w a l l .h tm l）］を選んで、［サイトエディタ］内に専用ページを表示します。

画像を準備する

①［ビルボード］ブロックを選択

②クリックして［ブロックエディタ］を開く

③サンプル画像を削除

④クリック

①クリック

②クリック

※ Facebook用テンプレートが無い状態でもSiGN Proを起動して、次ページの手順からの操作で同様な画像が作成できます。

Chapter 1

Chapter 2

Chapter 3

Chapter 5

178

Chapter 4


Text

Title

Chapter 6


瀧上園枝

テンプレート［PhotoBox

［Black］］を利用して、アマチュアバンドのFacebook

ページを制作します。You

Tubeで公開しているライブ風景の動画を埋め込み、バンドの音楽やイメージをPRできるページに構成します。ライブ動画は［いいね ! ］を押してくれた人だけが閲覧できるようにトップページは2種類制作し、公開時にそれぞれに向けた設定を行います。

Yo u T u b e動画やライブスケジュールコンテンツを掲載したF a c e b o o kページを作成する

毎日ユーザーがアクセスするプラットフォームである利点を活かし、B iND f o r

Facebookで、スケジュールを作成してみます。BiNDでは、テーブルパーツを使って美しい表組の編集が行えます。

スケジュールコンテンツを掲載したFacebookページ

アマチュアバンドのPR用Facebookページを制作します。YouTubeで公開している動画を埋め込んだページや、ライブスケジュールを掲載するページを構成します。特殊なコンテンツを掲載するときは、専用のパーツを利用します。

アマチュアバンドのF a c e b o o kページを制作する

BiND5SAMPLE/4_5/

5.1

4 5

※ ここで使用するFacebookページ用のテンプレートは、BiND5プロフェッショナル版にのみ収録されています（スタンダード版には収録されていません）。

Chapter 1

179

Section 1Section 2

Section 3Section 7

Section 6Section 8

Section 4Section 5


「BiNDサイト」を作成する

2ビルボードをデザインする

最初に、トップページを編集します。ページ背景や余白などはテンプレートの設定をそのまま使用します。［このページを編集する］ボタンで編集モードに切り替え、［ビルボード］を選んで［BLOCKを編集］をクリックします。［ブロックエディタ］が開いたら、SiGN Proで作成された画像パーツを選択し、複数の画像を組み合わせたメインビジュアルを作成します（1 5 8ページ参照）。画像の編集が終了したらS iGN Proを終了して［ブロックエディタ］に戻り、ダミーとして入力されている文字をバンドに関する紹介文に変更しておきます。ビルボードエリアの編集が終了したら、［適用］ボタンでページに適用し、［ブロックエディタ］を閉じます。

1サイトのテンプレートを選択してサイトを設定する

［サイトシアター］で［Facebookページ］を選択して、新規サイトを制作します。テンプレート一覧から［PhotoBox（４）］を選び、続いて表示されるカラーバリエーションから［Pho toBox［B lack］］を選択してテンプレートに指定します。［サイトエディタ］が開いたら、ページコンテンツの編集に入る前に［設定］ボタンで表示されるポップアップパネルで、サイト名やサーバーなどを設定しておきます。

5.2

③画像の作成については158ページを参照

④ダミーのテキストを紹介文に変更

①クリック

①クリック

②クリック

③クリック

②クリック

Chapter 1

Chapter 2

Chapter 3

Chapter 5

186

Chapter 4


Text

Title

Chapter 6


ここでは、架空のテーマパーク「ななきちランド」のFacebookページに、さまざまなページをBiNDで追加しています。Facebookページには以下のコンテンツが盛り込まれています。

作成するページの構成

イベント満載のアミューズメント施設のF a c e b o o kページBiND Serverの機能を利用し、Facebookページに、［いいね!］をクリックする前と後では別ページが表示される「ウェルカムページ（ファンゲート）」を用意しましょう。この機能を使うと、［いいね!］をクリックしたユーザーのみに、特別情報（クーポンやお知らせなど）を表示できるようになります。また、各ページごとに［いいね ! ］機能を盛り込んだり、Googleマップなど、外部サービスと連動を盛り込んだFacebookページの制作例も紹介します。

ななきちBiND5SAMPLE/4_6/

6.1

4 6

［いいね！］クリック前のトップページ。

［いいね !］をクリックした直後にページが変化、［いいね !］をした後、2回目以降はさらに別のページを表示

［いいね！］クリック直後のトップページ。お得な情報を表示。

ファンになった後の通常トップページ。

ウェルカムページファン後ページ

ファン前ページ


Chapter 1

187

Section 1Section 2

Section 3Section 5

Section 7Section 8

Section 4Section 6


ウェルカムページ（トップページ）の設定6.2

1テンプレートを選択する

まず、Facebookページ用のテンプレートを用意します。B i N Dを起動して、［サイトシアター］から［新規サイトを作る］を選択し、［Facebookページ］をクリックします。ここでは、［F a c e b o o kページ制作用ブランクページ］からサイトを作成します。

②クリック

［Facebookページ］［Facebookページ制作用ブランクページ］

Googleマップとの連動を行います。

各詳細ページに［いいね！］ボタンを設置します。

アトラクショントップページ

クーポンページイベントページアクセスページ

各アトラクション詳細

①クリック

Chapter 1

Chapter 2

Chapter 3

Chapter 5

196

Chapter 4


Text

Title

Chapter 6


4 7

架空の雑貨屋「nanakichi」のFacebookページを制作します。このFacebookページには以下のコンテンツが盛り込まれていますが、このSectionでは、特にカートの設置とお問合せフォームの設置を中心に紹介します。

7.1 ページ構成の確認

Facebookページからホームページまで遷移せずとも、スペシャル製品などをFacebookページ限定で売りたい場合があるかもしれません。ここでは、BiND Serverのショピングカート機能を利用し、ショッピングカートが設置されたFacebookページを制作します。これにより、Facebookページから買い物が可能になります。また、BiNDの機能を使い、お問合せフォームの設置したFacebookページを作成していきます。

カートやお問合せページのある雑貨ショップ

ななきちBiND5SAMPLE/4_7/

ファン後ページファン前ページウェルカムページ

［いいね！］クリック前のトップページ。［いいね！］クリック直後。ユーザーに対して割引クーポンを表示させています。

通常のトップページ。


Chapter 1

197

Section 1Section 2

Section 3Section 5

Section 6Section 8

Section 4Section 7


1テンプレートを選択する

F a c e b o o kページ用のテンプレートを用意します。［サイトシアター］から［新規サイトを作る］を選択し、［Facebookページ］をクリックします。今回は［Facebookページ制作用ブランクページ］を利用して制作していきます。ウェルカムページの制作については、このSectionでは省略します。

7.2 テンプレートからサイトを作成する

ショッピングページお問合せページ

Chapter 1

Chapter 2

Chapter 3

220

Chapter 4


Text

Title

Chapter 6

Chapter 5


Facebookの個人ウォールまたはFacebookページの投稿を、Twitterにそのまま転送することができます。同じ内容の発言をFacebookとTwitterの両方に一度に投稿できるので、より多くのユーザーの目に触れることになります。

1

2

連携を開始する

FacebookからTwitterに連携するには、右のページで設定します。個人アカウントおよび管理権限があるFacebookページが一覧表示されるので、Twi t te rと連携させたいFacebookページ（または個人アカウント）の［Twi t te rとリンク］ボタンをクリックします。それぞれに別々のTwi t te rアカウントを連携させることもできます。

Twitterとリンクする

リンクする Tw i t t e rアカウントでFacebookを認証します。右上のTwi t te rアカウントを確認して、問題なければ［連携アプリを認証］をクリックします。アカウントが違う場合にはログインし直しが必要です。Twi t te rにログインしていなければ、先にログインフォームが表示されます。

Facebook からTwit ter に連携する

外部のコンテンツと連携する

Facebookページでオープングラフを利用する簡単な例として、外部のサービスと連携させてみましょう。いま最もよく利用されているTwit terとの連携方法を解説します。Twit terとはつぶやきを同期できますが、FacebookからTwit ter、Twit terからFacebookの双方向を取り上げます。また、ブログとの連携についても紹介します。

2.1

毛利勝久25

http://www.facebook.com/twitter/

Section 3Section 4

221

Section 1Section 2

Chapter 5　Facebookページをパワーアップする

Hint

Twitterの文字数制限である140文字を超える発言は転送されません。また、個人ウォールの場合は共有範囲が「公開」に設定されている投稿だけがTwitterに転送されます（Facebookページの場合はすべての投稿が公開されるので気にしなくてかまいません）。

3

4

転送する投稿の種類を選択する

Tw i t t e rアカウントで認証が完了すると、元のリンク画面に戻ります。「FacebookプロフィールがTwit terとリンクされました」と表示されていれば成功です。上手くいかないときは、Twitter側の連携アプリでFacebookを削除してやり直してみてください。

ここでは転送するコンテンツの種類を選択できます。デフォルトではすべてのコンテンツがシェアされます。リンクを投稿した場合や、写真やノートのようにFacebook内に置かれるコンテンツは、fb.meの短縮ドメインでシェアされます。

投稿してみよう

リンクしたFacebookページに戻り、近況を投稿してみましょう。図のようにまったく同じ文面がTwi t te rにも投稿されます。

Chapter 1

Chapter 2

Chapter 3

230

Chapter 4


Text

Title

Chapter 6

Chapter 5


チェックインとクーポンの活用

スマートフォンと位置情報を利用して、訪ねたお店や遊びに行った場所でチェックインして知り合いと共有できるサービスが増えています。Facebookにもスポットという機能があり、さらにチェックインしたショップや飲食店で割引や特典が付くクーポンを利用できます。クーポンは手続きをすれば個人でも発行できます。

毛利勝久45

スポットの仕組みと所有権の取得

Facebookのスポットは、位置情報が付け加えられたFacebookページと考えるのがわかりやすいでしょう。携帯電話やスマートフォンの「スポット」メニューから位置情報を登録すると、付近のスポットがリストアップされ、その中から自分が今いる場所を選んでチェックインします。チェックインした情報は自分のウォールに掲載されます。コメントや写真を付けたり、また一緒に同じ場所にいる友達をタグ付けして投稿することもできます（ 1）。

チェックインしてクーポンを利用

Facebookでチェックインできるスポットには、ただ位置情報が登録されているだけでなく、その店舗やショップのオーナーによって運営管理されているスポットがあります。そういう場所では、サービスの1つとしてチェックインしてくれた人にクーポンを提供することができます。Facebookページを運用している事業者にとっては、クーポンを提供することで来客が見込め、ファンとの繋がりを深めることができます。ここではクーポンを発行するまでの手順を解説します。まず、店舗や事業所のスポットの所有権を取得します。

4.1

チェックインクーポンの作成例1

Section 3

231

Section 1Section 2

Section 4Chapter 5　Facebookページをパワーアップする

スポットを作成する4.2

1

2

クーポンを提供するには、まず自分の店舗・事業のスポットが必要です。自分の店のある場所で、スマートフォンからFacebookで位置登録してみます。すでにスポットがあれば、それをそのまま利用します。見つからなければ、新しく追加します。スポットを追加する際には、スマートフォンや携帯電話からFacebook にアクセスしてチェックインの画面の［＋］ボタンなどから、場所の確認と、名前、説明を入力します。

スポットの所有権申請

スポットが用意できたら、続いてその所有権を取得します。パソコンからFacebookにログインしてスポット名を検索し、ページを表示します。自分がこれから管理しようとするスポットの持ち主に違いなければ、左サイドのメニューにある［このスポットのオーナーの方］または［所有者の方をご存じですか?］をクリックし、スポットのオーナー申請を開始します。「オーナー（または公式代理人）であることを保証します」にチェックを入れて［認証を実行］します。

Hint

チェックインしたりスポットを作成する手順はスマートフォンから行いましたが、スポットの所有権の取得やその後の管理・運営はPCでできます。

3事業に関する追加情報を入力

スポットの認証の最初の手順は、住所や電話番号など事業に関する追加情報の入力です。正確に入力して［続行］をクリックします。

Chapter 2

236

Chapter 4


Text

Title

Chapter 6

Chapter 3

Chapter 1

Chapter 5


ソーシャルへの最適化、改善のポイント

B iNDサイトをソーシャルに対応させる

ソーシャルメディア上でクチコミしやすいページを考えるとき、参考にしたいのはブログです。ソーシャル上では毎日、さまざまなシチュエーションで、「この記事が面白いよ（＋その記事の元リンク）」、「新しい記事があるよ（更新日付と記事の概要文、画像）」と、サイトの一部分を切り取って、人から人へと伝えられます。ブログはもともとが単純なページの積み重ねなので、それが一番やりやすい作りになっています（その一方で「ホームページらしさ」には乏しいのですが）。運営中のホームページで次のようなところがあれば、リニューアルをお勧めします。

1ページにいくつもの話題が含まれている

ホームページでは、多様なレイアウトが可能なので、1ページにさまざまな話題が含まれていることが多くあります。ホームページのトップから閲覧していけば、それは問題のないことですが、ソーシャル上でそのページだけを切り取って紹介されると、URL

をたどってきた読者は、どの話題について推薦者が語っているのかが、ひと目でわかりません。Twitterなどではよくあることです（下図）。

ソーシャルメディアは人々の日常の中にある、生活に密着したメディアです。もしもその隙間にあなたのFacebookやTwitterが常に存在するならば、その人にとっては、テレビコマーシャルの影響力にも勝るメディアチャンネルになってきます。ここで一度、あなたのホームページとソーシャルの親和性を高めるためのメンテナンスを考えてみましょう。

1 .1

宮崎綾子16

A「この製品とっても使いやすそう！」＋URL


B「製品1～3のどれのこと言ってるんだろう…」

B「いいね！みんなにも知らせよう！」

製品1 製品1

製品2

製品3

ソーシャルからアクセス

改善前改善後

ソーシャルからアクセス

Section 2Section 3

237

Section 1Chapter 6　BiNDサイトとソーシャルを繋ぐ

もしも、なんとなく収まりがいいから、という理由で複数の製品をまとめて掲載したり、「地図と住所」と「お店のコンセプト」を1つのページにしているならば、読者自体は「どちらか」を見たいので分けてくれることを望むでしょう（特にモバイルでのアクセス時はそうです）。ぜひ改善をしてみましょう。ただし、複数の記事やモノを編集的な視点で1つにまとめること自体は、とてもよいことです。「あったかい冬を過ごすためのお勧め新製品」というものを1ページで済ませているならば、そのページは特集扉として残しつつ、各製品の紹介ページも作りましょう。RSSを付けるなら、新着情報やニュースなども、できれば個別ページを設けるべきです。

スマートフォンやケータイへ配慮する

ソーシャルメディアを使えば使うほど、モバイルでの利用が上がってくるということをみなさんも実感していると思います。その中で、人にお勧めされたページが iPhoneやiPadでは開けなかった、ページが重すぎて表示する前に電車が発車してしまい見る気をなくした……などという体験はありませんか。ソーシャル時代のホームページとしては、なるべくさまざまなデバイスで無理なく閲覧できることを配慮しておきたいものです。ケータイ（ガラケー）についてはまだスマートフォン全体よりも利用者数がずっと多いので、完全に無視するというのは難しいところ。一方で、スマートフォンユーザーは、ケータイユーザーの何十倍もインターネットにアクセスし、また利用者は今後も増えるので何らかの配慮は絶対に必要です。BiND

でできる改善は次のような点です。

Flashや重いデータを直接貼り付けないiPhoneではほとんどのウェブページがそのまま閲覧できますが、F lash P layerが使えません。そのためFlashを使ったパーツはなくしておきましょう。BiNDのSHiFTはFlashなしで再生できるのがメリットですが、大きなデータなどは場合によりスマートフォンではレイアウトが崩れるので、モバイルを意識する場合は使う頻度を検討します。また、携帯電話網でもダウンロードしやすいように、動画や重い画像を直接貼り付けるのは避けます。

製品1概要製品1概要製品1

製品2

製品3製品2概要製品3概要

製品3概要製品4概要

冬向け製品特集エコ製品特集個別のページがあれば、クチコミされた際の対象が明確になるだけでなく、さまざまな切り口でそのページへ繋げることができます。


B 「エコ製品が沢山そろってるよ！」＋URL

Chapter 2

Chapter 5

Chapter 4

Chapter 3

Chapter 1

248

Chapter 6


Facebook L ike Box で友達の顔を表示する

LikeBoxは、Facebookページにすでに友達が「いいね！」している場合に、その顔をサイトにアクセスした際に表示させる機能です。Facebookページへの集客方法の1つとして役立ちます。

3.4

1

3

2

挿入する場所の確認

BiNDのサイトエディタで、Likeboxを設定する場所を確認します。ブロックを選択すると、ブロックサイズが表示されます。幅の数値を確認しておきましょう。ここでは「w262」のサイドバーに設定していきます。

SYNCで設定する

SYNCが起動したら、Like Boxで「いいね！」させるFacebookページのURLを入力します。独自URLを設定していない場合は少し長くはなりますが、問題はありません。Facebookページのトップを表示した状態のURLをコピー＆ペーストします。［次へ］をクリックします。

［FacebookL ikeBox］ボタンをクリック

BiNDのサイトエディタで、Likeboxを挿入するブロックのブロックエディタで［FacebookLikeBox］ボタンをクリックします。

①幅を確認

②ブロックを開く

クリック

Hint

ユーザーネームは、［基本データ］の［ユーザーネーム（ユニークURL）］欄の［このページのユーザーネームを作成しますか？］から作成ができます。

249

Section 1Section 2

Section 3Chapter 6　BiNDサイトとソーシャルを繋ぐ

お知らせ機能を使ってまとめてつぶやく

BiNDの更新を行った際に表示されるダイアログに「最新のお知らせをつぶやきますか？」があります。このSocia l Connect機能では、Twitter、Facebook、mixiの各アカウントを登録しておき、それぞれのメディアにサイト更新のお知らせを一気に流すことができます。どのメディアに流すかも選べるので、内容によって使い分けしてみましょう。また、Facebookページには直接投稿できません。mixiについては

3.5

4

5

ボックスのデザインを調整する

［オプションの設定］に移ります。右側にプレビューが表示されるので調整を行いましょう。幅は、L ike boxの幅です。サイドバーの幅に合わせて設定します。50px単位で表示される顔の数が変わってくるので、200px台では3人、250px台では4人並んで表示されます。調整しましょう。横長のデザインにして、メインのブロックに配置してもよいでしょう。設定変更後、［次へ］で確認画面に移り、［適用］をクリックします。

Like BOXを確認する

ブロックエディタに戻り、［適用］をクリックしてサイトへの挿入を完了します。ただし、挿入結果は、サイトエディタ上、またはプレビューで確認することはできません。確認するには、アップロードしてサーバーのデータを更新しましょう。

Hint

Social Connectアプリは単体で動作するので、サイト更新に関係なくまとめてつぶやくツールとしても活用できます。

BiND for WebLiFE*5で作る魅せるFacebookページ

Documents

Transcript of BiND for WebLiFE*5で作る魅せるFacebookページ