PCとスマホでLPの並びは同じ?サロンの全体画面で確かめる配置

PCとスマホでLPの並びは同じ?サロンの全体画面で確かめる配置

記事
デザイン・イラスト
LPを依頼するとき、PCの長い完成画像だけを見て、スマホも同じように見えると思っていませんか。
同じ情報でも、画面幅が変わると並べ方が変わります。PCとスマホの全体像を別々に確認し、どの情報がまとまって見えるかを比べることが大切です。

■ まず、同じLPの二つの全体像を見る

lp-overview-pc.png
lp-overview-sp.png

画像説明:salon komorebiのPC・スマホの全体画面。2026年10月26日の確認記録から掲載した、架空サロンの自主制作見本です。写真は生成イメージで、実店舗や施術実績ではありません。

この二つは、全体の写真の比率や説明の順番を見るための画像です。細かい条件の文字は、次の拡大画面で確認してください。

PCは横に広く、複数の内容を並べられます。スマホは縦に進むため、並びを変えても、写真・名前・説明が正しく一組になっているかを見ます。

■ メニューの並びを、読める大きさで比べる

lp-menu-mobile.png

画像説明:スマホのメニュー欄の拡大。PC全体画像の4列に対し、スマホでは2列に並ぶことを確認できます。

この見本では、Facial・Body・Short・Specialのメニューが並びます。PCの4列をそのままスマホ幅に縮めるのではなく、スマホでは2列にしています。

依頼時に確認したいのは、「何列になっているか」だけではありません。メニュー名の近くにその説明と料金があるか、次の段へ進んでも別のメニューと取り違えないか、比較する情報が同じまとまりにあるかです。

■ いつも2列がよいとは限りません

説明文が長い、条件が複雑、写真より文字を詳しく読む必要がある場合は、スマホで1列にする方法もあります。項目数と文章量に合わせて決めます。

だからこそ、見本を見て「この形で」と伝えるだけでなく、自分のサービスで載せる説明量も一緒に伝えることが大切です。見本と同じ文字数でない場合、同じ配置が合うとは限りません。

また、静止画で確認できるのは主に配置や表示です。ボタンの動作やフォームの送信、実際の受付処理までを確認した画像ではありません。実運用の仕様は別途確認します。

■ 制作相談に使えるメモ

・比較してもらいたい項目の数:____
・各項目に載せる説明・条件:____
・スマホでも省略したくない情報:____
・希望する全体の雰囲気:____
・実際に使う申込先やフォーム:____

LP制作サービスではPC・スマホに合わせたデザイン・実装を相談できます。このメモと実際の原稿を添え、「スマホではどう並べると読みやすいか」を完成イメージと一緒に確認しましょう。原稿量・素材・フォーム仕様などの範囲は購入前にすり合わせます。

LP制作サービスはこちら

サービス数100万件のスキルマーケット、あなたにぴったりのサービスを探す