WordPressテーマ『SWELL』のアイキャッチ画像の最適なサイズについて

SWELLのアイキャッチ画像はどれくらいのサイズにするのがいいのかな?

この記事ではワードプレステーマ「SWELL」に最適なアイキャッチ画像のサイズについて

  1. 横幅を何ピクセルで作成するか(長さ)
  2. 横と縦の比率をいくらにするか(アスペクト比)
  3. 画像ファイルをいかに軽くするか(データ容量)

3つのポイントを順番に解説していきます。

目次

SWELLのアイキャッチ画像は3つのポイントを押さえて作成しよう

アイキャッチ画像の横幅は「1600px以上」がおすすめ

SWELLは高解像度ディスプレイで表示されることを想定して「横幅1600ピクセル」の画像が推奨されています。

くろすけ

横幅のサイズが決まったら、次は画像の縦の横の比率(アスペクト比)について解説します。

画像のアスペクト比には「16:9」や「3:2」など、さまざまな比率がありますがSNSでシェアされることを意識したアスペクト比をおすすめします。

アイキャッチ画像のは「1.91:1」がベスト

SWELLのアイキャッチ画像をSNSを意識したサイズで作成すると「横1600 × 縦840ピクセル」。横と縦の比率は「1.91:1」になります。

これはFacebookやTwitterでシェアされたときに自動的に挿入される画像サイズに合わせた比率。

くろすけ

横と縦の比率を「1.91:1」で作成すると”ええ感じ”にタイムラインに表示されます!

Facebook

Twitter

アイキャッチ画像のアスペクト比を「1.91:1」で作成したとき、Twitterでは上下20ピクセルずつ切り取られてしまいますが、タイトルやキャッチコピーなど伝えたいことを中心に置くことでテキストが切り取られてしまうことを防ぐことができます。

画像ファイルは軽ければ軽いほどいい

画像が高画質になればなるほど画像のデータ容量(ファイルサイズ)は大きくなります。

くろすけ

ネットでは画像のデータ容量が小さいことを「画像が軽い」、データ容量が大きいことを「画像が重い」といった言い方をすることもありますね。

  1. 画像が重い
  2. ページの表示が遅い
  3. 読者はストレスを感じる
  4. サイトを離脱する

SWELLの快適な表示速度を損なわないためにも画像は軽ければ軽いほどいい!

アイキャッチ画像は必ず画像圧縮ツールを使ってデータ容量を小さく(ファイルを軽く)してからアップロードするようにしましょう。

くろすけ

画像の圧縮はJPG(JPEG)画像なら「Squoosh」、PNG画像なら「TinyPNG」が圧縮率が高く(画像が軽く)なるのでおすすめ!

【Q】記事に挿入する画像のサイズはどうすればいい?

【A】伝えたいことによってアスペクト比を工夫しよう

僕のサイトでは記事タイトルのすぐ下に表示されるアイキャッチ画像はTwitterやFacebookを意識して「1.91:1」」で作成しています。

一方で記事に挿入する画像サイズは横幅は1600ピクセルにしていますがアスペクト比は「伝えたいこと(もの)」によって変えています。

よく使う画像のアスペクト比

16:9の特徴
  • パソコンのディスプレイやハイビジョンテレビに採用されている比率
  • 画像の左右に余白があるので「写真(イラスト)+テキスト」を入れた画像におすすめ
  • パノラマ感が強調されるので風景写真を使いたいときに
3:2の特徴
  • フィルムカメラやデジタル一眼レフカメラなどに採用されている比率
  • カメラで撮影した写真をそのままアイキャッチ画像として使うことができる
  • 横向きなら風景、縦向きなら人物に最適
4:3の特徴
  • コンパクトデジタルカメラ(コンデジ)やミラーレス一眼カメラに採用されている比率
  • パソコンではスマホで見るよりも正方形に近く感じるため少し圧迫感がある
  • 縦向きに画像を使用するときは縦長になりすぎなくて◎

パソコンの画面をキャプチャするときは記事全体の統一感を意識して「アスペクト比を揃える」「サイズを調整する」の2点を心がけています。

画像のアスペクト比には「人の目で見て美しく感じる比率」がたくさんあります。あなたのサイトのデザインやレイアウトに合わせて画像のアスペクト比は工夫してみてくださいね。

比率SWELLでの画像サイズ
黄金比(1.618:1)1600 × 989px
白銀比(1.414:1)1600 × 1132px
2:11600 × 800px
1.91:11600 × 840px
16:91600 × 900px
3:21600 × 1067px
4:31600 × 1200px

まとめ

くろすけ

最後にSWELLに最適なアイキャッチ画像のサイズについておさらいしておきますね。

タイトルのすぐ下に表示させるアイキャッチ画像は「横1600 × 縦840ピクセル」で作成しましょう。

横幅1600px高解像度ディスプレイに対応するため
アスペクト比1.91:1記事がシェアされたときに画像が中途半端に途切れないため
画像のデータ容量200KB以下が理想ページの表示速度を低下させないため

これら3つのポイントを意識してアイキャッチ画像を作成してみてくださいね。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる