Facebookページ 仕様とデザインと実装
-
Upload
cazuki-hoshina -
Category
Technology
-
view
1.015 -
download
2
description
Transcript of 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!
ご静聴ありがとうございました