株式会社コプロシステム

お問い合わせ

2014年6月 3日

FacebookページのUIがもうすぐ新デザインに!6月13日に切り替わるので主な変更点をまとめてみました

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループのディレクターの石川です。
6月に突入しました!2014年前半・最後の月も、ジメジメとした梅雨に負けず、気合いを入れて業務に取り組んでいきたいものですね!

さて、つい先日、弊社・Facebookページ(以下、FBページ)を操作していると下記の案内メッセージが表示されました。

「新しくなったページをご利用いただけます
このページは6月13日に自動的に新デザインに切り替わります」

その歴史が始まってから幾度となくUIデザインや仕様・機能が変更されてきたFBページ(旧ファンページ)ですが、今月、UIが新しいデザインに変わります。
今年の3月に「Facebook for business」で公式発表があり、5月に入ってからも解説するブログ記事をいくつか見かけていました。

正直、「また?」と思うFBページ運用担当の方やWebクリエイターの方も少なくないと思います。
案内メッセージによると、6月13日に自動的に新しいデザインに切り替わるとのことなので、その日に備えるべく、今回の記事ではその変更点についてまとめてみました。
(「6月6日に切り替わる」と書いてあるブログ記事をいくつか見たのですが、FBページ上の案内を信じます...!)

FBページを運用している方は、ぜひ参考にしてください。:)

主な変更点

  1. FBページTOP(タイムライン)
    • タイムラインは2カラムから1カラムに/右側へ集約/横幅サイズも拡大
    • タイムライン上のサムネイル画像のサイズが変更
    • カバー写真エリアのレイアウト&サイズが変更
    • コンテンツアプリは「もっと見る」から
    • 「ハイライト」は縮小し、代わりにリボンが
    • 「TOPに固定」は変化なし
    • 投稿フォームは変化なし
  2. お知らせ・メッセージ
    • 「アクティビティ」へ集約
    • 未読のお知らせ・メッセージが確認しやすく
  3. インサイト、基本情報
    • インサイト、基本情報は変化なし
  4. アクティビティログ
    • アクティビティログへの導線がわかりにくくなった
    • 機能そのものは変化なし
  5. 設定
    • 目的の設定項目までアクセスしやすくなった

FBページTOP(タイムライン)の変更点

タイムラインは2カラムから1カラムに/右側へ集約/横幅サイズも拡大

いままで2カラムで表示されていたタイムラインは1カラムになり、ページの右側へ集約されました。
また、その分横幅が拡大し、片側:411px だったのが 512px まで広がりました。


ページ左側には、

  • ファンユーザー(ユーザーの招待)
  • FBページの情報(概要、URL)
  • 写真・動画のサムネイルリスト
  • ノート
  • レビュー
  • つながりのあるFBページ

などが表示されます。
いままで色々なところにバラついていたコンテンツが順序よく集約されたので、使いやすくなった印象です。


タイムライン上のサムネイル画像のサイズが変更

リンク投稿のサムネイル画像

タイムラインの横幅が拡大したことで、当然そこに表示されるサムネイル画像も拡大しています。
リンク投稿をした時に表示されるサムネイル画像は、
377px × 181px(2.08 : 1)

484px × 252px(1.92 : 1)
となり、大きさが拡大しただけでなく、アスペクト比も変わり少し縦長になりました。


画像投稿のサムネイル画像

画像投稿をした時の表示エリアは、横幅最大:504px × 高さ最大:504px まで表示されます。
このサイズ以上の大きな画像は、アスペクト比を保ったまま縮小されます。

  • 例えば、横幅 1,000px × 高さ 500px の横長画像の場合。
    横長なので横幅を基準とし、アスペクト比を保ったまま縮小すると、横幅 504px × 高さ 252px となります。(下図①参照)
  • 今度は、横幅 500px × 高さ 1,000px の縦長画像の場合。
    縦長なので高さを基準とし、アスペクト比を保ったまま縮小すると、横幅 252px × 高さ 504px となります。
    画像表示エリアの左右の部分が余るので、余白スペースがグレーになります。(下図②参照)
  • 逆に、横幅 300px × 高さ 150px や、横幅 150px × 高さ 300px など、表示領域より小さな画像の場合。
    拡大されることはなく、そのままのサイズで表示され、余白スペースがグレーになります。(下図③参照)


カバー写真エリアのレイアウト&サイズが変更

サイズの前にまず「レイアウト」についてですが、いままでカバー写真の外側にあった、FBページ名/FBページのカテゴリ/いいねボタン/フォローボタンなどが、カバー写真の内側に入りました。
そのため、カバー写真の下端はボタンなどでかなり隠れるようになってしまったので、もしカバー写真の下端に大切な情報(例えば商品名など)を含ませていたら修正が必要です。


