ぼくがSWELLでサイトを立ち上げる際、画像編集ツール「Canva」から一連の素材を持ってきています。
サイト制作前に「ここにはこの画像を埋め込みたい」といった感じで、事前にCanva上で大きさ別の画像を準備しておくと、画像編集⇄WordPressの行き来が減るのでオススメです。
本記事では、当サイトで使用している画像サイズの情報をまとめました。
Canvaで用意しておきたい画像素材とサイズ
以下、とくに断りがなければ下記のとおり作成しています。ファイルの名付け方法についても、自分なりのルールを定めておくと、管理しやすいです。
| 項目 | 解説 |
|---|---|
| 画像形式 | .webp |
| 背景 | 白部分は透過 |
| ファイル名 | 「設定予定箇所」-「色」.形式 例）header-logo-b.webp |
また、原則「Retinaディスプレイで表示したときにボヤけない程度」を目指しているため、そんなに解像度いる…？というものもあるかもしれません。あくまで目安の参考にしてください。
ファビコン（512×512px）
ブラウザでサイトを開いた時のアイコンです。
ファビコンだけは.webp形式だとWordPressのアプリ上で表示されないため、あえて「.png」形式でもいいと思います（ぼくは使ってないので、.webp形式で統一しています）。
ヘッダーロゴ（1600×200〜400px）
Retinaディスプレイで見たときにボヤけることを防ぐため、解像度を高めています。
幅は1600pxでいいのですが、問題は高さです。ヘッダーロゴはWordPressの編集画面から大きさの制御ができないので、Canvaの段階で上下左右ピッチリ収まる（空白がない）ように作成しましょう。
（CSSで調整できるなら別ですが、ぼくはやったことないです）
ブログタイトルやデザインなどで変わってくるので一概には言えませんが、目安として200〜400pxくらいに収めるとちょうど良くなります。
また、ヘッダーロゴはサイト背景に応じて出しわけすることもあるので、
- 黒文字（header-logo-b）
- 白文字（header-logo-w）
の2種類を準備しておくと、何かと便利です。
PC版メインビジュアル（2400×1600px）
トップページにバンッ！と表示される画像です。背景素材を利用することが多いですね。
スマホ版を作らなくていいように、真ん中で切り抜いても変化の少ない素材を選ぶのがコツです。
スマホ版メインビジュアル（1200×1800〜2400px）
PC版で対応しきれない画像を選んだときは、スマホ版のメインビジュアルも作成しています。
幅は固定、高さはコンテンツに合わせて設定。スマホの高さは端末に依存するので、あまり気にせず「長方形ならOK」くらいの感覚で作っています。
メインビジュアル文字（1600×400〜600px）
メインビジュアルで設定した背景に、ちょっと手の込んだ文字画像を上乗せしたいときに使います。Retinaディスプレイで見たときにボヤけない程度に、幅のpx数に余裕を持たせています。
- ブログパーツでメインビジュアル文字の画像を設定し、IDをメモ
- SWELLカスタマイズの「トップページ」→「メインビジュアル」をクリックし、「ブログパーツID」欄にIDを貼り付け
とすれば、当サイトのトップページの感じに仕上がります。
アイキャッチ画像・OGP画像・NO IMAGE画像（1200×630px）
当サイトでは、アイキャッチ画像・OGP画像・NO IMAGE画像を、すべて同じ画像として使いまわしています。
今回は白背景ですが、この3つに関しては透過処理は行っていません。
アイキャッチについては、上下左右が少し切り抜かれても大丈夫なように作っておきましょう。表示される箇所によっては正方形になったりするので、真ん中に伝えたいテキストやロゴなどがくるよう設定しておけばOKです。（当サイトでは非表示に設定しています）
OGP画像もアイキャッチと同様。本サイトではロゴとサイトタイトルが表示される、シンプルなものに設定しています。SNSを活用するメディアであれば、記事ごとに凝ったデザインにしておくといいですね。
NO IMAGE画像も、アイキャッチやOGP画像と同様のサイズで問題ありません。個人的に画像に斜線が引かれたものだとなんか味気なく感じるので、これら2つとあわせています。
「いやウチはデザイン別にしたいんよ」って時は、Canvaの素材で「NO IMAGE」と検索すればセンスの良いロゴや画像が出てくるので、そちらを使っても良さそうです。
フルワイドブロック背景（2400×1600px）
フルワイドブロックで背景画像を設定したいときに使用。記事投稿で使うよりも、トップページを作り込む時に取り入れることが多いです。
（上記の画像は昔使っていましたが、トップデザインを一新したため、現在は使っていません）
- SWELLの公式サイトのトップページでは、フルワイドブロックの背景で「2400×1600px」の画像が使われている
- Retinaディスプレイでみたときにキレイに表示される幅であれば、だいたいの画面でOKだろう
という理由から、このサイズとしています。
トップページ用の見出し（2400×200〜400px）
当サイトのトップページで使用しているセクションの見出しは、画像で作成しています。CSSをいじって作っても良いのですが、後々の運用を考えると、画像のほうが管理が楽なので…
高さは文字数に応じて変更していきましょう。
コンテンツヘッダー（2400×800px）
記事タイトルをコンテンツ上に設定しているときに、背景として使う画像です。本サイトの場合は、幅2400px・高さ800pxとしています。
性質上、PCとスマホの切り替えによって画像のフチが切り落とされてしまうため、素材を探すときは
- 上下で対称になっている
- 切り抜かれても違和感がないテクスチャ
- タイトル文字は左側に表示されるため、その位置がゴチャついてないデザイン
を軸に選んでいくと、いい感じに収まります。
おわりに
SWELLでサイト制作するときに、ぼくがよくCanva上で用意している画像サイズの紹介でした。
Googleが開発した画像圧縮ツール「Squoosh」なら、WebPに変換すれば、質を保ったまま数十px程度まで軽量化できます。現状、Canvaでは.webp形式でダウンロードできないため、
- .png形式からSquooshで.webp形式に変換
- WordPressにアップロード
とするようにしましょう。（プラグインで対応できるなら、そちらでもOKです）
