ホームページのスマホ対応は自分でできる？見にくい原因と直し方の手順

ホームページのスマホ対応とは、どんな状態のことか

スマホ対応という言葉は広く使われていますが、見る人の側から言いかえると、次の4つがそろっている状態です。どれか1つでも欠けると、見た人は「見にくい」と感じます。

• 文字を拡大しなくても、そのまま読める大きさで表示される
• 画面を横にずらさなくても、ページの内容が画面の幅に収まる
• ボタンやリンク、電話番号を指で押し間違えにくい
• パソコンで見たときと同じ情報が、スマホでも見られる

4つ目は見落とされがちです。スマホでは画面が狭いからと、料金表や地図、アクセスの説明をスマホの表示だけ省いているホームページがあります。見た目は整っていても、スマホで探している情報が見つからなければ、見た人はほかのお店のページへ移ってしまいます。

Google はスマホで見た版のページを使って評価する

検索の面でも、スマホでの表示は避けて通れません。Google は、インデックスへの登録と順位付けに、スマートフォン用のクローラーで読み取ったモバイル版のページの内容を使うと説明しています。そのうえで、モバイル版にもパソコン版と同じ内容を載せること、画像は小さすぎたり解像度が低すぎたりしないものを使うこと、画像の代替テキスト(alt)もパソコン版と同じにすることを求めています(出典: Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」)。

ホームページがスマホで見にくい原因を見分ける

スマホで見にくいと感じたら、まず原因がどれに当たるかを見分けます。原因によって、設定を1行足せば済むのか、作り方そのものを変える必要があるのかが分かれるからです。

パソコンの画面が縮んで見えるなら、スマホ用の設定がない

スマホで開いたとき、パソコンで見るのと同じ並びのまま全体が小さく表示されるなら、スマホ用の表示の設定がない可能性が高いです。MDN の解説では、ページにビューポート(表示する幅)の設定がないと、スマホのブラウザは実際の画面より広い仮の幅でページを組み立て、それを画面に合わせて縮めて表示するとされています。そのため、拡大や横へのスクロールをしないと細かい部分が読めません(出典: MDN「meta name=viewport」)。

一部だけはみ出すなら、部品ごとの問題

ページの大半はスマホの幅に合っているのに、特定の表や画像のところだけ画面が横に動くなら、その部品が幅に合わせて縮まない作りになっています。古い記事や、あとから貼り付けた料金表、外部の予約ボタンや地図の埋め込みで起こりやすい症状です。直す範囲は部品ごとで済むことがほとんどです。

幅は合っているのに読みにくいなら、中身の問題

画面の幅には収まっているのに読みにくい場合は、作りではなく中身の並びや量の問題です。スマホではパソコンの何倍も縦に長くなるので、知りたい情報にたどり着くまでのスクロールが長くなります。電話番号や予約ボタンがページの一番下にしかない、長い挨拶文が先頭にある、といった並びは、スマホで特に読みにくく感じられます。

自分のホームページのスマホ対応を確かめる手順

スマホ対応の確かめ方は、専門の知識がなくてもできます。実機で見る、パソコンのブラウザでスマホの幅を試す、診断ツールにかける、の3つを順に行います。

1. 自分のスマホでトップページ、料金、アクセス、問い合わせの各ページを開き、拡大せずに読めるか、横に動かないかを見る
2. 電話番号、予約ボタン、メニューを実際に指で押して、押し間違えないか、押した後に正しく動くかを試す
3. 画面を横向きにしても崩れないかを見る
4. 家族や知人に頼み、機種の違うスマホでも同じように見えるかを確かめる
5. パソコンの Chrome でページを開き、右クリックの「検証」から開発者ツールを出し、デバイスツールバーを切り替えて、スマホの幅で表示する
6. 幅をいくつか変えながら、どの幅で、どの部品が崩れるかを見る
7. PageSpeed Insights にアドレスを入れ、モバイルの結果に出る指摘を読む

Chrome のデバイスモードでは、画面の幅や機種、縦横の向きを切り替えて表示を試せます。ただし公式の説明にあるとおり、これはパソコンの上でスマホを再現しているだけで、実際のスマホでページを動かしているわけではありません。最後は実機で確かめてください(出典: Chrome for Developers「Device Mode でモバイル デバイスをシミュレートする」)。

