押さえておきたいWebデザイントレンド2011

2011/11/12 16:55

blog

2011年は、日本においてもスマートフォンとタブレット端末が爆発的に普及した年だったと思います。私自身も、2010年にiPad、2011年にスマートフォンを入手して、これからのWebデザインは、クロスブラウザ対応だけでは凌ぎ切れないという実感が湧いて来ました。もちろん、ECサイトなどであればすでに対応済みのところも多いのですが、企業内で利用する基幹システムにおいても、徐々に必要に迫られてくると思っています。

そういうわけで、今回は2011年現在で「押さえておきたいWebデザイントレンド」と題して、SIを手がけるアーキテクトの視点から、3つのキーワードと参考になりそうなサイトを取り上げてみたいと思います。

プログレッシブ・エンハンスメント

BtoBでは、クライアント要件はWindowsXP+IE6として、それ以外の環境はサポート対象外とする・・・なんて記述が仕様書にありませんか？ようやく企業で利用するPCのOSも、Windows7になってきたので、Windows7+IE8もサポートするぐらいにはなっているかもしれませんが、まだまだBtoCでは、既存システムがIE8以降のクッキーマージに対応できていないなどの理由などでサポート対象外というところも多いかもしれませんね。

一方、BtoCでは、Firefox、Google Chrome、Opera、Safariなど、あくまでPCのブラウザソフト間で同じ見た目・挙動を実現するという「クロスブラウザ対応」が必須となっていたと思います。そこに一石を投じる考え方が「プログレッシブエンハンスメント」です。マルチデバイス時代においては、もはやクロスブラウザでは対処できないので、モダンブラウザを利用している場合には豊かなUX（User Experience)を、レガシーブラウザでは従来レベルの見た目・挙動に留めるという割り切りの考え方です。私自身は賛成なのですが、頭がガチガチのステークホルダーがいたら、環境によって見た目・挙動が変わるなんてバグだ！とか言うかもしれないので、説得するのに苦労するかもしれませんね。。。まぁAmazonやYahooといった大手がそういう対応をすでに当たり前のようにしている現実を見せて説明していくのがベターでしょうかね。

レスポンシブWebデザイン

Webシステムであれば避けては通れないViewのデザインですが、BtoCであればデザイン会社が担当することが多いでしょうし、BtoBであれば、アーキテクトやディベロッパーが担当することも多いかと思います。いずれにせよ、世間の大半のサイトは、固定レイアウトなどと呼ばれる横幅を900～1024px当たりのXGA前提で作成されているものがまだまだ多いのではないでしょうか。

さて、そんな中で最近HTML5と共にCSS3が注目されていますが、CSS3のMedia Queriesという新機能を利用して、「レスポンシブWebデザイン」というレイアウト手法が１つの解決策となります。もともとCSSでは、@media screenなどのように、画面表示・印刷表示などのCSSを分けて記述でき、IE6でも利用できるのでお馴染みの機能ですが、CSS3より新たに@meddia screen and (max-width:900px) のように、ウィンドウサイズやデバイスサイズごとに分けて記述することが可能になりました。詳細は下記関連リンク先でよくまとまっているので詳細は割愛しますが、スマートフォン・タブレット端末対応もこれで可能です。もちろん、固定レイアウトのように、横幅をピクセル指定でガチガチにしてしまうと厳しいので、リキッドレイアウトをうまく取り入れる必要があります。

実際、このサイト自体もレスポンシブWebデザインを採用しており、ウィンドウサイズ（横幅）を小さくするとレイアウトが動的に変わりますので、興味があれば試してみてください。なお、私の見解では、やはりスマートフォン対応は後述するようにjQueryMobileなどを利用し、タブレット端末やPCからはレスポンシブWebデザインを採用するというのがベターと考えています。下記リンク先にも書いてありますが、タイトルロゴなどの画像の縮小とか、アフェリエイトなどのバナーをどうするとか、スマートフォン対応をやり切るのは厳しいかなというのがその理由です。

スマートフォン対応

以前、このブログでも記事を書きましたが、スマートフォンのブラウザから見た時に、最適化したViewを提供する必要性が高まっています。BtoBでは、まだまだ要件として出てこない気もしますし、個人所有のスマートフォンの業務利用については、セキュリティ観点からまだまだ課題がある状況です。とはいえ、ECサイトなどではもはや必須ですし、業務システムがクラウド化されて、スマートフォン対応が必要になったときにあたふたしても仕方ないのっで、jQueryMobileぐらいは押さえておきたいところです。

ちなみに、個人サイトなどでは、WordPressを利用していれば、WPTouchなどのプラグインを入れるだけで済んでしまうので、非常にお手軽です。また、HTML5などでWebサイト自体をスマートフォンに対応させずとも、iOSアプリ、Andoroidアプリを作成するという手段もありますので、この辺りは戦略次第でしょうね。