「スマホ対応したWebサイトを作りたい」
「自社サイトはあるがスマホ対応させていない。どうすればいい？」
このようなお悩みや課題を持っている経営者や担当者の方、実はまだ多いのではないでしょうか？
スマホを使って会社や団体などのWebサイトを閲覧する人は相当数多くなっています。老若男女問わずスマホを持っている今の時代、スマホ対応は欠かせなくなっています。
そこで今回はスマホ対応サイトを持つべく理由と作る時の重要ポイントをご紹介します。これからスマホ対応を進める会社様はぜひ参考にしてみてください。
目次
スマホ対応サイトのメリット
スマホ対応サイトを持つべく理由は次の2つとなります。
- 顧客（ユーザー）にとって使いやすくなる
- 検索順位が上がりやすくなる
顧客（ユーザー）にとって使いやすくなる
スマホ対応のサイトにすると、スマホ画面での見やすさと使いやすさは圧倒的に改善されます。サイトの文字が見やすく、ボタンも指で押しやすいサイズとなるため、ストレスを感じずに操作ができます。
反面、PCデザインとスマホデザインの見え方が一緒だと、文字は小さく操作もしづらくなります。そのため、ユーザーはストレスを感じてしまいます。老若男女関わらず、スマホ利用者が増え続けているため、スマホからも見やすいサイトを作ることは必須です。
さらに、スマホ対応されていないWebサイトは、サイトそのものが古いとユーザーは感じてしまいます。この場合、サイトデザイン云々よりも会社そのもののイメージに悪影響が出かねません。サイト全体をリニューアルし、同時にスマホ対応も進めることが必要です。
検索順位が上がりやすくなる
スマホ対応サイトを作ると、検索順位が上がりやすくなります。主な理由は下記の通りです。
- スマホを使ってWebサイトにアクセスする人の割合が年々増加傾向にある
- SEOの評価基準にWebサイトのスマホ対応が推奨されている
SEOの評価基準の中でも特に推奨されていることが「モバイルファーストインデックス」です。
モバイルファーストインデックスとは、モバイル対応サイトのクロールを優先させてインデックス・評価する、ということです。スマホユーザーの増加に伴い、GoogleやYahooなどの検索エンジン側はモバイル対応したサイトを優先的にクロールするように変移しています。
このため、Webサイトをスマホ対応させることは、ユーザーの安心感・満足感の向上だけでなく、検索エンジン側からの評価向上にも繋がります。
スマホ対応サイトには2種類ある
スマホ対応サイトには次の2種類があります。どちらを採用するかは、自社の目的や使い方を考慮して選びましょう。ここではそれぞれのメリット・デメリットも解説します。
- レスポンシブデザイン対応のサイト
- スマホ専用サイト
1. レスポンシブデザイン対応のサイト
レスポンシブデザインとは、デバイスに合わせてWeb表示を最適化させるデザインのことです。
簡潔にご説明すると、1つのデザインデータの表示をデバイスごとに最適化させる作り方になります。そのため作るサイトの数は1つとなります。
今のWebデザインは、このレスポンシブデザインが主流となっています。GoogleやYahooなどの検索側もレスポンシブデザインを推奨しています。そのため、特別な理由がない場合はレスポンシブデザインでWebサイトを設計しましょう。
“レスポンシブデザインのメリットとデメリット”
レスポンシブデザインは1つのサイト構築／構成で済みます。そのためサイト更新やメンテナンス、管理等が幾分かは楽になります。ユーザーがデバイスによって分散しないことにより、SEOにも有利といえます。
デメリットとしては、サイト表示が遅くなる傾向があります。これはユーザーがスマホやタブレットで閲覧していても、PC用のHTMLコードや画像を読み込むためです。また、スマホ専用サイトと比べて、デザインの自由度は低いです。画像サイズはデバイスに最適化されますが、基本的にデバイスごとのレイアウトやフォントの変更ができません。
2. スマホ専用サイト
もう一方の作り方として、PC用のサイトとは別でスマホ専用のサイトを作ります。スマホ専用サイトとは字の如く、スマホ専用のデザインで制作されたWebサイトです。
“スマホ専用サイトを作るメリットとデメリット”
スマホ専用サイトの特徴は、PC向けのサイトとは別のURLを使用するため、PCでの表示を考慮することなくスマホ閲覧に特化した自由なデザイン制作が可能です。また、スマホ用にWeb言語をコーディングするため、見やすくて表示速度の速いWebサイトを作成できるというメリットがあります。
ただしPC用と内容がほぼ同じであるにも関わらず、URLが異なることから、検索エンジンからコピーサイトと認識される恐れもあります。このような結果を避けるため、デザイン要素を2種類用意したり、専用のタグを埋め込んだりする必要があります。このように、レスポンシブデザインと比べて制作の手間やかかる時間、さらには費用が増えるデメリットがあります。
見やすいスマホサイトを作る時の4つのポイント
スマホ対応サイトは見やすさ・操作のしやすさが重要です。見やすさ・操作のしやすさを考えた時、下記がデザイン制作の重要ポイントとなります。
- デザインはシンプル
- フォントサイズは16px
- 指で操作しやすいかどうか
- 高解像度ディスプレイへの対応
01. デザインはシンプルに
スマホサイトはシンプルなデザインにしましょう。スマホは画面が小さいため、要素を詰め込んだデザインでは見づらくなります。スマホの小さい画面を見ていて、何度もスクロールしたり、画面を大きくしたりする動作は面倒です。そのためシンプルなデザインでないと、知り得たい情報に辿りつくことが面倒になってきます。
さらにシンプルなデザインにした場合、ストレスなくコンテンツを読み進められる確率は上がります。ストレスがないサイトは滞在時間が長くなり離脱率は下がります。このことにより、SEO効果も上がるメリットがあります。
02. フォントサイズは16px
スマホに最適なフォントサイズは、16pxと言われています。コンテンツ情報を多くするために、文字を小さくすると見づらくなります。逆に文字を大きくしすぎるとスクロールの回数が増えてしまい、スマホサイトが使いづらくなります。そしてこの『16px』というフォントサイズはスマホサイトに限ったことではありません。本文を16pxで作っているWebサイトは多くあります。視覚的に見やすいフォントサイズは、16px程度と覚えておきましょう。
03. 指で操作しやすいかどうか
スマホの小さな画面を見るときは指を使いますよね。そのため、指で操作しやすいかどうかを意識してサイト制作を行うことが必須です。『見る』ではなく『使う』といった意識がスマホサイト制作には必要です。特に下記2点は重要なデザイン制作のポイントとなります。
- ボタンサイズは小さくしない
- リンクやバナーは離して設置
タップ要素の間隔が48px × 48pxよりも小さいと、誤タップや誤動作が発生しやすくなります。
04. 高解像度ディスプレイへの対応
スマホはディスプレイの高解像度化が進んでいます。そのため、高解像度ディスプレイに対応したデザイン制作は必須です。特に画像やイラストを使う時は確実に対応が必須です。対応せずにデザインしてしまうと、画像もイラストもボヤけてしまいます。
対応策として、表示したい画像・イラストは2倍サイズのデータを使用します。例えば、サイト表示時の画像の横幅サイズが500pxの場合、デザイン制作時に使う画像の横幅サイズは『1000px』にします。
“画像の容量にも注意が必要”
さらに、画像の容量にも注意が必要です。容量が大きい画像を使ってしまうと、ページ表示は遅くなります。ページ表示が遅いサイトはユーザーの離脱率が上がり、SEO評価も低下します。スマホの場合、電波が届きにくい場所での使用も考えられるため、ページ速度はPCよりもシビアです。
サイズは大きく、でも容量は小さく、の場合の画像の最適化に関しては、下記ブログ内にて説明しています。こちらもぜひ、合わせてお読みください。
まとめ
Webサイトを持つとき、あるいはリニューアルする時には、スマホ対応もどうするかをしっかりと考慮することが既に重要事項となっています。持っていて当たり前、ではなく持っていないと取り残されると認識した方が、良いでしょう。
そのためにも、レスポンシブデザインにするか、専用サイトとするかの判断は大切です。貴社のビジネススタイルに適正なスタイルがどちらなのか、迷われたときはぜひ、私たちにご相談ください。最適なご提案をいたします。スマホサイトもある、ではなく適したスマホサイトがある、の方が事業や会社は成長しやすくなります。今回の記事が、少しでも貴社の参考になれば嬉しく思います。
今回も最後まで読んでいただき、ありがとうございます。
