レスポンシブコーディングで感じる悩ましさ
※この記事は、完全に分業されたHTMLコーダーの目線で書いています。スタートアップやサービス運用、フレームワークを使ったアジャイル開発などでは事情が違うこともあります。
一言で「レスポンシブ」と言っても、その実装には数多の種類があります。そして、HTMLコーダーが仕様通りに組んだものが、デザイナーの想像するデザイン通りになっているとは限らない、というケースがあります。
スマートフォン用のデザインがあり、それをCSSとして表現する場合、
- デザインデータに合わせて、CSS上でもピクセル(px)で書くのか
- vwやremを使って、端末の違いを吸収するのか
をまず選択する必要があります。
組みやすさや仕様重視だと前者が一般的になるのかな？と思うのですが、文章の改行位置まで計算されたデザインだと、画面幅の違いによってズレが出てしまっては困りますね。そこで、画面幅に合わせてあらゆるCSS上の数値を可変にして、どんな端末でも(ある程度)同じように見せる方法として、後者の技法が生まれました。
デモサイト作ってみた
さて、ここまでは昨今のWeb業界に関わっている人なら常識のはずです。
でもこの事象って、言葉で伝えるの難しくないですか？パターンが分かっている人同士なら、「SP版はvwでやっといて」くらいで伝わります。でもそうでない人は、それぞれにどういう問題があるか説明して、それぞれ実装されたサイトを見て初めてイメージできるようになります。
そこにタブレット版がどうだとか、PCでも大きいモニタだとどうなるとかの説明・・これが煩わしい！ので、こういった仕様を変更しながら確認できるデモサイトを作ってみました。
※PCのブラウザでの閲覧を想定しています。
できること
- スマートフォン版のpx/vwの切り替え
- タブレット版をPC/SPのどちらに寄せるか、の選択
- PCでもvwを使ったらどうなるか、のプレビュー
ついでに、実案件でよく見たことがある、仕様が不確かなまま降りてきやすいものをプレビューできるようにしています。他にも思いついたら追加予定です。
- ヘッダをスクロールに追従させるかどうかの指定
- メインビジュアルの高さの指定(固定、成り行き、100vhから選択)
頭の中に思い浮かべてるものって共有が難しいし、そもそも具体的じゃなかったりするので、こうやって実際にデモサイト上で確認しながら仕様を決めていければ、みんなハッピーになれるんじゃないかなーと思ってます。
Discussion