もうDIYでいいよ。

facebook画像おさらい

注/この記事は、facebookページのPC画面でのレイアウトを話題にしていますが、
2014年3月にレイアウトが変更され、記事の一部が現状とは異なる場合があります。
最新記事 『2014 facebook 変更点』 (←link) も読まれると、理解が深まります。

 

最近、facebook の更新が滞っていて、先日久しぶりに投稿したところ、画像投稿のコツをすっかり忘れていました。

まったく鳥の頭のような記憶力ですが、気を取り直して画像upの注意点について勉強し直しました。

 

すると、いままで知らなかったことも分かったので、備忘録もかねて今回、『画像おさらい』として、まとめます。

 

今回の事例は、個人が実名で運営する通常のfacebookではなく、団体やブログが”ブランド名”でページを持てる

facebookページ』ですが、個人のfacebook の画像の参考にもなると思います。

 


おさらい1

画像サイズは
この4種類だけ
知っておく

 

 

プロフィール画像は、2012年4月に、125×125から160×160表示に変更になりました。また、表示は160ですが、

180×180 サイズの原稿up を、facebookは推奨しています。

通常投稿画像のサイズについては、『404×404 が基準』と明記している記事が多いのですが、404の根拠を確認できて

いません。とりあえす現在の表示画面から確認できるサイズは、403×403です。

 


おさらい2

通常投稿画像は
403×403サイズを基準に
勝手にトリミングされる

 

 

タイトルのように表現すると、facebook は、ずいぶん勝手なことをしているようですが、おそらく良かれと思ってやっているのです。

そのアルゴリズムは、たぶん下のようなことだと思います。500×1000 pix と、1000×500 pix の画像を投稿した例を示します。

もちろん、自動トリミングされた後も、画像の位置をズラすことができますので、ある程度ねらった被写体を見せることはできますが、

少し小さくなっても画像全体を見せたい時には、おせっかいな自動トリミングといえます。

トリミングなしの全体表示は、アルバムへのアップロード時に高品質設定をすることで可能との記事も見かけますが、タイムライン

画面だけで完結させたい場合には、ちょっと面倒です。

 

『もうDIYでいいよ。』facebookページでは、こういう自動トリミングがされないように、あらかじめ縦長用・横長用の正方形フォーマット

を自作しています。

 


おさらい3

upされた画像は
画質がかなり劣化すると
覚悟した方がよい

 

 

facebook のサーバーへは、全世界から膨大な画像が送られ続けていますので、データ量を抑えるために画像データは極限まで

圧縮される仕組みになっています。

特に目立つのがカバー画像やプロフィール画像。高圧縮されたJPEGでは、複雑な写真より、むしろ幾何学的な単色平面の画面で

ダメージを受けやすく、モスキート・ノイズが現れるようになります。

下画像は、『もうDIYでいいよ。』のfacebookページのカバー画像です。中央のオレンジの部分の劣化が分かりやすいと思います。

劣化への対処法としては、画質を100%の最高画質で保存せず、かえって80%以下にする(←link)文字や平面構成的要素

が多い場合はPNGで保存する(←link) などの方法が検索できます。

ヨナデンの実験で、元画像を画質68%で保存した場合については、劣化は残念ながら、改善されませんでした。

 


おさらい4

カバー画像とプロフィール画像が
一体化した楽しいページ作りは
これからも挑戦したいテーマ。

 

 

2012年に、新しいタイムライン式のfacebook画面になってから、プロフィール画面とカバー画面を上手に組み合わせた

楽しいデザイン事例を多く目にするようになりました。

『もうDIYでいいよ。』facebookページも、少しだけでも、そんな雰囲気が出るように工夫しましたが、そのための微調整は、

かなり原始的な手作業でした (^Д^;)

現在は、プロフィール画面とカバー画面を一体化できる色々なアプリが出ているようなので、またアイデアを試して見たい

と思います。‥というか、まずは投稿を優先すべきではありますが(^Д^;)

 

以上、最後まで読んでくださってありがとうございました。

 

 

  『2014 facebook 変更点』 (2014年3月に変更になった画像レイアウトについて)

  『俯瞰(ふかん)図のコツ』 (Webコンテンツのイラストで重宝する俯瞰表現のコツ)

  『継ぎ目無し背景のコツ』 (ブログ背景をエンドレス・シームレスの画像にするコツ)

  『エヴァ・デザインを楽しむ 1 』 (極太明朝体の活かし方とデザイン・パターン)

  『エヴァ・デザインを楽しむ 2 』 (六角形パターンとグリッド・デザインの上手さ)

  『21人の頭のある柱頭』 (ヨナデン使用のペイント・ソフトとタブレットを紹介)