推奨サイズ通りに作っても、スマホではサービス画像の一部が隠れて表示されることがあります。
これはデザインの問題ではなく、表示仕様によるものです。
では、どの範囲なら本当に見えるのか。
帯に隠れない画像は、どう設計すればいいのか。
ここから、実測データをもとに解説します。
なぜココナラのサービス画像は帯で隠れてしまうのか
ココナラのサービス画像は、推奨サイズ通りに作成しても、
「検索結果」や「閲覧履歴」の画面では、オレンジ色の帯（例：「予約受付中」「今すぐ相談可能」）が自動的に表示されます。
この帯は、ユーザー側で位置や大きさを調整することができません。
つまり、多くの表示条件において、一定の範囲が帯によって隠れる仕様になっています。
そのため、推奨サイズ通りに画像を作っても、「重要な情報が帯に隠れてしまう」という問題が起こります。
帯で隠れると、なぜクリックされなくなるのか
帯によってサービス画像の一部が隠れると、画像の中で本当に伝えたい情報が見えなくなってしまいます。
例えば、
・サービス内容を表す要点
・強みとなるキャッチコピー
・他サービスとの差別化のポイント
こうした重要な情報が隠れると、ユーザーはあなたのサービスの価値を一瞬で判断できなくなります。
スマホの検索画面では、ユーザーは画像をじっくり読むのではなく、「一瞬で分かるかどうか」でクリックするかを決めています。
つまり、伝えたい情報が帯で隠れる＝選ばれにくくなるという構造です。
スマホで実際に見えている範囲は、想像よりはるかに狭い
実際にスマホで表示されるサービス画像は、多くの人が想像しているより、はるかに狭い範囲しか見えていません。
サービス画像は、次のように帯によって隠れてしまいます。
左：作成したサービス画像(元画像)
右：ココナラのスマホ画面で実際に表示される画像
このように、「画像としては存在しているのに、ユーザーには見えていない領域」が想像以上に大きいことが分かります。
実測で分かった｜帯で隠れない“本当に使える領域”
では、実際にスマホで表示されているココナラのサービス画像が、
どこまで見えているのかを、実測データをもとに確認していきます。
ここで紹介する数値は、スマホでココナラのアプリを開き、
実際の表示画面をスクリーンショットで保存し、見える範囲を計測したものです。
※ すべてのスマホで完全に同じ数値になるわけではありませんが、
「見える範囲が想像以上に狭い」という点は共通しています。
「探す」画面｜最も“見える範囲が小さい”表示
予約受付中・電話サービス受付中の状態で「探す」から検索した場合、
サービス画像は一覧で次のように表示されます。
検索結果
画像部分だけを切り出して、分析するとこのようになります。
測定結果は以下の通りです。
・帯の高さ：約106px
・画像全体に対する割合：約46%
つまり、条件によっては、
画像の約半分が帯によって隠れてしまう可能性があります。
推奨サイズ通りに画像を作っても、下半分に配置した文字や重要な情報は、ほとんど見えていない状態です。
「ホーム」画面｜広いが油断できない表示
「ホーム」の閲覧履歴などで表示された場合は、
「探す」画面よりも、やや広い範囲が見えます。
画像部分だけを切り出して分析すると、次のようになります。
測定結果は以下の通りです。
・帯の高さ：約50px
・画像全体に対する割合：約13%
「探す」画面よりは隠れる範囲が小さいものの、
それでも画像の一部は確実に見えなくなっています。
つまり、
表示される場所によって「見える範囲」は変わるものの、
どの画面でも、画像が帯で隠れること自体は避けられないということです。
実測データを統合して分かる「本当に安全な領域」
このように、表示される画面によって隠れる範囲が異なるため、
pxだけで安全領域を判断することはできません。
推奨サイズ通りに画像を作っても、実際にユーザーが見ているのは、その一部にすぎません。
そこでここでは、
どの画面でも共通して使えるように、見える範囲を「割合」で整理します。
上部：どの画面でもほぼ確実に表示される領域（最優先ゾーン）
中央：条件によって一部が隠れる可能性がある領域（準安全ゾーン）
下部：帯で隠れる可能性が高い領域（非推奨ゾーン）
だからこそ、
サービス画像を設計するときは、
「一番隠れる状態」を基準に考える必要があります。
割合だけだとイメージしにくい方のために、
ココナラ推奨サイズに、pxで換算した図も示します。
ただし、このpxの数値は、
使用するスマホや画面サイズによって変わる可能性があります。
そのため、
サービス画像の設計には、pxではなく、
「割合」を基準に考えることが重要です。
推奨サイズと「実際の表示」は別物である
ココナラの推奨サイズは「画像を最適サイズで表示させたい場合の画像」を示したものです。
一方で、スマホの検索などの画面で「どの範囲が見えるか」は、別の問題になります。
つまり、
推奨サイズ＝最適な画像サイズ
見える範囲＝別の設計が必要
となります。
結論｜「一番隠れる状態」を基準にデザインする
多くの人が「推奨サイズ通りに作っているのに成果が出ない」と感じるのは、デザインの問題ではなく、伝えたい大事な情報が隠れてしまっている可能性が高いのです。
大切なのは、サービス画像は「一番隠れる状態」を基準に設計するのが安全です。
なぜなら、
・どの画面でも最低限伝えたい情報が見える
・表示条件によるブレに影響されにくい
・初心者でも失敗しにくい
からです。
サービス画像設計の全体像を知りたい方へ
ココナラのサービス画像は、
ただ「帯に隠れないように配置する」だけでは不十分です。
実際の表示仕様を前提にして、
「どこが本当に見えるのか」から逆算して設計する必要があります。
サービス画像づくりの全体像は、こちらのページで詳しく解説しています。
コメント