商品画像のサムネイルを考える vol.1　楽天編

個人的に仕事で関わることの多くなったECサイトの画像作成。
意外と記事にしている方が少ない気がしたので、私なりの作成方法や考えを書いていければと思い記事にすることにしました。
私もまだ経験の浅い分野のため、試行錯誤の日々ですが何かのお役に立てたらいいなと思いつつ。

全てコンサル会社様やデザイナー、制作会社様にお願いをしているショップも増えましたが、まだまだショップの内製、デザイナー経験のない方が作っている場合も多いようです。
独自のカートの場合は規定はありませんが、大手のモールでは各社独自の規定などがあったりするため、自由にデザインというわけにはいかないことも多いので慣れないうちは困惑することも多いと思います。
そのため今回はなるべくノンデザイナーの方でもわかるように記事を書こうと思いますが、もしわかりづらい部分がありましたらすいません。
デザイナー経験者には当たり前だったり、物足りない内容の可能性がありますが、その辺は生ぬるく見ていただければ幸いです。

今回は大手モール楽天のサムネ画像を考えたいと思います。

楽天市場のサムネ画像で気を付けること

楽天市場のサムネイル画像というと一昔前はこういうものが主流だったのではないでしょうか。

全く架空の商品です。私がキノコ好きなのでなんとなくでキノコになりました。

昔の楽天のサムネは文字をたくさん配置し、帯や枠線なども使用し、とにかく派手で目立つように作成をすることが多かったようです。
画像も背景を使用したものをそのまま切り抜いて使用しているものなども多く、良く言えばバラエティ豊か、悪い言えば雑然としたサムネイル画像が多かったようです。

ところがここ数年、楽天のサムネイル画像には楽天から一定のラインを守るようガイダンスがありました。

・テキストの比率は全体の20%以下
・背景は無し、商品のみの白抜き画像にすること
・枠線は使用してはならない

この3点は必ず守るようにとのガイダンスです（2021年6月現在）
今でも背景画像使っていたり、枠線やテキストをふんだんに使ったものも存在していますが、こういう画像は検索で不利になるなどの何かしらのペナルティが課せられているという話です。
どれだけのペナルティなのかなどの詳細は開示されていないので、中の人にしかわからない部分ですね。
このガイダンスに従って、先ほどの画像を修正するとこうなります。

余分な文字は入れられないので必要なものだけに絞る必要もあります。
特徴が無いという話も上がっていますが、細かい文字はスマホでの検索が主流になった今では読みづらいですし、白い背景にすることで商品自体が目立つという利点はあります。
Amazonに近くなった印象ですね。
スマホアプリでの検索画面を使った比較画像を作ってみました。

商品自体がどんなものかぱっと見でわかりやすいのは下に配置した白背景のものになるかと思います。
PCで購入する層が多かった時代は情報満載のサムネイルでも良かったのでしょうが、スマホが主流の時代ではわかりやすさが重要になったということなのかもしれませんね。

テキスト比率はちょっと厄介

枠線は使わなければいい、白背景は切り抜けばいい、と比較的わかりやすいのですが、問題なのはテキスト比率。
どういう判定がされているのかを説明するために画像にグリッドを引いてみました。

おおよそこんな感じです。
画像自体を10×10に区切って、その枠をテキストがどれだけ消費しているかでテキスト比率を判断しているとのこと。
10×10つまり100マス中20%以内ということですから、20マス以内にテキストは抑えてねということです。
ここで配置、デザインに関わる厄介な問題がでてきます。
グリッドをまたいだテキストの判定です。

グリッドを跨いだテキストの扱い

困ったことに、グリッドを跨いで複数のマス目に配置されているテキストは、実際には1文字でも複数の文字としてカウントされてしまいます。
こちらがその例となります。

今だけ0円の0の部分は4つのマス目を跨いでいるので4つ分のマス目で計算されます。
ランキング受賞のグと賞の文字は2マスで計算されます。
つまり大きいフォントや小さめでもグリッドを跨ぐと、その分入れられるテキストは少なくなるということです。

10×10のマス目のうち、テキストが載っている箇所を20マス以内に収めねばならない状況で、この複数マスを占有してしまう状態はけっこう痛い。
数えてみるとこの画像の感じでも15マスを使用していることになります。
20マス以内を守るとテキストなんて殆ど入れられないし、大きいフォントを使うなら商品名がギリギリということも。

デザイン的な配置にも制限が生まれます。
ここのポイントに配置をしたいと思っても、そこに置くとグリッドを跨ぐため複数のマスを占領するからガイダンスに適さないという状況が発生するのです。
無理に収めようとするとどうしても通常のデザインのセオリーでは無理ということもあり、どうしても配置したいテキストが多い場合など、多少の違和感はあきらめざるを得ないということもあります。

悩んだら文字は入れないのも手

縛りがある以上、悩んでしまったら文字を入れないという選択もありです。
白抜きの商品画像でサムネは制作をし、テキストを入れたものはページを開いた先のアイキャッチなどに使用をするという感じで。
その場合はサムネに使用する白抜き画像の写真はできる限りきれいなものを用意したほうがいいです。
できればプロのカメラマンに撮っていただいて、綺麗な切り抜きも心がけて。
商品ページに入ってもらうための重要な画像ですから、できるだけきれいでタップしたくなる画像を目指しましょう。

細かい配置などに関しては状況によっては諦めが肝心ということもありますので、臨機応変に対応するのが大事かなと思います。

他にもバリエーションがある場合の表示の仕方など、いろいろと例外的なものもあるのですが、そこまで書いてしまうと難しい話になっていくので今回はここまでで。

ネットショップを開く方も増えているので、よろしければ参考にしてみてください。

読んでいただきありがとうございました。

画像は
ぱくたそ様
EC design 様
よりお借りしました。
素敵な画像ありがとうございました！