Facebookページ 仕様とデザインと実装

Facebook Pages Power Session!

ホシナ カズキ

Facebookページ仕様とデザインと実装

ホシナ カズキ元テレビ屋なフリーランスのモバイルウェブディレクターワークユニット｢M-glam｣で活動中 http://m-glam.net/[M] mbdb (モバデビ)というブログも書いてます

Part1. Facebookページの仕様を決める

Part1. Facebookページの仕様を決める

Don’t Feel. Think!

Part1. Facebookページの仕様を決める

目的の明確化

開設は目的ではなく手段認知向上・顧客獲得・話題作り・売上拡大 ...etc.

Part1. Facebookページの仕様を決める

目的が明確にならないとi. 全体像が見えないii. 何を伝えたいのか解らないiii.何をしたいのか解らないiv.運用段階になってつまづく事になる

Part1. Facebookページの仕様を決める

目的が明確になることでi. 全体像がつかみやすくなるii. ターゲットや提供する内容が見えるiii.ゴール設定がしやすくなるiv.運用の道筋が見える

Part1. Facebookページの仕様を決める

タイプから目的を導く

Part1. Facebookページの仕様を決める

Part1. Facebookページの仕様を決める

開設するFacebookページの種類から何を目的にするか

マトリクスに当てはめて考えてみる

詳細は書籍で☆

Part1. Facebookページの仕様を決める

しかしぶっちゃけると

Part1. Facebookページの仕様を決める

基本的にタイプが何だろうが目的は同じ!

誰だって認知してもらいたい!誰だって顧客を獲得･開拓･育成したい!誰だってWebを使って話題を作りたい!

誰だって売上を伸ばしたい!

ならば何が最大の目的になりうるか?

Part1. Facebookページの仕様を決める

コミュニケーション

Part1. Facebookページの仕様を決める

コミュニケーションソーシャルメディアだからこその目的どんな目的もコレがなければ破綻する

日本ではトラブルを恐れる余り希薄になりがち

トラブルが発生しないようにすることよりもトラブルが発生しても乗り切れる対応が重要

Part1. Facebookページの仕様を決める

最低限決めておくべき仕様

Part1. Facebookページの仕様を決める

1. カテゴリー

‣カテゴリは規定6カテゴリー‣それぞれさらに総数159の中カテゴリーがあり、その下にも小カテゴリーがある‣規定の6カテゴリーは開設後の変更は不可能だが、その下に紐付くカテゴリーは開設後も変更可能地域ビジネス:38カテゴリー

会社名または団体名:37カテゴリーブランドまたは製品:31カテゴリーアーティスト、バンドまたは著名人:24カテゴリー芸能・エンタメ:28カテゴリー慈善活動またはコミュニティ:カテゴリー区分なし

Part1. Facebookページの仕様を決める

2. ロゴ画像(プロフィール画像)

‣Facebookページ開設時の初期設定で必要‣Facebookページの顔‣IFrameページデザイン時のキーヴィジュアル‣最大180px*545px‣ファーストビューを考えつつ画像サイズを有効活用

Part1. Facebookページの仕様を決める

3. ページタイトルとURL

‣ページタイトルは個人の名前と同じ‣ウォールの投稿者名、検索結果として表示される‣開設後も適宜変更は可能だが、100以上の｢いいね!｣がついた段階で変更は不可能になる

Part1. Facebookページの仕様を決める

4. アプリ

‣｢基本データ｣と｢ウォール｣は固定‣デフォルトのアプリとして、｢写真｣｢動画｣｢リンク｣｢イベント｣｢ノート｣｢ディスカッション｣｢クエスチョン｣がある‣Facebookページで提供するものに合わせてアプリを選定する

Part1. Facebookページの仕様を決める

5. IFrameページ

