スマホで見やすいホームページとは?播磨地域の中小企業が確認したいレスポンシブ対応のポイント

ホームページお役立ち情報

姫路市のホームページ制作会社、エスティー・クリエイティブです。

「パソコンで見ると綺麗なのに、スマートフォンで開くと文字が小さくて読みにくい」「ボタンが小さくてタップしづらい」——播磨地域の中小企業さまのホームページを拝見していると、こうした状態のまま何年も運用されているケースを少なくありません。制作した当時はパソコンでの閲覧が主流だったものの、今ではスマートフォンからのアクセスが半数以上を占めるという企業サイトも珍しくないためです。

スマートフォンでの見やすさは、単なるデザインの好みの問題ではなく、問い合わせ数やGoogle検索での評価にも直結します。今回は、スマホ対応(レスポンシブデザイン)がなぜ重要なのか、よくある問題点と、播磨地域の中小企業さまが自社サイトを確認する際のチェックポイントを整理して解説します。

Contents

  • なぜスマホ対応が重要なのか
  • スマホで見づらいホームページによくある問題
  • 今すぐ確認したいチェックポイント
  • レスポンシブデザインとスマホ専用サイトの違い
  • 改善するときの進め方
  • まとめ

なぜスマホ対応が重要なのか

スマホ対応が重要視される理由は、大きく分けて2つあります。

01. アクセスの多くがスマートフォン経由になっている

業種によって差はあるものの、企業サイトへのアクセスのうち、スマートフォンからの閲覧が半数を超えることは珍しくありません。検索結果から店舗や会社を調べる、SNSの投稿から公式サイトに移動する、広告をクリックする——こうした行動の多くはスマートフォン上で完結します。パソコン表示だけを想定した作りのままでは、訪問者の半分以上に対して見づらい状態でホームページを見せていることになります。

02. 検索結果の評価にも影響する

Googleは、パソコン向けの表示ではなく、スマートフォン向けの表示を基準にホームページの内容を評価しています。スマートフォンで文字が読みにくい、ボタンが押しにくいといった状態は、訪問者の使い勝手を損なうだけでなく、検索結果での表示順位にも影響しうる要素です。SEO対策に取り組む際は、まずスマホでの表示が整っているかどうかが土台になります。

スマホで見づらいホームページによくある問題

実際にご相談をいただく中で、よく見られる問題を挙げます。

01. 文字が小さく、拡大しないと読めない

パソコン向けのレイアウトをそのまま縮小表示しているだけのサイトに多い症状です。訪問者は指で画面を広げながら読むことになり、途中で読むのをやめてしまう原因になります。

02. ボタンやリンクが小さくて押しにくい

電話番号やお問い合わせボタンが小さい、リンクとリンクの間隔が狭くて隣のリンクを誤ってタップしてしまう、といった状態です。特に電話をかけてほしい業種(工事・修理・士業など)では、電話番号をタップしてそのまま発信できるかどうかが問い合わせ数に直結します。

03. 横スクロールが発生する

画面の横幅からはみ出した表や画像があると、スマートフォンで見たときに横スクロールが必要になります。表示が崩れているという印象を与えやすく、離脱の原因になります。

04. メニューが開きにくい、目的のページに辿り着けない

パソコン版のメニューをそのまま小さくしただけで、指で操作しづらい場合があります。訪問者が知りたい情報(料金、施工事例、会社概要など)に辿り着くまでの手順が多いと、途中で離脱してしまいます。

05. 表示に時間がかかる

スマートフォンは移動中やちょっとした空き時間に見られることが多く、パソコンに比べて表示を待ってもらいにくい傾向があります。画像の容量が大きいままになっている、不要なプラグインが読み込まれている、といった理由で表示が遅いと、内容が良くても最後まで見てもらえません。

06. フォームの入力欄が使いにくい

入力欄が小さい、キーボードの種類が電話番号やメールアドレスに対応していない(数字入力のはずが文字入力のキーボードが出るなど)、といった状態も離脱の原因になります。せっかく問い合わせる気になった訪問者を、フォームの使いにくさで逃してしまうのは非常にもったいないことです。

今すぐ確認したいチェックポイント

