商品ページ改善作成2026-06-23 17:00約6分

スマホ商品ページの離脱を防ぐ設計｜親指で迷わず買えるか

通勤電車の中、片手で吊り革につかまりながら、もう片方の手でスマホを操作する。気になった商品をタップしたけれど、文字は小さいし、ボタンはどこにあるか分からない。指で何度も拡大して、ようやく値段を見て——「まあ、後でいいか」と閉じてしまう。

あなたのお店のお客さんも、たぶん同じ姿勢で見ています。EC（ネット通販）のアクセスは、いまや多くのお店で7〜8割がスマホ。なのに商品ページは、つい大きなパソコン画面を思い浮かべて作ってしまう。今日は、その「ズレ」を直す話を、いちばん見られている1ページから一緒に進めましょう。

結論：スマホでの離脱は、商品が悪いからではなく「片手・小さい画面で買いにくい」ことが原因のことが多いです。
ファーストビュー・親指の届く範囲・文字サイズ。この3つを整えるだけで、同じ商品でも買われ方が変わります。まずは売れ筋の1ページをスマホで開くところから。

いま何が起きているか

パソコンとスマホは、同じ「商品ページ」でも見え方がまるで違います。パソコンは横に広く、マウスで細かく操作できる。一方スマホは、縦に細長く、片手の親指だけで動かすのが普通です。

ところが多くの商品ページは、パソコンで作ってパソコンで確認して、そのまま公開されています。すると、こんなことが起きます。

お客さんは、わざわざ拡大したりスクロールを頑張ったりしてくれません。少しでも「読みにくい・買いにくい」と感じた瞬間、静かに戻るボタンを押します。これは集中力がないのではなく、片手・移動中という状況では当たり前の反応です。

スマホで開いて最初に見える範囲（ファーストビュー）に、何を入れるか。ここが勝負どころです。スクロールせずに次の4つが分かるのが理想です。

たとえば、こんな違いです。

とくに効くのが、「カートに入れる」ボタンを画面の下に固定するやり方です。お客さんがどこまでスクロールしても、親指のすぐ届く場所にボタンがある。買おうと思った瞬間に迷わせない。多くのカートシステム（Shopify・BASE・楽天など）で、テーマやアプリの設定で実現できます。

※ ここで挙げた数字や割合は説明のための一例です。実際の構成は商品やお店の状況で変わります。まずは自分のページを実機で見て、何が最初の画面に入っているかを確かめてください。

スマホは画面が小さいぶん、文字の見せ方が効きます。難しい調整は要りません。

「きれいに詰める」より「ゆったり読める」を優先する。それだけで、最後まで読まれるページに近づきます。

ファーストビューと親指導線を整えると、同じアクセス・同じ商品でも購入率（CVR）が底上げできます。広告費を増やさずに成果が変わる、いちばん費用対効果のいい改善です。
スマホで読みやすいページは、検索（SEO）でも有利に働きます。Googleはスマホでの見やすさを評価の要素にしているからです。
一度「スマホで作る型」を決めれば、新商品を載せるたびに迷いません。チームの作業も速くなります。

スマホの向こうのお客さんは、たいてい片手で、何かのついでにあなたのお店を見ています。その人が「迷わず、すっと買える」かどうかは、商品の良さの前に、ページの作りで決まります。まずは1ページ、自分の親指で確かめてみませんか。