ECサイトでは商品画像を数多く作ります。
私も何万点という商品画像を作成してきましたが、特に楽天やYahoo!ショッピングなどの
モールで作成する画像のうち、力を入れて作ったのは「サムネイル」と呼ばれる画像です。
サムネイル画像とは？
楽天やYahoo!ショッピングの検索結果で、ずらーっと表示される画像を見たことがあると思います。
ネットショップでは、このサムネイル画像は特に力を入れて作る店舗さんが数多くあります。
商品を販売していてもサムネイル画像をクリックしてくれなければ、
お客さんが自分の店に来ないのと同じことなので、ただ作っているだけでは意味がないのです。
しかも、このサムネイル画像はGoogleのスマホ検索でリッチスニペットに表示されます。
ところで、あなたはブログ記事を書いたらアイキャッチ画像を入れますか？
アイキャッチ画像を作成する場合、縦横の比率が横幅65%、縦幅35%くらいの割合になっていると思います。
しかし、楽天やYahoo!ショッピングで使用するサムネイル画像の表示は正方形になっています。
縦横比1：1。
もし実際にサムネイル画像を作成するならば、サイズ幅は大体700pxくらいがちょうどいい感じになります。
では、Googleのリッチスニペットで表示される画像サイズはどうでしょうか？
この画像もサムネイルですね。元の画像サイズは横幅600px、高さ600pxと縦横比1：1でした。
さらに、Googleのリッチスニペットに表示される画像サイズがどのくらいか？
CSSで設定されている値を確認してみました。
element.style {
border-radius: 8px;←角を丸くするサイズ
height: 104px;←高さサイズ
width: 104px;←横幅サイズ
}
スマホサイトで表示される画像のサイズ幅は104px。
これも縦横比1：1ですね。
つまり、この比率で表示される時に、自分の意図した画像を狙って表示できたら
戦略として使えると思いませんか？
しかし、リッチスニペット表示ってGoogleが選定するもので、自分ではコントロールができません。
確かに、Googleも公式で言っています。
参照：構造化データに関するガイドラインに準拠する
では、逆にどの画像を使うのかが分からないなら、どの画像を使っても大丈夫なように作成することは、
自分でも出来ると思いませんか？
この記事では、私が画像作成する際に意識している点を説明いたします。
よかったら、参考になさってみてくださいね。
黄金比を知ろう
デザインを勉強していた方ならすでにご存じかと思います。
この黄金比とは、人が最も美しいと感じるデザイン比率のことです。
参照サイト https://www.asobou.co.jp/blog/web/golden-rate
その比率は「1：1.618」
数字を出されても、よく分からないですよね。
例えば、この記事のアイキャッチ画像サイズは、横幅が640px、縦幅が396pxの黄金比になっています。
実はこの比率を計算してくれるサイトがあります。それがWeb計。
もちろん、黄金比でアイキャッチを作成する必要はありません。
あなたが見て、最もしっくりくるサイズであればいいのです。
リッチスニペットに表示させたいモノはセンターに
この記事のアイキャッチ画像のテキスト「Snippet」は意識して真ん中にしてあります。
これには理由があって、この記事のタイトルにはスニペットというキーワードを使っています。
記事の内容もスニペットに関する記事。検索結果に表示された場合の画像も「Snippet」。
ちなみに、テキスト文字を英語にしたのは単にデザインが良かったから。（つまり好み）
実はこの「真ん中に配置する」構図を、写真撮影の世界では「日の丸構図」と言われています。
その名の通り、日本の国旗「日の丸」です。
商品撮影（物撮り）を行う際のレイアウトでは、基本中の基本の構図です。
では、この記事のサムネイル画像を日の丸構図にした場合は、どのように表示されるのでしょうか？
画像の真ん中をあえてピンク色にしてあります。
（縦横に青い線が入っています。これはPhotoshopのガイドという機能ですが、ここでは気にしないでください。）
この部分を意図的に表示させたい！
と思ったら、画像の真ん中に表示させたいモノを置いて作成してみてください。
リッチスニペットに表示させたい画像の作り方 まとめ
今回は、Googleのリッチスニペットに向けた私の画像作成方法を記事にしてみました。
ただ、この方法で画像を作って記事をアップしたからと言って、リッチスニペットに
表示されるわけではありません。
しかし、適切なマークアップを施こす事でリッチスニペット表示になります。
（このマークアップは、また違う記事でお伝えします。）
スマホで検索した時に画像が表示されている場合と、表示されていない場合では、
結果が違ってくることもあります。
言葉は人の心を動かすことができますが、物事を説明するのに長い文章になってしまう場合があります。
しかし、画像は文章と違って視覚的に多くの情報を一瞬で伝える力があります。
画像に対して違った意識で見てみると、新しい発見があるかもしれませんね。
コメント