【Facebook】複数画像の並び方の法則を発見!『アルバム投稿』の見え方を検証してみた。

2017/05/01

画像を2~5枚投稿した際の『表示のされ方』を調べました。


Facebook アルバム投稿 複数画像

みなさんもおそらく一度は、Facebookのアルバム投稿を目にしたことがあるかと思います。友達がアップロードした複数の画像が、良い感じに並んで表示されているアレです。


特に最近、このアルバムがニュースフィードに流れてきた時の、画像の並び方に色々なパターンがあることにお気づきでしょうか?ある時は上に1枚・下に2枚表示されたり、またある時は左に1枚・右に3枚表示されたり…


本記事では、このアルバム投稿をした際のニュースフィード上での画像の表示のされ方について調べました。


アルバムに含まれる画像のアスペクト比とアップロードする順番によって、ニュースフィード上での並び方・見え方が決まるということがわかったので、そちらの法則をご紹介します。綺麗にアルバムを表示させたい方は、是非ご一読ください!


※編集部注:2017年5月26日に、加筆修正しました。



    ■目次


  1. アルバム投稿の画像の表示のされ方について

  2. Facebookページで複数の画像を投稿する方法

  3. 検証概要

    • 2枚一緒に投稿したときの表示パターン

    • 3枚一緒に投稿したときの表示パターン

    • 5枚一緒に投稿した時の表示のされ方



  4. モバイルではどう表示される?

  5. 注意点

  6. まとめ


1. アルバム投稿の画像の表示のされ方について


アルバム投稿とは、下の画像のように複数の画像をまとめてアップロードできる機能です。



ニュースフィード・タイムライン上でも複数の画像が一緒に表示され、一つひとつの画像はクリックして拡大できます。


さて、このアルバム投稿ですが、下の画像のように微妙に表示のされ方が違うこともありますよね。



調べてみたところ、やはり画像のアスペクト比・順番によって表示のされ方が変わるということがわかったので、そちらの法則を共有します。


※今回主に検証したのは、『Facebookページ』が複数画像を投稿した場合の表示のされ方です。後述しますが、『個人アカウント』が複数画像を投稿した場合とは少し違います。


※また、今回はPC版のFacebookのニュースフィードでの見え方について検証しました。モバイル版Facebookのニュースフィード上の表示のされ方も大体同じですが、相違点などについて後半に少し触れます。


2. Facebookページで複数の画像を投稿する方法


検証結果を解説する前に、Facebookページで複数の画像を投稿する方法を確認しましょう。


手順1:「写真/動画アルバム」または「写真・動画」を選択します。



手順2:次の画面でるので、再度、「写真/動画アルバム」または「写真・動画」を選択します。




手順3:投稿したい写真を選択し、「投稿する」を選択して完了です。



3. 検証概要


今回検証に使った画像は、こちらの12枚。



赤:800×600ピクセル(4:3)


黄:600×800ピクセル(3:4)


青:600×600ピクセル


それぞれ横長・縦長・正方形となっています。


これらの3つの形が異なる画像を、様々な組み合わせ・順番で一緒に投稿してみました。


2枚一緒に投稿したときの表示パターン


