スマホで見やすいホームページかどうかは、表示、文字、タップ操作、表示速度、フォームの5分野を、スマホの画面幅で順に確認すれば判断できます。この記事では、制作会社が公開前に使っているチェック項目を、確認のやり方と直し方つきで一覧にしました。パソコンでは問題なく見えていても、スマホでは横にはみ出す、文字が小さい、ボタンが押しにくいといった問題が起こりがちです。自社サイトの点検にも、制作会社へ依頼するときの確認にも使えます。

スマホで見やすいホームページとは｜確認するのは5分野です

スマホで見やすいサイトとは、画面を拡大したり横にスクロールしたりせず、親指だけで読み進めて目的の操作まで届くサイトです。確認は、表示、文字、タップ操作、表示速度、フォームの5分野に分けると抜けがありません。

スマホ表示はパソコン表示の縮小版ではありません

パソコンの画面を単純に縮めると、文字が小さくなり、ボタンも押しにくくなります。スマホでは、1列に並べ直す、文字を相対的に大きくする、ボタンを押しやすい大きさにする、といった作り直しが必要です。見る人の多くが片手の親指で操作する点も、パソコンと違います。

確認前に、幅と環境を決めておきます

確認する画面幅は、360px、390px、430px前後の3つを基準にすると、多くのスマホの画面幅をカバーできます。ブラウザは、iPhoneならSafari、AndroidならChromeの両方を可能な範囲で見ます。パソコンのブラウザの開発者ツール（デバイスモード）でも確認できますが、最終確認は実機で行います。

表示の基本チェック｜はみ出し・折り返し・画像

最初に確認するのは、画面に収まっているかどうかです。横スクロールが出ていたり、画像が枠からはみ出していたりすると、それだけで使いにくいサイトになります。

viewportの設定が入っているか

HTMLに画面幅を指定する設定（viewportのメタタグ）が入っていないと、スマホでもパソコンの画面を縮めた状態で表示されます。ほとんどのテーマやテンプレートには最初から入っていますが、自作のページや古いサイトでは抜けていることがあります。

横にスクロールできないか

縦にスクロールしているとき、画面全体が左右にぐらつく場合は、画面幅を超えている要素があります。原因は、固定幅の画像、幅指定の大きい表、長いURLの文字列などです。どこから出ているかは、開発者ツールで要素を選んで探せます。

画像と表が枠に収まっているか

画像は、親の幅を超えないように最大幅を設定します。表は、列数が多いと画面に収まらないため、縦に並び替えるか、横にスクロールできる枠に入れます。どちらも、読み手が拡大して操作する必要がない状態にします。

文字と読みやすさのチェック

スマホで読みやすい文字は、本文が16px前後、行間が文字サイズの1.6〜1.8倍、背景との差がはっきりしているものです。小さな文字は、拡大しないと読めず、離脱の原因になります。

本文は16px前後にします

スマホで本文が14px以下だと、読むのに目が疲れます。本文は16px前後を基本に、注意書きでも12px未満にならないようにします。年齢層が高いサイトでは、さらに大きくします。

行間と1行の長さを確認する

行間が狭いと、行が詰まって読みにくくなります。本文の行間は、文字サイズの1.6〜1.8倍を目安にします。段落が長すぎる場合は、3〜4行ごとに区切ります。余白については、同じ見方で別の記事（ホームページの余白とレイアウトの整え方）でも扱います。

背景との明るさの差を見る

薄いグレーの文字を白い背景に置くと、屋外の明るい画面では読めなくなります。実機で、画面の明るさを下げた状態でも読めるかを確認します。写真の上に文字を載せている場合は、文字が埋もれていないかも見ます。

タップ操作のチェック｜指で押しやすいか

スマホでは、マウスの代わりに指で操作します。ボタンは44〜48px四方以上を目安にし、隣のリンクとの間隔を空けます。押し間違いが多いサイトは、問い合わせや購入の手前で離脱されます。

ボタンとリンクは44〜48px以上にします

指でタップする領域は、44〜48px四方が目安として広く使われています。文字だけのリンクは、見た目が小さくても、上下に余白を持たせて、押せる範囲を広げます。

隣り合うボタンの間を空ける

ボタンやリンクが近すぎると、意図しないほうを押してしまいます。縦に並べる場合は、8px以上の間隔を空けます。フッターのリンクが詰まっていることが多いので、特に確認します。

電話番号とメールをタップで開けるか

電話番号は、タップするとそのまま発信できるように、リンク（tel:）に設定します。画像の電話番号は押せないので、テキストにします。メールアドレスも同様に、メール作成を開くリンクにします。

メニューの開閉が分かりやすいか

ハンバーガーメニュー（三本線のボタン）は、押しやすい位置と大きさにします。開いたあとに、閉じる方法が分かることも確認します。ファーストビューにおけるメニューの見せ方は、ファーストビューで選ばれるWebサイトデザインのコツでも扱っています。

表示速度のチェック｜画像と動きを軽くする

スマホは通信環境が一定でなく、表示が遅いと途中で離脱されます。重さの主な原因は、大きすぎる画像と、動画や動きの多い演出です。

画像を表示サイズに合わせて軽くする

スマホで表示される幅は、せいぜい400〜800px程度です。それより大きな画像を読み込んでいると、無駄に重くなります。写真は、必要な大きさに縮小し、圧縮してから使います。

