レスポンシブデザインって何? ~スマホ向けサイトの仕組みと必要性~

2018年11月18日日曜日

Web技術 ウェブサイト作成・運営

コンピューター端末

近頃はスマートフォンの利用者も増え、多くの人がスマホからウェブサイトを閲覧していますよね。

それに伴って、もしあなたが店舗のホームページを作成するとしたら、そういった方々も考慮に入れたデザインにしなければいけなくなってきてしまいました…


突然ですが、「レスポンシブデザイン」という言葉を聞いたことはありますでしょうか。



「responsive(レスポンシブ)」というと、「応答性の」とか「反応性の」といった意味を持った英単語ですね。

「レスポンシブデザイン」とは、
「読み手の状況に応じて変化するデザイン」
のことです。

そして、この「読み手の状況」というので一番多いのが、
「読者がパソコンから読んでいるのか、スマホから読んでいるのか」
ということです。



つまり、「1つのホームページでも、パソコンからアクセスされた時と、スマホからアクセスされた時で、見え方を変える」ということです。


例えば、今あなたが見ているこのブログ、、

もしあなたがパソコンを使われているのであれば、本文の右側に「カテゴリー」ですとか、広告なんかが見えているんじゃないかと思います。

パソコンの画面は大きくて横長なので、記事だけではなく、右側に付加的な情報を見えるようにしています。

それに対して、もし今あなたがスマートフォンからこのブログを読んで下さっているのであれば、画面いっぱいにこの記事の内容が表示されていると思います。

「カテゴリー」なんかは、記事を最後まで読み終わった後に、下の方に表示されると思います。




いざホームページを作り始めると、これ、意外とめんどくさかったりします。

特に、画像をホームページに入れたりすると、「パソコンでは画面いっぱいにかっこよく表示されるけど、スマホで見るとはみ出す」なんてことになります。

自動でレスポンシブデザインにしてくれるような、ホームページ作成サービスも多いのですが、それにばっかり頼っていると、いざ微妙な調整をしたくなったときに、自分ではできなくなってしまいます。



レスポンシブデザインって、どうやって実現されてるの?


いくつかやり方はあるのですが、レスポンシブデザインを実現しているのは、「CSS」や「JavaScript」なんて呼ばれる、プログラムです。
(プログラムの名前は覚えなくても良いと思います。)


以前、「ウェブサーバーってなに?」という記事で少し紹介しましたが、あなたがウェブサイトを見ているとき、そのウェブサイトの文字や写真は、世界のどこかにある「ウェブサーバー」と呼ばれるコンピューターから、あなたのコンピューターに送られて来たものです。

そうやって「ウェブサーバー」があなたのスマホやパソコンにウェブサイトのデータを送るとき、「CSS」や「JavaScript」と呼ばれるプログラムも、一緒に送られて来るのです。


そして、あなたのコンピューターにそのプログラムが届いた後、そのプログラムがあなたのコンピューターの画面のサイズを測って、それに応じて、ウェブサイトの見え方を変えているのです。



なぜレスポンシブデザインが必要なの?


どうしてそこまでして、レスポンシブデザインにする必要があるのでしょうか。

「パソコン向けのウェブサイトであれば、パソコンのためだけに作り、スマホ向けであれば、パソコンでのデザインなんて考えない」というやり方では、ダメなのでしょうか。


サイトの見やすさ


レスポンシブデザインにするべき第一の理由としては、
「ウェブサイトを見る人、全員にとって見やすくなる」
ということでしょう。



たとえばあなたのお店のホームページを作成したとき、そのページを見てくれる人が、どんな端末から見てくれるのかは、わかりません。

パソコンだけのことを考えたホームページを作ってしまうと、スマホから見たお客様は、
「うわ、なんだこの小さい文字のウェブサイト… 読みたくないなぁ…」
と思ってしまうかも知れません。

あなたのお店の素晴らしさを伝えるためのホームページのはずなのに、これでは逆効果になってしまいます。



検索エンジンからの評価


上記の「サイトの見やすさ」というのが一番大事なポイントなのですが、実はもう一つ、レスポンシブデザインにするべき理由があります。

それは、検索エンジンからの評価です。

以前、「店舗や会社のホームページの役割とは? 」という記事でも書きましたが、ホームページにはそれぞれ「強さ」のようなものがあります。

それは、GoogleやYahoo!などの検索エンジンからお客様が検索をかけたとき、「どれぐらい上の方にあなたのお店が表示されるのか」ということに関わってきます。

当然、検索結果の上の方にあなたのお店が表示されるほうが良いのですが、それはGoogleさんが、独自の評価基準で決定しています。

また、実はYahoo!とGoogleは同じ仕組みを使って検索を行っているので、Googleで評価が上がるということは、Yahoo!でも上の方に表示されることに、直接的に繋がります。




そのGoogleが、ウェブサイトの評価基準に、「レスポンシブデザインに対応しているか」という点を入れているのです。


つまり、レスポンシブデザインに対応していなければ、せっかくお客様がインターネットで検索をしても、その検索結果に、あなたのホームページが表示すらしてもらえない可能性があるのです。

もちろん、単に「検索結果での順位が下がる」ということですから、お客様がすごく下の方まで検索結果を見てくれれば、あなたのホームページを見付けてくれるかもしれません。

ただ、そんなことをするお客様は、かなり少ないはずです。



Googleが検索順位をつけるときに最も重視している点は、「ウェブサイトを見る人にどれだけ有益なページか」ということです。

そういう風に、「読み手に満足感を与えられるページ」という観点から考えると、レスポンシブデザインの導入は非常に大事になってきますよね。




ただ、業者にホームページ作成を依頼した場合、レスポンシブデザインに対応するために結構な追加料金を取られる場合も多いです。

ただでさえ、業者に依頼すると、10ページ作成するだけで30万円が相場と言われている中で、さらに追加料金を支払うのは、現実的に難しい場合もあると思います。

かといって、自身でプログラムを書くのも、かなり敷居が高いかと思います。



自営業の店舗様の場合だとそういった事情も多々あると思いますので、一応私が作成させて頂いているお客様のホームページに関しては、レスポンシブデザインの対応は無料でやらせて頂いています。
(今時レスポンシブ対応していないホームページを作るのもどうかと思うので…)



もしスマートフォンにも対応したウェブサイトのことで、不明点などあれば、お気軽に、このページの最下部のお問合せからご連絡を頂ければと思います。

最後までお読みくださり、ありがとうございました。