あなたのサイトを見ている人の大半は、スマホからです。それなのに、パソコンの画面できれいに作って満足していないでしょうか。PCで完璧でも、スマホで読みにくければ、成果にはつながりません。
だからこそ、スマホ前提で作る（モバイルファースト）という考え方が大切です。スマホで見やすくするための、具体的なポイントを整理します。
なぜ「スマホ前提」なのか
多くの人は、移動中やちょっとした空き時間に、スマホで気軽に見ています。画面は小さく、指で操作し、集中力も長くは続きません。
PCの広い画面できれいに見えても、スマホの小さな画面では窮屈で読みにくい、ということが起こります。だから「PCで作ってスマホでも確認」ではなく、最初からスマホで見やすいことを優先します。
スマホで見やすくする具体策
① 縦1カラムで、上から下に読める構成
スマホは縦長の画面です。横に並べたレイアウトは崩れたり窮屈になったりします。情報は縦一列に、上から下へ自然に読める順番で並べましょう。
② 文字を小さくしない
小さい文字は、それだけで読む気を失わせます。スマホでも無理なく読める大きさを保ちましょう。本文なら16px前後がひとつの目安です。詰め込みたくても、読みやすさを優先します。
③ ボタンは、指で押せる大きさと間隔に
指でタップする前提です。ボタンは十分な大きさにし、隣のボタンと間隔をあけること。目安は縦横44〜48px以上です。小さすぎたり近すぎたりすると、誤タップの原因になり、ストレスで離脱されます。
押せる場所を、増やしすぎない
意外と見落とされるのが、これです。制作の現場では、「せっかくだから画像にもリンクを付けたい」という要望をいただくことがあります。親切に見えますが、スマホではスクロールしようとした指が画像に触れて、意図しないページに飛んでしまう——誤タップが増えるだけです。
押してほしい場所は、はっきりボタンの形にして絞るほうが、結果的に押されます。
④ 大事なボタンは、届きやすい位置にも
スマホは片手・親指で操作されることが多いもの。問い合わせなどの大事なボタンは、画面の下の方にも用意しておくと、読み進めた流れですぐ押せます。
私が手がけたサイトでも、スクロールしても画面の下に付いてくる問い合わせボタンをスマホとパソコンの両方に付けたところ、反応が1割ほど上がった感覚がありました。
⑤ 電話番号は、タップで発信できるように
電話番号を載せるなら、タップするとそのまま発信できるようにしておきましょう。番号を覚えて電話アプリを開く、という手間があるだけで離脱されます。
⑥ フォームは、スマホで入力しやすく
入力項目は必要最小限に。スマホの小さいキーボードで、負担なく入力できるかを意識します。項目が多いフォームは、スマホではとくに嫌われます。
⑦ 画像や文字が、画面からはみ出さない
横スクロールが必要になったり、文字が切れたりしていないか。画面の幅にきちんと収まっているかを確認しましょう。
⑧ 画像は、必ず軽くしておく
スマホは通信環境がまちまちです。写真をそのまま載せると、表示に時間がかかり、読む前に離脱されます。私は制作のとき、画像は必ず圧縮してから載せるようにしています。見た目はほとんど変わらず、表示は大きく速くなります（表示速度とスマホ対応）。
まず「自分のスマホで見る」
あれこれ確認するより、実際に自分のスマホでサイトを開いてみるのが一番の近道です。PCの見た目に頼らず、スマホで「読みやすいか」「押しやすいか」「迷わないか」を、自分の指で確かめましょう。
ただし、自分のスマホだけでは足りない
ここが落とし穴です。自分のスマホできれいに見えても、別の人のスマホでは崩れていることがあります。
これまで100件以上の制作に関わってきた中で、実際にあったのが次のようなケースです。
- Safari（iPhone）だけで表示が崩れる
- AndroidのChromeだけで表示が崩れる
同じページでも、ブラウザによって表示のされ方が少しずつ違うためです。制作者が自分の端末だけで確認していると、見ている人の一部にだけ崩れたページが届いている、ということが起こります。
公開前には、iPhoneとAndroid、少なくとも2種類の端末で確認しておきましょう。家族や知人のスマホを借りるだけでも十分です。制作を依頼する場合は、「どの端末・ブラウザで確認していますか？」と聞いておくと安心です。
まとめ
サイトの主役は、スマホで見る人です。縦1カラム・読める文字サイズ・押しやすいボタン・入力しやすいフォーム・軽い画像——スマホ前提で作るだけで、見やすさと成果は大きく変わります。
そして確認は、自分のスマホだけで終わらせず、種類の違う端末でも。ブラウザによる表示崩れは、確認した人にしか見つけられません。
Sea Soundで制作するLPは、スマホでの見やすさ・押しやすさを最優先に作り込みます。ご相談は無料相談から。