2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解

2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解

webのあれこれ
2018/04/19
6
vanillaice (Akira)
vanillaice (Akira)
OGP

OGP画像 というのがありますよね。各記事の「代表的画像」と表現しても良いかもしれません。各種SNSシェアなどでもこのOGP画像がサムネイルとして表示されます。FC2ブログ的に言い換えると トップページや関連記事リスト、新着記事リストなどで表示されるサムネイル画像 = OGP画像

その画像のサイズは一体どのぐらいが適切なのか。 2018年4月現時点で最低でも 横1200px が回答ということで良いと思います。

Facebookの推奨サイズは横1200px

これは2015年あたりの改正からもう1200px推奨になっています。で、実際は縦サイズにも推奨があり 1200 × 630 です。アスペクト比にすると約16:9の横長です。この 16:9 という比率も頭の片隅に置いておくと良いですね。YouTubeのアスペクト比も16:9です。

現在は大スマートフォン時代と言っても過言ではないですし MFI が徐々に本格化しているわけなんですが、スマホで撮影する写真って縦長が多いですよね。でも web上の推奨はどのサービスをとってみても横長である 点をお忘れなく。まぁ簡単に考えても「一枚の画像がスマホ画面のほぼ全てを埋めている」という状況は好ましくありませんので、スマホ時代だからこその「横長推奨」ということでしょう。スマホ撮影画像を掲載する方は撮影時に横に倒して撮ると良いですね。あまりそういう人みかけないけど(笑)

スマートフォンでそんなに大きい画像が必要なのか?

ところが必要なんですね。パソコンよりもスマホの方が寧ろ必要。
既に記事にしていますのでご参照ください。

スマートフォンで画像がぼやける際の対処と画像容量削減

スマートフォンで画像がぼやける際の対処と画像容量削減

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...

スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】

スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】

何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。 という記事を以前に書き、その原因・対処なども記しています。 その記事だけやたらアクセスが多いんですよね。 つまり多くのスマートフォンユーザーさんが困ってるってことよね。 スマートフォンで画像がぼやける際の対処と画像容量削減 - カスタマイズスマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・`)そしてもうひとつ...

今後も「高画質」を謳ったスマホというのはどんどん輩出されることが予想されます。ということは求められる画像サイズはそれに比例して大きくなって行く。繰り返しになりますが、スマホの画像ぼやけ対策は画像そのものの「解像度」ではなく「サイズ(寸法)」の問題です。

スマホだけではなくパソコンも4K, 5Kという時代です。が 今の、そして今後のwebで最も重要視されるのはパソコンよりもスマートフォン なのでスマホを主軸に据えた 1200px推奨です。

AMPの規定サムネイルサイズも横1200px

2018年以前は「最小で横696px」だったんですが、2018年の改正以降は「最小で横1200px」に変更となっています。AMPは規格やマークアップなどが厳密なのでアスペクト比の規定もあります。16:9 または 4:3 または 1:1 です。

FC2ブログではAMP版の提供がありませんので規格などは関係ないとはいえ。仕様を確認することでGoogleの意向が透けて見えてきますので無駄にはなりません。AMP版の トップニュースカルーセル などはこの画像に関する要件が守られていないと掲載対象から外れてしまいますので、「大体」「なんとなく」では済まされないんですね。一般のブログでそこまでやる必要が有るかと問われれば「無い」と個人的に答えます(笑)
縦横比まではなかなか難しいですよねぇ (´・ω・`)
それでも気にかける人は横1216縦684 (つまり 16:9)で切り出すクセをつけておくと良いかもですね。

ページスピードとの折り合い

