レスポンシブデザインというものがようやく少しだけわかってきた


年月に合わせて変化するネギ

最近ウェブデザインについての話とかで耳にする機会が増えてきた言葉「レスポンシブデザイン」

今まで何となく耳にしていたのですが、一体これがなんのことなのかよくわからんくて、まぁデザインとかあんま興味ないからどうでもいいかー、なんて考えていました。

そんな中、つい先日ブログデザインのリニューアルを行って、その際にようやく「レスポンシブデザインとはなんなのか」みたいなことが少し理解出来たので、簡単にまとめてみます。

レスポンシブデザインとは

レスポンシブデザインってなんなのか。

簡単に言うと、見てる機種に合わせて勝手にデザインを変更してくれるもの。

スマートフォンが流行して、スマートフォンでネットする人が増えてきて「スマートフォンで見やすいサイト」を、わりと簡単に実現するための、わりと簡単な方法。

たとえば、WordPressのデフォルトテーマ「TwentyEleven」は「レスポンシブデザイン」のブログテーマ。

これを使えば、パソコンで見たら「フツー」なデザインに、スマートフォンで見たら「スマートフォンぽい」デザインで表示される。

これが、プログラムを作って「別々のデザイン」をするんじゃなくて、「デザイン」に使うCSSというものだけで「条件分け」をして、無理矢理一個のデザインだけで2種類とかそれ以上のデザインパターンを作ってしまうというもの。

これがレスポンシブデザイン。(大雑把なニュアンスです)

パソコンで横幅を小さくして試してみよう

レスポンシブデザインてのは大抵「横幅」によってデザインが変わる仕組みになってる。

「普通は横幅が大きい」パソコンで表示すればいわゆるパソコンで表示されて「普通は横幅が小さい」iPhoneとかで見れば、それ用のスマートなデザインで表示される。

なので、たとえばパソコンのブラウザで横幅を徐々に小さくしていくと(大抵は)あるタイミングで文字の大きさが変わったり、横にあったメニューバーが下に移動したりと、そういう「賢い」動作をしてくれます。

オリジナルなデザイン作るときは知っておくと便利

で、このレスポンシブデザイン。こんなことを実現してしまったというのは凄いことなのですが、デザインをカスタマイズして自分用のものを作ろうとするときには、これがあることでかえって苦労してしまったりするのです。

ようするに、私がリニューアル作業をしてるときにも、この「レスポンシブデザイン」のおかげで、すっげー色んなところで悩んで苦労して涙を流しながら、最終的にはレスポンシブデザインの仕組みそれ自体を全部削除することになったという、ぼくが凄い大変だったんだよ、ってことを話したかったわけです。

WordPressでオリジナルデザインを作るときには、テンプレートTwentyElevenにはご注意下さい。

また、裏を返せば、TwentyElevenを使えば、なにもしなくてもそれなりにいい感じにスマートフォン向けのページを作る事も出来る、ってことも知っておくと便利な事かもしれません。

参考

ブログデザインをリニューアルしました | goryugo.com

Introduction to Responsive Web Design

この記事を書いた人

五藤隆介(goryugo)

「仕事効率化」「ライフログ」「家族Hack」「デジタル情報共有」みたいなことを書いてます。

面白い本について語るPodcast「ブックカタリスト」も始めました

iPad Workers

月額15ドル/年額120ドルで月1回のiPadオンラインセミナー
受講&iPad活用のヒントになる情報をお届けします。iPad Meetup(Zoom座談会)も開催します。
ライスワークやライフワークにiPadを活用したい人におすすめのコミュニティです。