レスポンシブWebデザイン

[イチヒロー]

移りゆくメインデバイスの時代の流れにそって、CurlのWebサイトをスマートフォン対応いたしました。
そこで、去年とてもバズったレスポンシブWebデザインを取り入れてみました。






以下はその実装するにあたり、私がぶち当たった壁です。

• 構築時間が莫大にかかる
  
  
• IE8以下では未対応
  
  
• 画像の問題
  
  
• あらゆるデバイスでテスト
  

など、他にもたくさんありますが、大きくはこんな感じです。

余談：
先日インフラ担当が「さくっとレスポンシブWebデザインでペラページを作る」と言ってましたが、次の日は「難しくて、想像していた以上に時間掛かって大変だった」とコメントしてました。



レスポンシブWebデザインとは・・

デバイスごとにデザイン制作するのではなく、ディスプレイのサイズに合わせてデザインを最適化する方法
CSS3のMedia Queriesを使用してディスプレイサイズに応じてデザインを変更します。



1. 構築時間が莫大にかかる


レスポンシブWebデザインのもっとも大きな問題は、デザイン構築時間の長さです。


まず、スマートフォン対応ということで、ジェスチャーを前提としたデザインを意識しないといけません。
タッチデバイスである事を意識し、ナビやバナーを大きく、文字以外のエリア全体をクリッカブルにし、スマホとPCサイトでパーツを共通に・・・など

そして、リキッドレイアウト （Curlでは、エラ・・ナントカ？？でしたっけ？） でレイアウトを組んで、画面サイズの可変に対応させます。
ボックスや画像、マージンや余白などのサイズをパーセンテージで指定します。

画面サイズによってスタイルを切り替えるブレークポイント（境目のこと）は、480px 、768px などの2つが割と多かった気がしますが、今はもっとシンプルに、768px などの1つが主流になりつつあります。
これなら検証も（若干）楽ですね！

実際にWebサイトをレスポンシブWebデザインにするのは、通常のHTMLだけでレイアウトを組むよりも大変でした。
その上、既存サイトをレスポンシブWeb化にするということは、CSSで固定されていたwidthをパーセンテージに書き換えたり、リキッドには適さないレイアウトの対応など、余計な手間がかかり、一から制作するよりも時間がかかります。
まずワイヤーフレームを作り、レイアウト設計をきちんとして、もとのイメージ画像など流用してうまく流し込んで作っていくのがいいです。

フリーのフレームワークもたくさん出ているので、サイトの設計に合ったものを利用すればいいと思います。


2. IE8以下は未対応

IE8以下ではCSS3が使えません。
当然Media Queriesも使えないので、レスポンシブにならない上に、使えないセレクタなどもあって、レイアウトデザインに崩れが生じます。

対応策としては、IE用にスタイルシートを用意するか、jQueryなどのライブラリを使って対応します。



3. 画像の問題

PCサイズでの画像の解像度だと、スマートフォンには容量が大きく最適ではありません。
読み込みを考えると、スマートフォン用には小さい解像度の画像を表示させるのが理想です。

その解決策としては

• JavaScriptを使う
  
  
• サーバーサイドで対応する
  
  
• APIで対応する
  
  
• CSSで振り分ける
  

など

また、スマートフォン上で画像が拡大されると荒くなってしまうなどの問題も出てきます。



4. あらゆる環境でテスト

当たり前ですが、ちゃんと実装されているか、ほぼすべての環境を想定してテストを繰り返します。

ここでも以下の問題に直面します。

• ブラウザをぐりぐり動かすのに手が疲れる
  
  
• エージェントの切り替えがメンドクサイ
  
  
• そんなたくさん実機ない
  
  
• そもそも不具合があったりしてどうしようもない
  

これらをクリアしたのち、やっとGOサインがでて、ようやくリリースです。


――――――――――――――――――――――――――――――――――――――――――――


技術にうとい私には、CSSだけでマルチデバイス対応できるのはとても魅力的です。
ただ、IE対応や、魅力ある動きを実装するために、使うライブラリの数が必然的に増えていきました。
その都度、思うように動かなかったり、デバイスごとの挙動の確認がとても大変で （ 怒られたりしました。 ）

しかし難しく考えるのはやめて、多彩なフレームワークを活用し、この分野のさらなる技術の進化に期待して、積極的に取り入れてみればいいと思います。
またサイト全体でなく、ランディングページだけなど、ミニマルに使ってみてもいいかもしれません。


まとめとして

• タッチデバイスへの対応は積極的に
  
  
• レスポンシブWebデザインのご利用は計画的に
  
• 使えるものは使って賢く効率的に　お互い助け合い自分にもまわりにも優しく