Cntlog > スキルアップ・ノウハウ > コーディング > このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました

このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました

先日フレームワークの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切り替えるウインドウサイズの値の事を指します。

[例]
@media (max-width: 980px(←の数字がいわゆるブレイクポイント)) {
ここに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つのブレイクポイントに熱い情熱を注ぎこみたいなって事です。

あっ、でもお金たくさんもらえるならブレイクポイント増やせますからw
なんかIE6対応みたいですねw

一つだけのブレイクポイントで作るやり方

一つだけのブレイクポイントでと言うよりも実際はPC用とスマートフォン用のレイアウトを切り替えるためのポイントです。

この場合スマートフォンのレイアウトはリキッドレイアウトで作ります。
※PCは固定でもリキッドレイアウトでもどちらでも良いです。

切り替える時に気をつける事
・メインのwapperのwidthを100%にする。
・切り替わったときにカラム落ちするコンテンツ、しないコンテンツを決める。
・カラム落ちしたコンテンツとのmargin-bottomのスペースをどうするか決める。
・文字サイズを変更する必要があるかコンテンツを見極める。

以上、これだけです。

サンプルを作って見て最低限必要かなと思ったのはこのくらいでした。
もちろん実際に制作をするにはこれだけでは済まない事もあるでしょうが、フレームワークとして使うにはこのくらいの機能で十分という気がしています。
これだけシンプルだからこそローコストでレスポンシブデザインに対応できると考えているわけです。

切り替えるときの話ってわけじゃないですが、「box-sizing」を使う。とpaddingを使ってもwidthの値が加算されないのでリキッドレイアウトをするには最適かなと。
box-sizingはIE8から使えますよ。

あとがき

自分の理想のフレームワークを作るにあたって、サンプルを作ってありますので興味ある方はどんな感じに動いているのか確認できます。
サンプル
このレベルのレイアウトであれば~2時間もあれば準備できるくらい簡単です。
※サンプルのブレイクポイントは800px,1200pxの2つで作ってあります。

関連記事

RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...