PageSpeed Insights は、ページをモバイルとパソコンのそれぞれで調べ、改善の提案を出す Google の無料のツールです(PageSpeed Insights)。中で使われている Lighthouse は、Chrome の開発者ツールからも実行でき、速さ、使いやすさ(アクセシビリティ)、SEO などをまとめて点検します(出典: Chrome for Developers「Lighthouse の概要」)。点数の高さを追うより、指摘の中から「文字」「タップ」「画像」に関わるものを拾うと、直す場所が見えてきます。

ホームページのスマホ対応はレスポンシブが基本

スマホ対応の作り方は大きく3つあります。Google は、その中でレスポンシブ ウェブ デザインを、実装と維持がいちばん簡単な方法として勧めています(出典: Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」)。

レスポンシブの仕組みは、表示する幅の設定と並べ替えのルール

レスポンシブのページは、2つの仕組みでできています。1つは、ページの頭の部分に置くビューポートの設定です。MDN では、viewport の meta タグに「width=device-width, initial-scale=1」と書く形が一般的な設定として紹介されています。これで、ページの表示幅が端末の画面の幅にそろい、最初の拡大率も等倍になります。

もう1つは、画面の幅に応じて並び方を変えるルールです。パソコンでは横に3つ並ぶ写真を、スマホでは縦に1つずつ並べる、といった切り替えを、CSS(見た目を決める指示書)のメディアクエリという書き方で指定します。どの幅で切り替えるかの境目をブレイクポイントと呼びます。

スマホ用の別サイトがあるなら、中身のずれに注意

以前に、パソコン用とは別にスマホ用のサイトを作っている場合は、まず両方の中身が同じかを見比べてください。営業時間や料金をパソコン用だけ直して、スマホ用は古いまま、ということがよくあります。どちらか一方を直すたびにもう一方も直す手間がかかるので、次に手を入れるときにレスポンシブへまとめることも考えてください。

ホームページのスマホ対応を自分でする方法

自分でできる範囲は、ホームページをどう作っているかで決まります。作り方が分からない場合は、管理画面のログインの画面や、制作したときの書類を見ると手がかりになります。作り方ごとの全体像はホームページの作り方でも説明しています。

作成サービスで作っている場合

Wix、Jimdo、STUDIO、ペライチのような作成サービスでは、スマホでの表示は基本的にサービスの側で用意されています。見にくいときは、サービスのヘルプで「モバイル」「スマホ表示」の項目を探し、スマホでの見え方を確かめる切り替えや、スマホだけの表示の調整ができるかを確かめてください。サービスごとの使い方はWixのホームページの作り方、STUDIOとJimdoのホームページ作成、ペライチとは何かにまとめています。

• スマホの表示で、文字の大きさや行間を調整できる場所がないか
• パソコンの表示で横に並べた部品が、スマホでどう並ぶか
• スマホの表示だけ非表示にしている部品がないか
• 自分で貼った HTML の埋め込みが、スマホの幅で崩れていないか

WordPress で作っている場合

WordPress では、見た目はテーマ(デザインのひな形)が決めています。スマホで崩れるなら、まず使っているテーマがレスポンシブに対応しているかを、テーマの説明ページで確かめます。対応しているテーマなら、崩れているのは記事の中に入れた表や画像、ページビルダーで組んだ部分であることが多く、その部分だけを直します。

テーマそのものが古く、スマホに対応していない場合は、テーマの入れ替えが必要になります。テーマを変えると、メニューやトップページの並び、ウィジェットの配置が変わるので、バックアップを取り、公開中のページとは別の環境で試してから切り替えるのが安全です。テーマ選びや保守の考え方はWordPressでのホームページの作り方で説明しています。

HTML で作られている場合

HTML と CSS のファイルを直接書いて作ったページなら、次の順で手を入れます。ファイルを直接書き換えるので、作業の前に元のファイルを必ず別の場所に残してください。HTML の基本はHTMLでのホームページの作り方にまとめています。

1. すべてのページの head の中に、viewport の meta タグ(width=device-width, initial-scale=1)があるかを確かめ、なければ足す
2. 画像が画面の幅を超えないよう、CSS で画像の最大の幅を親の要素の幅までにする
3. 横に並べている部品を、メディアクエリでスマホの幅では縦に並べる
4. 幅の広い表は、スマホでは表だけ横にスクロールできるようにするか、縦に読める形に組み替える
5. 地図や動画の埋め込みは、幅を固定の数字ではなく画面の幅に合わせる
6. 直したら、実機とデバイスモードの両方で全ページを見直す

自分で直す範囲と、頼んだ方がよい範囲

ここまでの原因と作り方を合わせると、自分で直しやすい場合と、人に頼んだ方が早い場合が見えてきます。どちらがよいかは、直す量と、直したあとに誰が管理するかで決まります。

自分で直すときにつまずきやすいのは、1つのページを直すと別のページが崩れる、パソコンの表示を直したらスマホが崩れた、といった行ったり来たりです。自分で進めるか迷う場合は、ホームページを自分で作るのが難しいと感じる理由と判断基準も参考にしてください。

作りから見直す方が早い場合

スマホ用の設定がなく、ページの数も多い場合、1ページずつ直すより、レスポンシブの形で作り直した方が手間も費用も読みやすくなります。スマホに合っていないホームページは、作られてから長く手が入っていないことが多く、営業時間や料金、写真なども合わせて見直す時期に来ていることがよくあります。古さの見分け方はホームページが古いと感じたときの見直し方に、進め方はホームページのリニューアルの進め方に、費用の考え方はホームページのリニューアル費用にまとめています。

作りから直すことを考えるなら、ホームページのリニューアルの依頼のように、今のサイトの中身を見てから進め方を決めてくれる依頼先を選ぶと、残すページと捨てるページを無理なく分けられます。

スマホで見やすくするために見落としやすい点

幅が合うようになっても、それだけで読みやすくなるとは限りません。スマホで見る人の動きに合わせて、次の点も見直してください。

ボタンと電話番号は、指で押せる大きさと間隔にする

スマホでは、マウスより大まかな指で押します。ウェブの使いやすさの国際的な指針である WCAG 2.2 では、押す対象の大きさを最低でも 24×24 CSS ピクセル以上にすることが、達成基準(レベル AA)の1つとされています。ただし、まわりに十分な間隔がある場合などの例外もあります(出典: W3C「Understanding Success Criterion 2.5.8: Target Size (Minimum)」)。これは最低限の目安なので、電話や予約のボタンは押し間違えないよう、さらに余裕を持たせると安心です。

電話番号は、画像ではなく文字で書き、押すと電話がかけられるリンクにしておきます。画像の電話番号は押してもかけられず、スマホの読み上げ機能でも読まれません。

知りたい情報を上の方に置く

スマホで来た人の多くは、営業時間、場所、料金、予約の方法を探しています。トップページの先頭に大きな写真と挨拶文だけが続くと、知りたいことにたどり着く前に離れてしまいます。ページの構成を考え直すときは、何を上に置くかを先に決めてから、写真や文章を並べてください。

問い合わせフォームの入力しやすさは、問い合わせの数に直結します。入力欄の種類の選び方は問い合わせフォームの作り方で、画像の大きさと重さの考え方はホームページの写真の選び方と撮り方で説明しています。

スマホで見にくいと気づいたら最初にやること

最後に、スマホで見にくいと気づいたときの動き方を短くまとめます。

1. 自分のスマホと別の機種で主なページを開き、見にくい場所を書き出す
2. パソコンの画面が縮んで見えるのか、一部だけ崩れるのか、中身が読みにくいのかを見分ける
3. 作成サービス、WordPress、HTML のどれで作っているか、管理画面に入れるかを確かめる
4. 部品ごとの崩れや中身の並びなら自分で直し、作りそのものの問題なら依頼先に相談する

スマホ対応は、一度直せば終わりではありません。ページを足したり、写真や表を入れ替えたりするたびに、スマホで崩れていないかを見る習慣をつけてください。直したあとに誰がその確認を受け持つのかも、あわせて決めておくと安心です。

uparia では、スマホ対応を含む月額プラン(制作費0円・月額2,980円から・最低契約期間12か月)で作り直しをお受けしています。月額プランは保守込みで、2年続けるとサイトとドメインが自分のものになります。最初から自分のものにしたい場合は、買い切りのスタートプラン(3万円〜)やしっかりプラン(30万円〜)も選べ、公開後の確認や修正は月額保守(月5,000円、最低契約期間なし)でお任せいただけます。今のホームページを見てから進め方を決めたい場合は、ホームページのリニューアルの依頼からご相談ください。