スマホで見やすいホームページの作り方
お店のサイトで気をつけたい6つのこと

スマホで見やすいホームページにするために大切なのは、「最初の画面で何のお店か伝える」「文字を小さくしない」「電話・地図・予約を押しやすくする」「メニューを画像にしない」「表示を軽くする」「自分のスマホで確かめる」の6つです。お店のホームページは、スマホから見る人も多くいます。まずは今のホームページを自分のスマホで開き、次の表で確かめてみてください。

まず、自分のスマホで確かめる

お店のホームページを、自分のスマホで開いてみましょう。次のようなサインがあれば、見にくくなっています。

最初の画面で「何のお店か」が分かるようにする

スマホの小さな画面では、最初に見えるのはほんの一部です。開いてすぐに、店名・何のお店か・どのあたりにあるかが分かると、続きを読んでもらいやすくなります。写真だけで終わらせず、「〇〇駅から徒歩3分のパン屋」のような短い言葉を添えます。

文字の大きさはどのくらい？

本文は、スマホで16px前後がひとつの目安です。小さな文字は、外の明るい場所や、年配のお客様には特に読みにくくなります。

• 行の間をゆったり取る（詰まっていると、どこを読んでいるか分からなくなる）
• 背景と文字の色の差をはっきりさせる（薄い灰色の文字は読みにくい）
• 1つの段落を短くする（スマホでは数行でも長く見える）

電話・地図・予約は、押しやすい場所に

スマホなら、電話番号を押すとそのまま電話をかけられ、住所や地図は地図アプリで開けます。お客様がホームページで探しているのは、たいていこの3つです。

• ボタンは指で押しやすい大きさにする（縦横44〜48pxほどがひとつの目安）
• ボタンどうしを近づけすぎない（となりを押してしまう）
• ページのいちばん下まで読まなくても、見つかる場所に置く

メニューや料金を画像にしないほうがいい理由

チラシの画像をそのまま載せると、スマホでは拡大しないと読めません。ほかにも、次のような困りごとがあります。

• 文字が画像の中にあるので、検索に引っかかりにくい
• 値段やメニューが変わるたびに、画像を作り直す必要がある
• 画像のファイルが大きいと、表示が遅くなる

メニューや料金は、文字で載せるのがおすすめです。

表示を軽くする

大きな写真をそのまま載せると、開くまでに時間がかかります。写真は見た目を保ったまま、ファイルを軽くしておきます。今のホームページの速さは、Google の無料の道具「PageSpeed Insights」にアドレスを入れると測れます。

スマホで見にくいまま放っておくと

• 読みにくいと、続きを見ずにすぐ閉じられてしまう
• 電話や地図にたどり着けず、近くのほかのお店へ行かれる
• Google はスマホで見たときのページをもとに評価しているので、検索でも不利になりやすい

パソコンで見て問題がなくても、スマホで見ているお客様には見にくいことがあります。パソコンとスマホの両方で確かめておきましょう。

直すか、作り直すか

見にくいところが1つ2つなら、直せることもあります。画面の幅に合わない、文字が画像ばかり、という場合は、作り直したほうが早いことが多いです。

ミセノカオは、余計な仕組みを使わずに作るので、スマホでもすぐに表示されます。今お使いのドメイン（アドレス）も、そのまま使えます。

作例を、自分のスマホで開いてみる

ミセノカオの作例は、実際に動くホームページです。パン屋・喫茶店・美容室・花屋・旅館など、業種ごとに見られます。ぜひ自分のスマホで開いて、文字の読みやすさ、電話や予約の押しやすさ、表示の速さを確かめてみてください。

作例を見る→

よくある質問

「スマホ対応」とは何ですか？

スマホの画面の幅に合わせて、文字や写真の並びが自動で組み変わることです。パソコン用の画面を縮めて表示するのとは違います。

パソコン用とスマホ用で、別々にホームページが必要ですか？

今は1つのホームページで、画面の幅に合わせて見た目を変える作り方が一般的です。

今のホームページを、スマホで見やすく作り直せますか？

できます。ミセノカオでは、今あるホームページの作り直しも、新しく作るのと同じプランの料金でお受けしています。今の文章や写真をもとに作り直すことも、今お使いのドメインをそのまま使うこともできます。