簡単レスポンシブWebデザインのすゝめ

• 2014年12月22日 18:48
• Webデザイン

Tweet

リキッドレイアウトは手間がかかる

昨今、Webのデバイスはドンドン増えてきています。AndroidやiOS、WEBOS、モバイル、タブレットなどなど。そして、1人が使うデバイスも複数になり、そしてさらに、コンテキスト(外で使う、電車内で使うなどの環境)も増えてきています。

これらデバイスすべてを判定し、そしてすべてに対応することはほぼ不可能になってきています。そういった流れから「レスポンシブWebデザイン(以降RWD)」が出てきました。

しかしこのRWD、なかなかに複雑でめんどくさい！何がめんどくさいって、「リキッドレイアウト」がとてもめんどくさいです。

例えば横幅を700pxにしたい場合、通常であれば「width: 700px」とすればいいですが、リキッドレイアウトの場合は、例えば親要素が800pxだったとするなら、「width: 84.84%(700÷800×100)」となります。絶対値ではなく相対値で設定するのです。

まあ、これくらいならいいですが、マイナスマージンを使うとなると「えーと、横幅700pxでmargin50pxだから、親要素が800pxでマイナスマージンを50pxだから850pxになって、えーと、...ウキー！」と叫びそうになります。僕はなります。

お金はないけどスマホ対応はしたい

昨今、クライアントから「スマホでも見やすくしたい」と要望が来ることも珍しくありません。当然、制作工数はPCサイトのみよりも増えます。その分費用がいただければいいですが、クライアントさんの財布もなかなか厳しいです。

そこで「じゃあ、スマホで見た時に治したい要素だけ対応しよう」と、工数削減に考えたのが、リキッドレイアウトを使わないRWD(簡単RWD)です。

やっていることは下記の2つのみです。

• 文字サイズを見やすいサイズに大きくする
• 小さな画面に収まるようにナビゲーションを移動

逆にやらないのは下記の2つです。

• リキッドレイアウトはなるべく使わない
• 段組み換えもなるべくやらない
  

リキッドレイアウトを使わないRWD(簡単RWD) 画面構成

図にするとこんな感じです。

PC、タブレットのパターン

スマホのパターン

スマホのパターンは適宜選択です。

簡単RWD サンプル

スマホのことを考えると、mainのカラム数は2つまでに収めておいたほうがいいです。
上記「②スマホ(〜480px)」にあわせて実際に作成してみました。
※スマホ版は実機 or エミュレーターで見て下さい。PCではまともに見られません。

• 簡単RWD サンプル

まとめ

簡単RWDが利用できる案件は限りがあるかもしれませんが、クライアントさんの予算に合わせて利用してみるのもいいかと思います。前回の「利益の出るウェブ制作ワークフロー」の考え方とは合っていないかもですが「出来ません」とはなるべく言いたくないですからね。

Tweet