在宅ワーク

ブログの画像に適した美しい比率(アスペクト比)はどれ?

ブログを始めた時につまづいたのが、自分のブログに合った画像のサイズってどのくらいなの?という素朴な疑問です。

 

私の場合はスマホで撮った写真が多いので、元のままだと

  • 3,264✕2,449ピクセル
  • 5MB
  • アスペクト比4:3(横向き)

さすがに大きすぎてこのまま載せる訳にはいかないので、ブログにアップする前にトリミングとリサイズをしています。
(皆さんしてると思いますが)

  1. トリミング・・・画像を切り取って縦横比(アスペクト比)を整える
  2. リサイズ(縮小)・・・見た目を小さくする
  3. リサイズ(圧縮)・・・容量を小さくする

ふーこ
ふーこ
実はアメブロの時は、スマホで撮ったままの写真(縦)を適当にどーん!と貼ってた無知ブロガーふーこです・・・

かなり今更ですが、ブログに適した画像サイズをある程度統一して、すっきり読みやすく、かつ画像処理にかける時間を短縮したいと思いたちました。

1記事にまとめると長くなるので

  1. しっくりくるアスペクト比探し
  2. 記事幅にあったピクセルサイズ探し
  3. 画像圧縮で軽量化計画

に分けて自分なりに検証してみたいと思います。

 

今回は「しっくりくるアスペクト比探し」です。

アスペクト比とは?

アスペクト比は、矩形(くけい)における長辺と短辺の比率。
※矩形=長方形

出典:Wikipedia

 

現在ブログに使っているアスペクト比

このブログに使っている画像の比率は、バラバラなときもありますが、基本的には

  • アイキャッチ画像→16:9
  • 記事内の画像→3:2

にトリミングして使用しています。

画像加工も全部スマホでやっています。

Googleフォト使い方アイキャッチ
スマホで簡単「Googleフォト」色調補正とトリミングのやり方 ブログに写真を使いたい時は、トリミングなどの加工をすると思いますが、フォトアルバムで使われている「Googleフォト」でも簡単に色調...

画像のアスペクト比とサイズは使用テーマに合わせる

アイキャッチの最適サイズ

テーマによってアイキャッチ画像の推奨サイズは違ってきます(知らなかったよ・・・)

私が使っているワードプレスのテーマ「JIN」のアイキャッチ推奨サイズ

760✕428ピクセル
アスペクト比は16:9です。

JIN公式サイト

横760px:縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。

と明記されているので、その通りに作っています。

アイキャッチは「Canva」で作っています。

記事内の画像の最適サイズ

アイキャッチサイズは公式サイトで明記されてるので、迷うことはなかったんですが・・・。

悩んだのは記事内に載せる画像

いろいろ推奨サイズを調べてまわっても、見事にバラバラ!

ふーこ
ふーこ
テーマの違いや好みもあるので、一概にこのサイズ!っていうのは難しいんだろうなぁ・・

Twitterアンケートで聞いてみた結果

他のブロガーさんがどんなアスペクト比の画像を使っているのか知りたくて、アンケートをお願いしてみました

だいたいスマホの横向きで撮った写真だと、16:9か3:2

一眼レフやデジカメで撮った写真だと3:2か4:3

なので、上記3つの比率がメジャーかなと思ったんですが

https://twitter.com/fukoblog/status/1094381961194491904?s=19

けっこうバラツキがありました・・・。

ふーこ
ふーこ
あれ、その他が1番多いよ(汗)
その他の比率って何?

コメントをくれたブロガーさんのアスペクト比

・ほしにゃーさん
1200✕630ピクセル (1:1.9くらい)

>>>>ほしにゃーろぐ

・アラフォー父ちゃんさん
600✕450ピクセル (4:3) 50KB以下

>>>>それゆけ アラフォー夫婦のチート育児

結局のところ「これ!」という絶対値はなくて、皆さん自分の好みで決めてそうです。

よく見るアスペクト比で実際に比較

ほかの比率も調べてみると

  • 黄金比という比率があること。
  • Instagramで一般化した1:1を使っている人もいること。

がわかりました。

ふーこ
ふーこ
うーん、「その他」を選んだ人はこの比率なのかなぁ?

大きさ順に並べるとこんな感じでしょうか。

16:9<黄金比<3:2<4:3<1:1

もう考えていてもよく分からないので、それぞれのアスペクト比にトリミングして並べてみました。

横幅は700ピクセルで統一しました。

写真は海遊館に行った時に、私のスマホで撮影したものです。

16:9 700✕394

・最近のテレビ(ハイビジョン)
・YouTubeのサムネイル
・Twitterのタイムライン(スマホ)

サイズテスト16-9

ふーこ
ふーこ
PCで見るとすっきりとして見える。
スマホで見るとちょっと細長い印象。

黄金比 1:1.618  700✕433

人間が最も美しいと感じる比率らしい。

・名刺やハガキ、Appleのロゴなど

サイズテスト黄金比

ふーこ
ふーこ
PCでもスマホでもバランスよくて、一番いい感じだと思いました。

3:2 700✕467

・フィルムカメラ
・デジタル一眼レフカメラ

サイズテスト3-2

ふーこ
ふーこ
PCで見るとやや縦に長い印象。
スマホで見るとちょうどいい。

4:3 700✕525

・昔のテレビ
・コンパクトデジカメ
・スマホのカメラ

サイズテスト4-3

ふーこ
ふーこ
PCで見ると正方形に近く見える。
スマホでもやや縦に長めの印象。

1:1 700✕700

・Instagramの投稿

サイズテスト正方形

ふーこ
ふーこ
PCでもスマホでも、画面いっぱいにドーン!と埋め尽くされてしまい、ブログではちょっと見づらい感じ・・・・・・
小さければありかも。

ブログに適したアスペクト比まとめ

実際に比べてみて感じたのは、

  • 横長のPC画面で見ると、実寸より縦長に見える。
  • 縦長のスマホ画面で見ると、実寸より横長に見える。

と、PCとスマホで画像の見え方が違いました。

個人的にPCでもスマホでも、ブログに一番しっくりくるな~と感じたのは、「黄金比」でした。

二番目は3:2かな。

かなり好みが分かれるとは思いますが。

 

ただ、見出しの下に入れるアイキャッチ画像の場合は、16:9が一番すっきりすると感じました。

ふーこ的おすすめアスペクト比まとめ

  1. 文字主体で、見出し下に入れるアイキャッチ画像なら16:9
  2. 説明的に入れる画像なら、黄金比か3:2
  3. 写真を重視したブログなら3:2か4:3

という感じです。

ふーこ
ふーこ
ご自分のブログにしっくりくる画像のアスペクト比を見つけてみてください

NEXT
記事幅にあったピクセルサイズ探し(予定)

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください