Pocket
LINEで送る

ブログ写真の統一感を出すための基本ルールについて解説しています。

ブログ写真の統一感を出すための基本ルールのアイキャッチ画像
ブログ写真の統一感を出すための基本ルールはレイアウト、画像装飾の2つ

ブログに使う写真・画像の統一感は、記事単位、ブログ・サイト全体単位で、それぞれ合わせる必要があります。

写真・画像自体を同じ素材を使って統一感を出すというのは難しいですが、写真のレイアウト、画像装飾のデザインなどを合わせれば、上手く統一感が出すことが出来ます。

ただ、あまりにも統一感を出してしまうと、ブログ・サイトが機械的に見えてしまったり、生き生きとした躍動感が出ません。

その為、写真・画像のレイアウト、画像装飾のデザインなどは統一したルールは作るにしても、ルールを分かったうえで上手に外す方法も紹介しているので、あなたのブログに今日から反映させてみてください。

この記事を書いている人

ak

ak(”えーけー”と呼んでください)

2011年からアフィリエイト開始。

  • 1日で約20万PV/報酬5万円を稼ぎ出すブログを数個保有
  • 1日20アクセス前後で月10万円稼ぐブログを数個保有
  • たった3日でnoteで情報を販売し20万円以上稼ぎだすなど…

王道のアフィリエイト手法を行いつつも、初心者や弱者でも十分に収益を上げられるアフィリエイト手法をメインにブログアフィリエイトで稼いでいます。


強者と戦わない初心者向けの弱者の戦略を行うアフィリエイト専門家、と覚えておいてもらうと嬉しいです。

ブログ写真の統一感を出す為の基本ルール-”寄せ”のレイアウトを必ず決めておく

ブログ写真の統一感を出す場合に、まずは必ず”画像の寄せ”のレイアウトを合わせておきましょう。

画像の寄せというのは、左寄せにするのか、中央寄せにするのかということです。

ブログ写真の統一感の例。左寄せの例の画像
左寄せの画像のレイアウト例
ブログ写真の統一感の例。中欧寄せの例の画像
中央寄せの画像のレイアウト例

どちらが見やすいでしょうか?

中央寄せは無駄なスペースが出来てしまうので、見栄えがよくありませんし、視線が中央によって、文章を読もうとするときのストレスは若干あります。

なので、個人的には左寄せがオススメです。

なお、左寄せが良いことを裏付けるものとして、視覚誘導・WEBユーザービリティー・広告で有名な「グーテンベルク・ダイヤグラム」「Fの法則」「Zの法則」という法則があります。

※↓の画像は「Fの法則」「Zの法則」を分かりやすくしたもの。

ブログ写真の統一感を出すためには画像を左寄せにしたほうが良い例をF・Zの法則で説明している画像
F・Zの法則

こういった法則では、人は”左から右に流れるように情報を見る・読む”と言われています。

なので、基本的にはブログ画像を統一するなら左寄せにしておくほうが無難です。

もちろん「そもそも画像をブログのコンテンツ幅に合わせれば左寄せ・中央寄せなど関係ない」という意見もあるでしょう。

ただ、ブログの場合は大抵はワードプレスを使い、そして何らかのテンプレートを使っていると思います。

テンプレートは変更する場合も多いですし、変更した新しいテンプレートのコンテンツ幅も、それぞれで違ってきます。

なので、「使ってるテンプレートのコンテンツの横幅は780ピクセルだから、画像の横幅もキッチリ780ピクセルに~」と、ブログテンプレートのコンテンツ幅で、ガチガチで画像の幅を合わせてしまうのは、オススメしません。

ブログ写真の統一感を出すためのレイアウトはスマホではあまり意味がないことを示している画像
画像サイズはスマホ画面の大きさに調整される

とは言え、ここまで言っておいてなんですが、今はどういったジャンルのブログ運営をしていても、スマートフォンで閲覧する人が多いので、スマホだと↑の画像のように画像が縮小されます。

正直、左寄せ・中央寄せだろうが、あまり関係ないと言えばありません。

ですが、パソコンユーザーの閲覧が多いブログ・サイトを運営する場合は、必ず左寄せにしておきましょう。

ブログ写真の統一感を出す為の基本ルール-各記事のアイキャッチデザインを揃える

ブログ写真の統一感を出す為の基本ルール2つめは、各記事のアイキャッチデザインを揃えておくことです。

↓の画像は、このブログで設定している記事それぞれのアイキャッチ。

ブログ写真の統一感を出すためにアイキャッチデザインを揃えている例の画像
ブログ写真の統一感を出すためにアイキャッチデザインを揃えている

なお、共通するデザインは3つで、文字色を黄色、文字を中央寄せ、画像を少し白く装飾して明るくしています。

特に、絶対にしておくべきということではありませんが、関連記事や最新記事などで画像付きで記事を見せる場合は、アイキャッチデザインを合わせておくと、ブログ・サイトの統一感は出やすいです。

実は、イラストタイプのアイキャッチ画像も、ちゃんと明るくしてます。

ブログ写真の統一感を出すためにする必要のない装飾も行っている例の画像
明るくせずに文字入れしただけでもそのまま使えそう

