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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サイトの見やすさ

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

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

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

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

検索エンジンからの評価