AFFINGER6｜サイトに使う適正の画像サイズまとめ

サイト内でひときわ目を引くのは画像です。

AFFINGER6でも画像を設定できる場所はたくさんあって正直迷ってしまうこともあります。

サイト立ち上げ時や表示速度の高速化をする際に分かりやすいようにしてみました。

また、それぞれ設定方法や設定場所の記事も合わせて紹介していきます。

今回はAFFINGER6で使える画像サイズやファイル形式を解説していきます。

AFFINGER6画像サイズ

画像を設定できる場所はたくさんあります。

記事内に画像を使う際については「AFFINGER6｜画像ブロックの使い方」でまとめています。

ここでは設定場所ごとに最適なサイズをまとめていきます。

ヘッダー画像

ヘッダー画像は様々なサイズに適応しており、最近では画面いっぱいのフルハイトも設定できますが、公式で推奨されているサイズは「PC：2200px×500px」となっています。

基本的に横幅はいっぱいになっているので、大きさを考える場合は高さを変更するようにしましょう。

また、ファイル形式は一般的には「JPEG」がおすすめです。

設定方法は「AFFINGER6｜ヘッダー画像を設定してサイトに印象付けする」で解説しています。

ヘッダーバナーカード

ヘッダーカードは最大4つまで配置することができます。

カードの数によっては画像が引き伸ばされてしまうので、見きれないように作るのにしっかりとしたサイズが必要になります。

推奨のファイル形式は「JPEG」です。

サイズが大きい場合は自動で切り抜かれます。

適切なサイズでない場合だとサイトの表示速度に影響が出る場合があるので気をつけましょう。

設定方法は「AFFINGER6｜ヘッダーバナーを設定して読者に動線を作る」で解説しています。

アイキャッチ画像

アイキャッチ画像は記事の先頭にくる画像でサムネイルとも呼ばれます。

適正サイズは「1200px×630px」です。

こちらはフルサイズで表示させる際のサイズですが、設定で正方形や丸などにすることもできます。その場合は自動で切り抜かれます。

推奨のファイル形式は「JPEG」です。

アイキャッチ画像の設定方法は「AFFINGER6｜アイキャッチ（サムネイル）画像を設定する」にて解説しています。

サイトアイコン（ファビコン）

サイトアイコン（ファビコン）は正方形が推奨です。

適正サイズは「512px×512px」ですが、AFFINGER6の場合は正方形なら自動でこのサイズにリサイズしてくれるので、正方形なら大きめでも問題ありません。

ファイル形式は当サイトでは「透過png」をおすすめしています。

詳しい設定方法は「AFFINGER6｜サイトアイコン（ファビコン）を設定して表示する」からどうぞ！

サイトロゴ

AFFINGERではサイトのロゴを設定する場合いくつかのパターンがあります。

• サイトタイトルのみ
• アイコン画像のみ
• アイコン画像＋サイトタイトル
• ロゴ画像

デフォルトでは「サイトタイトルのみ」を設定することができますが、当サイトではロゴ画像での設定方法をおすすめしています。

公式での推奨サイズは「200px×100px」ですが当サイトでは小さいなと感じたので「600px×200px」で作成しています。

また、ファイル形式は「透過png」がおすすめです。

詳しい設定については「AFFINGER6｜サイトのロゴを設定してデザインを決める！」で解説しています。

画像作成ならCanvaがおすすめ

画像を作るのに一番おすすめなのは無料プランでできることの多いCanvaです。

アイキャッチのテンプレートを一つ作っておけばコピーしたり、編集したりと自由自在です。

有料プランの「Canva Pro」を使えば背景の透過や簡単なSVGを作ったりとできることも多いので、最初になれるデザイン系のアプリではもっともおすすめです。

是非簡単なものから作ってみてください。

Canva

ファイル形式に注意

Googleの検索ランキングではサイトの高速化も一つの指標になっています。

画像は内容をわかりやすく簡潔に伝えられる一方でサイトの表示速度を遅くし、重くする原因になります。

上記でも解説している「JPEG」や「PNG」の拡張子を最初に設定しておけば、あとから面倒な変更をする必要がなく高速化に対応できるので、設定する際は注意しておきましょう！