16:55blog2011年は、日本においてもスマートフォンとタブレット端末が爆発的に普及した年だったと思います。私自身も、2010年にiPad、2011年にスマートフォンを入手して、これからのWebデザインは、クロスブラウザ対応だけでは凌ぎ切れないという実感が湧いて来ました。ECサイトなどであればすでに対応済みのところも多いのですが、企業内で利用する基幹システムにおいても、徐々に必要に迫られてくると思っています。いうわけで、今回は2011年現在で「押さえておきたいWebデザイントレンド」と題して、SIを手がけるアーキテクトの視点から、3つのキーワードと参考になりそうなサイトを取り上げてみたいと思います。企業で利用するPCのOSも、Windows7になってきたので、Windows7+IE8もサポートするぐらいにはなっているかもしれませんが、まだまだBtoCでは、既存システムがIE8以降のクッキーマージに対応できていないなどの理由などでサポート対象外というところも多いかもしれませんね。Chrome、Opera、Safariなど、あくまでPCのブラウザソフト間で同じ見た目・挙動を実現するという「クロスブラウザ対応」が必須となっていたと思います。そこに一石を投じる考え方が「プログレッシブエンハンスメント」です。Experience)を、レガシーブラウザでは従来レベルの見た目・挙動に留めるという割り切りの考え方です。私自身は賛成なのですが、頭がガチガチのステークホルダーがいたら、環境によって見た目・挙動が変わるなんてバグだ!とか言うかもしれないので、説得するのに苦労するかもしれませんね。AmazonやYahooといった大手がそういう対応をすでに当たり前のようにしている現実を見せて説明していくのがベターでしょうかね。IT用語辞典バイナリレスポンシブWebデザインWebシステムであれば避けては通れないViewのデザインですが、BtoCであればデザイン会社が担当することが多いでしょうし、BtoBであれば、アーキテクトやディベロッパーが担当することも多いかと思います。いずれにせよ、世間の大半のサイトは、固定レイアウトなどと呼ばれる横幅を900~1024px当たりのXGA前提で作成されているものがまだまだ多いのではないでしょうか。Queriesという新機能を利用して、「レスポンシブWebデザイン」というレイアウト手法が1つの解決策となります。ように、ウィンドウサイズやデバイスサイズごとに分けて記述することが可能になりました。詳細は下記関連リンク先でよくまとまっているので詳細は割愛しますが、スマートフォン・タブレット端末対応もこれで可能です。固定レイアウトのように、横幅をピクセル指定でガチガチにしてしまうと厳しいので、リキッドレイアウトをうまく取り入れる必要があります。実際、このサイト自体もレスポンシブWebデザインを採用しており、ウィンドウサイズ(横幅)を小さくするとレイアウトが動的に変わりますので、興味があれば試してみてください。私の見解では、やはりスマートフォン対応は後述するようにjQueryMobileなどを利用し、タブレット端末やPCからはレスポンシブWebデザインを採用するというのがベターと考えています。下記リンク先にも書いてありますが、タイトルロゴなどの画像の縮小とか、アフェリエイトなどのバナーをどうするとか、スマートフォン対応をやり切るのは厳しいかなというのがその理由です。以前、このブログでも記事を書きましたが、スマートフォンのブラウザから見た時に、最適化したViewを提供する必要性が高まっています。BtoBでは、まだまだ要件として出てこない気もしますし、個人所有のスマートフォンの業務利用については、セキュリティ観点からまだまだ課題がある状況です。いえ、ECサイトなどではもはや必須ですし、業務システムがクラウド化されて、スマートフォン対応が必要になったときにあたふたしても仕方ないのっで、jQueryMobileぐらいは押さえておきたいところです。ちなみに、個人サイトなどでは、WordPressを利用していれば、WPTouchなどのプラグインを入れるだけで済んでしまうので、非常にお手軽です。HTML5などでWebサイト自体をスマートフォンに対応させずとも、iOSアプリ、Andoroidアプリを作成するという手段もありますので、この辺りは戦略次第でしょうね。