ページスピード測定を行うと大抵こういう警告を頂戴します。画像のサイズをCSSで縮小するんじゃあないッ!画像編集で指定サイズと実寸を同じにしろッ! みたいな (´・ω・`)
画像の容量と寸法は密接な関係がありますので、CSS調整ではなく実寸を変えろというお達しですね。

でもこれってFacebookやGoogleが言ってる(推奨している)ことと真逆なんですよ。スマホでも1200px確保しろと言ってみたり、スマホは画面が小さいのだから実寸300pxに加工しろと言ってみたり。どうしろっつーの

2019年5月7日
現在では「表示寸と原寸を揃えよ」という指摘はされなくなりました。「『webP』など軽量拡張子を利用せよ」と指摘されます。

ここはGoogle的にも頭の痛い問題だと思います。で、現時点では「こういう現実があります。」としか言えません。個人でLazyloading導入で対処するとか、そのぐらいしか。

拡張子によるアプローチ

新拡張子 heic というのがようやく新規格として認められました。従来の .jpg や .png と比較して、より高画質でありながら容量は約半分に抑えられるという代物です。iPhoneでは8以降で利用できます。

ただ拡張子というのは浸透するまでにかなり時間を要しますよね。情報を受取る側の規格の問題があるからです。例えばiPhoneでheic拡張子が使えるかといって、FC2ブログにアップロードする際にはFC2ブログのサーバーが.heic拡張子をサポートしてくれないことにはどうにもならない。ソフト・アプリケーションの対応を待たなければ仕方がないわけです。

まぁそういう状況ですのでheicは一旦置いといて。PNG拡張子を高画質の神と信じて頑なにPNGを利用する人 がまだまだ多いように思うのですが。その画像はJPGに変換しても画質の維持は可能じゃないですか? (´・ω・`)
もちろんpngの方が扱える色素数が多いので「画質が良い」は間違いではありませんけれど。肉眼で区別できる?どーお? (´・ω・`)

スクリーンショットはpngが向いてます。というのはスクショというのはテキスト(文字, フォント)が含まれているケースが多くなるからです。画面をキャプチャするということは画像としてDLできないからという理由ですよね。大抵は。で、テキストというのはjpgだとひどくぼやけてしまいますので、一般的なキャプチャというのはpngで保存するようになっているかと思います。なのでスクショにpngというのは妥当かなと思いますが、風景画や人物画ならjpgで十分じゃないかしら (´・ω・`)
pngで1200px確保しようと思ったらすっごい容量大きくなりますよ。それが何枚も掲載されてたら見る側は嫌になっちゃう(ページが重たいから)
そのあたりも個人で考慮すべき点かなぁと思います。

まとめ

細かい点は抜きにして何を言いたいかというと FC2ブログでサムネイル対象となる画像は横1200pxにしておくと良いよね という話し。
スピードにめちゃくちゃコダワリがあって1200pxなんてとんでもない!という方は別ですが。結局は妥協・折り合い・バランスの話しであって、どれか一つだけ突出させれば良いわけではないと思います。とりあえずサムネイルとなる画像は1200pxで準備して、記事内の他の画像はもっと小さくしておく、とか。そこは個人の裁量で (o'ω')

Related post

Comments  6

-
2018/04/21 (Sat) 20:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/04/21 (Sat) 21:28

To アスペクト比の件 内緒さん

こんばんは (o'ω')ノ

