\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

【完全版】画像SEOの対策とブログ画像の作り方・見せ方

SEOに強い画像の作り方・見せ方 画像の作り方
この記事は約6分で読めます。

この記事では、ブログ画像のSEO対策と、画像の作り方・見せ方についてご紹介いたします。

アイキャッチやブログ内の画像を作るとき、なんとく作って、なんとなく貼り付けていませんか?

画像SEOや、スマホファーストな視認性の高い画像を作るには、

①画像のサイズ、②画像の貼り方、③画像の見せ方、3つのポイントが大切です。

この3つを守るだけで、見やすくおしゃれな画像になりますよ。

スポンサーリンク

1.【そもそも論】SEOに強くわかりやすいブログの書き方

SEO対策をやりつつも、自分らしい文章を書きながらキレイな記事に見せるには、

大きく分けて3つのポイントがあります。

  • 文章の書き方
    文の構造を簡潔にする
  • 画像の作り方・見せ方
    画像はスマホファーストで作る
  • 装飾の使い方
    記事・文の装飾は多くて3パターン

この記事では、画像の作り方・見せ方について深堀りしていきます。

2. SEOに強いブログ画像の作り方・見せ方

SEOに強いブログの画像を作るには、テクニックもありますが、ユーザにわかりやすい画像に見せるのが先決です。

  • クエリに応える画像にする
  • 画像のデザイン性・視認性を上げる

前回の「文章の書き方講座」と同様、項目が多いので、

スクリーンショット・メモ・ブックマークをして、記事を書くときに常に見れるようにしておくのをおすすめします。

2-1. クエリに応える画像にする

画像にalt属性を入れよう

alt(オルト)属性という代替テキストを画像ごとに指定しましょう。alt属性を入力しておくことで、画像検索で反映されるようになります。

アザラシのアイコン

例えばこの画像のalt属性は、

「アザラシ」や「アザラシのアイコン」が正解です。

「SEOに強いブログ画像の作り方・見せ方の例画像1」という名付け方はNG。

このように、「SEO」というキーワードを一語入れて、画像検索をねらうのはOKです。

が、キーワードを入れすぎるとスパムとみなされるため要注意です。

画像のファイル名は簡潔に
アザラシのアイコン

「1234.PNG」といったの意味のない数字の羅列や、「image-01.PNG」といったどの画像でも当てはまるような名前ではなく、

「azarashi.PNG」のような、 ユーザやクローラーが認識しやすい英語にしましょう。

関連性のある画像をテキスト近くに入れる

テキストの内容と関連性のある画像を入れましょう。

また、テキストの近く(周辺)に画像を入れることて、ユーザが画像からも情報を得ることができます。

悪い例×
アザラシのアイコン

私はとっても猫が好きです。

一番好きなのはノルウェージャンフォレストキャット。

(画像の周りに存在するテキストが完全におかしい。)

良い例〇
アザラシのアイコン

これはアザラシのフリー素材です。

フラットデザインという手法で描かれたもの。

ブログと相性が良いので気に入って使用してます。

2-2. デザイン性・視認性を上げる

画像の周りにシャドーを入れる

画像の周りにシャドーを入れる設定・カスタマイズをしましょう。

背景が白の場合でも、画像だということが認識できるので、ユーザの視認性が上がります。

こういった、背景が白色の画像でも、

シャドーを入れることで、画像の存在が示されて、ユーザの視認性が上がります。

画像の大きさはモバイルフレンドリー

画像の大きさ(アスペクト比)はスマホファーストにしましょう。

スマホから見てわかりやすいアスペクト比は、300×300~800×800までの1:1です。

300×300の画像
300×300の画像
800×800の画像
画像が横長になるときは縦長に編集

画像が横長になる場合は、縦長の800×1200、もしくは800×600の4:3にしましょう。

800×1200の画像
800×1200の画像

800×1200はブログ用グラフィックといいます。

こういった細かい字が書いてあるような画像でも

見やすく、ユーザへ効果的に情報を与える画像になります。

800×600の画像
800×600の画像

横に長すぎないのがポイント。

スマホから見ても、PCからみても視認性の高い画像になります。

画像を貼り付けるときはPCにも気を配る

800×800や、800×1200の画像を貼り付ける際は、画像の縮尺を50%にしましょう。

PCから見た時にバーン!と大きすぎず、みやすい画像になります。

良い例:縮尺50%の画像
アザラシのアイコン
縮尺50%の画像

これが縮尺50%の画像をPCから見た時のイメージ

悪い例:縮尺なしの画像

(PCから見ると違いがわかります)

アザラシのアイコン
縮尺なしの画像

これは縮尺なしの画像をPCから見た時のイメージ。

バーン!となりすぎているのがわかります。

2列カラムを使うとわかりやすい

カラムブロックの2列表示を使って、左側に画像、右側に説明文を入れるとわかりやすいです。

PCで見ると横に、スマホで見ると下に表示されるので、画像を使って説明することに向いています。(サルワカさんで使用されている方法です)

Cocoon2列カラム

Cocoonであれば、

レイアウト要素のカラム、もしくはCocoonレイアウトの2カラムを使用します。

PCから見た時の2カラムレイアウト
Cocoon2列カラムPC表示

PC表示の時は横2列になります。

スマホから見た時の2カラムレイアウト
Cocoon2列カラムスマホ表示

スマホ表示の時は縦に並びます。

品質の高い画像を使う

画像は適当なものを選ばず、コンテンツへの理解度が深まる高品質な画像を載せましょう。

ユーザエンゲージメント率が上がり、SEO的に評価されやすくなります。

品質の高い画像素材はShutterstockPIXTA フラットアイコンデザインがあります。
読み込み速度を早くする

Canvaで自作した画像や、フリー素材を使うと容量が大きく、読み込み速度が遅くなってしまいます。

これはSEO評価を下げるので、画像の圧縮を行いましょう。

画像ファイルは一般的なものを使用しよう

画像のファイル形式の選び方は、Safari・IE・firefox・chromeが読み込み対応しているものを選びましょう。

ブログで使用する際のおすすめファイル形式は、JPEG・GIF・PNGです。(それぞれの違いを知りたい方はこちら

3.まとめ:画像SEO対策とブログ画像の作り方・見せ方

クエリに応える画像にする
  • 画像にalt属性を入れる
  • 画像のファイル名は簡潔にする
  • 画像近くには関連性のあるテキストを入れる
デザイン性・視認性を上げる
  • 画像の周りにシャドーを入れる
  • 画像のは1:1のモバイルフレンドリーサイズ
  • 画像が横長になるときはブログ用グラフィックか4:3を使用する
  • 画像を貼り付ける時は50%に縮尺する
  • 2列カラムで画像と説明文を並べるとわかりやすい
  • 品質の高い画像を使う
  • 読み込み速度を早くする
  • 画像ファイル形式はJPEG・PNG・GIFを使用する

次でラスト!装飾の使い方・見せ方を教えるね!

【期間限定】無料デザイン作成サイトCanvaを使ってお友達を招待すると、有料素材が無料で使えるようになります!

\Canvaに登録して有料素材をタダで受け取る/

Collaborate & Create Amazing Graphic Design for Free
If you ever need to create a graphic/poster/invitation/logo/presentation or anything that looks good -- give Canva a go!

タイトルとURLをコピーしました