読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

最近自分の中でレスポンシブWebデザインが熱い【今更感】

webデザイン

どうも、@とよしー です。

ちょうど FX のブログを Wordpress に移して2ヶ月ほど経ちました。おかげさまであちらのブログの方はもりもり育っています。Wordpress といえば、そのカスタマイズ性が特に注目されます。豊富なプラグインや、テーマなど簡単な操作で、自分好みにカスタマイズできます。

僕ももちろん、結構な数のブログのテーマを漁りました。今は落ち着いていますが、ピークの時には毎日のようにテーマを変更しては、漁ってを繰り返していました。このテーマを漁っていた時に初めて、今回紹介する「レスポンシブWebデザイン」というものを知りました。

レスポンシブWebデザインって?

僕が今勉強に使っている「レスポンシブWebデザイン「超」実践デザイン集中講義」という書籍ではこう紹介されています。

レスポンシブ Webデザイン(Responsive Web Design:RWD)とは、PC、タブレットスマートフォンといった画面サイズの異なる各デバイスに対して、それぞれに最適化されたサイトを実現するための制作手法の1つです。 

ようは、 最近、いろんなサイトで目にするアレです。

と、言っても全然通じないので、一例を紹介したいと思います。例えば、Microsoft のサイトはRWDが採用されているサイトです。

Microsoft

PC での見え方

f:id:tktyo:20140723200150p:plain

 

タブレットでの見え方 

f:id:tktyo:20140723200040p:plain

 

スマホでの見え方

f:id:tktyo:20140723200049p:plain

わかります?

同じURL なんですけど、各解像度で webサイトのデザインが最適化されています。PC での見え方に比べて、スマホタブレットでの見え方は、メニューが省スペースになっており、ボタンも大きく、タッチを意識したデザインになっています。

僕はまだまだ勉強中ですが、こんなかんじのRWDのサンプルサイト作ってみようと思ってます。ズブの素人でどこまでできるかなわかりませんが、進捗をこのブログで公開していこうと思います。追々、RWD を制作するときに便利なツールの紹介などもしていきたいと思ってますので、お楽しみに!