難しい専門知識がなくても、自社のホームページを手元のスマートフォンで開くだけで確認できる項目です。まずは実際に自分のスマホで一通り操作してみることをおすすめします。

  1. トップページを開いたとき、文字を拡大しなくても読める大きさになっているか
  2. 電話番号をタップすると、そのまま発信画面が開くか
  3. お問い合わせボタンが指で押しやすい大きさ・間隔で配置されているか
  4. 横スクロールをしなくても、すべての内容が画面幅に収まっているか
  5. メニューをタップしてから、見たいページに2〜3回のタップで辿り着けるか
  6. 画像や写真の読み込みでストレスを感じるほど待たされないか
  7. 問い合わせフォームの入力欄が押しやすく、必要な情報だけを聞いているか

一つでも当てはまらない項目があれば、改善の余地がある可能性があります。また、Googleが提供している無料の確認ツールを使えば、自社サイトがスマートフォンで見やすい作りになっているかを簡易的にチェックすることもできます。

レスポンシブデザインとスマホ専用サイトの違い

スマホ対応の方法には、大きく分けて2つの考え方があります。

レスポンシブデザイン

1つのホームページのデータを、画面の幅に応じて自動的にレイアウトを変える方法です。現在の主流はこちらで、パソコン・タブレット・スマートフォンのどの画面サイズで見ても、同じURL・同じ内容が適切な形で表示されます。更新作業も1つのページを直すだけで済むため、運用の手間が少ないのも利点です。

スマホ専用サイト

パソコン用とは別に、スマートフォン専用のページを用意する方法です。かつては主流でしたが、パソコン版とスマホ版で内容にずれが生じやすい、更新のたびに両方を直す手間がかかる、といった理由から、現在新たに採用されるケースは少なくなっています。

これから新規制作やリニューアルを検討される場合は、レスポンシブデザインを基本にお考えいただくことをおすすめします。すでにスマホ専用サイトを運用されている場合でも、更新の負担や表示内容のずれが気になり始めたタイミングが、レスポンシブデザインへの切り替えを検討する目安になります。

改善するときの進め方

「作り直すしかないのか」と身構える必要はなく、状況に応じていくつかの選択肢があります。

  1. 軽微な調整で済む場合 文字サイズやボタンの大きさ、ボタンの間隔といった部分的な調整であれば、既存のホームページに手を加えるだけで改善できることがあります。
  2. ページ単位で見直す場合 特定のページ(トップページや問い合わせページなど)だけ表示が崩れている場合は、該当ページのレイアウトを部分的に組み直すことで対応できます。
  3. サイト全体のリニューアルが必要な場合 制作から年数が経ち、そもそもレスポンシブデザインに対応していない作りの場合は、サイト全体の作り直しが必要になります。あわせてページ構成や導線を見直す良い機会にもなります。

まずは自社サイトがどの状態に近いかを確認し、部分的な調整で対応できるのか、リニューアルを検討すべき段階なのかを見極めることが、無駄のない進め方につながります。

まとめ

スマートフォンからのアクセスが主流になった今、パソコンでの見た目だけを基準にホームページを作り込んでいると、訪問者の多くに対して読みにくい・使いにくい状態を見せ続けていることになります。文字の大きさ、ボタンの押しやすさ、横スクロールの有無、メニューの分かりやすさ、表示速度、フォームの使いやすさ——これらは専門知識がなくても、自社のスマートフォンで実際に操作することである程度確認できます。

その上で、部分的な調整で済むのか、サイト全体のリニューアルを検討すべき段階なのかを見極め、優先順位をつけて手を入れていくことが現実的な進め方です。

エスティー・クリエイティブでは、姫路市を中心とした播磨地域の中小企業さまに向けて、レスポンシブデザインでのホームページ制作・リニューアルを承っております。「今のホームページがスマホでどう見えているか不安」「どこから手をつければよいか分からない」という段階でも構いません。現状のサイトを拝見したうえで、優先度の高い改善点をご提案いたしますので、お気軽にご相談ください。

STC編集部

STC編集部

兵庫県姫路市でホームページ制作15年を超え、WEBデザイナー養成スクール「デジタルハリウッドスタジオ姫路」の運営をしているエスティー・クリエイティブで、ホームページの制作・運用・保守・教育にあたっている経験豊富なスタッフのノウハウを公開します!

TOP