レスポンシブデザインってなに？

ホームページを作ろうとしたときに、目にする言葉「レスポンシブデザイン」
英和辞典で調べると「すぐ応答する」や「敏感な」という和訳がでてきます。
「あぁ、早く表示してくれるってこと？」と思われた方に読んでいただきたい記事です。

残念ながら「早く表示するためのデザイン」ではなく、「スマートフォンで見ても見やすくするためのデザイン」という意味で使われます。
検索サイトのシェア No.1 の Google は、スマートフォンで見にくいページは、ダメなサイトとして検索結果上位には表示してくれなくなりました。

ですので、レスポンシブデザインをしていることがとても重要になっています。

この記事では、レスポンシブデザインのざっくり説明と、レスポンシブデザインをしていないホームページは、どのように扱われてしまうのかをお話しします。

レスポンシブデザインとは

冒頭にもお伝えしましたが、スマートフォンでも見やすいホームページを作るデザインの方法ということです。

ホームページはその昔、パソコンで見るのが主流でした。昔と言っても10年くらい前までの話です。
スマートフォンが普及し、だれもがインターネットを手軽に見ることができるようになってから、ほとんどの人はスマートフォンでホームページを見ることになりました。

その時に問題になったのが、画面の大きさの問題でした。
特に画面の横幅が違いすぎることが大きな問題でした。

パソコンはテレビの画面と同じように十分な横幅がありますが、スマートフォンは手に取ってみるためにスリム化されていて縦長の画面ですよね。
パソコンのように横幅が十分ある画面で見ることを前提に作られていたホームページは、スマートフォンで見たときに、ものすごく字が小さくなるという問題がおきました。

言葉で説明するより、見ていただいたほうが早いですね。

下の画像は、このアトリエKW のホームページをパソコンで表示したときの画像です。

今あなたは、このページをスマートフォンでご覧になっていますか？
もし違ったらスマートフォンでご覧になってください。
冒頭のおじさんが「ちっちゃ・・・」と言いたくなる気持ちがわかると思います。

この例は、「レスポンシブデザインをしていないホームページ」ということです。
誤解がないようにお伝えしておきますと、アトリエKWのホームページはしっかりレスポンシブデザインをしていますよ。実際にスマートフォンでご覧になってみてください。（だいぶ下のほうまでスクロールしてくださいね）

アトリエKWのホームページ

アトリエKW

どのようにしてスマートフォンでも見やすくしているの？

答えは実にシンプルで、画面の横幅によってページの配置を変えて見やすくしているだけです。

先ほどの例、アトリエKW のホームページの例で言いますと、パソコンで表示したときはサービスの内容が横に3つ並んでいましたが、スマートフォンのように画面の横幅がない場合は自動的に縦に並ぶようにデザインしています。

ここからは、このレスポンシブデザインを実現するためのしくみについてざっくりお話しします。
すこしだけ技術的な話になります。
それよりもレスポンシブデザインをしていないと、どんな不都合があるかをお知りになりたい場合は、次の「レスポンシブデザインしないとどうなる」まで読み飛ばしてください。

レスポンシブデザインのしくみ

画面の横幅を察知してその幅に合わせてコンテンツの配置を変えるために、JavaScript を使うのが一般的でした。
JavaScript は、画面の横幅値を取得するだけではなく、コンテンツの大きさや、文面の変更を動的に行うことができるスクリプト言語です。
また現在では、もっと進んだ Flex Box を使って動的にレイアウトすることをしています。

ですが一からその仕組みを作るのはめんどうだということで、ウェブデザイナーのほとんどはレスポンシブデザインを実現するフレームワークというものを利用しています。
これは、ウェブサイトの見た目をきれいにするために用意された数々の書式をパッケージ化してくれているもので、この中にレスポンシブデザインも可能なものがあります。

レスポンシブデザインのフレームワークはたくさんあります。検索してみてください。
それぞれ特色がありますが、私はその中で最も人気が高く使いやすいと思えた Bootstrap を使っています。

Bootstrap のウェブサイト（英文）

Bootstrapについては、当サイトでも使い方など紹介しています。

Bootstrap5

レスポンシブデザインしないとどうなる

スマートフォンで見たときに字が小さくなってもいいじゃないか。
だってピンチ（拡大）して見る機能があるでしょ？

とおっしゃりたい気持ちもわかります。
ですが話はもっと深刻ですよ。

冒頭でもお話ししましたが、レスポンシブデザインをしていないホームページは、Google から「ダメなホームページ」として扱われます。

それは、スマートフォンで見やすく作ることを Google が推奨しているためです。
検索結果として、字が小さくて見にくいページを提示するのは、Google としてはしたくないということです。
これは Google の検索エンジンを管理しているチームが明言しているのでまちがいないです。

Google にダメなホームページとして扱われると、検索結果上位に表示されなくなります。
検索結果の上位から見ていくのが人情。ずっと画面をスクロールして隅々まで見る人はほぼいません。
せっかく作っても、良いことが書いてあったとしても、だれも見てくれないホームページになってしまいます。

そうならないように、まだレスポンシブデザインに対応できていない場合は、できるだけ早く対応しましょう。

まとめ

当アトリエでは、レスポンシブデザインをするのが基本になっています。
現在運営中のホームページのレスポンシブ化サービスも行っています。
ご相談ください。