日本人の70％、世代によっては90％近くがスマホユーザーとなった現在、WEBマーケテイングでは「モバイル対応」はもはや必須の存在となっています。スマホ対応・モバイル対応について、あれこれと準備をしたり検討をしている人も多いことでしょう。
しかしスマホサイト／モバイルサイトについては、デザイン面等ばかりが考慮され「表示速度」という問題が軽視されてしまうケースも数多く見られます。WEBマーケティングにおいて、スマホ・モバイルサイトの表示速度はとても重要であり、見逃すことができないポイントなんです。
あなたのホームページ、スマホ・モバイル端末からの表示に何秒かかっていますか？2～3秒しないとすべてが表示されない…これでは多くのチャンスを逃しているかもしれません。ここではスマホ・モバイルの表示速度について、詳しく解説をしていきます。
お好きな見出しからどうぞ
スマホ・モバイルサイトの表示速度が重要な理由は？
WEBサイトの表示速度は、多くのユーザーを掴む上で欠かすことができない要素のひとつです。中でも、スマホ・モバイルサイトの表示速度については重要であると考えられています。これにはどのような理由があるのでしょうか。
低スペックスマホ（格安スマホ）の増加
スマホ初期、Apple社のiPhoneが驚異的なシェア率を誇っていた過去は皆さんご存知のことでしょう。日本では現在でもシェア率40％という高い水準を推移しているので、「スマホ対応」というと現在でもiPhoneを基準に考えてしまう人が多いようです。
iPhoneは端末・OS・ブラウザを同じ会社が制作していることもあり、驚異的なスピード感を誇ります。そのためご自身がiPhoneユーザーだと、モバイルサイトの表示速度に対してストレスを感じた経験が無いという人も珍しくありません。
しかし忘れてはいけないのは、日本でも60％はiPhoneユーザーではない、ということ。さらに2010年以降にはいわゆる「格安スマホ」－－ー廉価版の低スペックスマホが多数登場するようになりました。
特に「費用をかけず、気軽にネットを楽しみたい」というミドル～シニア層や主婦層等では、格安スマホの使用率が上がってきています。そこまで早くは処理ができない低スペックスマホでも快適にサイトを表示させることが重要となってきているのです。
外出先でのスピーディな情報収集
スマホ等のモバイル端末は勤務先や通勤中、またレジャー等、外出先で使うことがメインと考えられます。スマホ使用の用途は様々ですが、例えば次のような用途が多いことはカンタンに想定できるところです。
【外出先でのネット利用の例】
- 出先での地図を検索したい
- 近隣の店舗を探したい
- 気になった店のメニューやレビューを見たい
- 店の商品の適正価格や評価を知りたい 等
これらの用途でネットを使う人達は、「今すぐに」情報を必要としています。のんびりと自宅で趣味のサイトを眺めたり、じっくりと商品を比較している時とは話が違うのです。
モバイルユーザーの「一刻も早く情報が欲しい」というニーズに対応できないサイトは「使えない」と判定されることでしょう。
4G・5G高速通信の通信規制
4G高速通信のみならず、5G高速通信が一般的となる時代がすぐそこにまで迫っています。外出先でも動画等を楽しむ人も増えてくるなど、驚異的な高速データ通信が可能となったわけです。
とは言え、ユーザー達が常に快適な高速通信を使えているとは限りません。プロバイダによる通信規制や、いわゆるギガ不足、格安SIMの利用による規制等等……ネットユーザーが高速の通信を利用できないケースは多々あります。
「高速通信が使えない」そんな時、表示速度が遅いモバイルサイトは「まったく使えないサイト」へと転がり落ちてしまうことでしょう。
「3秒で直帰」のユーザーが70％！
スマホユーザーを対象にした調査では、表示に2秒がかかった時点で直帰をするユーザー率は40％。3秒かかった時点で直帰するユーザーが70％という驚異的な数値を示しました。
従来のPCユーザーの直帰率に比べ、150％近くも高い数値であり、スマホユーザーがいかに「スピーディーな表示」を求めてるかがわかります。
あなたのスマホサイトが表示に3秒かかっていたら、見込み客の7割を失っている可能性があるのです。
スマホサイト・モバイルサイトの速度をチェック!
では、実際にあなたのサイトの表示速度はどの位なのでしょうか？「なんとなく」ではない表示速度をチェックしてみましょう。
自環境でのチェックを過信しない
スマホサイト・モバイルサイトの表示速度のチェックと言うと、「遅くはないと思います」という人がほとんど。ところが実際には、次のような「自分の環境」だけで状況を確認している人が少なくありません。
- 自分のモバイル端末（スマホ）でしか確認していない
- 店内のWi-Fi環境のみでのチェック
- キャリアの4G（5G）通信下でのチェック
上のようなスマホサイトの表示速度確認では、何回やっても「速度を確認した」とは言えません。上でも述べたように、ユーザーは幅広いモバイル端末や通信環境でサイトへとアクセスしてきます。
「どのようなユーザーが来ても早く快適な表示速度を保てる」ということこそが重要なのです。
スマホ表示速度を測定してみよう
モバイルサイトの速度を測定するには、専用ツールを使うのが一番。かつては有料ツールを使うのが一般的でしたが、現在では『Google』が用意したツールでモバイルサイトの速度を測定し、改善のヒントを得ることができます。
【Test My Site】
https://www.thinkwithgoogle.com/
【サイト表示速度測定ツールの使い方】
- 上記URLをクリックして、Test My Site」にアクセス
- 速度チェックをしたいサイトのURLを欄内に入力
- エンターまたは横のマークをクリック／タップで測定開始
【測定結果】
- サイトの読み込み時間を表示
- 特に良好／良好／普通／要改善の4段階で表示
- ページ速度による訪問者離脱率の表示
- 競合他社との比較
上記のツールの便利なポイントは、同じ業種の競合他社と比較した場合、自分のサイトがどの程度の位置にいるかを教えてくれるところです。さらに「無料レポートの取得」をクリックすれば、改善方法の確認をすることもできます。
モバイルサイトの表示速度が重い原因と対策
サイトの表示速度の結果はいかがでしたか？「要改善」の人はもちろん、「普通」程度や競合他社に比べて成績が良くなかった人は、早めに表示速度の改善に取り組みたいところです。モバイルサイト・スマホサイトが重くなる主な原因と対策を見ていきましょう。
1.モバイルフレンドリーではない
モバイルフレンドリーとは、モバイル（スマホ）での閲覧向けにサイト表示を最適化し、ユーザーが快適にブラウジングできるようにしているか？ということ。表示速度が極端に遅いサイトの場合、そもそもモバイルフレンドリー対策をまったく行っていないケースも見受けられます。
- PCサイトのままスマホ表示させている（モバイルサイトが無い）
- 端末によるレスポンシブ対応が無い
- 初期段階に制作したスマホサイトのままで更新されていない 等
スマホ専用サイトまたはレスポンシブデザインを導入
「一切のスマホ対応をしていなかった」という場合、早急なモバイルサイトの構築、またはレスポンシブデザインの導入が求められます。
【レスポンシブWEBデザインとは】
レスポンシブWEBデザインとは、ユーザーの端末（PC／モバイル）に合わせて、それぞれの端末で見やすいように自動的にデザインを対応させる方法のことを言います。
メリット 同じ情報を掲載したページを複数用意しなくてもOK。更新作業や管理をラクに済ませることができる。今後の新しい端末に対しても対処がラクになることが期待できる。
デメリット 既存のPCサイトがレスポンシブに向かない場合、PCサイトそのものから作り直す必要がある。またスマホには見えやすいレスポンシブデザインが、PCでは見にくいといった「帯に短し襷に長し」の中途半端なデザインになる恐れも。
【モバイルサイト／スマホ専用サイトとは】
モバイルサイトとは、モバイル端末（スマホ）で閲覧するユーザー向けの専用サイトのことを言います。スマートフォン端末を判別し、アクセス先を自動で振り分けてスマホ専用サイトへとユーザーを導く方法が一般的です。
メリット スマホに特化させたサイトのため、スマホで見やすく美しいデザインが期待できる。スマホのみで利用できる機能を盛りだくさんに取り入れられる。
デメリット PCサイト・スマホ専用サイトをそれぞれで更新・管理していく必要がある。
スマホ専用サイトとするか、レスポンシブWEBデザインとするかは一長一短であり、どちらが良いとは言い切れないところ。例えば大手企業なら専用サイトを作っているところがほとんどですが、小規模でなおかつ若年層ユーザーが多い店舗等だと、レスポンシブを選ぶところも増えています。
いずれにしても自社・自社製品のスタイルや更新活動等を考え、ピッタリと合う方針を見つけることが大切です。
2.画像データが重すぎる
特に「スマホだけで作れるかんたんサイト制作ツール」等で多いのが、画像データが大きく、重すぎている……というパターンです。「スマホで撮影した写真をそのまま入れ込めばOK!」と言われたままにサイト制作を行っていたら、激重サイトが出来上がっていた…こんなケースは珍しくありません。
画像データは適切にリサイズを
スマホで撮影した写真は、デフォルト設定の場合、紙印刷にも耐えられるような高ピクセル数となっています。しかしスマホで閲覧するサイトには、このような高解像度の画像データは必要ありません。
サイトが必要とする画像サイズをチェックして、適切にリサイズ（ピクセル数を下げる）を行いましょう。近年では写真データのリサイズ用のアプリも多種登場しているので、「スマホだけで画像をいじっている」という人でもリサイズは行なえますよ。
3.WEBフォントの多用
「見た目がオシャレだから」「カッコいいから」と、WEBフォントを多用してはいないでしょうか。WEBフォントは端末に縛られることなく多用なフォントを表示できるのが大きな魅力。しかし、ユーザー側の端末が一度フォントデータを読み込んでからの表示となるため、テキストデータの表示速度がガクッと下がる恐れがあります。
速度重視のページにはシステムフォントを
端末（OS）に既に導入されているシステムフォントであれば、WEBフォントとは異なり、スピーディーなテキスト表示を行うことができます。
「テキストが長く情報量が多い」「このページはテキストがメイン」といった箇所ではシステムフォントでのWEBデザインを重視してみるのも手です。
4.CSSファイルが重い
Webページのスタイルを指定する言語である「CSS（Cascading Style Sheets）」。基本要素の意味や構造定義のための「HTML」にCSSを不可することで、より豊かで幅広いWEBデザインを可能とすることができます。
しかしCSSの多機能さに喜んであれもこれもと指定を行うと、それだけCSSファイルを読み込むのに時間がかかってしまうのは大きなデメリットです。
特に多いのが、「デザインテンプレートを使っているけれど、重い」というケース。本来は不要なCSS指定がたっぷり盛り込まれていて、見た目は良いけれど重い…というケースも珍しく有りません。
また更新を重ねていくことで不要なルールセットや未使用セレクタが積もっていき、速度に問題が出てくることもあります。
ファイル指定の見直しを
未使用のCSSセレクタ等は、無料ブラウザ付属のツールでも洗い出しをすることができます。例えばChromeの開発者ツール「Coverage」では、未使用セレクタを見つけて削除することが可能。比較的手軽にスッキリとさせることができます。
ただし細かなファイル指定については、CSSについて（WEBデザインについて）の或る程度の専門知識が必要です。またいわゆる「カンタンに作れるWeb制作ツール／サービス」の場合だと、テンプレートのCSSが一切いじれないことがあります。
おわりに
モバイルサイト・スマホサイトの表示速度の重要性は、今後ますます高まっていくことが予測されています。「見た目だけのデザイン性」ではなく「ユーザーがストレスフリーで閲覧し、アクションすることができる」という本来の意味での「快適なデザイン」が必要とされているのです。
まずはとにかくスマホサイトの表示速度の測定をし、現状の把握をしましょう。そして自社サイトの問題を的確に把握し、できるところからでも改善していくことが大切です。
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。