A01-05：スマホで見られて当たり前。レスポンシブデザイン対応の話

スマホで自社のホームページを開いてみたら、文字が小さくて読めなかった。指で広げないと、何が書いてあるのか分からない。そんな経験はないでしょうか。

「レスポンシブ」は、英語で「反応する」という意味です。画面の大きさに反応して、ホームページの見た目が自動で変わる。これをレスポンシブデザインと呼びます。パソコンで見れば横長に、スマホで見れば縦長に。同じページが、見る人の画面に合わせて形を変えてくれる仕組みです。

今回は、この「スマホで見られて当たり前」という話をします。むずかしい技術の話はしません。経営者として知っておけば十分なところだけ、お伝えします。

パソコンとスマホ、訪問者はどちらで見ているか

ひとつ、数字をお見せします。

実際にホームページのアクセス解析をすると、訪問者がどんな機械で見に来ているかが分かります。今、多くのサイトで、パソコンとタブレット・スマホがおよそ半々です。お店や個人向けの商売だと、スマホが80％、90％というサイトもあります。会社相手の商売でも、半分前後はスマホから、というサイトは珍しくありません。

昔は違いました。ホームページといえばパソコンで見るもので、作る側もパソコンの画面を基準にしていました。スマホは「おまけ」だったのです。

今は、逆になりました。まずスマホで読みやすいこと。これが先に来ます。あなたのお客様の半分、商売によってはその多くが、小さな画面であなたの会社を見ている。そう考えたほうが、実際に近いのです。

スマホ対応していないと、何が起きるか

スマホで見たときに形が崩れるホームページは、訪問者にこんな思いをさせています。

• 文字が小さくて、指で広げないと読めない
• ボタンやリンクが小さくて、押し間違える
• 横にはみ出して、全体が見えない

どれも、見る側にとっては小さなストレスです。けれど、わざわざ我慢して読んでくれる人は多くありません。読みにくいと感じた瞬間に、画面を閉じてしまう。これが、いちばんもったいないところです。

それだけではありません。検索でも不利になります。検索を動かしている会社は、スマホで読みやすいホームページを高く評価し、読みにくいものを下げる。そういう仕組みになっています。スマホ対応をしていないと、人が来る入口そのものが狭くなってしまうのです。

つまり、せっかく作ったホームページが、スマホで見られないというだけで損をしている。そういう状態になりかねません。

今は、多くが自動で対応できる

ここまで読んで、身構えてしまった方もいるかもしれません。けれど、安心してください。

レスポンシブデザインは、今、新しく作るホームページならたいてい標準で備わっています。広く普及しているWordPress（ワードプレス）などのシステムでは、最初からスマホ対応になっているものがほとんどです。特別な注文をつけなくても、パソコンでもスマホでも、ちゃんと読める形で出来上がります。

ですから、これから作る方は、スマホ対応を心配しすぎる必要はありません。

問題になるのは、古いまま放置されているホームページのほうです。何年も前に作って、それきり手をつけていない。当時はパソコンだけを考えて作られていた。そういうホームページは、今のスマホで見ると形が崩れていることがあります。作った時点では正しかったのに、世の中のほうが先に進んでしまったのです。

新しく作るより、古いものを見直すこと。スマホ対応で気をつけるべきは、こちらです。

確認するのは、難しくない

では、自分の会社のホームページは大丈夫なのか。これは、経営者ご自身で確かめられます。

やることは簡単です。お手元のスマホで、自社のホームページを開いてみてください。そして、こう見てみます。

• 指で広げなくても、文字がそのまま読めるか
• ボタンやリンクが、無理なく押せる大きさか
• 横にはみ出したり、文字が重なったりしていないか

この3つが問題なければ、ひとまず大丈夫です。どこかに引っかかりを感じたら、見直しの時期が来ているのかもしれません。

どう直すか、までは専門の領域になります。けれど「直したほうがいい状態かどうか」は、こうしてご自身の目で分かります。まずは一度、自分のスマホで開いてみる。そこから始めてください。

ホームページが、誰のために、どんな機械で見られているのか。その入口についてもう少し知りたい方は、「A01-06：ホームページに人が来る仕組み」もあわせてお読みください。

この記事のまとめ