facebookページ 仕様とデザインと実装
DESCRIPTION
7/2(Sat) Facebookページ Power Session! セミナースライドTRANSCRIPT
![Page 1: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/1.jpg)
Facebook Pages Power Session!
ホシナ カズキ
Facebookページ仕様とデザインと実装
![Page 2: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/2.jpg)
ホシナ カズキ元テレビ屋なフリーランスのモバイルウェブディレクターワークユニット「M-glam」で活動中 http://m-glam.net/[M] mbdb (モバデビ)というブログも書いてます
![Page 3: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/3.jpg)
Part1. Facebookページの仕様を決める
![Page 4: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/4.jpg)
Part1. Facebookページの仕様を決める
Don’t Feel. Think!
![Page 5: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/5.jpg)
Part1. Facebookページの仕様を決める
目的の明確化
開設は目的ではなく手段認知向上・顧客獲得・話題作り・売上拡大 ...etc.
![Page 6: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/6.jpg)
Part1. Facebookページの仕様を決める
目的が明確にならないとi. 全体像が見えないii. 何を伝えたいのか解らないiii.何をしたいのか解らないiv.運用段階になってつまづく事になる
![Page 7: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/7.jpg)
Part1. Facebookページの仕様を決める
目的が明確になることでi. 全体像がつかみやすくなるii. ターゲットや提供する内容が見えるiii.ゴール設定がしやすくなるiv.運用の道筋が見える
![Page 8: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/8.jpg)
Part1. Facebookページの仕様を決める
タイプから目的を導く
![Page 9: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/9.jpg)
Part1. Facebookページの仕様を決める
![Page 10: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/10.jpg)
Part1. Facebookページの仕様を決める
開設するFacebookページの種類から何を目的にするか
マトリクスに当てはめて考えてみる
詳細は書籍で☆
![Page 11: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/11.jpg)
Part1. Facebookページの仕様を決める
しかしぶっちゃけると
![Page 12: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/12.jpg)
Part1. Facebookページの仕様を決める
基本的にタイプが何だろうが目的は同じ!
誰だって認知してもらいたい!誰だって顧客を獲得・開拓・育成したい!誰だってWebを使って話題を作りたい!
誰だって売上を伸ばしたい!
ならば何が最大の目的になりうるか?
![Page 13: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/13.jpg)
Part1. Facebookページの仕様を決める
コミュニケーション
![Page 14: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/14.jpg)
Part1. Facebookページの仕様を決める
コミュニケーションソーシャルメディアだからこその目的どんな目的もコレがなければ破綻する
日本ではトラブルを恐れる余り希薄になりがち
トラブルが発生しないようにすることよりもトラブルが発生しても乗り切れる対応が重要
![Page 15: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/15.jpg)
Part1. Facebookページの仕様を決める
最低限決めておくべき仕様
![Page 16: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/16.jpg)
Part1. Facebookページの仕様を決める
1. カテゴリー
‣カテゴリは規定6カテゴリー‣それぞれさらに総数159の中カテゴリーがあり、その下にも小カテゴリーがある‣規定の6カテゴリーは開設後の変更は不可能だが、その下に紐付くカテゴリーは開設後も変更可能地域ビジネス:38カテゴリー
会社名または団体名:37カテゴリーブランドまたは製品:31カテゴリーアーティスト、バンドまたは著名人:24カテゴリー芸能・エンタメ:28カテゴリー慈善活動またはコミュニティ:カテゴリー区分なし
![Page 17: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/17.jpg)
Part1. Facebookページの仕様を決める
2. ロゴ画像(プロフィール画像)
‣Facebookページ開設時の初期設定で必要‣Facebookページの顔‣IFrameページデザイン時のキーヴィジュアル‣最大180px*545px‣ファーストビューを考えつつ画像サイズを有効活用
![Page 18: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/18.jpg)
Part1. Facebookページの仕様を決める
3. ページタイトルとURL
‣ページタイトルは個人の名前と同じ‣ウォールの投稿者名、検索結果として表示される‣開設後も適宜変更は可能だが、100以上の「いいね!」がついた段階で変更は不可能になる
![Page 19: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/19.jpg)
Part1. Facebookページの仕様を決める
4. アプリ
‣「基本データ」と「ウォール」は固定‣デフォルトのアプリとして、「写真」「動画」「リンク」「イベント」「ノート」「ディスカッション」「クエスチョン」がある‣Facebookページで提供するものに合わせてアプリを選定する
![Page 20: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/20.jpg)
Part1. Facebookページの仕様を決める
5. IFrameページ
‣工夫を凝らしたWelcomeページやキャンペーンページなどに‣コンテンツを自由にデザインすることが可能‣サードパーティアプリもあるがデザイン面での制約や広告の挿入などがある‣ターゲットを絞ったコンテンツ提供がしやすい‣IFrameページは別途仕様構成を策定する
![Page 21: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/21.jpg)
Part1. Facebookページの仕様を決める
6. 運用責任者とアカウント
‣運用フェーズに入った際の責任者を決めておく‣個人アカウントを元にFacebookページを開設するか、ビジネスアカウントで開設するか※ただし複数アカウント所持は規約違反になるので注意が必要。
![Page 22: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/22.jpg)
Part2. IFrameページのデザイン制作
![Page 23: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/23.jpg)
Part2. IFrameページのデザイン制作
Don’t Feel. Think!
![Page 24: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/24.jpg)
Part2. IFrameページのデザイン制作
基本はWebデザインの考え方
![Page 25: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/25.jpg)
Part2. IFrameページのデザイン制作
ただしデザインベースはFacebookデザイン
![Page 26: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/26.jpg)
Part2. IFrameページのデザイン制作
Facebookデザインがベースにあるデメリット
(2)カラーに引っ張られる
ベースカラー(70%) アクセントカラー(5%) サブカラー(25%)
(1)レイアウトに引っ張られる
![Page 27: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/27.jpg)
Part2. IFrameページのデザイン制作
Facebookデザインがベースにあるデメリット
(2)カラーに引っ張られる
ベースカラー(70%) アクセントカラー(5%) サブカラー(25%)
(1)レイアウトに引っ張られる最も大きなデメリット
![Page 28: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/28.jpg)
Part2. IFrameページのデザイン制作
どうやって解消するか?
![Page 29: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/29.jpg)
Part2. IFrameページのデザイン制作
1. キーヴィジュアル‣プロフィール画像‣Facebookカラーと相性の良い色をアクセントカラー・サブカラーとして取り込む‣全体的な色比率を計算
![Page 30: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/30.jpg)
Part2. IFrameページのデザイン制作
2. キーカラー‣メインサイトや製品などのキーカラーを取り込む‣色彩調和が大事‣必ずキーヴィジュアルに採用する色を反映する
![Page 31: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/31.jpg)
Part2. IFrameページのデザイン制作
3. キータイプフェース‣いわゆるフォントのこと‣メインサイトや製品で使用しているフォントを採用する‣フォントを共通させることでカラーとは別にトーンの調和を図ることが重要
![Page 32: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/32.jpg)
Part2. IFrameページのデザイン制作
デザイン発注時の注意
![Page 33: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/33.jpg)
Part2. IFrameページのデザイン制作
「●●みたいにしてくれ」
‣似せてもメリットはない‣似せることはパクリの印象が強く悪影響‣担当者が“ブランド”を意識する必要性‣デザインテンプレートの利用など以ての外
![Page 34: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/34.jpg)
Part2. IFrameページのデザイン制作
「ふわっ・シュッ・ドーン」
‣擬音的な表現は抽象的‣抽象的なのは担当者にイメージがない証拠‣言語化が難しければイメージに近いものをデザイナーに見せるようにする
![Page 35: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/35.jpg)
Part2. IFrameページのデザイン制作
デザインはブランディングでありマーケティングであり
戦略である
![Page 36: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/36.jpg)
Part3. IFrameページの実装
![Page 37: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/37.jpg)
Part3. IFrameページの実装
Don’t Feel. Think!
![Page 38: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/38.jpg)
Part3. IFrameページの実装
(1) HTML+CSS+jQuery
‣ベースはPHP‣最も自由度の高いデザインを実装可能‣掲載コンテンツも自由度が高い‣更新管理には、最低限HTMLの知識が必要
![Page 39: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/39.jpg)
Part3. IFrameページの実装
(2) CMS(Movable Type/WordPressなど)
‣メインサイトにCMSを採用している場合‣デザインはテンプレートベース‣更新管理はCMSベースなのでラクチン
![Page 40: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/40.jpg)
Part3. IFrameページの実装
(3) サードパーティアプリ
‣サーバー環境等の用意は必要なし‣デザインの自由度はアプリによりけり‣更新管理は比較的ラクだがアプリによる‣表示スピードなどはアプリ提供者に左右される
![Page 41: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/41.jpg)
Part3. IFrameページの実装
IFrameページの実装は‣現在の環境‣Facebookページの目的‣コンテンツの内容‣更新の頻度などの諸条件から、最適な方法を選択
![Page 42: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/42.jpg)
Part3. IFrameページの実装
詳しい実装手順は本書 Chapter2Section2~4を確認して下さい
![Page 43: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/43.jpg)
Final. まとめ
![Page 44: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/44.jpg)
Final. まとめ
Don’t Feel. Think!
![Page 45: Facebookページ 仕様とデザインと実装](https://reader036.vdocuments.mx/reader036/viewer/2022081401/556a3e97d8b42a4a1e8b48a4/html5/thumbnails/45.jpg)
ご静聴ありがとうございました