こんにちは！ブダペスト在住Webデザイナーのみほこです。
私の所属しているコミュニティ内で、こんなお声をいただきました。
トップページや、ブログのアイキャッチ画像、ブログの文中で挿入する画像サイズは、どのぐらいが適切なのかがわからなくて、いつも適当なバラバラのサイズで統一感なくアップしています、、
確かに、画像のサイズの扱い方って少し難しいかもしれません。具体的に質問をいただいたので、それに返答する形で答えてみようと思います。
なお、ここでいう画像のサイズというのは、pxのことを言っています。
そもそもアップする際の画像サイズを気にする必要あるのか？
あります！
WordPressは基本的に表示させる画像を勝手に調整してくれる機能がついているので、細かく気にする必要はないですが、最近のパソコンやスマートフォンは高解像度のものが多いので、小さすぎる画像を画面幅いっぱいに表示させると見た目が良くありません。
画面幅いっぱいに表示させたいものは大きい画像を、画像のサイズが小さいものしかない場合は、小さく表示したほうがいいでしょう。
以下に大体の目安を書いてみます。
パソコン、スマートフォン両方で画面幅いっぱいに表示させたい場合：
画像の横幅は2,000〜2,500px程度がおすすめ
パソコンでは画面の半分、スマートフォンでは画面幅いっぱいに表示させたい場合：
画像の横幅は1,500px程度がおすすめ
パソコンでは画面の三分の一、スマートフォンでは画面幅いっぱいに表示させたい場合：
画像の横幅は1,000〜1,200px程度がおすすめ
上記で設定してみて、ぼやけて見えるようであれば、少し大きめに調整しましょう。
なお、いくら画像のサイズが大きい方が綺麗に表示されるとはいえ、サイズが大きいと重たいので、画像を軽量化するプラグインやツールを使用することをおすすめします。
私のおすすめはこちらのブログでも書いているTiny pngというプラグインです。
画像の形式は、写真など色数の多いものはjpg、イラストやアイコンなど色数の少ないものはpngがおすすめですが、比較的新しい形式で画像がかなり軽くなるWebPというものがあります。もし面倒でなければこちらを使用するのがベストです。ページ内にたくさん画像を使ったらサイトの読み込みが遅くなった、などといった場合に使用してみてください。無料で形式を変換できるCloudConvertというツールなどを使用して作成します。
Tips!
Wordpres標準エディタGutenberg（グーテンベルク）での画像設定方法
画像をアップロードします。なお画像のサイズは1,920×2,560px。
画像が挿入されました。何もしないとそのままのサイズで表示されますが、右側の画像の設定から、横幅と高さを好きなサイズに調整できます。ブログなどに注入する画像は、ここで横幅の表示サイズを自分なりに決めておくと、統一感が出て綺麗です。
「アスペクト比」で画像の比率を変更することもできます。「伸縮」の「cover」を選べば、選んだ比率に画像が切り取られて表示されます。
画像の見た目が粗ければ、「解像度」で「大」か「フルサイズ」を選んでください。「フルサイズ」でも粗ければ、画像をもっと大きいサイズに変更した方が良いです。
ある程度のサイズ目安はあるのか？（アイキャッチ画像ならこれぐらいのサイズがスタンダード等）
使用しているテーマによって、画像サイズに決まりがある場合とない場合があるので、まずそれを確認してください。ない場合は先ほどお伝えした、私が普段Webサイトを作成するときの目安を参考にしていただけると良いかと思います。
アイキャッチ画像は一応定番サイズがあって、横1,200×縦630pxです。ただこれも使用しているテーマによって変わることもあるので、注意です。
画像サイズの目安がある場合、適切なサイズに統一した時の効果は？
これはなんと言っても見栄えが良くなることでしょう。Webサイト上で画像のもたらす効果は大きいです。適切な見た目に調整するのは多少手間がかかりますが、丁寧にやっていただくと良い印象のWebサイトになります。
下記のような質問もいただきました！画像サイズについてではないですが、おまけとして答えてみたいと思います。
ブログのアイキャッチ画像の選び方で気をつけていることは？
・サイトのデザインや色味にちゃんと合っているか。
・文章を読まずに写真だけで内容がイメージができるものになっているか
まずこの辺りです。
これに付け加え、モデルがはっきり写っている写真は使用しないようにしています。どうしても写真素材をどこからか購入するとなると他の方も使っている可能性が高くなるので、他でも見た、となりがちです。それはしょうがないのですが、一番記憶に残るのが人の顔なので、出来るだけ使用しないようにしています。
適当に選ばないで、その写真でいいのか、一枚一枚時間をかけてじっくり選ぶことも大事です。
今日はWordpressで画像を使用するときのサイズの考え方についてお伝えしました。
それでは、また！
