スマホで見やすいホームページの条件7つ

お店のホームページを、お客さまはどこで見ているでしょうか。通勤中の電車、お店に向かう途中の道、家でくつろいでいるときなど、スマホで見る場面はたくさんあります。スマホで読みにくいと、内容が良くても伝わりません。

この記事では、スマホで見やすいホームページの条件を7つ紹介します。それぞれ、自分のスマホでかんたんに確かめられる方法も添えているので、今のホームページの見直しにも使ってください。

読みやすさの条件

まずは、文章そのものが読みやすいかどうかです。

1. 文字の大きさと読みやすさ

スマホの画面は小さいので、文字が小さいと拡大しないと読めません。本文の文字は、拡大せずにそのまま読める大きさにしましょう。

• 本文の文字が、拡大しなくても無理なく読める
• 文字と背景の色の差がはっきりしている（薄いグレーの文字や、写真の上の文字は読みにくくなりがち）
• 行と行の間に、少しゆとりがある

確かめるときは、明るい屋外でも見てみるのがおすすめです。室内では読めても、日差しの下では薄い色の文字が見えにくくなることがあります。

2. 1行の長さと、文章のまとまり

スマホでは1行に入る文字数が少ないため、長い段落は縦にずっと続く文字のかたまりになってしまいます。読む人が疲れないよう、文章の区切り方を工夫しましょう。

• 1つの段落は短めにして、話題が変わったら段落を分ける
• 見出しを入れて、どこに何が書いてあるか分かるようにする
• 3つ以上の項目を並べるときは、箇条書きにする

反対に、パソコンの大きな画面では、1行が横に長くなりすぎると目で追うのが大変になります。画面の幅に合わせて、ちょうどよい長さに収まるように作られているかもポイントです。

操作しやすさの条件

次は、指で押す・電話をかけるといった操作のしやすさです。

3. ボタンやリンクの押しやすさ

スマホでは、指でタップして操作します。ボタンやリンクが小さかったり、すき間なく並んでいたりすると、押し間違えが起こります。

文章の中のリンクも、どこが押せるのか分かるように、色や下線で区別しておきます。「こちら」だけのリンクより、「メニューと料金を見る」のように行き先が分かる言葉のほうが、安心して押してもらえます。

4. 電話番号はタップでかけられるように

スマホで見ている人にとって、電話番号を押してそのまま電話をかけられるのは、とても便利です。逆に、電話番号が画像になっていたり、タップしても反応しなかったりすると、番号を覚えて打ち直す手間がかかります。

• 電話番号をタップすると電話アプリが開くようになっている
• 営業時間（電話を受けられる時間）が、電話番号の近くに書いてある
• 住所の近くに、地図アプリで開けるリンクがある

電話番号や住所は、ページのいちばん下（フッター）にも置いておくと、どのページからでも連絡しやすくなります。何を載せればよいかは小さなお店のホームページに載せるべき10項目も参考にしてください。

表示の速さと、崩れない作り

最後は、ページがすばやく、崩れずに表示されるかどうかです。

5. 表示の速さ

スマホは、外出先など通信が安定しない場所で使われることもあります。ページを開いてもなかなか表示されないと、待たずに閉じてしまう人もいるでしょう。

表示が遅くなりやすい原因には、次のようなものがあります。

• 写真のデータが大きすぎる（スマホやカメラで撮ったままの写真など）
• ページの最初に、大きな動画やたくさんの写真を並べている
• 使っていない飾りや仕掛けが、たくさん読み込まれている

写真は、表示する大きさに合わせて小さくしてから載せるだけでも、表示がかなり軽くなります。Googleが無料で公開している「PageSpeed Insights」のようなツールを使うと、ページの表示速度と改善のヒントを確かめられます。

6. 見出しや大事な文の改行位置

スマホの小さな画面では、見出しやキャッチコピーが思わぬところで折り返されることがあります。たとえば「ホームページ制作」が「ホームページ制」と「作」に分かれてしまうと、読みにくく、見た目も落ち着きません。

見出しは、言葉のまとまりで改行されるように整えておくと、ぐっと読みやすくなります。いろいろな画面の幅で確かめることが大切です。スマホの機種によって画面の幅は違うので、手元のスマホだけでなく、縦向き・横向きや、タブレットでも見てみましょう。

7. 横にはみ出さない・ずれない

スマホでページを見ていて、画面が左右にぐらぐら動いたり、表や画像が画面の外にはみ出していたりすることはありませんか。これは、パソコン向けの幅のまま作られた部分があるときに起こります。

• ページ全体が、横にスクロールせずに見られる
• 写真や地図が、画面の幅に収まっている
• 表は、横に長い場合でも、その表だけを横にずらして見られる
• フォームの入力欄が、画面からはみ出していない

あわせて確かめたい、フォームの入力しやすさ

問い合わせや予約のフォームは、スマホで入力するとパソコンより手間がかかります。入力してもらう項目は必要なものだけにしぼり、電話番号の欄では数字のキーボードが出る、メールアドレスの欄では英字のキーボードが出る、といった工夫があると入力がぐっと楽になります。送信ボタンを押したあと、「送信できました」と分かる表示があることも大切です。

自分のスマホで確かめるチェックリスト

• 本文を拡大せずに読める
• 段落が短く、見出しで区切られている
• 大事なボタンを、親指で押し間違えずに押せる
• 電話番号をタップすると電話がかけられる
• 通信がゆっくりな場所でも、待たされずに表示される
• 見出しが、言葉の途中で変に改行されていない
• ページが横にはみ出したり、ぐらついたりしない
• 問い合わせフォームが、スマホで入力しやすい

確かめるときは、自分だけでなく、家族や知人にも見てもらうのがおすすめです。作った本人は内容を知っているので、迷うところに気づきにくいものです。「電話番号はどこ？」「予約はどうするの？」と、初めての人のつもりで探してもらうと、直したいところが見つかります。

まとめ

スマホで見やすいホームページの条件は、文字の大きさ、1行の長さ、ボタンの押しやすさ、電話のタップ、表示の速さ、改行の位置、はみ出さない作りの7つです。どれも、自分のスマホで見てみるだけで、かなりの部分を確かめられます。

Avrencalでは、いくつもの画面の幅で表示を確かめながら制作しています。今のホームページをスマホ向けに作り直したい場合もご相談ください。見え方の例は制作サンプルで、ご相談は無料のお見積もりから受け付けています。