アイキャッチ画像を適正サイズにして統一感を出す方法

イッヌ

アイキャッチ画像、記事ごとにバラバラだと統一感がないなぁ。

katomisa

サイズを揃えるだけでも全然違うよ！

ということで、今回はアイキャッチのサイズのお話。同じ二の轍を踏まない人たちが生まれることを期待して続きを書きます。少しでも思い当たる節があるなら、記事数が増える前に着手しましょう。

アイキャッチ画像の適正サイズ

一般的には「 16:9 」の比率がよいといわれています。最近のPower Pointのワイド比率もこのタイプ。分かりやすい数字だと、「横1920px：縦1080px」が指定しやすく美しいです。

意識しない場合、残念なことにこうなります。恥を忍んで公開します。。アイキャッチ画像を PowerPointで視覚を頼りに適当にアイキャッチ画像を作っていった結果です（※初代ブログサイトのアイキャッチ画像です）

イッヌ

文字がはみ出てる・・

katomisa

ブログサイト全体としてどう見えるのかを全く想像してなかったんだ。涙

アイキャッチ画像の簡単な作り方

色々とありますが、最終的には「jpeg」形式で作成します（軽量化）。ここでの作り方は「jpeg」形式で保存する前の画像制作の種類。たとえばこんなのがありますね。

いずれにしても視覚はあてにはならないので、サイズや統一感を生み出すという点ではツールの機能をしっかり頼りましょう。ちなみに私は Canva を愛用しています。

適正サイズで簡単に作るなら『canva』の理由

すでにお気づきだと思うのですが、PowerPointは論外のようです。最初から私も億劫がらずにやればよかった！と今なら思う。過去の私に喝を入れる。

最初から確実にキレイなサイトにしたいなら、迷わずCanvaのアカウント登録をしましょう。

Canva を使う

実際に使ってみると、ボタンの意味さえ分かれば簡単。ご自身で撮影した画像も取り込めます。無料でできる範囲も多いし、アイキャッチ画像以外にもいろいろな場面で使えます。

Photoshop も Illustrator も触ったことがなくっても、簡単にキレイなデザインが作れることが一番の魅力。

適正サイズでの作り方

最初のキャンバスを指定するときに、サイズを指定するとその範囲内で作画ができます。

作成後はこちら。（※今は画像を変えていますが、文字を入れている場合のサンプルとしてご覧ください）

文字を入れる範囲の四角枠とフォント、文字の色味も揃えています。RELATED 等で複数のアイキャッチが並んだ時、綺麗に揃いますよ。

アイキャッチ画像サイズチェッカーの活用

スマホ表示やリンクカード表示をする場合、正方形に切り取られることも考慮する必要があります。

人気ブログ「サルワカ」で確認ができます。スマホで記載文字がサイズアウトしないように事前確認できる優れモノ。1度テンプレートができればあとは確認不要です。私も初回だけ活用しました。

→　アイキャッチ画像サイズチェッカー

事前に画像が作られていることが前提です。Canvaで画像を作成しておき、保存。そのあとの手順は簡単。「画像を選択」を押して選びます。

選んだ直後、下の方に結果が表示されます。スクロールをして確認します。

twitter以外の結果も並んでいるので、スクロールだけでOKですよ。

katomisa

正方形表示でも見せたいものが枠内に収まっているかをチェックしたいときに使うと〇。

まとめ

アイキャッチ画像のサイズをそろえるだけでブログサイト全体にも統一感が生まれ、視覚的にも格段に読みやすく信頼性も高まります。

どんなデザインにするかは奥が深い世界ですが、レイアウトのサンプルは Canva にもたくさん紹介されています。オリジナルの統一感あるブログサイトを目指しているなら、是非活用してみてくださいね。

Canva を使ってみる

加藤ミサ

katomisa

XContact

趣味がなくてブログを始めたワーママブロガー。当サイト「朝ライフ（AsaLife）」を運営するうちに、ストックイラストに出会いました。「ブログ制作をきっかけに趣味を探したい人」もしくは「趣味をきっかけにブログでも情報を発信したい人」に向けて、ブログ制作にまつわる情報を発信しています。美容家SEとしても活動中。

・ブログガイド
　https://asalife.jp/blog-guide-top
・かとみさイラスト制作室
　https://katomisaillust.asalife.jp
・note
　https://note.com/katomisa3