レスポンシブの次はアダプティブ? 新・3大「Webデザイントレンド」

Rawpixel/Shutterstock
 

2.レスポンシブWebデザイン

レスポンシブWebデザインについては、ここ1、2年で知らない方はいなくなったでしょうけど、軽く説明させてもらいますね。

パソコン・スマートフォン、タブレットなど、デバイスに応じて最適化したレイアウトを表示させるデザイン手法で、ブラウザの横幅サイズを判断基準にしてCSSを切り替えて表示させます。1つのHTMLでの管理が出来るため、サイト完成後の修正やメンテナンスには効率的ですが、複数のデバイスに対応するため、設計や構築に時間がかかったりしますし、データ的にもデバイスの中で一番容量の重いものを読み込んでいるので、表示に時間がかかる時があります。

webデザインの制作に関わってらっしゃる方はよくご存知でしょうけど、そうでない方はわからない方もいるかもしれませんので、もう少し具体例など上げてご説明しましょう。

星のや軽井沢

この記事をスマホで見てくださってる方が、そのまま上記のURLをスマホでご覧になれば、まさに「縦一列のレイアウトでスマホ用に見やすくデザインされている」と感じるでしょう。

しかし、今PCでメルマガを読んでくださってる方が、このサイトをPCでご覧頂くと、「季節のみどころ」の部分など4列にレイアウトされ、PCに丁度良いデザインとして見えてくるはずです。

このように、同じHTMLからデバイスごとに(表示ブラウザの横幅により)スマホ用とPC用のCSSを切り替えて表示して、ユーザーがどんなデバイスを使ってても対応できるようにしているわけです。

PCで「星のや」のサイトを見ている方はブラウザの横幅を、スマホの横幅程度に横幅をぐぐっと狭めてみてください。

「季節のみどころ」で4列にレイアウトされた写真が、ある横幅サイズのポイントで1列(カラム)に並んでいくのが確認できるはずです。簡単に言えば、こういう形式のデザインを、レスポンシブWebデザインと呼ぶわけです。

デバイスが複数存在し、スマホやタブレットなどの使用者が増加している今現在は、レスポンシブWebデザインの流れはしばらくは続くでしょう

>>次ページ あくまでも暫定的手法である「レスポンシブWebデザイン」

print
いま読まれてます

  • レスポンシブの次はアダプティブ? 新・3大「Webデザイントレンド」
    この記事が気に入ったら
    いいね!しよう
    MAG2 NEWSの最新情報をお届け