SWELLの画像推奨サイズまとめ
最初にSWELLの画像サイズをまとめておきます。
黄色下線のサイズがおすすめです。
| 画像 | サイズ | 根拠 |
|---|---|---|
| アイキャッチ | 1200×630px（webp推奨） | OGP（SNS推奨）と同じ |
| サイトアイコン | 512×512px（png推奨） | WordPress推奨 |
| プロフィール | 160×160px | ページ表示速度・SEO優先 |
| NO IMAGE | 1200×630px | OGP（SNS推奨）と同じ |
| 横幅1600px | SWELL推奨 | |
| OGP | 1200×630px | SWELL推奨＆SNS推奨 |
| 記事内画像 | 1200×630px（webp推奨） | OGP（SNS推奨）と同じ |
| 横幅900px（webp推奨） | ページ表示速度・SEO優先 | |
| コンテンツヘッダー | 横幅1600px | SWELL公式サイト |
| 横幅1280px | ページ表示速度・SEO優先 | |
| ヘッダーロゴ | 1600×360px | SWELL公式サイト |
| 600×135px程度（png推奨） | ページ表示速度・SEO優先 | |
| メインビジュアル | 1600×900px | SWELL公式サイト |
| 横幅1280px（PC） | ページ表示速度・SEO優先 | |
| 横幅600〜960px（SP） | ページ表示速度・SEO優先 |
各画像サイズの詳細とポイント
ここでは、それぞれの画像サイズについて、さらに詳しく解説していきます。
1. アイキャッチ画像
ブログ記事の顔となるアイキャッチ画像は、SNSでシェアされた際の見え方にも影響します。
- 推奨サイズ：1200×630px (webp推奨)
- ポイント： OGP（Open Graph Protocol）設定と共通のサイズにすることで、SNSでの表示が最適化されます。webp形式は、JPEGよりも高画質でファイルサイズが小さいため、表示速度の向上に貢献します。
2. サイトアイコン（ファビコン）
ブラウザのタブやブックマーク一覧に表示される小さなアイコンです。
- 推奨サイズ：512×512px (png推奨)
- ポイント： WordPressが推奨する正方形サイズです。png形式は透明度を保持できるため、背景が透過しているアイコンを使用する際に適しています。
3. プロフィール画像
ブログの著者情報などに表示されるプロフィール画像です。
- 推奨サイズ：160×160px
- ポイント： 小さく表示されるため、ファイルサイズを抑えることが重要です。JPEG形式でも問題ありません。
4. NO IMAGE画像
アイキャッチ画像がない場合に表示される代替画像です。
- 推奨サイズ：1200×630px
- ポイント： アイキャッチ画像と同じサイズにしておくことで、レイアウトの崩れを防ぎ、SNSでの見え方も統一できます。
5. 横幅指定
記事内で画像を横幅いっぱいに表示したい場合などの目安です。
- 推奨サイズ：1600px
- ポイント： SWELLが推奨する横幅です。これ以上の幅の画像を使用しても、SWELLの表示範囲に合わせて縮小されることがあります。
6. OGP (SNS推奨) 画像
SNSで記事がシェアされた際に表示される画像です。
- 推奨サイズ：1200×630px
- ポイント： SWELLも推奨しており、主要なSNSで最適に表示される比率です。
7. 記事内画像
ブログ記事の本文中に挿入する画像です。
- 推奨サイズ：1200×630px (webp推奨) または 横幅900px (webp推奨)
- ポイント： 基本的にはOGP画像と同じサイズで問題ありませんが、表示速度を重視する場合は横幅900px程度に抑えるのも有効です。webp形式の利用を推奨します。
8. コンテンツヘッダー画像
トップページなどのコンテンツ上部に表示されるヘッダー画像です。
- 推奨サイズ：横幅1600px または 横幅1280px
- ポイント： SWELL公式サイトでは横幅1280pxの画像が使用されています。表示速度を考慮するなら1280px、よりワイドな表示にしたい場合は1600pxを選択しましょう。
9. ヘッダーロゴ画像
ウェブサイトのヘッダーに表示するロゴ画像です。
- 推奨サイズ：横幅1600×高さ360px または 横幅600×高さ135px程度 (png推奨)
- ポイント： SWELL公式サイトでは横幅600px、高さ135px程度のロゴが使用されています。大きめのサイズも候補としてありますが、表示速度を考慮すると小さめのサイズが推奨されます。背景が透過している場合はpng形式を使用しましょう。
10. メインビジュアル画像
トップページなどで大きく表示される画像です。
- 推奨サイズ：横幅1600×高さ900px (PC)、横幅600〜960px (SP)
- ポイント： PCとスマートフォンで最適なサイズが異なります。SWELL公式サイトでは、PC版で横幅1280px、スマートフォン版で横幅600〜960pxの画像が使用されています。表示速度を考慮しつつ、インパクトのある画像を選びましょう。
まとめ：適切な画像サイズでSWELLサイトをさらに魅力的に！
この記事では、SWELLで推奨される主要な画像サイズについて解説しました。
- **特に推奨されるサイズ（黄色下線）**を基本とし、webp形式を活用して表示速度の向上を目指しましょう。
- サイトアイコンやロゴなど、形式が推奨されている場合はそれに従いましょう。
- 表示速度と画質のバランスを考慮し、最適な画像サイズを選択することが重要です。
これらの情報を参考に、あなたのSWELLサイトをさらに魅力的で高速なウェブサイトにしてくださいね！
