はじめまして！Webデザイナーのヒロです。
WebサイトをPCだけでなく、スマートフォンやタブレットで見るのが当たり前の時代になりましたね。
今回は、2020年のレスポンシブWebデザインについて、最新の情報をお伝えします！
Webクリエイターとして、スキルアップや独立、副業を考えている人にとって、すごく大切な内容になるので、ぜひ覚えておいてください！
レスポンシブWebデザインとは？
レスポンシブWebデザインとは、Wikipediaでは以下のように説明されています。
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部としての閲覧者の近さがRWDの延長部分と見なされている[1]。ニールセンノルマングループは、「コンテンツ、デザイン、そしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。
Wikipedia
つまり、
- さまざまな画面サイズで、Webサイトをきちんと見れるようにする
- 1つのWebサイトを、さまざまなデバイスに対応させる
と言えますね！
ちなみに、Webサイトがどのデバイスで見られているか判定する方法は、いろいろあります。しかし一般的には、CSSのメディアクエリ（Media Queries）という機能を使って、レスポンシブWebデザインを実現します。
CSSのメディアクエリ（Media Queries）ってなに？
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLと組み合わせて使う言語です。
CSSは、文字の色やサイズ、レイアウトなど、HTMLで表示したWebサイトの「スタイル」を指定する機能があります。
そのCSSの機能の１つに、Webサイトを表示するデバイスの、画面のサイズや解像度などによって、「スタイル」を切り替える機能があります。その機能を、メディアクエリ（Media Queries）と言います。
メディアクエリ（Media Queries）の使い方を詳しく知りたい人は、こちらの記事をご覧ください。
レスポンシブWebデザインのメリット
今では、多くの人がスマートフォンを持ち歩いています。
そのため、モバイルフレンドリーなWebサイトにすることは欠かせません。
GoogleもモバイルフレンドリーなWebサイトであるために、レスポンシブWebデザインをお勧めする理由を、こちらの記事で説明しています。
簡単にまとめると、以下の6つにまとめてみました。
- スマートフォンで、Webサイトが見やすくなります。
- スマートフォン・タブレット・PCで、URLが分かれず、1つになるので、SNSなどでのWebサイトの共有が簡単になります。
- スマートフォン・タブレット・PCで表示するHTMLが同じになるので、ページをメンテナンスしやすい。
- 各デバイスごとに対応したページにリダイレクトをさせる必要がないため、ページの読み込み時間を短縮できたり、リダイレクトのエラーが発生する恐れがなくなります。
- Googleは、レスポンシブルWebデザインに対応しているWebサイトを、モバイルフレンドリーなWebサイトとして、優先的にインデックス登録を行います。そのため、モバイル用のページが存在することをGoogleのアルゴリズムにわざわざ伝える必要がありません。
- Googlebot がサイトをクロールするために必要なリソースを節約できます。つまり、それによって、Google によるクロールの効率が上がり、Webサイトのコンテンツがより多くインデックスに登録されます。
ちなみに、あなたのWebサイトがモバイルフレンドリーかどうか、こちらのGoogleのサービス「モバイルフレンドリーテスト」から、確認をすることができます。ぜひチェックしてみてくださいね！
レスポンシブWebデザインに向いているサイトとは？
レスポンシブWebデザインは、ブログやランディングページ、ECサイトなど、スマートフォンで見ることができる、すべてのWebサイトにおすすめです。
ただし、PCだけで表示するWebサイトなど、ある特定のデバイスでしか見れないWebサイトにとっては不要でしょう。
次回からは、レスポンシブWebデザインを作る上で、気をつけておいて欲しいことをお伝えしますね！
コメント