WEB担当の徳山2号です。
今日は、レスポンシブサイトについてちょっとお話したいと思います。
聞き慣れない方もいらっしゃるかもしれませんが、レスポンシブWEBとは、各種デバイスでの見え方をCSS3(Media Queries)で制御するため、PC用、スマホ用、タブレット用とそれぞれの専用ページを用意する必要がないWEBの手法の1つです。
”リキッドデザイン”と似ているようで似ていません。
リキッドデザインの場合は、ブラウザの幅によって横幅が可変しますが、各デバイスに応じて要素の表示・非表示などは出来ません。
一方レスポンシブwebの場合は、各種デバイスごとに幅も見た目も可変させることができ、各要素の表示・非表示なども出来ます。
メリットもあれば、デメリットもあるのは確かです(スマホなどでは表示が遅くなる可能性があるなどなど)。
ただ、断然メリットの方が大きいと私は思います。
一昔前までは、WEBといえばPC専用のみの作り方でOKでした。それぞれのブラウザバージョンで崩れていないか?のチェックだけだったと思います。
ただ、今はスマートフォン・タブレットが普及し、その機器を利用してWEBを見る機会も増えましたよね。それらがあれば充分ネットは見れるから、わざわざ高額なPCを買わなくてもいいという方も少なくないはず。PCだと使用してる間ずっとその前に座っていないといけませんが、スマホやタブレットだと、どこにでも持ち運べますものね。
経験ある方も多いと思いますが、スマートフォンやタブレット用の対策をしていないサイトは、例えばスマホで見た時に、ページがギュッと縮小されて文字がちぃ~~~~~~~さく、というか全てが小さ~~~くなりますよね。どうしてもそのサイトの内容を見たい時は、いちいちズームしなければいけません。
そんな煩わしいことがないように、WEBの作りも、その時代に合わせなくてはいけません。
PCならPC用に、スマートフォンならスマートフォン用、タブレットならタブレット用として最適な見え方に。
ちょっと小さいですが、この画像が当サイトblogコンテンツページのスクショです。一番上がPCでの見え方、左下がiPad、右下がiPhoneでの見え方です。
各種デバイスによって、配置、並びが変わっているのがお分かりでしょうか?
要素の表示・非表示がデバイスごとに出来ると上で述べましたが、iPhoneではアイキャッチと呼ばれる画像を非表示にしています。こういうことが出来るんです。
またiPadの縦からは、1カラムのレイアウトに切り替わり、「MENUボタン」クリックでグローバルメニューが出現する仕組みです。
iPadの横向きはPCの見え方とほぼ同じなので、画面の向きをロックしていなければ、iPadを回転する度に、横用レイアウト・縦用レイアウトと切り替わります。結構おもしろいですよ(笑)
という訳で・・・・またお会いしましょう(笑)
カテゴリ: WEB担当のヒトリゴト