先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。
Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。
確認してみて驚きました。
大きく変わっているというか、他のフレームワークとくらべても大きく違う設計をされていていました。
変更点はモバイル用（768px以下のウインドウサイズ）をベースに書き、それ以外のサイズを個別にMedia Queriesで書くと言うものです。
フレームワークの多くはベースのCSSを書いてから、個別のウインドウサイズ用にMedia Queriesで追記していきます。
ウインドウサイズ別にMedia Queriesを設定する必要があるのでこの手のフレームワークはコードの量が増えてしまうものですが、Responsive Grid Systemは違います。
今回の変更でブレイクポイント（ウインドウサイズで切り替わるポイント）を一つだけにして、非常に読みやすいフレームワークとなっています。
フレームワークを使うと意図しないところで干渉して、わけが分からなくなる事もありますが今のResponsive Grid Systemではその心配は少ないでしょう。
他にもコレはと思ったのが、モバイルファーストな設計な事です。
レスポンシブデザインではこのモバイルファーストという設計を取られる場合が多いです。
モバイルファーストというのは、名前の通りモバイル用のレイアウトから考え、それをPC用に展開すると言うものです。
レスポンシブデザインを初めて行おうとするとPC→モバイルのレイアウトを設計しがちですが、実際に行なってみるとなかなか上手くいきません。
モバイル用のレイアウトを先に考えることで、そのサイトでは何が重要かを見極めるタイミングも作れますのでオススメです。
何よりモバイルは表示できるスペースが少ないので“何を”、”どの順番”に表示させるかがとても重要です。
話が逸れました。
モバイルファーストはレスポンシブデザイン向けの設計なので、このResponsive Grid Systemは非常に適したフレームワークということです。
しかし、このフレームワークを使っていて大きな問題に遭遇しました。
Media Queriesが使えないブラウザの存在
そうです、IE8とかです。
美しい設計だったのでキャッキャうふふして、試していたのですがサンプルを作っている途中でIE8ではMedia Queries使えないということに気が付きました。
いや、モバイル用のレイアウトがIE8表示されてしまっても良いって方がいる場合はいいんですけどね…。
css3-mediaqueries.js を使えば良いと思われる方もいるとでしょうが、css3-mediaqueries.jsは処理が非常に重いのでデフォルトで動作させたいものではありません。
PCスペックが低い場合は特に処理の重たさが目立ちます。
ですので、デフォルトでMedia Queriesを使うような設計は避けるべきという判断に至りました。
それでもResponsive Grid Systemを使いたいと思った理由
それでも私はResponsive Grid Systemを使います。だって恋してますから。
確かに現状のままでは私が理想とするフレームワークとは異なります。
ですが、デフォルトのレイアウトをPC用で書き、別でモバイル用のレイアウトをMedia Queriesで設定すれば、理想に近いフレームワークになってくれます。
もともとコードの量も少ないので修正は簡単に行えました。
※正直製作者の意図を汲み取らない使い方とも言えますので、良い方法とは言いがたいです。
私が理想としているレスポンシブデザイン
レスポンシブデザインで作るのは結構大変です。
だからできるだけ簡単に行えるようにしたい。というのが私の理想です。
複雑になってしまう原因の一つはブレイクポイントの存在です。
レスポンシブデザインで言うところのブレイクポイントとはCSS切り替えるウインドウサイズの値の事を指します。
- ［例］
- [css]@media (max-width: 980px（←の数字がいわゆるブレイクポイント）) {
ここにCSSを書くと設定したウインドウサイズの時だけ適応されます。
}[/css]
- ブレイクポイント
- ブレイクポイントはスマートフォン用、タブレット用、PC用で切り分ける事が多いです。
特に規定が存在するわけではありませんが、例として以下のような値で切り分けたりします。
320px、480px、600px、768px、800px、960px、1200px
※切り分けている数が多いのは画面を横にした時のウインドウサイズや端末毎のウインドウサイズが決まっているわけではないため細かくなっています。
ブレイクポイントが多ければ多いほど記述するCSSが増えるのでどうしてもコストがかかってしまいます。
ですので私はレスポンシブデザインをするときは1つのブレイクポイントで作ってみたいと考えています。
それだから私はResponsive Grid Systemに恋したんです。
私がブレイクポイントを1つだけにする理由
- 一番の理由はコスト削減
- ブレイクポイントが多ければ書くCSSの記述が多くなるのももちろんですが、それに対するデバックの時間も増えます。
ブラウザ毎のチェックもしなければいけませんし、新しいページを制作するのにも時間と手間がかかってしまう場合があります。
更新に時間がかかってしまうようでは、運営に影響してしまいます。
レスポンシブデザインってのは面倒な事も多いのです。
- メンテナンスがしやすい
- CSSを書く人はできるだけコードを減らすのを心がけていると思います。
それはサボりたいからではなく、書く量を減らすことで、コードを読みやすくしてメンテナンス性を高めるためです。これはMedia Queriesでも同じ事が言えます。というかMedia Queriesを追加して書くとコードが非常に読みづらくなります。
コードの量が少なければ担当以外の人がコードを触る場合もミスが減りますので安心できますね。特定の人しか触れないコードなんてダメですよね。
- レスポンシブデザインへの思い
- レスポンシブデザインはたくさんブレイクポイントがあるにもかかわらず、大きく画面レイアウトが変わるのはPC→スマートフォン（タブレットも含む）が主です。
レイアウトを変えたいっていうのはPCとスマートフォンの事を指していますよね。
※PCと言っても1200px以上のウインドウサイズ用に別で用意する場合もありますが今回はその話は抜きで。ホームページをよく見せるのは当たり前です。でも綺麗に見せるために安易にデメリットがあることをきちんとわかってほしい。
近年WEB制作の予算は下がっているように感じます。
それでもコストのかかるレスポンシブデザインを取り入れたいと言ってくれる人はいます。
ありがたいお話です。ですがレスポンシブデザインにこだわればこだわるほど、コストがかかってしまうのが現実です。
予算がないから今回は安くしてくれと言われても中々できるものではありません。そもそもレスポンシブデザインは理想の形でも、完璧なものでもありません。
レスポンシブデザインは妥協ですよ。
通信量であったり、レイアウトであったり、ボタンなどのデザインであったり最適化されたスマートフォン用のホームページには敵いません。
それでもレスポンシブデザインを取り入れたいと言う人は一回の更新で端末に束縛されないでにきちんと見てもらいたいと言う気持ちがあるから選んでいるんですよね。
流行りっぽいから取りあえず入れてみるっていうのは失敗の元です。デメリットがきちんとついてます。
作ったサイトがあの端末だから見辛いと言われてしまうともったい気気持ちになってしまいます。
だからこその1つだけのブレイクポイント。
ただ1つのブレイクポイントに熱い情熱を注ぎこみたいなって事です。あっ、でもお金たくさんもらえるならブレイクポイント増やせますからｗ
なんかIE6対応みたいですねｗ
一つだけのブレイクポイントで作るやり方
一つだけのブレイクポイントでと言うよりも実際はPC用とスマートフォン用のレイアウトを切り替えるためのポイントです。
この場合スマートフォンのレイアウトはリキッドレイアウトで作ります。
※PCは固定でもリキッドレイアウトでもどちらでも良いです。
- 切り替える時に気をつける事
- ・メインのwapperのwidthを100%にする。
・切り替わったときにカラム落ちするコンテンツ、しないコンテンツを決める。
・カラム落ちしたコンテンツとのmargin-bottomのスペースをどうするか決める。
・文字サイズを変更する必要があるかコンテンツを見極める。
以上、これだけです。
サンプルを作って見て最低限必要かなと思ったのはこのくらいでした。
もちろん実際に制作をするにはこれだけでは済まない事もあるでしょうが、フレームワークとして使うにはこのくらいの機能で十分という気がしています。
これだけシンプルだからこそローコストでレスポンシブデザインに対応できると考えているわけです。
切り替えるときの話ってわけじゃないですが、「box-sizing」を使う。とpaddingを使ってもwidthの値が加算されないのでリキッドレイアウトをするには最適かなと。
box-sizingはIE8から使えますよ。
あとがき
自分の理想のフレームワークを作るにあたって、サンプルを作ってありますので興味ある方はどんな感じに動いているのか確認できます。
サンプル
このレベルのレイアウトであれば~2時間もあれば準備できるくらい簡単です。
※サンプルのブレイクポイントは800px,1200pxの2つで作ってあります。