4-5 サイズについて｜通販LPで見やすく伝える大きさの考え方
通販LP（ランディングページ）を作るとき、多くの初心者の方が悩むのが「文字や画像、ボタンのサイズ」です。
「どれくらいの大きさにすれば読まれるのか」「スマホで見やすくするには？」と迷う方は、少なくありません。
実は、サイズひとつで読者の行動は大きく変わります。たとえば、購入ボタンが小さすぎると「どこを押せばいいか分からない」と離脱されてしまうことも。逆に、見出しの文字が小さすぎると、読者がページの構成を把握できず、読むのをやめてしまうこともよくあります。
特に通販LPでは、「見やすさ」と「誘導力」が売上に直結します。ここでは、文字・画像・ボタンのサイズをどう決めていけばよいか、初心者の方でもすぐに実践できる具体的な考え方をご紹介します。
—
文字サイズは階層を意識して、読みやすさを優先する
通販LPの文字サイズでまず大切なのは、見出しと本文で明確な階層をつくることです。
たとえば、H1見出し（ページのタイトル）は、PC表示で40～48ポイント、スマホでは32～40ポイントが目安です。これより小さすぎると「これは何のページか」が伝わりにくく、読者がページを読み進める意欲を失ってしまいます。
H2見出しは、PCで28～36ポイント、スマホでは24～30ポイントがおすすめです。このサイズであれば、読者は「この章には何が書かれているか」をサッと把握できます。
本文（H3以下やボディテキスト）は、PCで16～18ポイント、スマホでは15～16ポイントが読みやすい範囲です。14ポイント以下になると、特に高齢層の読者や、小さな画面で閲覧するスマホユーザーが目を細めることになり、離脱につながりやすくなります。
また、読みやすさの観点では、行間を1.5～1.8倍に設定することが重要です。行間が狭すぎると文字が密集し、視覚的に疲れやすくなります。
—
画像サイズは「目的」と「表示環境」を両方考える
通販LPの画像サイズは、ただ「大きいほどいい」というわけではありません。
たとえば、商品の特徴を伝えるために使う「大きな画像」は、PCで横幅1200px程度、スマホでは画面幅一杯（100％）に設定し、中央揃えで配置すると、印象が残りやすくなります。
一方で、本文中に挿入する小さなアイキャッチ画像や図解は、PCで横200～300px程度、スマホでは150～200px程度が適切です。これより大きいと本文が押しのけられ、読みづらくなることがあります。
また、画像の読み込み速度も重要です。サイズが大きい画像をそのまま使うと、ページの表示が遅くなり、読者の離脱率が高まります。
PCとスマホで最適化された画像を用意する（レスポンシブ画像）ことで、読みやすさと表示速度の両立が可能になります。
—
ボタンサイズは「押せる」と感じさせる余白を確保する
LPで最も重要な要素のひとつであるボタン。そのサイズは、クリック率に直結します。
PCでは、ボタンの高さを44～56px、スマホでは48～64pxが推奨されます。スマホでは指で操作するため、48px未満のボタンは指で誤って押す・押せないという問題が起きやすく、読者のストレスになります。
また、ボタンの周囲に十分な余白（パディング）を設けることも大切です。たとえば、ボタンの上下に12px、左右に24pxの余白があると、視覚的に「ここを押す」という意図が明確になり、クリックしやすくなります。
ボタンの色やテキストも重要ですが、それ以上に「大きさと配置」がクリックの第一歩です。
「今だけ〇〇円OFF！」などの特典を伝えるボタンは、背景色を明るめに、文字を太字＋20ポイント以上にすることで、目立たせつつ押しやすさを確保できます。
—
失敗しやすい3つのサイズの落とし穴
ここでは、初心者が陥りがちなサイズ設定の失敗例を3つご紹介します。
1つ目は、「文字が小さすぎて読みづらい」というパターン。特に、細いフォントや白背景に薄いグレー文字を使うと、視認性が大きく下がります。
2つ目は、「画像や動画が画面を圧迫している」ケース。横長の画像をPC向けに設定したままスマホで表示すると、スクロールが長くなり、読む意欲を削ぐことがあります。
3つ目は、「ボタンが小さくて押せない」という問題。特に「購入ボタン」や「無料ダウンロードボタン」が32px以下の高さの場合、スマホユーザーが誤タップしやすく、離脱の原因になります。
これらの失敗を避けるには、「実際にスマホで表示してみて、10秒以内に押せる場所が分かるか？」をチェックポイントにするとよいでしょう。
—
今日からできる、LPサイズ改善の3ステップ
それでは、早速今日から実践できる改善ステップを3つお伝えします。
ステップ1：「見出しサイズをチェック」
まず、H1見出しがPCで40px以上、スマホで32px以上か確認しましょう。もし小さければ、1段階大きくします。
ステップ2：「ボタンを指でタップしてみる」
スマホでページを開き、購入ボタンや問い合わせボタンを、実際に親指でタップしてみます。押しづらいと感じたら、高さを48px以上に、余白を広げてみましょう。
ステップ3：「画像の横幅をスマホ向けに制限する」
画像が画面をはみ出している場合、横幅を100％に設定し、max-widthで1200pxまでに制限すると、PC・スマホ両方で綺麗に表示されます。
これら3つのチェックを5分程度で済ませられるので、まずは1ページだけでも試してみてください。
—
まとめ｜「見やすさ」と「押しやすさ」を意識して、小さな修正から始める
通販LPのサイズ設定は、「完璧に揃えなければ意味がない」と考えがちですが、実は「少しずつ改善する」ことが最も効果的です。
特に、見出しの文字サイズ・ボタンの高さ・画像のレスポンスサイズの3つを整えるだけで、読者の滞在時間やクリック率は明らかに向上します。
次のアクションとして、今日のうちに「スマホで自分のLPを開き、購入ボタンが親指で押しやすいか」をチェックしてみてください。
もし押しにくいと感じたなら、高さを48px以上に変更し、上下に12px以上の余白を追加する——この小さな修正が、明日のコンバージョン率を変える可能性があります。
サイズの調整は一見地味ですが、実は最も効果の高い改善の第一歩です。
読者が「読みやすく、押しづらくない」LPを作ることで、信頼感も高まり、売上の向上にもつながります。
コメント