‣工夫を凝らしたWelcomeページやキャンペーンページなどに‣コンテンツを自由にデザインすることが可能‣サードパーティアプリもあるがデザイン面での制約や広告の挿入などがある‣ターゲットを絞ったコンテンツ提供がしやすい‣IFrameページは別途仕様構成を策定する

Part1. Facebookページの仕様を決める

6. 運用責任者とアカウント

‣運用フェーズに入った際の責任者を決めておく‣個人アカウントを元にFacebookページを開設するか、ビジネスアカウントで開設するか※ただし複数アカウント所持は規約違反になるので注意が必要。

Part2. IFrameページのデザイン制作

Part2. IFrameページのデザイン制作

Don’t Feel. Think!

Part2. IFrameページのデザイン制作

基本はWebデザインの考え方

Part2. IFrameページのデザイン制作

ただしデザインベースはFacebookデザイン

Part2. IFrameページのデザイン制作

Facebookデザインがベースにあるデメリット

(2)カラーに引っ張られる

ベースカラー(70%) アクセントカラー(5%) サブカラー(25%)

(1)レイアウトに引っ張られる

Part2. IFrameページのデザイン制作

Facebookデザインがベースにあるデメリット

(2)カラーに引っ張られる

ベースカラー(70%) アクセントカラー(5%) サブカラー(25%)

(1)レイアウトに引っ張られる最も大きなデメリット

Part2. IFrameページのデザイン制作

どうやって解消するか?

Part2. IFrameページのデザイン制作

1. キーヴィジュアル‣プロフィール画像‣Facebookカラーと相性の良い色をアクセントカラー･サブカラーとして取り込む‣全体的な色比率を計算

Part2. IFrameページのデザイン制作

2. キーカラー‣メインサイトや製品などのキーカラーを取り込む‣色彩調和が大事‣必ずキーヴィジュアルに採用する色を反映する

Part2. IFrameページのデザイン制作

3. キータイプフェース‣いわゆるフォントのこと‣メインサイトや製品で使用しているフォントを採用する‣フォントを共通させることでカラーとは別にトーンの調和を図ることが重要

Part2. IFrameページのデザイン制作

デザイン発注時の注意

Part2. IFrameページのデザイン制作

｢●●みたいにしてくれ｣

‣似せてもメリットはない‣似せることはパクリの印象が強く悪影響‣担当者が“ブランド”を意識する必要性‣デザインテンプレートの利用など以ての外

Part2. IFrameページのデザイン制作

｢ふわっ・シュッ・ドーン｣

‣擬音的な表現は抽象的‣抽象的なのは担当者にイメージがない証拠‣言語化が難しければイメージに近いものをデザイナーに見せるようにする

Part2. IFrameページのデザイン制作

デザインはブランディングでありマーケティングであり

戦略である

Part3. IFrameページの実装

Part3. IFrameページの実装

Don’t Feel. Think!

Part3. IFrameページの実装

(1) HTML+CSS+jQuery

‣ベースはPHP‣最も自由度の高いデザインを実装可能‣掲載コンテンツも自由度が高い‣更新管理には、最低限HTMLの知識が必要

Part3. IFrameページの実装

(2) CMS(Movable Type/WordPressなど)

‣メインサイトにCMSを採用している場合‣デザインはテンプレートベース‣更新管理はCMSベースなのでラクチン

Part3. IFrameページの実装

(3) サードパーティアプリ

‣サーバー環境等の用意は必要なし‣デザインの自由度はアプリによりけり‣更新管理は比較的ラクだがアプリによる‣表示スピードなどはアプリ提供者に左右される

Part3. IFrameページの実装

IFrameページの実装は‣現在の環境‣Facebookページの目的‣コンテンツの内容‣更新の頻度などの諸条件から、最適な方法を選択

Part3. IFrameページの実装

詳しい実装手順は本書 Chapter2Section2～4を確認して下さい

Final. まとめ

Final. まとめ

Don’t Feel. Think!

ご静聴ありがとうございました