まずは2枚一緒に投稿した場合の、表示のされ方を見てみましょう。(※投稿編集画面では、画像はアップロードした順に左から並んでいます



▼横長×横長


(左)投稿画面(右)ニュースフィード上の表示のされかた




▼縦長×縦長


▼正方形×正方形


ご覧の通り、2枚の画像が横に並んだもの縦に並んだもの2つの表示パターンが確認できました。


形が違う2枚の画像を投稿した場合はどうなる?


では、次にこれらの画像を別々に組み合わせて、形が異なる画像を2枚一緒に投稿した場合の表示のされ方も見てみましょう。


▼縦長×横長 ⇒ 縦長の画像が横に並ぶ


▼横長×正方形 ⇒ 横長の画像が縦に並ぶ


▼正方形×縦長 ⇒ 正方形の画像が横に並ぶ


ご覧の結果になりました。だいたい法則が見えてきましたね。


画像を2枚投稿した際の表示のされ方の法則


投稿する際に1番最初にアップロードした画像(投稿画面で一番左に配置されている画像)の形によって、表示されるパターンが3種類から決まる。


3つの表示パターン


・最初にアップロードした画像が縦長の長方形の場合:


縦長の画像が2枚横に並んで表示される。2枚目は左右が切り取られる。


・最初にアップロードした画像が横長の長方形の場合:


横長の画像が2枚縦に並んで表示される。2枚目は上下が切り取られる。


・最初にアップロードした画像が正方形の場合:


正方形の画像が2枚横に並んで表示される。2枚目は上下(左右)が切り取られる。


3枚一緒に投稿したときの表示パターン


では次に、3枚一緒に投稿した場合の表示パターンを見てみましょう。


▼横長×3 ⇒ 上に横長が1枚・下に正方形が2枚


▼縦長×3 ⇒ 左に縦長が1枚・右に正方形が2枚


▼正方形×3 ⇒ 正方形が3枚横並び


ご覧の通り、こちらも3つの表示パターンが確認できましたね。


形が違う3枚の画像を投稿した場合はどうなる?


では次に、異なるサイズの画像を一緒に投稿した際の表示パターンも見てみましょう。


▼横長×縦長×正方形


▼縦長×正方形×横長


▼正方形×横長×縦長


画像を3枚投稿した際の表示のされ方の法則


3枚投稿した場合も、1枚目のサイズ・アスペクト比によって、3つの表示パターンが適用されるということがわかります。


2枚目以降は、1枚目によって決められたパターンにフィットするように、上下左右が均等に切り取られ、画像の中心が写るように表示されます。


5枚一緒に投稿した時の表示のされ方


似たような画像ばかりになってきてしまったので画像は端折りますが、4枚一緒に投稿した際も、同じく最初にアップロードした画像によって、3種類の表示パターンがあるということを確認しました。


ページがアルバム投稿した場合4枚以上は表示されない!?


では最後に、5枚投稿した場合はどうなるのでしょうか?ニュースフィードでは友達のアルバム投稿は最大で5枚一緒に表示されているのを目にしたことがあります。5枚目を作って検証してみたところ…



ご覧のように、ニュースフィード上には画像は4枚しか表示されません。そして追加した写真の枚数はちゃっかり『5枚』になっています。


個人アカウントがアルバム投稿した場合は5枚まで表示される


ちなみに、同じ画像を個人アカウントで投稿してみると、以下のようになりました。



…なぜかはわかりません。マジ謎です。仕様でしょうか?


ともかく。ここから言えるのはFacebookページ(個人アカウントではない)が画像を5枚以上投稿しても、アルバムとしてまとめて表示されるのは最初の4枚までということです。少し気をつけたいですね。


4. モバイルではどう表示される?


ちなみにモバイル版Facebookでは、Facebookページがアルバム投稿をした場合は、ファンのニュースフィード上には画像が1枚ずつ表示されます。


▼1枚ずつ表示され、次の画像はスライドして見ることができます。


逆に、友だち(個人アカウント)のアルバム投稿はPC版フィードと同じく1画面に複数表示される仕様になっています。


5. 注意点


極端に小さい画像は入れないように


最後にもう一点、画像の大きさもなるべく統一した方が良いというポイントも付け足しておきます。


例えば下の画像をご覧ください。


▼左のビールの画像の画質が悪いですよね。


このビールの画像は100×150ピクセルですが、このようにアルバムの中に極端に小さい画像が混ざっていると、無理やり他の画像と一緒に表示させるために拡大されるので、画質が悪くなります。


特にアップロード1枚目はフィード上で一番大きく表示されるので、小さい画像が1枚目にこないように気を付けましょう。


6. 最後に


いかがでしたでしょうか。


少し前の記事でも複数画像投稿についてご紹介しましたが、比較的最近また画像の表示のされ方が変わったようなので、検証してみました。


今回の記事は、特にFacebookの企業ページがアルバム投稿を綺麗に表示させたい場合に参考にしていただきたいと思い、まとめました。


個人アカウントが投稿したアルバムも、前述の5枚以上投稿したケースを除くと、大体今回ご紹介した法則が適用されますが、おそらく顔認証などによって微妙に表示のされ方が違う例も確認したので、そちらについても引き続き調査する必要がありそうです。




以上、『【Facebook】複数画像の並び方の法則を発見!『アルバム投稿』の見え方を検証してみた。』でした。


あわせて読みたい関連記事:


複数の画像を投稿できるようになった。などFacebookページアップデート情報まとめ(2013年後半編)


Facebook・Twitter・LINEが続々アップデート!広告・新機能に関する最新情報をまとめました。


この記事を書いた人:ソーシャルメディアラボ編集部

企業のWeb担当者様が積極的にSNSをビジネス活用していけるよう、ソーシャルメディア関連の「最新ニュース」「運用ノウハウ」「事例・データ」の情報を素早くキャッチしてお届けします。