動画や動きは、スマホでの表示を想定して減らす

背景動画やスクロールで動く演出は、スマホでは重くなりがちです。動きがなくても伝わる内容なら、スマホでは静止画に差し替えるのも選択肢です。動きのあるサイトのメリットとデメリットは、動きのあるサイトのメリット・デメリットで解説しています。

フォームのチェック｜入力しやすいか

スマホでの入力は、パソコンより手間がかかります。項目を絞り、入力欄を大きく、入力の種類に合わせたキーボードが出るようにすると、完了率が上がります。

入力欄の文字は16px以上にします

iPhoneのSafariでは、入力欄の文字が16px未満だと、タップした瞬間に画面が自動で拡大されることがあります。拡大されると表示がずれて、入力しにくくなります。入力欄の文字は16px以上にします。

入力の種類に合うキーボードを出す

電話番号の欄では数字キーボード、メールアドレスの欄ではアットマークのあるキーボードが出るように、入力の種類（type）を指定します。これだけで、入力の手間が大きく減ります。

項目数とエラー表示を見直す

項目が多いほど、途中で離脱されます。必須でない項目は削るか、任意と明示します。エラーが出たときは、どの欄が間違っているかが、画面上で分かるようにします。

チェックの進め方｜やり方と優先順位

確認は、開発者ツールで全体を見てから、実機で仕上げの確認をする順番で進めます。見つかった問題は、「使えなくなるもの」から先に直します。

この表をそのままチェックリストとして使えます。1ページずつではなく、トップ、サービス紹介、問い合わせの3種類のページで確認すれば、サイト全体の傾向がつかめます。

開発者ツールのデバイスモードで見る

1. Chromeで確認したいページを開く
2. キーボードのF12キーで開発者ツールを開く
3. 端末アイコン（デバイスツールバー）をクリックする
4. 幅を360px、390px、430pxに切り替えて、ページ全体をスクロールして確認する

実機で、親指で操作して確かめる

開発者ツールでは分からない、指の押しやすさ、実際の表示速度、文字の見やすさは、実機で確かめます。社内の複数人のスマホで見ると、機種ごとの差に気づけます。見るときは、片手で持ち、親指だけで操作して、問い合わせの完了まで進んでみてください。途中で指が届かない、拡大が必要になる、という場面がそのまま改善点です。

直す順番は「操作できない」から

優先度は、操作できないもの（押せないボタン、フォームが送れない）、読めないもの（文字が小さい、はみ出す）、見た目の乱れ、の順です。見た目の整い方は後回しにして構いません。

デザインの腕試しに「Webサイトデザインバトル」

スマホでの見やすさは、他のサイトと見比べると基準がつかめます。当社の「Webサイトデザインバトル」は、サイトのトップ画面を2つ並べて、好きなほうを選ぶ遊びです。

Webサイトデザインバトルとは

サイトのトップ画面（ファーストビュー）2つを比べて、良いと思うほうを選びます。投票の前に、業種、目的、想定する人、観点、説明（制作のねらい）が各カードの下に表示されます。無料で、会員登録なしで遊べます。

気になったサイトは、自分のスマホで開いて確かめる

各サイトは、実際のサイトを開いて全体を見ることもできます。気になったサイトを自分のスマホでも開き、この記事のチェック項目を当てはめてみてください。

エントリーの流れ

自分が制作したサイトを出す場合は、URLを入れるとページの画像が取得されます。エントリーは審査制で、公開前に当社で確認します。取り下げは、本人がいつでもできます。Webサイトデザインバトルにエントリーするから、まずは見るだけでも構いません。

よくある質問

Q. スマホ対応は必須ですか？

必須と考えてよいでしょう。業種や対象によって割合は異なりますが、スマホで見る人は多く、Googleもスマホ表示を前提にサイトを評価する方針をとっています。

Q. 自分で確認できる簡単な方法はありますか？

自分のスマホでサイトを開き、横スクロールが出ないか、文字を拡大せずに読めるか、ボタンを片手で押せるか、の3点を見てください。5分で大きな問題は見つかります。

Q. パソコンと別のデザインにする必要はありますか？

見た目を完全に分ける必要はありません。同じ内容を、画面幅に合わせて並べ替えるのが一般的です。ただし、スマホでは1列にする、メニューを開閉式にするなど、構造は変えます。

Q. 古いサイトがスマホ対応していません。作り直しが必要ですか？

テーマの変更や部分的な修正で対応できる場合もあります。構造が古い場合は、作り直しのほうが結果的に安くなることもあります。状態を見て判断するため、制作会社へ相談してください。

Q. iPhoneとAndroidで見え方は違いますか？

ブラウザの描画や、フォームの挙動に違いが出ることがあります。両方で確認できるのが理想ですが、難しい場合は、iPhoneのSafariとAndroidのChromeの、いずれか1台ずつで確認してください。

まとめ｜スマホで見やすいかは、5分野を順に確認すれば分かります

スマホで見やすいホームページにするには、表示、文字、タップ操作、表示速度、フォームの5分野を、360〜430px前後の画面幅で確認します。まず自分のスマホで、横スクロール、文字の大きさ、ボタンの押しやすさを見るだけでも、大きな問題は見つかります。サイトの点検や改善でお困りの方は、お問い合わせからご相談ください。