サイトは
スマホから組み立てる

まず手元のスマホで、自社のサイトを開いてみてください。話はそこからなんです。

会議室の大きな画面で見ると、写真も配置も整っている。ところが、お客さんが実際に見ているのは、電車の中や休憩中に片手で持ったスマホの画面です。そこで文字が小さすぎたり、ボタンが押しにくかったりすると、内容を読む前に閉じられてしまいます。

スマホ前提のサイトとは、PCのページを小さく並べ直したものではありません。縦に1列、片手の親指、細切れの時間。この3つを前提に、何をどの順で見せるかを先に決めたサイトです。PCの画面は、そのあとで広げて整えます。

この記事では、スマホ前提で作る理由、PCで作ったサイトが崩れやすい場所、親指で届く作り、文字と画像の扱い、公開前と公開後の確かめ方を扱います。LPの1画面目の言葉や、問い合わせフォームの作りは、それぞれ別の記事にまとめています。

スマホで先に組むと、何が変わるのか

PCの画面では、左に写真、右に説明、横に3つのサービス紹介、と横に並べて見せられます。同じページをスマホで見ると、横に並んでいたものが全部縦に積まれます。どの順で積まれるかは、作る側が決めておかないと、たまたまの順番になります。

例えば、地域の歯科医院のサイトで、PCでは「院長あいさつ」「診療案内」「アクセス」が横に並んでいたとします。スマホでは院長あいさつの長い文章が先に来て、診療時間や地図ははるか下。急に歯が痛くなって調べた人が知りたいのは、今日開いているかと、どこにあるかです。

スマホから組むときは、「この画面を開いた人が最初に知りたいことは何か」を上から順に並べ、そのあとでPCの広い画面に配置し直します。順番の判断を、狭いほうの画面で先に済ませるわけです。

検索の面でも、スマホ版が基準になっています。Googleは、スマホ版のページの内容をもとに検索の登録と順位づけをする「モバイルファーストインデックス」への移行を、2023年10月に完了したと公式ブログで発表しました。スマホで見せていない内容は、検索でも無いものとして扱われやすいということです。スマホで情報を減らしたいときも、削るのではなく、タップで開く折りたたみに収めるよう案内されています。

PCで作ったサイトがスマホで崩れやすい場所

PCを基準に作ったサイトをスマホで開くと、だいたい同じところでつまずきます。

なかでも見落とされやすいのが、画像に入れた文字です。チラシのデータをそのまま画像で貼ると、PCでは読めてもスマホでは米粒のような大きさになります。検索にも文字として読まれません。

料金表が横にはみ出して、指で横にずらさないと読めない。これ、本当によく見るんですよ。

片手の親指で届く作りにする

スマホを片手で持ったとき、親指が楽に届くのは画面の下半分です。左上の隅は、持ち替えないと届きません。メニューのボタンを左上に置くのは、PCの習慣をそのまま持ち込んだ形です。

押してほしいボタンほど、親指の届く場所に置きます。地域のお店や医院なら、「電話する」「予約する」「LINEで相談」のどれか1〜2つを、画面の下に固定で出しておく方法があります。どこまで読み進めても、押したくなった瞬間に指の先にあるからです。

ボタンやリンクの大きさにも目安があります。Googleのページ診断ツール（Lighthouse）の説明では、押せる場所は48×48ピクセル以上、隣との間は8ピクセルほどから始めるよう案内されています（2026年10月時点）。文字のリンクが2つ3つ続けて並んでいる場所は、指で押し分けにくいので、ボタンにするか行を分けます。

メニューは、三本線のボタンに全部しまい込むと、何があるサイトなのかが見えなくなります。いちばんよく使われる2〜3項目だけは、しまわずに画面に出しておくと迷われません。

画面の下に「電話する」が付いてるだけで、片手で全部済むんです。これは効きますよ。

文字は読める大きさに、画像は軽く

文字は、拡大しなくても読める大きさにします。1段落も短めに区切ります。PCでは5行の段落が、スマホでは十数行の塊になり、読む前に疲れさせます。

画像は、見た目だけでなく重さも見ます。一眼レフで撮った写真を縮めずに何枚も載せると、外の通信では表示に時間がかかります。開くのを待たされた人は、内容を見る前に戻ります。

表示の速さについては、Googleが「Core Web Vitals」という目安を出しています。いちばん大きな画像や文字が表示されるまで2.5秒以内、押してから画面が反応するまで200ミリ秒以下、読み込み中に画面がずれる量（CLS）は0.1以下が「良好」とされています（2026年10月時点）。数字を追うより、「押そうとしたボタンが、あとから出た画像でずれる」といった場面を一つずつ直すほうが早く進みます。

公開前と公開後の確かめ方

スマホで見やすいかどうかは、PCのブラウザで画面を細くして眺めるだけでは分かりません。指で押す感覚と、外での通信の速さが抜け落ちるからです。

1. 01実機で開くiPhoneとAndroidの両方で、社内の人の手持ちの機種で開く
2. 02外の通信で開く社内のWi-Fiを切り、駅や移動中に開いて表示の速さを見る
3. 03片手で操作する電話・予約・地図のボタンを、片手の親指だけで押してみる
4. 04文字を大きくして見るスマホの文字サイズの設定を大きくしても、文字が重なったり切れたりしないか確かめる
5. 05数字で見るアクセス解析で、スマホから来た人の割合と、スマホとPCで問い合わせの割合に差がないかを見る

最後の数字は、スマホとPCの差を見るのがポイントです。PCからの問い合わせの割合に比べてスマホが極端に低ければ、スマホのどこかで止まっていると考えられます。アクセス解析のどこを見ればいいかは、こちらにまとめています。

社内の速いWi-Fiじゃなくて、帰りの電車でゆるっと開いてみてください。サイトの本当の姿が見えますよ。

問い合わせの直前で止まっている場合は、フォームの作りも一緒に見直します。

スマホ前提のサイトづくりでお手伝いできること

• 今のサイトをスマホの実機で一緒に開き、つまずく場所を洗い出すところから
• コーポレートサイトの制作（目安は2〜3か月）、LPの制作（目安は6週間）。どちらも修正2回込み
• SNSや動画から来た人が、スマホのまま問い合わせや予約まで進めるつながりの設計と、計測の準備
• サイトに人を連れてくる縦型動画・SNS運用・広告まで、同じチームで

このサイト（heart-creation.com）も、人の手で設計・制作しています。初回のご相談は無料で、オンライン60分でもお受けしています。サービスの一覧もあわせてご覧ください。

スマホで開いて「あれ？」と思った画面、そのまま見せてください。そこから一緒に直していきましょう。