サイトリニューアルをレスポンシブWebデザインで

2012/07/03

こっそりとサイトをリニューアルしました。今回のリニューアルでは、レスポンシブWebデザインを採用してみました（でもリニューアルしたのが2月です）。一部の人たちにいろいろとバレつつあるので[謎]、リニューアルのときのメモと、次回に向けての課題をまとめてみました。

課題 - グリッドについて

はじめは、Semantic Grid Systemをカスタムして使おうとしてみました。しかし、Semantic Grid Systemなどを使っても%でのレイアウトではほぼ100%ずれるケースがありました。

Semantic Grid Systemではレイアウト幅100%を前提にしたシステムなので、仕事で使うのはちょっと厳しいかもしれません。たとえば、コンテンツの幅が90%相当の場合は、場所によっては数値の補正をいれなければいけません。そういう計算をしても結局こまかいところがずれるので使用を断念しました。

いままでのPCサイトだと、960pxのグリッドがベースになる場合が多いのですが、960pxベースだとどうしても端数が多いと細かいところでずれてしまうのが問題です。

課題 - 画像

今回は、画像を使うのをできるだけやらないようにしました。基本的にはロゴと写真、アイコンくらいです。

今回はAndroid 2.xにも「一応」対応するという形にしているのでロゴはpng画像です。Android 4.xではSVGに対応していますが、Android 2.xではSVGには非対応です。

次回はロゴをSVG画像にしてみようと思っています。
本当はWebフォントにしたいのですが、ライセンスの問題でアウトでした。

フォントによってはライセンスでWebフォントにできないものがあるので注意する必要があります。

また、アイコンをWebフォントにしようと思っています。

写真については、色数を落とすなどの工夫がありますが、Letina Displayだとどうしても画像がぼやけるなどの点があります。これはresponse.jsを使うのが、現状一番問題の無い方法だと思います（response.jsもちょっと微妙な課題があるが、それはそのうち別記事で）。

失敗したところメモ - box-shadow

はじめは、ボタン部分にbox-shadowをborderの代わりに使っていました。しかし、ブレイクポイントを変更したときにbox-shadowを上書きしようとしましたが...。

box-shadowは上書きしないで追加指定という形になるのですね。これは知らなかったです。

課題 - ソーシャルプラグインボタン

今回はそのままでしたが、ソーシャルプラグインボタンは自作ボタンを使う方がいいのかなと、思います。

モバイル・タブレット・デスクトップでデザインを変えた方がユーザビリティ的にもデザイン的にも問題が無いかと思います。将来、スマートテレビが出てくると、いまのボタンだと押せませんし。

モバイルでデザインと押しやすさのバランスのとれたボタンが、デスクトップではデザインと押しやすさのバランスがいいボタンとは限りません。

そこで自作ボタンを作りたいという養母が出てくるのですが、自作ボタンでカウント数を入れることにこだわるとややこしくなります。とくにGoogle+ではハック的なものしかないので注意しないといけません。

カウント数の表示さえ割り切れるなら、自作ボタンで好きなようにデザインできます。

課題 - LESS

今回はLESSを使ってみました。LESS/SASS自体は悪くないですが、細かい場所で面倒です。

計算式によっては端数まで計算します。端数はブラウザによって切り上げ切り下げのちがいがあるようです。

LESSでは、工夫するとファイルのイングルートもできます。

また、LESS/SASSを使うと、案件によってはLESS/SASSが理解できないクライアント・別の作業者がいるので使うところが難しいです。

結局、LESS/SASSを使ってResponsive Web Designの案件をこなすのは、少し早いのかなと思っております。できないわけではないですが、フリーランスなので、他の作業者と共通の理解ができてから採用しようと思います。

まとめ

レスポンシブWebデザインのサイトを制作することは、HTML/CSSの基礎がしっかりしていて、こつを理解していれば、あまり難しくはありません。

難しいと思うのは、レスポンシブWebデザインのサイトを制作するのに必要なノウハウがたまっていないからではないでしょうか？

実際、いくつかレスポンシブWebデザインの案件をこなしてきましたが、失敗したと思った部分や課題はまだまだたくさんあります。それは別の記事で。

たとえば、ナビゲーションにもいくつものやり方があります。どれがベストではありません。また、テーブルに関しては、完全な解決策はまだないです。Android2.xやWindows Phone 7.xが原因で表示上の制限が。

いずれにしても、Responsive Web Designのサイトを制作しなくない、というWebデザイナー/コーダーはお仕事がこなくなるかもしれません。まずは挑戦してみてはどうでしょうか？