Facebookは16:9ではありませんが16:9というのは黄金比なので、それを強調するために「約」としました。
web上では16:9を守っていればほぼどのサービス・どのシステムでも問題はないと思いますよ、という意味で。
なので内緒さんがサムネイル画像を今後サイズ編集を行い、横1200を規定とするならば私としては縦675をおすすめします。
なんでかというと、AMPは画素数も規定があって80万画素ないとダメなんですね。
縦628だと約75万なので若干下回ります。675の場合は81万です。
といってもトップニュースカルーセルの要件なので一般ブロガーには(ほぼ)無関係ですけどね (´・ω・`)
AMP自体FC2が導入するかどうかわからないわけだし。

なんで私のおすすめ例が1216にしてあるかというと、Windowsパソコンの余剰分です。
Macの1200px横幅はWindowsの約1184pxなので、ってここはまぁテンプレート制作上のビューポートの関係なので1200pxでも構いません(笑)

-
2018/04/21 (Sat) 22:15

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2018/04/22 (Sun) 10:57

To アスペクト比の件 内緒さん②

こんにちは ('0')/

FC2ブログのAMPが実現するかはわかりませんし、どのみち導入されたとしても記事毎にかなりの書き直しを余儀なくされるはずですが、画像ぐらいは規定にしておくといざという時多少は楽かも(笑)
そう考えると自由度の制限されたブログサービスの方が良いのかもしれませんね。
なんでも運営任せという意味で(笑)

画像って編集した後は元ファイルをゴミ箱へ… という方も多いと思いますので、元を16:9で取っておけばたぶん正解ではないかなぁと思います。
たぶんね。たぶん(笑)

hige
2018/04/22 (Sun) 22:53

アスペクト比

 アスペクト比のことでちょっと書かせて下さい。
 そんなことなど知っとるわいと外野席から一杯ガヤが飛んできそうですが。
 まずアスペクト比を日本語で言うと縦横比ということになると思います。これでいくと縦:横なので、Akira氏おっしゃられてるのを言い換えると9:16という言い方になりますね。
 でもそれを16:9と横:縦の順に言うのがアスペクト比の一般的な言いまわしになってますよね。
 じゃ 横縦比 はなんて読めばいいの。

 横縦比(アスペクト比)が16:9というのは、もう日本人全員が慣れ親しんだ地デジ画面の横縦比ですね。
 スマホでも今はこの16:9というハイビジョンサイズで動画を撮ることができるし、デジイチ(デジタル一眼カメラ)でもこのハイビジョンサイズで動画を撮る機能は搭載されてます。
 昔のアナログテレビの横縦比は4:3でした。昔の動画の標準は4:3なので監視カメラも同様です。
 監視カメラのハイビジョン化は費用の関係もありなかなか進んでないようです。
 この影響でデジカメ(コンパクトデジカメも含む)も4:3の横縦比をオプションとして持ってます。
 で、私が持ってるデジイチでは、1:1、3:4、16:9 以外に 3:2 という横縦比が選択できます。
 この3:2という横縦比は、カメラ屋というかカメラ撮影を主とされている人たちが、必ず採用されている横縦比です。
 この横縦比はフィルムカメラからの流れで、殆どの方がこれで撮っておられると思います。16:9というのは現状をみればありかも知れませんが、4:3はないと思います。
 なので写真のアスペクト比の絶対多数は3:2。
 写真の縦横比にはおもしろいことがあって、公募写真の場合、四つ切りの紙に印刷(プリントアウト)されたものという応募規定されてる場合があります。
 この場合の横縦比は6:5とかなり正方形に近くなります。で、色々調べてみると大昔の組立暗箱という原始カメラの横縦比に行き着きました。

 ともあれ、現代のスマホを含めた撮影事情は高画質化、高画素化に向ってまして、1200pxなんぞ小さい小さいと云うことになります。
 FC2の場合、他の無料ブログよりは画像のアップデート容量が多いにもかかわらず、容量を心配されて、画像を小さくされるとか、画像の盗用が心配なので小さい画像にしているとかがあるのではないでしょうか。
 ながながと書いてごめんなさい。
 自ブログに書いて、リンクを貼れば良かった。
 

vanillaice (Akira)
Akira
2018/04/23 (Mon) 00:04

To higeさん

一般的には「横」「縦」ではなく「長辺」「短辺」ではないですかね。
html, CSS的には「横」「縦」ですね(後述)

アスペクト比は時代に応じてかなり変化しています。
テレビにしても4:3やらなんやら色々存在している中で、ある程度揃えようや、と。
すると現存している様々な比率の画面を最も効率的にカバー(見切れ・寸足らずを最小限にする)できたのが16:9、という認識ですが合ってるかどうかはわかりません(笑)
いずれにしろweb上での黄金比は16:9なのでそれを守っていればほぼ間違いはないと思いますよ。
また時代が進化するにつれ状況が変わるかもしれませんけどね。

長辺:短辺 がポピュラーな表現で、説明書きなど場合によっては「横縦比」と表現しているものもありますね。
映画フィルムやスクリーンが 短辺:長辺 で表現されるのはたぶん昔からの習わしだと思います。

CSS的には 横:縦 ですね。
何故ならそれが一番効果的だからです。
縦サイズを指定する際に親要素の「横幅」を基準に算出するケースは多々あります。
なので 縦:横 では具合が悪いんですね。横をまず決めなければ縦が決まらないから。
で、比のどちらが横でどちらが縦かを明示する必要が無い場合web製作者は恐らく「縦横比」という表現ではなく「アスペクト比」という表現を意図的に用いることが多いと思います。
そして英語圏では「5:3だよ」と言われた時には脊髄反射的に 5 = 横(width) と受け取られます。
映画関連はさきほど書いたように「短辺:長辺」なので 5:3 ではなく 3:5 という表現になりますが、3を横だと思う人は居なくても「あれ?フツー逆じゃね?」と感じる人が多いような ^^;

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)