元の画像に文字入れだけしても、アイキャッチ画像としては使えましたが、”統一感”を優先しました。

ただし、冒頭でも触れていますが、アイキャッチのデザインを「統一感を出そう」「揃えよう」と言っても、下記のように同じ画像を使って、それぞれの記事のアイキャッチを作成するのはオススメしません。

ブログ写真の統一感を出すあまり、同じ画像を使ってしまうダメな例の画像
流石にブログ写真の統一感を出すといっても、アイキャッチの画像は統一しないほうがいい

ブログが機械的に見えたり、何か手を抜いていたりするように見えてしまうからです。

仮に、どこにでもあるフリー画像を使って加工するにしても、本当に人が運営しているブログなのか?という視点を持つようにしてください。

アイキャッチデザインを統一感を出しつつも「ユーザーの目を引く方法」

なお、アイキャッチデザインの統一感を出しつつも、ユーザーの目を引く方法があります。

それは、サイトのメイン色とは、反対の反対色・補色をアイキャッチの文字の色に使うといった方法です。

ブログ写真の統一感を出しつつもアイキャッチの目を引くためには文字の色を反対色・補色にを使うその際に使える色相環図の画像
アイキャッチデザインで文字色はサイトのメイン色とは反対色・補色の文字色を使う

例えば、青色がブログのメイン色であれば、その反対側にある黄色やオレンジをアイキャッチの文字の色に使います。

この補色・反対色の原理については、少し話は飛びますが、手術をする医者が、何故、緑色や青色系統の手術用の服を着ているか知っていますか?

ブログ写真の統一感を出しつつもアイキャッチの目を引くためには文字の色を反対色・補色に使うが、何故なのかが分かる医者の手術服の例の画像
何故、医者の手術服は緑色や青色なのか?…

それは、手術中に赤い血を見るからです。

人間は一定時間一つの色を見続けると、その反対色・補色の残像が見えるようになります(厳密には、その反対色・補色を探すようになるので、残像が見える)。

手術中の医者は赤い血を見続けているので、緑や青の残像が見えしまい、残像は手術の邪魔になってしまいます。

なので、残像を消す効果のある、緑色や青色系統の手術服を着るわけです。

手術服以外にも手術室の壁なども反対色・補色の色にしている画像
病院の壁などは清潔感を出すために壁には白色を使うことが多いが、手術室も赤い血を見るため、緑にしていることが多い。

手術服以外にも手術室の壁なども反対色・補色の色にしている画像を載せています。

もちろん、手術服以外にも、手術室の壁を緑・青色にしたりもして、残像が見えないようにしています。

こういった残像のメカニズムを活用して、自分のブログメイン色とは反対の反対色・補色をアイキャッチの文字に入れると、ユーザーの目を引くことが出来るわけです。

なお、ブログ画像のアイキャッチに文字入れする場合は、「ブログ画像文字入れ」の記事を参考にしてみてください。

ブログ写真の統一感を出す為の基本ルールを押さえつつも、多少の融通をきかせておく

また、ブログ写真の統一感を出すと言っても、自分の中で一定の画像装飾の基本ルールを決めておきつつも、多少の融通をきかせておきましょう。

例えば、僕のこのブログのアイキャッチの文字色は基本は、黄色に黒枠の文字色を使っています。

ブログ写真の統一感を出すと言っても、文字色が被る場合は、柔軟に変更したほうがいい例の画像
ブログのメイン色も青なので、右のアイキャッチの文字色もオレンジ色も補色となるので調和を出しつつも、統一感は維持

↑の黄色のフルーツのイラストをアイキャッチに使う場合には、流石に黄色の文字入れはせずに、右のようなオレンジなどの類似色を使います。

こういった画像装飾する場合の統一感を出すためのルールも、ガチガチには決めずにルールはあくまでもふんわりと決めておくことをオススメします。

また、画像装飾の統一感を出しつつも、目を引くための文字の色については補色・反対色がいいということを述べましたが、消費者が好む色を知っておくと便利です。

ブログ写真の統一感を出す際には消費者が好む色を使う。消費者が好む色のノウハウが書かれている現代広告の心理技術101のP306の画像
消費者が好む色は、青、赤、緑、紫、オレンジ、黄色の順番。消費者が好む色はブログのメイン色に使うようにしましょう。

なお、こういったブログの画像関連のノウハウ、そして色にまつわるノウハウについては「現代広告の心理技術101」に載っています。

すでに↑の画像の消費者が好む色については中身が見えていますが、他にも以下のようなノウハウを知ることが出来ます。

  • 乳幼児向けの情報ブログを作る場合には何色が良いか?
  • 5歳児や小学生低学年の子供を持つ親が見るブログのメインの色は何が良いか?
  • 消費者が好む色の”組み合わせ”が何が良いか?など…

特に、消費者が好む色と合わせて、”消費者が好む色の組み合わせ”を知っておくと、あなたのブログに即使えるはずです。

もちろん、コピーライティング本なので、コピーライティングのノウハウ、そして人を引き付ける画像のノウハウなども載っているので、是非、現代広告の心理技術101のノウハウを活用して、あなたのブログに反映させてみてください。

現代広告の心理技術101の公式サイト

Pocket
LINEで送る