こんにちは！Webデザイナーのまなみです。
「出品ページは書けたけど、サムネイルに何を入れればいいかわからない……」
「自分で作ってみたけれど、なんとなく伝わりにくい……」
と悩んでいませんか？
前回は、ココナラの出品ページの中でも、文章の整え方について詳しくまとめました。
今回は2回目として、出品ページのサムネイル画像についてお話しします。
ココナラでは、一覧で最初に目に入りやすいのがサムネイル画像です。
そのため、見た目のおしゃれさよりも、
何のサービスかがひと目で伝わることが大切になります。
今回の記事では、
まず最初に知っておきたい画像サイズと、
画像を見た人に「何を頼めるのか」が伝わる見せ方の2つにしぼってまとめました。
今回の内容は、次のような方におすすめです！
・ココナラのサムネイルをこれから作ろうとしている
・通常サービスと電話サービスのサムネイルの違いが知りたい
・そもそも何pxで作ればいいのか知りたい
通常サービス・電話サービス合わせて50枚以上ココナラサムネイルを作ってきた経験をもとに、できるだけわかりやすく整理しています。
第一印象で損をしないための見直しポイントとして、
これから作る方にも、見直したい方にも参考になればうれしいです。
それでは、どうぞ！
なぜ、ココナラではサムネイル画像が大切なの？
ココナラでは、まず一覧でサービスが並んで表示されることが多いですよね。
そのとき、最初に目に入るのがタイトルとサムネイル画像です。
つまり、説明文を丁寧に書いていても、
入口となるサムネイルの時点で内容が伝わらないと
その先まで見てもらえないかもしれません。
逆にいうと、サムネイル画像で
・何のサービスか
・どんな人向けか
・どんな印象のサービスか
このあたりが自然に伝わるだけでも、出品ページの印象はかなり変わります。
最初から完璧なデザインを目指さなくても大丈夫です。
まずは、「一覧で並べて見たときに伝わるかどうか」を意識するだけでも、
興味を持ってもらいやすくなります。
1．まず最初に確認したい、ココナラサムネイルの画像サイズ
サムネイル画像を作る前に、まずは
「何pxで作ればいいの？」
という、最初につまずきやすいところを整理しておきます。
せっかく作っても、見切れてしまったり、
文字が端すぎて見えにくくなったりするともったいないですよね。
ココナラ公式ヘルプでは、
一部カテゴリでは 1220px × 1240px がPC表示推奨サイズとして案内されています。
ただ、検索一覧での見え方まで考えると、
私は 1220 × 1016px（6:5） で作るのをおすすめします。
というのも、
実際に設定してみると、1220px × 1240px ではスマホから見た際に上下が少し欠けてしまうことがあるためです。
特に、最初にお客様に見つけてもらう場面は検索一覧から始まることが多いので、
その段階で文字が見切れていると
本来いちばん伝えたいメッセージが伝わりにくかったり、
どうしても読みにくさにつながってしまいます。
それだけでなく、
「なんとなく雑に見える」「細かいところまで整っていないのかも」と感じさせてしまい、
結果として不信感やイメージの低下につながる可能性もあります。
一覧で見たときに内容がきちんと伝わり、
「整っている」と感じてもらうためにも、
画像サイズは意識しておきたいポイントです。
2．文字は「中央寄り」にまとめると見やすくなりやすい
画像サイズを整えたら、次に意識したいのが文字をどこに置くかです。
同じ 1220px × 1016px で作っていても、
文字が端ギリギリに入っている画像と、
余白を取っている画像では、見たときの印象がかなり変わります。
そのため私は、大事な文字ほど中央にまとめることをおすすめしています。
反対に、端のほうには飾りや背景の要素を置くくらいにしておくと、
全体がすっきり見えやすくなります。
【TIPS】私が目安にしているセーフゾーン
これはあくまで実務上の目安ですが、
1220px × 1016px（6:5） で作る場合は、
だいたい次くらいの余白を意識すると整えやすいです。
上下左右⇒端から50pxくらい
右下⇒280pxの長方形（スマホのお気に入りマークで隠れる部分）
こうしておくと、
・文字が詰まって見えにくくなるのを防ぎやすい
・一覧で見たときに圧迫感が出にくい
・スマホ表示でも重要な文字が見えやすい
というメリットがあります。
文字を入れる範囲を画像いっぱいに使うのではなく、
ひとまわり内側におさめるイメージです。
⚠ 電話相談・電話占いサービスでは、
通常サービスよりも下部の余白を大きめに取るのがおすすめです。
（目安は下から226pxくらい）
「待機中」などのステータス表示が重なることがあるため、重要な文字は中央より少し上にまとめると見やすくなります。
3．サムネイルは「雰囲気」より「何を頼めるか」が伝わることを優先する
サムネイルを作るとき、ついおしゃれさや雰囲気を重視したくなることがあります。
もちろん見た目も大切ですが、それ以上に大事なのは、何のサービスなのかがひと目で伝わることです。
たとえば、デザインが整っていても、
「何を頼めるのかが見えない」
「誰向けのサービスなのかわからない」
という状態だと、一覧の中ではスルーされやすくなってしまいます。
まずは、見た人が数秒で内容をつかめること。
そこを土台にして、色や雰囲気を整えていくほうが伝わりやすくなります。
サムネイル画像でいちばん大切なのは、
画像を見たときに、何を頼めるサービスなのかが分かることです。
4．1枚目は「全部説明する場所」ではなく「入口」と考える
ここで気をつけたいのは、伝えたいことを全部入れようとしないことです。
情報をたくさん詰め込むほど親切に見えそうですが、
実際には文字が多くなって、何のサービスなのかが分かりづらくなります。
まず1枚目では、
・何のサービスか
・誰向けか
・ひとことで言うとどんな特徴か
このくらいが見えれば十分です。
たとえば、
・ココナラ出品用サムネイルを作成します
・初めて出品する方にもおすすめです
このくらいの情報量でも、何を頼めるかは伝わります。
実績、強み、価格、流れなどは、
2枚目以降の画像や本文で補っていけば大丈夫です。
まとめ
ココナラのサムネイル画像で、まず見直したいのはこの2つです。
・1220 × 1016px（6:5）で作ること
・何を頼めるかが一目で伝わるようにすること
最初から完璧にしようとしなくても大丈夫です。
まずはこの2つを整えるだけでも、
サムネイル画像はかなり見やすくなります。
見た目を飾ることよりも、
内容が丁寧に伝わることを優先して考えると、
一覧での印象もぐっと整いやすくなります。
今回の内容が、「まずどこから整えようかな」と考えるときのヒントになればうれしいです。
次回は、サービス内容や画像を見たあとに確認されやすい
プロフィールについて、安心感につなげる整え方をまとめます！
安心感・やさしい雰囲気のココナラサムネイルづくりをお手伝いしています。
画像にどんな文字を入れたらいいかわからない…という状態からのご相談も承っていますので、お気軽にお声がけください✨
