こんにちは、OneStepです。
OneStepではスマホ専用サイトの作成を推奨する考えを持っております。
スマホサイト専用のコーディングの仕事を承っているのもそのためです。
スマートフォンサイトで肝になるのは、いかに快適にスマホにデータが下りてくるかです。
見たいページが重く、ダウンロードに時間がかかると閲覧開始前に離脱されてしまいます。
近年はレスポンシブWebデザインが流行し、Googleもそれを推奨するとしています。
ただしレスポンシブWebデザインのサイトではなく、UserAgent別でリダイレクトし、別のデザインを見せたとしてもペナルティを与えるという発表や記述はありません。
(もちろん悪質なもの、悪意のあるリダイレクトは除く)
レスポンシブの限界その1 見え方
レスポンシブWebデザインは1つのHTML・CSSコードなどで対処ができるため、情報そのものの管理がシンプルになります。
しかしデバイスが変わると同じコンテンツ内で表示が煩雑になるばかりか、画像の見え方、細かい文章の切れ方、変わり方、そこから与える印象まで統括することは不可能です。
特に手の込んだバナーボタンのつくりなどは、レスポンシブを通してスマホで見たとたん、小さなバナーボタンの表示になり、細かい装飾などがまったく見えなくなります。
そういうことであれば見せ方を変えようと考えた場合、
確かにスマホで閲覧した場合にコンテンツを隠すためのCSSの記述も存在します。
——————————————————
.contents {
display: none;
}
——————————————————
このように記述すれば、CSSが当たる部分は表示が消えます。
しかしここで間違ってはいけないのは、あくまでも表示が消えるだけでHTMLもCSSも、レンダリングの処理は行われています。消えたからと言って処理が軽くなるわけではありません。
ここにWebサイトを無理やりレスポンシブにしてスマホ向けにすることに限界があります。
レスポンシブの限界その2 読み込み速度とHTTPリクエスト
HTTPリクエストとは、非常に平たく言うとリンクの数(厳密に言うとかなり違います)です。
ただしリンクの数とはクリックするとジャンプするリンクのことではなく
- CSSファイルへのリンク
- JavaScriptへのリンク
- 画像へのリンク
などのことを指し示します。つまりそのページを構成するために必要なファイルへのリンク全般のことです。
通常のPC向けWebサイトはCSSファイルであれば数種類から各コンテンツ毎のCSSファイルで統括されているかと思います。また特有の動作についてはその動作分だけJavaScriptが用意されているでしょう。
また複雑なデザインを実現するために多量の画像を読み込んでいるかと思います。
そのファイルの数だけHTTPリクエストが発生しているわけです。
そして大量のHTTPリクエストが発信された分だけダウンロードをしなければなりません。
受信する相手がPCであれば処理するパワーも十分にあり問題はありませんが、スマホなどの携帯端末では限界があります。
このダウンロードの数が多くなるとWebサイトの表示が遅い、という状態になるのです。
これを回避するためには
- CSSファイルはまとめる
- JavaScriptも可能であればまとめる
- 画像は可能であれば使わない
といった対策を取る必要があります。
画像を使用しないとなるとどのようにデザインを実現するかという疑問が発生します。
これを解決するのがCSS3の使用です。
CSS3により角丸、グラデーション、ドロップシャドウといったデザイン性を実現することができます。
逆にPCサイトにCSS3を使用する場合、今度はInternetExplorerの兼ね合いによりきれいな挙動が取れなくなります。
この問題を解決するためには、スマホでWebサイトを見る人にはスマホ専用サイトを見せる方がよいわけです。
ついでに
推測でしかないのであまり言うつもりはありませんが……
なぜGoogleはレスポンシブWebデザインを推奨するか考えてみました。
Webサイトがデバイス毎に二つ、三つとあると、これらのサイトをクローラーがまわり、Googleのデータベースに登録することになるのではないでしょうか。
そのようになるとGoogleのデータベースは肥大化していきます。いくらGoogleが巨大なデータを保持できるとはいえ、この世に無限というものはありえないはずです。
そこでGoogleは「レスポンシブWebデザインを推奨する」という名目でデータベースの肥大化を抑制するよう働きかけているのではないかと勝手に当方は考えています。
※根拠は全くありません。
まとめ
上記2点(+Googleの事情?)によりレスポンシブWebデザインは万能ではないと考えます。
スマホで見る場合とPCで見る場合とでユーザーの情報の受け取り方やニーズは違うのではないでしょうか。
あくまでもユーザーのシチュエーションに即した情報の打ち出し方をするのが大切だと思われます。