③ URL が一つで、見る機種によって、サイトの構成が切り替わって動く
→「レスポンシブ Web デザイン」という名前の構造
例) PC からの閲覧の場合には、 URLはそのままで、ホームページの構造がPC用に切替わる
スマホからの閲覧の場合には、 URLはそのままで、ホームページの構造がスマホ用に切替わる
スマホ対応サイト制作 忘れてはいけない点
ここでは、スマホ用サイトとPC用サイトの2つの違いを考慮した上で、サイトに反映させないといけない点をまとめていきます。
まず最初に整理しておくと、その「忘れてはいけない点」とは、
Ⅰ.ワンクリックで電話発信
Ⅱ.見やすい文字サイズと指で押しやすいボタンサイズ
Ⅲ.サクサク動く軽さ
Ⅳ.スマホサイトへのリダイレクト
あとオプションとして、ブログも併設できれば理想です。これは、SEO上で非常に有利になるためです。
ここから順番に触れていきます。
Ⅰ.ワンクリックで電話発信
当たり前のことですが、スマホは電話です。
そのため、ユーザーの方は電話を掛けたい時にはそのままスマホで発信しようとします。
しかし、発信用のボタンなり、発信を簡単にする仕組みがないと意味が半減します。
ちなみに、このサイトをスマホで見て頂くと電話発信用のボタンが常に画面下に表示されていて、非常にかけやすくなっているのがお分かり頂けると思います。
これらがないと、電話番号をメモして掛け直す必要が出てきてしまいます。
これ自体手間ですし、もし手近なところにペンなりメモ用紙がないと電話番号を間違えてしまう可能性があります。
これでせっかく興味を持ってくれた方を失ってしまうのは、勿体ないことこの上ありませんので、特に注意が必要です。
Ⅱ.見やすい文字サイズと押しやすいボタンサイズ
見やすさの重要さはお分かり頂けると思います。小さい文字を好んで見る方はあまりいらっしゃいません。
さらに、意外に見落としてしまうのがボタンサイズの大きさです。最近はスマホも大きいものを使っている方が増えてきたので変わりましたが、サイズによっては男性は片手で操作します。
その場合に使うのは親指ですが、親指だと細かい微妙な動きが得意ではありませんし、そもそも指自体が太めなので、狙ったところを一発で押せなかったりします。
そうなるとかなりストレスを感じることになります。また女性でも爪を長くしている場合には、操作がしづらくなることもあります。
そういう意味では、やはり大きめになっていることが重要と言えます。
ここで、もしサイズが小さいのが嫌なら拡大すれば良いではないかとお感じになるかもしれません。
しかし、現実にはスマホ対応しているサイトが徐々に増えてきています。
見やすくなったサイトに見慣れてきた方からすれば、わざわざ拡大するのはストレスがかかる点となります。
そういうストレスを感じていても我慢して続けるかどうかというのは、競合が他にいないかということや、問題の深刻さによります。
そのため、我慢してもらえるかもしれませんし、我慢してもらえないかもしれません。
ただ対策は明確になっていて、しかもコストはそれほど高い訳ではありません。
そういう状況でこういう些末なところでお客様を失うのはやはり勿体ないのではないでしょうか。
Ⅳ.スマホサイトへのリダイレクト
ちなみに、このリダイレクトというのは、パソコンで見たらパソコンで見れるようになり、スマホで見る場合にはスマホで見れるように自動で切り替わることを言います。
機器によってユーザーエージェントというものがついていて、サイト側でそれを認識して切り替えることができるのです。
逆にそうしないと、スマホで見ている方はいきなりパソコン用サイトが表示されたりするので意味が半減します。
なぜならユーザーの方はわざわざ自分でスマホサイトに切り替えてくれるとは限らず、そのまま離脱する可能性が少なくないためです。
そのため自動でできるならそれに越したことはありません。
ちなみに、機器によって自動で振り変える方式には大まかに言って3種類あります。
①PCサイトと別のURL(インターネット上のアドレス)でスマホサイトを用意
→見る機器がPCかスマホかによって、自動的に違うURLに振り分ける
例)PCからの閲覧の場合には、URL に振分け、
スマホからの閲覧の場合には、URL/sp に振分ける
②1つのURLで、見る機器によってPC用サイトとスマホ用サイトに自動で振り分け
例)PCからの閲覧の場合には、URL(PC用)に振分け、
スマホからの閲覧の場合には、URL(スマホ用)に振分ける
この中で Googleが推奨しているのは③レスポンシブ Web デザインです。ただし、検索結果で有利になる訳ではないとも言っていますが。
①の方式については敢えて使用する必要性はありません。
ただ、食べログやディズニーランドなどのサイトでも、違う URL を使用しているので、気にされる方もいらっしゃるかもしれません。
例) PC 用 http://tabelog.com
スマホ用 http://s.tabelog.com
しかし、これらのサイトは、サイトの裏で大規模なデータベースが動く特殊なものとなっています(制作費も場合によっては数億円単位でかかるものです!)
URL もシステム的に変動するもので事情は全く異なりますので、この方式はあまり関係のないものとご認識頂ければ構いません。
他方レスポンシブWebデザインは見た目も良く、制作費を多めに頂けるため、作りたがる Web 制作会社も多いようです。
しかし、少しずつ修正して行って、反応率を向上させていくのが難しいという弱点もあります。
そのため、マーケティング的には使いづらい部分があるのも事実です。
そのため、②と③については、ご用途に応じて使い分けて頂くのが最も良いかと思われます 。