レスポンシブウェブデザインという言葉をご存知でしょうか?
レスポンシブウェブデザインとは...
現在、ウェブサイトを閲覧するとき、PCだけではなくそれよりも画面サイズの小さいスマホやタブレットを使うモバイルユーザーが増えています。
そのような状況の中、どんなデバイスにも使いやすく見やすいウェブサイトにするために必要な技術として生まれた言葉です。
仕組み
1つのHTMLでCSSはデバイスごとに用意して表示を変えさせます。
サイトの内容は全て同じですが見せ方が異なります。
この時、CSSで表示幅や文字の大きさ、レイアウト、ボタンの位置などををコントロールすることになります。
メリット
サイトの保守(管理)が楽
PC用のサイトとモバイル用でHTMLは1つなので修正が発生したとしても作業は1つのファイルだけで済みます。
検索エンジンで上位に表示されるために有効
モバイルフレンドリーやモバイルファーストインデックス対策になる。
モバイルフレンドリー:スマホでも見やすく、使いやすく、早いことを測るアルゴリズムでこれが低いと順位が下がる。
モバイルファーストインデックス:PCよりもスマホなどのモバイルを主軸にSEO評価を測るアルゴリズムで、これからはモバイルサイトもしっかり作らないと順位が下がる。
デメリット
各々のデバイスに合わせてCSSを作成するためテストなどに工数がかかる。
当サイトもレスポンシブウェブデザインを採用し制作しています。
今回は、Googleも推奨しているレスポンシブウェブデザインとはどういうものかを理解していただければいいかと思います。
次回はそのレスポンシブウェブデザインの書き方などを紹介したいと思います。