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

Facebook Pages Power Session!

ホシナカズキ

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

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

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


Don’t Feel. Think!


目的の明確化

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


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


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


タイプから目的を導く



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

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

詳細は書籍で☆


しかしぶっちゃけると


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

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

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

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


コミュニケーション


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

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

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


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


1. カテゴリー

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

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


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

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


3. ページタイトルとURL

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


4. アプリ

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


5. IFrameページ

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


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

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

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




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


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


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

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

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

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


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

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

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

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


どうやって解消するか?


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


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


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


デザイン発注時の注意


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

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


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

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


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

戦略である

Part3. IFrameページの実装




(1) HTML+CSS+jQuery

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


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

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


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

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


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


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

Final. まとめ

Final. まとめ


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

Technology

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

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