その他運営サイトはコチラ▷link lit

【白銀比を活かせ】美しいアイキャッチ画像の作り方

こんな人にオススメ
  • アイキャッチ画像が綺麗に作れない
  • バランスの取れたアイキャッチ画像を作りたい

ブログで必須の「アイキャッチ画像

なかなかバランスがとれず
納得いかないことがあると思います

この記事では
日本人が好む比率に基づいた
アイキャッチ画像
の作成方について考えていきたいと思います

Contents

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

アイキャッチ画像の大きさは
1200×630px」(1 : 1.91)
で作成することがオススメです

ツタロー
ツタロー

他の大きさはダメなの?

Googleによると

検索結果に表示する画像サイズを「1200px × 630px」で表示する

そのためGoogleは「1200px × 630px
を推奨しています

違う大きさに設定してしまうと
アイキャッチ画像が
見切れてしまいます

そのため
1200px × 630px」で作ることをオススメします

日本人が好む比率

日本人に

どのような比率の四角形が好みか

を調査をした結果

  • 1位:白銀比
  • 2位:正方形
  • 3位:黄金比

という結果になりました

日本人は黄金比よりも白銀比や正方形が好き?

出典:デザインのための数学 著:牟田淳

日本人が好むのは
黄金比」よりも「白銀比
という意外な結果になりました

この比率をもとに

アイキャッチ画像の作成をしていくことで


整った印象を与えることが
できるようになります

白銀比

1 : 1.414

白銀比は日常的に目にする比率です


白銀比が使われているのが「用紙」です

デザインを美しくする「白銀比」について理解しよう(日本人が魅かれやすい白銀比) : ビジネスとIT活用に役立つ情報

A4用紙は

短辺210mm×長辺297mm

その比率は「 1 : 1.414 」です

この比率を整数にすると
約「5:7」となります

アイキャッチ画像のサイズは決まってるので
アイキャッチ画像の縦または横を「5:7」で表すと

画像に alt 属性が指定されていません。ファイル名: 5-4-1024x538.png

白銀比を利用すると
バランスの取れた
アイキャッチ画像が出来上がります

たまたま撮った写真の縦方向が
「 7 : 5 」でした

画像に alt 属性が指定されていません。ファイル名: 8381a8ec-94c8-47cb-b19f-3bc5e708947f
Point

比率の「5」の全体を使うのでなく
「5」の中心を使うことでより整った印象になります

正方形

2番目に日本人が美しいと感じる比率が「1:1」です

ブログ村を利用する方が多いと思いますが


ブログ村では
アイキャッチ画像は正方形で表示されます

アイキャッチ画像を
この領域に収めないと
見切れてしまいます


一番伝えたいことを中央に記すことで
画像を見た人は
瞬時に理解することができます

アイキャッチ画像を作る際は
この枠内に伝えたいこと納めることがオススメです

黄金比

1 : 1.618

デザインを美しくする「黄金比」について理解しよう!(身の回りにある黄金比) : ビジネスとIT活用に役立つ情報

「1 : 1.168」を整数比に直すと
約「5:8」となります

アイキャッチ画像の縦または横を「5:8」で表すと

画像に alt 属性が指定されていません。ファイル名: 5-3-1024x538.png
画像に alt 属性が指定されていません。ファイル名: 5-8-1024x538.png

このような比率になります

白銀比と大きな差はありません

このように比率をうまく利用して
アイキャッチ画像を作成することもできます

青銅比

1 : 3.303

あまり有名な比率ではありませんが
青銅比」も美しい比率
として認知されています

画像に alt 属性が指定されていません。ファイル名: 5-5-1024x538.png

タイトルを短く画像を大きく使いたい!

というときに使うことで
整ったアイキャッチ画像を作成できます

まとめ

「日本人が美しいと思う比率」
を用いたアイキャッチ画像の作り方を紹介しました



黄金比と正方形の中に情報を詰め込むことで
多くの人に理解してもらえるアイキャッチ画像が作れます

そうすることにより

  • 美しい比率を保てる
  • 伝えたいことを伝えられる

ことが可能になります

ぜひ参考にしながらアイキャッチ画像を作成してみてください

それでは〜!

関連記事▷▷ ブログのテーマカラーの決め方

|文字の色の編集も大切です

コメント

コメントする

CAPTCHA


Contents
閉じる