【技術・テクノロジー】

最近よく聞くレスポンシブデザインについて知っておきたいこと

  1. マークアップ
  2. レスポンシブデザイン
  3. 技術
最近よく聞くレスポンシブデザインについて知っておきたいこと

こんにちは。フロントエンドエンジニアのaxcelworkです。
初めましての方も、そうでない方もよろしくおねがいします。

さて、レスポンシブデザインという言葉が登場し、いくばくか経ちましたが皆さまいかがお過ごしでしょうか。
レスポンシブ・デザイン、レスポンシブウェブとも呼ばれています。

なぜレスポンシブデザインが注目されているのか。レスポンシブデザインとはなんなのか。
そして、レスポンシブデザインで制作することによってどんなメリットがもたらされるのか。

今回はレスポンシブデザインについて、整理を兼ねてまとめていきますよ!

パソコンでもスマートフォンでも見れるってどういうこと?

デバイス戦国時代の今だからこそのレスポンシブデザイン

まずはレスポンシブデザインとはなんなのかをおさらいしてみます。
人によって解釈が違うので、これといった正解があるわけではないのですが、僕はレスポンシブデザインを以下のように定義しています。ばぶぅ。

レスポンシブデザインは、手法ではなく考え方の1つだと捉えています。概念と言ったほうがわかりやすいでしょうか。

昨今、様々なデバイスが登場してきました。
パソコンを始め、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット。 そしてそれらは大小様々な解像度があります。
同じiPhoneでも解像度にはかなりの範囲があり、Androidになるとさらに顕著ですね。

すべてのデバイスで不便なく見られるようにするには、それなりのコスト(時間的・金銭的)がかかってきました。
閲覧者にとっても特定のデバイスでは満足に閲覧できないなどの不便をしいることになります。

もちろん、今までも様々な形でデバイス対応は行われてきました。
ユーザーエージェントやIPアドレスによって、ページを振り分けたりしてきました。
しかし新しいデバイスはどんどん登場してきています。その時々に対応を行うとなると……うっ頭が……。

そこであらゆるデバイスに対応できるようにコンテンツの表示を最適化しよう!という考え方が生まれました。
つまり、デバイスに合わせてフォントのサイズ・レイアウト等の変更を行い閲覧者のデバイスによってWebサイトを見やすくする。
この考えが「レスポンシブデザイン」というわけです。ばぶぅ。

レスポンシブデザインの考えの枠組み

レスポンシブデザインは、中にいくつか小さい考え方を内包しています。
それが、アダプティブデザインとアダプティブコンテンツです。

専門用語が飛び交ってしまうのですが、お付き合いください。

アダプティブデザインは少しわかりにくいのですが、端的に言うと限定的なレスポンシブデザインと言ったところでしょうか。

スマートフォンはこの解像度だけ!パソコンはこの解像度だけ!といったような形で限定し、コンテンツの表示を最適化します。
レスポンシブデザインが「ラーメン」とするなら、アダプティブデザインは、「ラーメン」の中の「味噌ラーメン」や「醤油ラーメン」といった感じでしょうか。

もう一つのアダプティブコンテンツはわかりやすいです。

画像の縦横比を変えたい場合や、スマートフォン用のコンテンツなど、デバイスに合わせてWebサイトの装いを変えていくのがアダプティブコンテンツです。
ラーメンで例えると、子供には麺を柔らかく茹でる、大人には麺を硬めで茹でると言った感じでしょうか。

レスポンシブデザインで作るメリット

どんなデバイスでも見れる

やはりこれが1番の理由だと思います。
いま世の中に出ているデバイスで概ね不便なく見ることが可能なので、閲覧者の満足度を向上させることができると思います。

見た目の統一ができる=ブランドイメージの統一ができる

スマートフォンが出始めたときのWebサイトは、スマートフォン特有のデザインされたパーツを用いることが多かったのです。パソコンとスマートフォンで大きく見た目(デザイン)が異なっていて、閲覧者は戸惑いを隠すことができない状況がしばしばありました。

パソコンとスマートフォンで見た目(デザイン)がほぼほぼ同じなので、閲覧者が戸惑うことが少なくなります。

モバイルフレンドリー(スマホファースト)を意識できる

今や常識ですが、Googleは検索指標の1つとしてモバイル対応しているWebサイトを評価するようになりました。
レスポンシブデザインでなくともスマートフォン用のページがあればよいのですが、レスポンシブデザインで制作するということは、スマートフォン対応をするということなので、自ずとモバイルファーストを意識できます。

さて、ここまでレスポンシブデザインとはどういうものか、そしてメリットをお伝えしてきました。
とはいえ、必ずしもレスポンシブデザインでWebサイトを制作しないといけないわけではなりません。

ときにはレスポンシブデザインで。時にはパソコンとスマートフォンは別々のURLのページで。
閲覧者に提供したい体験・内容などを考慮してWebサイトを制作していきたいですね。

これもまたレスポンシブデザインなのかもしれません。ばぶぅ。