カバー写真もプロフィール写真も、サイズ自体は変わっていません。

  • カバー写真:851px × 315px
  • プロフィール写真 内枠:160px × 160px
    (外枠:170px × 170px)

しかしながら、上記のようにカバー写真上に乗っかる要素が増えたため、プロフィール写真の位置が上方向にズレています。
ですので、もしカバー写真とプロフィール写真が連動するような(合体して1つの絵になるような)ものは修正が必要です。


例えば、「オロナミンC」のFBページは、カバー写真とプロフィール写真が連動&カバー写真の下端に商品名が配置されているため、それぞれの画像を少し修正する必要があると思われます。


コンテンツアプリは「もっと見る」から

いままで、プロフィール写真の真下に、基本データへのテキストリンクやアプリタブ群が配置されていましたが、それらがグローバルナビゲーションのような形でスッキリまとまりました。

「タイムライン」と「基本データ」は位置が固定されていますが、その他のコンテンツアプリは順番を並べ替えることができます。
グローバルナビゲーションエリアに入らなかったコンテンツアプリは「もっと見る」から移動することができます。


また、「もっと見る」に収納されているコンテンツアプリは、左カラムの中の「アプリ」から確認することもできます。


「ハイライト」は縮小し、代わりにリボンが

通常の投稿を大きく目立たせて、ユーザーにリーチすることができる「ハイライト機能」。
いままでは、2カラム分の横幅を取りかなり大きく表示されていましたが、今回のデザイン変更でサイズが縮小化。
代わりに、投稿の右肩に★マークが入ったリボンアイコンが付与されるようになりました。


「TOPに固定」は変化なし

「TOPに固定」は特筆すべき変化はなく、いままで通り右肩にオレンジのリボンアイコンが付与されます。


投稿フォームは変化なし

投稿フォームは、特筆すべき変化はありませんでした。

お知らせ・メッセージの変更点

「アクティビティ」へ集約

旧デザインでは、管理しているFBページの上部には「ページマネージャ」があり、○○さんにシェアされた などの「お知らせ」や、ユーザーから届いたメッセージが見れるようになっていました。
それらは、今回の新デザインで「アクティビティ」というメニューの中で閲覧できるようになります。


未読のお知らせ・メッセージが確認しやすく

ページ右側の固定フロートエリアに、

  • 今週の「いいね!」
  • 今週の「投稿のリーチ」
  • 未読のお知らせ
  • 未読のメッセージ

が表示されるようになりました。
特に、未読のお知らせとメッセージが数字で分かりやすく表示されるのは便利ですね。
クリック要らずで、マウスオンすると表示してくれます。

インサイト、基本情報の変更点

インサイト、基本情報は、特筆すべき変化はありませんでした。

アクティビティログの変更点

アクティビティログへの導線がわかりにくくなった

アクティビティログは、以前もわかりにくい場所にメニューがあったのですが、さらにわかりにくくなっていました。
「アクティビティログ」という名前なので、当然「アクティビティ」の中にあるものと思ったら、「設定」の中に入っていました...。うーん。


機能そのものは変化なし

アクティビティログの機能そのものは、特筆すべき変化はありませんでした。

設定の変更点

目的の設定項目までアクセスしやすくなった

いままでの設定ページは、一般/ページ情報/お知らせ までしかなく、それ以上の設定は「その他...」をクリックすることで初めて表示されました。
今回の変更で、すべての設定メニューが左サイドに表示され、目的の設定項目までアクセスしやすくなりました。

まとめ

  • 6月13日にすべてのFBページが自動的に新しいデザインに切り替わる
  • カバー写真エリアのレイアウトが変更になっているので、カバー写真とプロフィール写真を一体化させたようなデザインの場合など、クリエイティブに修正が必要なケースもある
  • その他の点については、早急に何か作業が必要なわけではない
  • いままで色々なところにバラついていたまとめるべき機能・コンテンツが順序よく集約され、全体的に使いやすくなった印象
  • 個人アカウントのタイムラインのUIにかなり近づいた(ほぼ同じ)
  • 6月13日より前に新デザインに変えると、旧デザインには戻せなくなるので注意が必要


以上、今月実施されるFBページの新デザインへのリニューアルについて、変更点のまとめでした。
いかがでしたか?
焦って何かを行う必要はありませんが、FBページを運用している方は、事前の心構え・実施後の参考資料として、ぜひご覧いただければと思います。:)


  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Facebook」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP