BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
Text
Section
1
Sample Data
1
̶̶
Author
宮崎綾子
ソー シ ャ ルメデ ィアと ウェブサイトを繋ぐ意味 Twitter、Facebook、Ustream……。世界中の人々とスピーディ、かつオープンに交流が
Chapter 2
できるこれらのインターネットメディアは多くの人を魅了し、最近ではビジネス面でも重要 なものと言われています。では、ホームページはもう終わったものなのでしょうか？ いいえ、 本書では改めて、ウェブサイトの重要性を振り返ることからはじめてみたいと思います。
Chapter 3
1.1
情 報 発 信には 、 ホーム が 必 要 2010 年は Twitter や Ustream が一気に流行し、2011 年は、Facebook ブームが巻き 起こり、現在その勢いはさらに増すばかり。こういったサービスが使われるようになり、 誰でも簡単に、 「つぶやき」 、 「いいね ! 」や「リツイート」で気持ちや意見を親しい人や知 り合いに、インターネット上で伝えあうことができるようになりました。
Chapter 4
これまではブログ、さらにさかのぼれば掲示板や手作りのホームページなど、根気のい る更新作業やホームページ制作のスキルがなければ「情報発信」できないといった時代 は終わり、誰でも携帯電話やモバイルデバイスさえ持っていればインターネットで意見 が交わせます。それほど、情報発信の敷居は下がってきました。
Twitter や Facebook などのソーシャルメディアは、その会話の内容もオープンに扱わ れるので、賛同を得たり応援したり、正しい方向へと導かれていったりと人間らしいコ ミュニティが形成されているのも魅力ですし、反響が反響を呼び、ときに、小さな声が Chapter 5
遠くまで伝わる可能性をも秘めています。 では、ソーシャルメディアがあれば、もうホームページは不要でしょうか？ いいえ、 むしろ、より重要になっていくでしょう。ソーシャルメディアは道端で人々が会話をし ているような状態で、交流の場です。でも、出会った人に自分の会社やお店のことをもっ と知ってもらいたいならば、お招きする「ホーム」が必要です。あなた自身も、毎日、 クチコミをもとにたくさんのホームページやブログを読んでいませんか？ つぶやきは、 情報発信には重要ですが、本当に伝えたいことには、もっとガッシリとしたスペースや
Chapter 6
文字数、表現力が必要なのです。 今後もホームページをより魅力的で新鮮に保ちつつ、ソーシャルメディアを上手に使っ てあなたのファンを増やしていきましょう。
010
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
1
Title
Section
1
Sample Data
̶̶
Author
宮崎綾子
ソ ーシャルメデ ィアと ウ ェブサイトを繋ぐ意味
Text
Twitter、Facebook、Ustream……。世界中の人々とスピーディ、かつオープンに交流が
Chapter 2
できるこれらのインターネットメディアは多くの人を魅了し、最近ではビジネス面でも重要 なものと言われています。では、ホームページはもう終わったものなのでしょうか？ いいえ、 本書では改めて、ウェブサイトの重要性を振り返ることからはじめてみたいと思います。
Chapter 3
1.1
情 報 発 信には 、 ホーム が 必 要 2010 年は Twitter や Ustream が一気に流行し、2011 年は、Facebook ブームが巻き 起こり、現在その勢いはさらに増すばかり。こういったサービスが使われるようになり、 誰でも簡単に、 「つぶやき」 、 「いいね ! 」や「リツイート」で気持ちや意見を親しい人や知 り合いに、インターネット上で伝えあうことができるようになりました。
Chapter 4
これまではブログ、さらにさかのぼれば掲示板や手作りのホームページなど、根気のい る更新作業やホームページ制作のスキルがなければ「情報発信」できないといった時代 は終わり、誰でも携帯電話やモバイルデバイスさえ持っていればインターネットで意見 が交わせます。それほど、情報発信の敷居は下がってきました。
Twitter や Facebook などのソーシャルメディアは、その会話の内容もオープンに扱わ れるので、賛同を得たり応援したり、正しい方向へと導かれていったりと人間らしいコ ミュニティが形成されているのも魅力ですし、反響が反響を呼び、ときに、小さな声が Chapter 5
遠くまで伝わる可能性をも秘めています。 では、ソーシャルメディアがあれば、もうホームページは不要でしょうか？ いいえ、 むしろ、より重要になっていくでしょう。ソーシャルメディアは道端で人々が会話をし ているような状態で、交流の場です。でも、出会った人に自分の会社やお店のことをもっ と知ってもらいたいならば、お招きする「ホーム」が必要です。あなた自身も、毎日、 クチコミをもとにたくさんのホームページやブログを読んでいませんか？ つぶやきは、 情報発信には重要ですが、本当に伝えたいことには、もっとガッシリとしたスペースや
Chapter 6
文字数、表現力が必要なのです。 今後もホームページをより魅力的で新鮮に保ちつつ、ソーシャルメディアを上手に使っ てあなたのファンを増やしていきましょう。
010
Chapter 1 ウェブサイト運営者のためのソーシャルメディア入門
Section 1 Section 2 Section 3 Section 4
ソーシャルに向けて発信するこ とで、これまで出会えなかった 人たちにホームページを知って もらえるチャンスが広がります。
Section 5
1.2
F a c e b o o kページはファンと繋 がるための 接 点
本書でこれから扱っていく Facebook ページは、SNS の Facebook で運営する交流ペ ージで、ビジネスシーンでも注目されて、第 2 のホームページブームのようになり、イ Section 6
ンターネットニュースで話題にならない日はありません。
Facebook からあなたのホームページへと繋げる「出会い」を作るには、Facebook ページが効果的です。むしろ、Facebook でビジネスを考えるならば Facebook ペー ジはマストの存在です。 また、S N S 的な要素やホームページ的な要素、さらにはウェブアプリといった顔もあ わせ持つ F a c e b o o k ページは、さまざまな運営のされかたが試されているところで、 現在もっともワクワクするインターネットサービスです。凝ったデザインのページが追 加できるのも魅力です。ホームページの運営をがんばりたい、より多くの人を集客した いと考える場合こそ、Facebook ページをオープンしてみましょう（もちろん、小さな メディアとして Facebook ページだけを試したい！というのもアリだと思います） 。 本書では、Facebook ページの運営方法、魅力的な Facebook ページの制作について 順を追って紹介していきます。そしてあなたのファンや顧客と繋がることで、さらなる ホームページへの集客や、本業の活性化を達成させましょう。
011
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
1
Title
Section
Sample Data
2
̶̶
Author
毛利勝久
F a c e b o o k とはどんなもの？
Text
本書の目標はビジネスの役に立つF a c e b o o k ページを構築することですが、そのためには
Chapter 2
まずFacebookというサービスがどういうものかを理解しておく必要があります。ここでは、 Facebookをまだ使いはじめていない、またはアカウントを登録したばかりという方でもわ かるように、Facebookの概要を駆け足で紹介したいと思います。
Chapter 3
2.1
世 界で ナンバーワンのS N S Facebook をひとことで説明するなら「世界で最も利用者が多い SNS」ということに なるでしょう。全世界で 8 億人がユーザー登録し、うち 5 億人がアクティブに利用※して います。日本でもすでに 500 万人以上のユーザーがいると見られています。 そもそもSNSは、この後で詳しく書きますが、自分の身近な人と繋がるサービスなので、
Chapter 4
身近な人が入っているサービスに集まる傾向が強く、地域・国によって流行っている サービスにはバラツキがあります。特に言葉の壁が大きな東アジア圏では自国の S N S が最も身近で、日本でもご存知のように mixi がナショナルブランドの SNS として 2500 万人以上の利用者を抱えています。
Chapter 5 Chapter 6
1 F a c e b o o k ページの自分のプロ フィール画面。写真、経歴、近況 などが表示されます。 ※2011年9月22日にサンフランシスコで開催されたFacebook主催の技術者向けカンファレンスf8で発表された。
012
Chapter 1 ウェブサイト運営者のためのソーシャルメディア入門
Section 1
そんな中で Facebook はワールドワイドに利用者を獲得し、グ ローバルブランドとしての地位を確立しています。映画化もさ れているのでご存知の方も多いでしょうが、Facebook はマー ク・ザッカーバーグというハーバード大学の学生（当時）が、 大学内ネットワークに全学生の写真付き名簿サービスを立ち上
Section 2
げたことに端を発します（ 2 ） 。 初期の Facebook は、大学が発行したメールアドレスを持って いなければ利用できない学生専用のサービスだったのです。そ れが徐々に利用者層と展開する国や地域を広げながら拡大を続 け、2004 年のスタートから 10 年も経たずに世界 8 億人にリー
2.2
2
http://facebook.com/zuck 映画『ソーシャルネットワーク』ですっかり有 名になったFacebook創設者。
知っている人 同士で 繋 がるソーシャル
Section 4
Facebook を深堀りするまえに、SNS について少し説明しておきましょう。SNS とは、
Section 3
チしているのですから、驚異の成長性だと言えるでしょう。
ソーシャル・ネットワーキング・サービス（Social Network Service）の頭文字を取 ったものです。最近では、Tw i t t e r のようなつぶやきサイト、あるいは各種のクチコミ サイトやブログなどをまとめて「ソーシャルメディア」と呼んだりします。
S N S は一般に、ユーザー登録した利用者だけが読み書きできる、会員制サイトの一種 Section 5
です。S N S に日記や写真を載せても、ブログとは違って世界中の誰でもが読めるわけ ではありません。自分のよく知った身近な人にだけ写真を公開したり、共通の趣味を持 った仲の良い知り合いと情報を共有したり、会話を楽しんだりするサービスです。 ネットはよくバーチャルの世界、仮想空間だと言われま すが、SNSはそうではありません。現実の世界での友人・ に繋がっている人たちと、そのままネットでも繋がりま す。これまでなら電話やメールなどで連絡を取り合って いた人とネットでも繋がって、会話したり情報を共有す るのが SNS です。 たとえば、これまでは年に 1 度の年賀状を交換する程度 だった地元の友達でも、S N S を介せば日々の暮らしや故 郷の様子もごく自然に入ってきます。仕事が忙しくて飲 みに行けなくても、音楽仲間の間でどんなバンドが流行 っているかわかります。親戚の子どもの成長に目を細め たり、ボランティア運動をはじめた友人を応援したり、
S N S は現実の暮らしとリンクし、実の友人知人とより深 く、または意外な一面を知り合える機会を得られます。
Hint Section 6
知人・趣味の同人・同窓生・同僚・家族といった社会的
mixiはモバイルが中心 日本の SNS では、mixi は Facebook の何倍 ものユーザーを獲得しています。ところが、 ニールセンのネット視聴率調査では m i x i が
1,400 万人、Facebook が 1,100 万人とそ れほど大きな違いがありません（2 0 1 1 年 9 月の月間利用者数） 。これは P C 利用者の調 査だからです。m i x i では月間に 2 5 0 億近い
PV を誇りますが、実にその 78 ％が携帯電話 （スマートフォンではなく、いわゆるガラケ ー）からの利用です（mixi の IR 資料より） 。
PC の世界に限れば、日本でも Facebook が m i x i に肉薄しています。今後は、層の厚い 携帯電話利用者層を取り込めるかどうかが 普及の課題となるでしょう。
013
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
2
Title
Section
1
Sample Data
̶
Author
村田有紀
B i N D 5 を使 っ た ホ ームページ制 作入門
Text
BiNDは、あらかじめ用意されたサイトテンプレートを元に、必要な箇所にテキストを入力
Chapter 2
したり、サンプルの画像をオリジナルの写真に置き替えたりすることで簡単にウェブページ を作成できるのが特徴です。ここではBiNDによるFacebookページの制作を実践する前に、 BiNDの基本的な使い方を解説します。
Chapter 3
1.1
B i N Dのインターフェース （1） 、サイト全体の設定や管 BiND での作業は、テンプレートを選ぶ［サイトシアター］ 理を行う［サイトエディタ］ （2） 、そしてページの編集を行う［ブロックエディタ］ （3） の３つのステップに分かれます。その中でも、1 つのページを要素ごとのブロックに分 けて編集する方法は、B i N D の大きな特徴の 1 つです。これまでほかのホームページ作
Chapter 4
成ソフトを利用したり、HTML を書いたりしたことがある人は BiND の作法に最初はと まどうかもしれません。しかし、ブロック単位でページを組み立てる B i N D の考え方を 理解すればスムーズに作業が進められるようになるでしょう。
BiNDで作成した ウェブページ
Chapter 5 Chapter 6 064
Chapter 2 BiNDで簡単ウェブサイト制作
Section 1
ページがブロックに分割される
Chapter 1
サイトエディタ
サイトシアター
画面の切り替え
Section 2
サイトマップ 各種設定ボタン
1
初めてBiNDを起動すると［新規サイトを作る］が開くの で、ここでテンプレートを選びます。２回目以降は、 ［マ イサイトを編集］が開きます。このタブを切り替えて新 規作成や編集を開始します。また、 ［チュートリアルビ デオ］では、B i N D の使い方や最新情報などを動画で見
2
左カラムの［サイトマップ］は、編集するページを選択するほか、ペ ージの表示／非表示、ディレクトリや階層の設定などを行います。右
Section 3
テンプレートのカテゴリーを選択する
のメインブラウザは、編集モードへの切り替えが可能で、編集モード 時にはページをブロックに分割して表示します。
Section 4
ることができます。
ブロックエディタ
［サイトエディタ］で編集す るブロックをダブルクリッ
Section 5
3
モードの切り替え
ク、あるいは［BLOCK編集］ ボタンをクリックして開きま す。テキスト入力や画像の挿
S Y N C など B i N D に付属す る各種ツールも、この［ブロ ックエディタ］から呼び出し
Section 6
入はもちろん、SiGN Pro や
ます。
作成にも対応
4 さまざまなタイプのテンプレートが
っている
B i N D ですが、バージョン５から F a c e b o o k ペー ジ用のテンプレートと、B i N D S e r v e r を経由して 直接 F a c e b o o k ページのアプリケーションを作る 機能が新たに加わりました。 ［いいね ! ］ボタンや また、 B i N D サイトには、
F a c e b o o k ソーシャル・プラグインなどが簡単に 埋め込めるため、F a c e b o o k ページとメインサイ ト双方向の連携、運用が実現できます。
065
Section 7
Facebookページの
BiND for WebLiFE*5 with Facebook
Chapter 1
1.3
B i N Dで F a c e b o o k 用のサイトを 作成
B i N D でサイトを作成する
1
B i N D で F a c e b o o k ページのオリジナル ページを作っていきましょう。B i N D を起 動して、 ［新しいサイトを作る］ をクリックし
Chapter 2
ます。そして ［Facebookページ］ をクリッ クします。続いて確認画面が表示される ので ［このカテゴリーで作る］ をクリックし ます。
Hint テンプレートの数
Chapter 3
テンプレートの数は、B i N D のバージョンに よって異なります。図はプロフェッショナル 版なので複数の Facebook ページ用テンプレ ートがありますが、スタンダード版では付属 しません。追加テンプレートが欲しい場合は、 追加テンプレートの購入を検討するとよいで しょう。
http://www.digitalstage.jp/bind/template/ collection05.html
Chapter 4
2
テンプレートを選択する 3 種類のテンプレートから使うものを選び ます。ここでは ［P h o t o B o x］ をクリック で選択します。
Chapter 5
3
カラーを選択する カラーバリエーションから好きなものを選 択します。ここでは ［White ］ を選択します。
Chapter 6
［このテンプレートを使用する］ をクリック します。続いて保存先を確認するダイア ログでローカルまたは D r o p b o x を任意 に指定し、サイトを作成します。
114
Chapter 3 Facebookページを作成しよう
B i N D サイトが作成される 編集可能なエリア
Section 2
BiND サイトが作成されます。通常サイト
Section 1
1
B i N Dで F a c e b o o kページのデザインを 編 集する
Chapter 1
1.4
との違いを少し確認しておきましょう。
Facebook ページでは左右にメニューが 表示されます。図の赤枠で表示された中 央のエリアのみ編集可能です。 その両側の 「ウォール画像を編集する」 や
Section 3
「 F a c e b o o k ページ公開までの手順 」 は ダミーとなり編集はできません。
Section 4
2
ページを編集する ［このページを編集する］ をクリックして編 集可能な状態にして、ページの内容を編 集していきます。ここではまず、 「Non-Fan
「Non-Fan（nonfan.html） 」を選択
Section 5
（ n o n f a n . h t m l ）」 をサイトマップで選択 します。［いいね ! ］ ボタンを押すように訪 れたユーザーに促すページです。1 枚の 画像で手早く作ります。
3
［ビルボード］エリアの ブロックエディタを開く ビルボードエリアのブロックを選 択し、 ［ 編集 ］ ボタンをクリックします。ブロック
クリックしてブロックエディタを開く
エディタが開いたらテンプレートに入って いる画像を選択し、［S i G N を起動する］ ボタンをクリックします。
115
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
4
Title
Section
1
Sample Data
Author
BiND5SAMPLE/4_1/
瀧上園枝
ウェルカムペ ー ジ用 メインビジュアルを 制 作 する
Text
スナップ写真をスクラップブックに貼り付けるようなイメージで、画像のサイズや角度を変
Chapter 2
えて組み合わせ、ウェルカムページ用の画像を制作します。 S i G N P r oに用意されている さまざまなかたちのオブジェクトを作成する機能の［スタンプ ］を、日付スタンプのように 利用します。
Chapter 3
1.1
複 数の画 像を 組み合 わ せる SiGN Pro を利用して、複数の画像を組み合わせたウェルカム画像を制作しましょう。 それぞれの画像は、ランダムに貼り付けたようなイメージで、異なるサイズ・角度に設 定します。また［スキャンライン］エフェクトを追加すると、ノスタルジックな印象の 画像になります。写真のほかに［スタンプ］レイヤーを追加して文字と組み合わせて、
Chapter 4
日付ステッカーを貼ったスクラップブックのような印象に仕上げます。
, )
スクラップブックのようなデザインを 画像とシェイプの組み合わせでつくる
複数の写真と［スタンプ］を組み合わせて、スクラ
Chapter 5
ップブックのようなウェルカムイメージ画像を作成 します。 ［フレーム］カテゴリの［スタンプ］を利 用すると、ステッカーのようなイメージを表現する ことができます。複数の画像や［スタンプ］をラン ダムにレイアウトして、手作り感を演出します。彩 度の低いカラーのみで構成すると、ノスタルジック な印象をより強めることができます。
Chapter 6 150
Chapter 4 Facebookページのデザインを充実させる
使用する画像を用意する
Section 2
B i N D での制作に入る前に、あらかじめ
Section 1
1
画 像 制 作の準 備
Chapter 1
1.2
使用する画像を用意しておきます。旅先 で撮影したスナップ写真のほか、和紙を デジカメで撮影した画像を背景として利 用するために準備しました。
Section 3
背景用の 「和紙」画像
Section 4
2
ブロックを選択して ［ブロックエディタ］を開く B i N D のサイトシアターで［ 新規サイトを 作る］ をクリックして、 ［F a c e b o o k ペー ジ制作用ブランクページ ］ テンプレートを 選択、B i N D サイトを設定します。ペー ロックを選択し、 ［BLOCK 編集 ］ をクリッ
Section 5
ジ編集モードに入ったら、 ［ビルボード］ ブ ①クリック
クして ［ブロックエディタ］ を開きます。初 期設定で挿入されているダミー画像は削 除しておきます。
Section 6
※ここで選んだ ［F a c e b o o k 制作用ページブランク ページ ］ は、B i N D 5 プロフェッショナル版にのみ収録 されています。ここでは、主に画像のみ加工するので、 この F a c e b o o k ページ用のテンプレートを使用しなく ても、同様の作業を試すことができます。
② ［ビルボード］ ブロックを選択
Section 7
③クリックして ［ブロックエディタ］ を開く
Section 8
④ ［ブロックエディタ］ のダミー画像を削除する
151
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
4
Section
3
Sample Data
Author
BiND5SAMPLE/4_3/
瀧上園枝
プロフィール 画 像 を 制 作 する
Text
プロフィール画像は、Facebookページを閲覧したときに最初に目に入る大切な要素です。
Chapter 2
どのタブを開いていても、左上のプロフィール画像は固定して表示されるため、Facebook ページのイメージの「アイコン」ともなります。ニュースフィードに表示されるサムネール 画像にもなるため、ページのタイトルが表示された構成にするとよいでしょう。
Chapter 3
3.1
縦 長 のデザインを採 用する プロフィール画像は、制作サイズに制限がありますが、スペースを有効活用するために 縦長なものを採用すると面白いでしょう。ここでは、縦のスペースを有効に利用できる ように写真をトリミングし、また、上部にロゴをあしらいます。
Chapter 4
, ) 写 真 画 像と文 字やシェイプを組み合わせて 縦 長サイズの画 像を作 成し 、 F a c e b o o k ペ ー ジのプロフィール画 像として設 定する S i G N P ro を使用して、カフェ
Chapter 5
の F a c e b o o k ページに掲載す るプロフィール画像を制作しま す。 ［シェイプ］レイヤーで円形 にマスクした写真と、背景色だ けを設定した円形の ［シェイプ］ レイヤーを組み合わせてデザイ ンします。F a c e b o o k ページ のプロフィール画像に登録した
Chapter 6
ら、サムネールとして表示され るエリアをトリミング指定して おきます。
164
Chapter 4 Facebookページのデザインを充実させる
ウォール画像を編集するための ページを用意する
Section 1
1
画 像を準 備する
Chapter 1
3.2
Section 2
プロフィール画像やウォールに投稿する ための写真など、ページ全体ではなく画 像だけを B i N D や S i G N P r o で作成した いときは、専用のページを利用しましょう。
F a c e b o o k ページを作成するときのテ
Section 3
①クリック
ンプレートには、画像パーツを編集する ための専用ページ ［w a l l . h t m l］ があらか じめ用意されています。テンプレートを 選択してサイトの設定を行ったら、左サ
②クリック
イドの ［サイトマップ ］ から ［ W a l l（ w a l l . を選んで、 ［サイトエディタ］内に h t m l ）］
2
Section 4
専用ページを表示します。
Section 5
ブロックを選択して ［ブロックエディタ］を開き S i G N P ro を起動する ① ［ビルボード］ ブロックを選択
あらかじめサンプル画像がレイアウトされ ている ［ビルボード］ ブロックを選択して、 ［ BLOCK 編集 ］ ボタンで ［ブロックエディ タ］ を開きます。 削除し、右サイドのメニューから ［S i G N
P r o ］をクリックして S i G N P r o を起動し
Section 6
［ブロックエディタ］ ではサンプル画像を ②クリックして ［ブロックエディタ］ を開く
ます。
Section 7
③サンプル画像を削除
Section 8
④クリック ※Facebook用テンプレートが無い状態でもSiGN Proを起動して、 次ページの手順からの操作で同様な画像が作成できます。
165
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
4
Section
5
Sample Data
BiND5SAMPLE/4_5/
Author
瀧上園枝
アマチュアバンドの F a c e b o o k ペ ー ジを 制 作 する
Text
アマチュアバンドのPR用Facebookページを制作します。YouTubeで公開している動画
Chapter 2
を埋め込んだページや、ライブスケジュールを掲載するページを構成します。特殊なコン テンツを掲載するときは、専用のパーツを利用します。
5 .1
スケジュールコンテンツを掲載したF a c e b o o kページ
Chapter 3
毎 日 ユーザーが ア ク セ ス す る プ ラット フォーム で あ る 利 点 を 活 か し、B i N D f o r
Facebook で、スケジュールを作成してみます。BiND では、テーブルパーツを使って 美しい表組の編集が行えます。
, ) Chapter 4
Y o u T u b e 動 画や ライブスケジ ュ ー ルコンテンツを掲 載した F a c e b o o k ペ ー ジを作 成する テンプレート［P h o t o B o x ［Black］ ］を利用して、アマ チュアバンドの F a c e b o o k
Chapter 5
ページ を 制 作 し ま す。Yo u
Tu b e で公開しているライブ 風景の動画を埋め込み、バン ドの音楽やイメージを P R で きるページに構成します。ラ イブ動画は［いいね ! ］を押 してくれた人だけが閲覧でき るようにトップページは 2 種
Chapter 6
類制作し、公開時にそれぞれ に向けた設定を行います。
※ここで使用するFacebook ページ用のテンプレートは、BiND5プロフェッショナル版にのみ収録されています （スタンダード版には収録されていません）。
178
Chapter 4 Facebookページのデザインを充実させる
サイトのテンプレートを 選択してサイトを設定する
Section 2
［ サイトシアター］ で ［Facebook ページ ］ を選択して、新規サイトを制作します。 テンプレート一覧から ［PhotoBox（４）］ を選び、続いて表示されるカラーバリエー
Section 1
1
「B i N D サイト」を 作成する
Chapter 1
5.2
①クリック
ションから ［P h o t o B o x［B l a c k ］］ を選
Section 3
択してテンプレートに指定します。［サイ トエディタ］ が開いたら、ページコンテン ツの編集に入る前に ［ 設定 ］ ボタンで表示 されるポップアップパネルで、サイト名や サーバーなどを設定しておきます。
Section 4
②クリック ③クリック
最初に、トップページを編集します。ペー ジ背景や余白などはテンプレートの設定
①クリック
Section 5
2
ビルボードをデザインする
②クリック
をそのまま使用します。［このページを編 集する］ ボタンで編集モードに切り替え、 ［ビルボード］ を選んで ［ BLOCKを編集 ］ いたら、SiGN Proで作成された画像パー
Section 6
をクリックします。 ［ブロックエディタ］ が開
③画像の作成については158ページを参照
ツを選択し、複数の画像を組み合わせた メインビジュアルを作成します （ 1 5 8 ペー ジ参照）。
Section 7
画像の編集が終了したら S i G N P r o を終 了して ［ブロックエディタ］ に戻り、ダミー として入力されている文字をバンドに関す る紹介文に変更しておきます。ビルボー ドエリアの編集が終了したら、 ［適用］ ボタ ンでページに適用し、 ［ブロックエディタ］
Section 8
を閉じます。
④ダミーのテキストを紹介文に変更
179
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
4
Section
Sample Data
6
Author
BiND5SAMPLE/4_6/
ななきち
イベント満 載のアミューズメント 施 設の F a c e b o o k ペ ー ジ
Text
BiND Serverの機能を利用し、Facebookページに、 ［いいね !］をクリックする前と後で
Chapter 2
は別ページが表示される「ウェルカムページ（ファンゲート）」を用意しましょう。この機 能を使うと、 ［いいね !］をクリックしたユーザーのみに、特別情報（クーポンやお知らせな ど）を表示できるようになります。また、各ページごとに［いいね ! ］機能を盛り込んだり、 Googleマップなど、外部サービスと連動を盛り込んだFacebookページの制作例も紹介し ます。
Chapter 3
6.1
作成するページの 構 成 ここでは、架空のテーマパーク「ななきちランド」の F a c e b o o k ページに、さまざま なページを BiND で追加しています。Facebook ページには以下のコンテンツが盛り込 まれています。
Chapter 4
, ) ファン前ページ
［ いいね ! ］をクリ ッ クした直 後にペ ー ジが変 化 、 ［ いいね ! ］をした後 、 2 回 目 以 降はさらに別のペ ー ジを表 示 ファン後ページ
ウェルカムページ
Chapter 5 Chapter 6
［いいね！］クリック直後のトップ ［いいね！］クリック前のトップページ。
ページ。お得な情報を表示。
ファンになった後の通常トップペ ージ。
※ここで使用するFacebook ページ用のテンプレートは、BiND5プロフェッショナル版にのみ収録されています （スタンダード版には収録されていません）。
186
Chapter 4 Facebookページのデザインを充実させる
各アトラクション詳細
Section 1
Chapter 1
アトラクショントップページ
各詳細ページに［いいね！］ ボタンを設置します。
Section 2
イベントページ
Section 3
クーポンページ
アクセスページ
Section 4 Section 5
Googleマップとの連動を行います。
ウェルカムページ（トップページ）の設 定
テンプレートを選択する まず、F a c e b o o k ページ用のテンプレー
［Facebook ページ］
［Facebook ページ制作用ブランクページ］
Section 7
1
Section 6
6.2
トを用意します。B i N D を起動して、［サ イトシアター］ から ［ 新規サイトを作る］ を します。ここでは、［F a c e b o o k ページ 制作用ブランクページ ］ からサイトを作成
①クリック
Section 8
選択し、 ［F a c e b o o k ページ ］ をクリック ②クリック
します。
187
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
Section
4
7
Sample Data
Author
BiND5SAMPLE/4_7/
ななきち
カートやお 問 合 せペ ー ジのある 雑 貨ショップ
Text
Facebookページからホームページまで遷移せずとも、スペシャル製品などをFacebookペー
Chapter 2
ジ限定で売りたい場合があるかもしれません。ここでは、B iND S e r v e rのショピングカー ト機能を利用し、ショッピングカートが設置されたFacebookページを制作します。これに より、Facebookページから買い物が可能になります。また、BiNDの機能を使い、お問合 せフォームの設置したFacebookページを作成していきます。
Chapter 3
7.1
ページ構 成の 確 認 架空の雑貨屋「nanakichi」の Facebook ページを制作します。この Facebook ページ には以下のコンテンツが盛り込まれていますが、この Section では、特にカートの設置 とお問合せフォームの設置を中心に紹介します。
Chapter 4
, ) ウェルカムページ
ファン前ページ
ファン後ページ
Chapter 5 Chapter 6
［いいね！］クリック前のトップページ。
［いいね！］クリック直後。ユーザーに対 して割引クーポンを表示させています。
通常のトップページ。
※ここで使用するFacebook ページ用のテンプレートは、BiND5プロフェッショナル版にのみ収録されています （スタンダード版には収録されていません）。
196
Chapter 4 Facebookページのデザインを充実させる
お問合せページ
Section 1
Chapter 1
ショッピングページ
Section 2 Section 3 Section 4
1
Section 5
7.2
テンプレートからサイトを 作成する
テンプレートを選択する
ていきます。ウェルカムページの制作については、この Section では省略します。
Section 6
［ 新規サイトを作る］ を選択し、 F a c e b o o k ページ用のテンプレートを用意します。［サイトシアター］から ［ F a c e b o o k ページ ］ をクリックします。今回は ［F a c e b o o k ページ制作用ブランクページ ］ を利用して制作し
Section 7 Section 8
197
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
5
Section
2
Sample Data
̶̶
Author
毛利勝久
外 部のコンテンツと連携する
Text
F a c e b o o kページでオープングラフを利用する簡単な例として、外部のサービスと連
Chapter 2
携させてみましょう。いま最もよく利用されているT w i t t e rとの連携方法を解説しま す。T w i t t e rとはつぶやきを同期できますが、F a c e b o o kからT w i t t e r、T w i t t e rから Facebookの双方向を取り上げます。また、ブログとの連携についても紹介します。
Chapter 3
2.1
F a c e b o o k から Tw i t t e r に連 携する Facebook の個人ウォールまたは Facebook ページの投稿を、Twitter にそのまま転送 することができます。同じ内容の発言を Facebook と Twitter の両方に一度に投稿でき るので、より多くのユーザーの目に触れることになります。
Chapter 4
1
連携を開始する FacebookからTwitterに連携するには、 右のページで設定します。個人アカウン トおよび管理権限がある F a c e b o o k ペ ージが一覧表示されるので、Tw i t t e r と 連携させたい F a c e b o o k ページ（また は個人アカウント）の［Tw i t t e r とリン
Chapter 5
ク］ボタンをクリックします。それぞれ に別々の Tw i t t e r アカウントを連携させ ることもできます。
2
Tw i t t e r とリンクする リ ン ク す る Tw i t t e r ア カ ウ ン ト で
F a c e b o o k を 認 証 し ま す。 右 上 の
Chapter 6
Tw i t t e r アカウントを確認して、問題な ければ［連携アプリを認証］をクリック します。アカウントが違う場合にはログ インし直しが必要です。Tw i t t e r にログ インしていなければ、先にログインフォ ームが表示されます。 220
http://www.facebook.com/twitter/
Chapter 5 Facebook ページをパワーアップする
Section 1
転送する投稿の種類を選択する
3
Tw i t t e r ア カ ウ ン ト で 認 証 が 完 了 す ると、 元のリンク画面に戻ります。 「F a c e b o o k プロフィールが Tw i t t e r と リンクされました」と表示されていれ
Section 2
ば成功です。上手くいかないときは、
Twitter 側の連携アプリで Facebook を 削除してやり直してみてください。 ここでは転送するコンテンツの種類を選
Section 3
択できます。デフォルトではすべてのコ ンテンツがシェアされます。リンクを 投稿した場合や、写真やノートのように
Facebook 内に置かれるコンテンツは、 fb.meの短縮ドメインでシェアされます。
Section 4
投稿してみよう
4
リンクした F a c e b o o k ページに戻り、 近況を投稿してみましょう。図のように まったく同じ文面が Tw i t t e r にも投稿さ れます。
Hint Twitterの文字数制限である140文字を超える 発言は転送されません。また、個人ウォールの 場合は共有範囲が「公開」に設定されている投 稿だけがTwitterに転送されます（Facebookペ ージの場合はすべての投稿が公開されるので気 にしなくてかまいません） 。
221
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
Title
5
Section
4
Sample Data
̶̶
Author
毛利勝久
チ ェックインとクーポンの活用
Text
スマートフォンと位置情報を利用して、訪ねたお店や遊びに行った場所でチェックインし
Chapter 2
て知り合いと共有できるサービスが増えています。F acebookにもスポットという機能が あり、さらにチェックインしたショップや飲食店で割引や特典が付くクーポンを利用でき ます。クーポンは手続きをすれば個人でも発行できます。
Chapter 3
4.1
スポットの 仕 組みと所 有 権の取 得 Facebook のスポットは、位置情報が付け加えられた Facebook ページと考えるのが わかりやすいでしょう。携帯電話やスマートフォンの「スポット」メニューから位置情 報を登録すると、付近のスポットがリストアップされ、その中から自分が今いる場所を 選んでチェックインします。
Chapter 4
チェックインした情報は自分のウォールに掲載されます。コメントや写真を付けたり、 また一緒に同じ場所にいる友達をタグ付けして投稿することもできます（ 1 ） 。
チェックインしてクーポンを利用 F a c e b o o k でチェックインできるスポットには、ただ位置情報が登録され ているだけでなく、その店舗やショップのオーナーによって運営管理され
Chapter 5
ているスポットがあります。そういう場所では、サービスの 1 つとしてチェ ックインしてくれた人にクーポンを提供することができます。
F a c e b o o k ページを運用している事業者にとっては、クーポンを提供する ことで来客が見込め、ファンとの繋がりを深めることができます。ここで はクーポンを発行するまでの手順を解説します。まず、店舗や事業所のス ポットの所有権を取得します。
Chapter 6
1 230
チェックインクーポンの作成例
Chapter 5 Facebook ページをパワーアップする
1
Section 1
4.2
スポットを 作成する
クーポンを提供するには、まず自分の店 舗・事業のスポットが必要です。自分の
Section 2
店のある場所で、スマートフォンから
F a c e b o o k で位置登録してみます。す でにスポットがあれば、それをそのまま 利用します。見つからなければ、新し く追加します。スポットを追加する際 には、スマートフォンや携帯電話から
Section 3
F a c e b o o k にアクセスしてチェックイ ンの画面の［＋］ボタンなどから、場所 の確認と、名前、説明を入力します。
スポットの所有権申請
Section 4
2
スポットが用意できたら、続いてその 所有権を取得します。 パソコンから
F a c e b o o k にログインしてスポット名 を検索し、ページを表示します。自分が これから管理しようとするスポットの持 ち主に違いなければ、左サイドのメニュ ーにある ［このスポットのオーナーの方］ または［所有者の方をご存じですか ?］ をクリックし、スポットのオーナー申請 を開始します。 「オーナー（または公式 代理人）であることを保証します」にチ ェックを入れて［認証を実行］します。
3
Hint チェックインしたりスポットを作成する手 順はスマートフォンから行いましたが、ス ポットの所有権の取得やその後の管理・運 営はPCでできます。
事業に関する追加情報を入力 スポットの認証の最初の手順は、住所や 電話番号など事業に関する追加情報の入 力です。正確に入力して［続行］をクリ ックします。
231
BiND for WebLiFE*5 with Facebook
Chapter
Chapter 1
6
Title
Section
1
Sample Data
Author
̶̶
宮崎綾子
B i N D サイトを ソ ーシャルに対 応させる
Text
ソーシャルメディアは人々の日常の中にある、生活に密着したメディアです。もしもその
Chapter 2
隙間にあなたのFacebookやTwitterが常に存在するならば、その人にとっては、テレビ コマーシャルの影響力にも勝るメディアチャンネルになってきます。ここで一度、あなた のホームページとソーシャルの親和性を高めるためのメンテナンスを考えてみましょう。
ソーシャルへの最 適 化 、 改善のポイント
Chapter 3
1.1
ソーシャルメディア上でクチコミしやすいページを考えるとき、参考にしたいのはブロ グです。ソーシャル上では毎日、さまざまなシチュエーションで、 「この記事が面白い よ（＋その記事の元リンク） 」 、 「新しい記事があるよ（更新日付と記事の概要文、画像） 」 と、サイトの一部分を切り取って、人から人へと伝えられます。ブログはもともとが単
Chapter 4
純なページの積み重ねなので、それが一番やりやすい作りになっています（その一方で 「ホームページらしさ」には乏しいのですが） 。 運営中のホームページで次のようなところがあれば、リニューアルをお勧めします。
1 ページにいくつもの話題が含まれている ホームページでは、多様なレイアウトが可能なので、1 ページにさまざまな話題が含ま Chapter 5
れていることが多くあります。ホームページのトップから閲覧していけば、それは問題 のないことですが、ソーシャル上でそのページだけを切り取って紹介されると、U R L をたどってきた読者は、どの話題について推薦者が語っているのかが、ひと目でわかり ません。Twitter などではよくあることです（下図） 。
A「この製品とっても使
製品 1
いやすそう！」＋URL
A「この製品とっても使 いやすそう！」＋URL
Chapter 6
ソーシャルから アクセス
製品 2 製品 3 改善前 236
製品 1
ソーシャルから アクセス
B「製品 1∼3 のどれのこ
B「いいね！みんなにも
と言ってるんだろう…」
知らせよう！」
改善後
Chapter 6 BiND サイトとソーシャルを繋ぐ
Section 1
もしも、なんとなく収まりがいいから、という理由で複数の製品をまとめて掲載した り、 「地図と住所」と「お店のコンセプト」を 1 つのページにしているならば、読者自体 は「どちらか」を見たいので分けてくれることを望むでしょう（特にモバイルでのアク セス時はそうです） 。ぜひ改善をしてみましょう。 ただし、複数の記事やモノを編集的な視点で 1 つにまとめること自体は、とてもよいこ
Section 2
とです。 「あったかい冬を過ごすためのお勧め新製品」というものを 1 ページで済ませて いるならば、そのページは特集扉として残しつつ、各製品の紹介ページも作りましょう。
RSSを付けるなら、新着情報やニュースなども、できれば個別ページを設けるべきです。 冬向け製品特集
製品 2 概要
製品 1 概要
製品 2
製品 3 概要
製品 3
製品 3 概要
製品 4 概要
個別のページがあれ
Section 3
製品 1 概要
エコ製品特集
製品 1
ば、クチコミされた 際の対象が明確にな るだけでなく、さま ざまな切り口でその ページへ繋げること ができます。
A「この製品とっても使
B「エコ製品が沢山そろ
いやすそう！」＋URL
ってるよ！」＋URL
スマートフォンやケータイへ配慮する ソーシャルメディアを使えば使うほど、モバイルでの利用が上がってくるということを みなさんも実感していると思います。その中で、人にお勧めされたページが i P h o n e や
i P a d では開けなかった、ページが重すぎて表示する前に電車が発車してしまい見る気 をなくした……などという体験はありませんか。 ソーシャル時代のホームページとしては、なるべくさまざまなデバイスで無理なく閲覧 できることを配慮しておきたいものです。ケータイ（ガラケー）についてはまだスマー トフォン全体よりも利用者数がずっと多いので、完全に無視するというのは難しいとこ ろ。一方で、スマートフォンユーザーは、ケータイユーザーの何十倍もインターネット にアクセスし、また利用者は今後も増えるので何らかの配慮は絶対に必要です。B i N D でできる改善は次のような点です。
F l a s h や重いデータを直接貼り付けない i P h o n e ではほとんどのウェブページがそのまま閲覧できますが、F l a s h P l a y e r が使 えません。そのため Flash を使ったパーツはなくしておきましょう。BiND の SHiFT は
Flash なしで再生できるのがメリットですが、大きなデータなどは場合によりスマート フォンではレイアウトが崩れるので、モバイルを意識する場合は使う頻度を検討します。 また、携帯電話網でもダウンロードしやすいように、動画や重い画像を直接貼り付ける のは避けます。
237
BiND for WebLiFE*5 with Facebook
Chapter 1
3.4
F a c e b o o k L i ke B ox で友 達の顔を表 示する
LikeBox は、Facebook ページにすでに友達が「いいね！」している場合に、その顔をサイトにアクセスし た際に表示させる機能です。Facebookページへの集客方法の1つとして役立ちます。
Chapter 2
1
挿入する場所の確認
①幅を確認
BiND のサイトエディタで、Likebox を 設定する場所を確認します。ブロックを 選択すると、ブロックサイズが表示され ます。幅の数値を確認しておきましょ
②ブロックを開く
う。ここでは「w 2 6 2」のサイドバーに 設定していきます。
Chapter 3
2
［ F a c e b o o k L i k e B o x ］ボタン をクリック BiND のサイトエディタで、Likebox を 挿入するブロックのブロックエディタで ［FacebookLikeBox］ボタンをクリッ
Chapter 4
クします。
3
クリック
S Y N C で設定する SYNC が起動したら、Like Box で「い いね！」させるFacebook ページのURL
Chapter 5
を入力します。独自 URL を設定していな い場合は少し長くはなりますが、問題は ありません。Facebook ページのトップ を表示した状態の URL をコピー＆ペース トします。 ［次へ］をクリックします。
Chapter 6
Hint ユーザーネームは、 ［基本データ］の［ユーザーネーム（ユニ ーク U R L） ］欄の［このページのユーザーネームを作成しま すか？］から作成ができます。
248
Chapter 6 BiND サイトとソーシャルを繋ぐ
ボックスのデザインを調整する
Section 1
4
［オプションの設定］に移ります。右側 にプレビューが表示されるので調整を 行いましょう。幅は、L i k e b o x の幅で す。サイドバーの幅に合わせて設定し
Section 2
ます。5 0 p x 単位で表示される顔の数が 変わってくるので、200px 台では 3 人、
250px 台では 4 人並んで表示されます。 調整しましょう。横長のデザインにし て、メインのブロックに配置してもよい
Section 3
でしょう。設定変更後、 ［次へ］で確認 画面に移り、 ［適用］をクリックします。
5
L i k e B O X を確認する ブロックエディタに戻り、 ［適用］をク リックしてサイトへの挿入を完了しま す。ただし、挿入結果は、サイトエディ タ上、またはプレビューで確認すること はできません。確認するには、アップロ ードしてサーバーのデータを更新しまし ょう。
3.5
お 知らせ 機 能を 使ってまとめてつぶやく
B iND の更新を行った際に表示されるダイアログに「最新のお知らせ をつぶやきますか？」があります。この S o c i a l C o nn e c t 機能では、
Hint Social Connect アプリは単体
Twitter、Facebook、mixi の各アカウントを登録しておき、それぞれ
で動作するので、サイト更新に
のメディアにサイト更新のお知らせを一気に流すことができます。ど
関係なくまとめてつぶやくツー
のメディアに流すかも選べるので、内容によって使い分けしてみましょ
ルとしても活用できます。
う。また、Facebook ページには直接投稿できません。mixiについては
249