1000ポイントもらえる得しかないキャンペーン

Amazonチャージで5000円以上チャージすると1000円分のポイントがもらえるぞ!

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考

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

Introduction to Responsive Web Design

この記事を書いた人

五藤隆介(goryugo)

愛知県在住1980年生まれ。

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

2014年に結婚して料理を覚えて、理系の料理という本を書きました。

年に1〜2回子連れで長旅をするようになり、新しく旅行・お出かけブログも作りました。

2018年4月からはPodcastも配信中。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

Kindle Unlimitedで読めるオススメ本

これまでにKindle Unlimitedで読んだ本の中から、確実に楽しめるオススメ本をまとめました。