そのサイト？レスポンシブデザイン？

こんにちは、taichiです！！

みなさん最近、レスポンシブWEBサイトってよく耳にすることありませんか？
自分は、WEBエンジニアなんで、もちろん毎日耳にしてます！！

今回改めて勉強する機会がありましたので、
簡単ではございますが、説明させていただけたらと思います。

Q.「レスポンシブWebデザイン」とは、

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、
異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。

つまり、WEBサイトを見に来た人（端末）に合わせて、
サイトの側が、見やすいように親切に表示を変えてくれるってことですね！！

現在は、ほとんどのWEBサイトがレスポンシブ対応しているので、
そうじゃないサイトの方が少ないかもしれませんね。

そもそも、ほとんどの人からしたら、あたり前じゃないの？って思う人多いと思います。

実は、各端末によって表示するデザインを変えて見せることで、
ユーザーに対してストレスなく使える用にしているんです！！
我々がWEBエンジニアが、意識して作っています！！

昔は、PCと携帯は、別々のWEBページを使用していました！
ガラゲー時代ですね。自分はDocomoだったので、i-mode懐かしい。笑

その時代は携帯の容量などの問題もあり、PCで見るようなサイトを携帯で見ると
すんごい重たくて、表示されてもちゃんと見れませんでした。
頑張って見てもめっちゃ小さかったり大きかったりして読めなかったこと覚えています。

そのため、別々のURL（WEBサイトのアドレス）が存在して、
PC版のページ　携帯（ガラゲー）版のページを作る必要があったわけです！

そして近年では、スマートフォンなどの発達により、
PCと携帯（現代ではスマートフォン）は同じ環境下でインターネットを利用できる用になりました。
※現在でもガラゲーは除く、そもそも携帯の概念が（スマートフォンに移り替わったので）

そこで、同じサイトをどの端末を見れる用になったことで、
変えることのできない１つの問題が出てきました！

そう、画面の大きさです。
パソコン、タブレット、スマートフォンといった用に、
画面の大きささが異なるので同じページでも、見え方が同じだと、
困りますよね？パソコンはマウスやポインタ（カーソル）操作なんで、
同じ表示のままだと、スマートフォンの指での操作だと小さいボタンなんか押しにくないですか？
他にも、いろいろな弊害が…

「では、また別々のURLで各端末ごとにWEBサイトを作り必要があるの？」って？
いいえ違います。そんな問題を解決したのが、レスポンシブWEBサイトです。

同じWEBサイトでも画面の表示の大きさごとに、切り替えて表示することで、
各端末ごとに別のWEBサイトを作る必要がなくなりました。

現在何気なく、使用しているスマートフォンで
自分たちが見ているWEBページがそんな風にできていることに驚きませんか？

もちろんまだ、レスポンシブ非対応のWEBサイトもあるので、
皆さんWEBサイトを見る時は、このサイトはレスポンシブなのかどうか、
PCの画面とスマホの画面を見比べて見ても面白いかもしれませんね。
スマホとPCで見え方の違いを探すのも楽しいですよ。

他にも、説明することはありますが、長くなっちゃうので今日はこのへんで失礼させていただきます。