勉強会をよくされているSwapSkillsさんの「One Web」へ参加してきました。
普段Webデザインの流行りをあまり追っていませんでしたが、本当に興味深い内容が議論されているということがわかりました。現在ネットに接続しているデバイス数はうなぎのぼり。そしてそのデバイスの解像度がばらばらで、従来のようにPCサイト、モバイルサイト、スマートフォンサイトなどをUA等で区別してサイトを立ち上げるのには限界があります。
運用増からくる帰宅困難者を増加させるだけで、全くメリットがありません。
そこで！現在海外で注目されているのが
Progressive Enhancement
Responsive Design
OS/Device Specific
の３つ。
特に最初の２つがとても重要です。
Progressive Enhancementは、各ブラウザで全く同じデザインにしなければいけないという考え方ではなく、各ブラウザで適切なデザインを表示するというもの。そして、Responsive Designはブラウザの大きさによって表示内容を動的に変更するということです。
Responsive Designということは、One Sourceでマルチデバイス対応をするという概念ですが、Responsive Designをするにあたって考えなければならないのがモバイルファーストという概念。
従来のPCサイトをモバイルやスマートフォンに最適化するという流れではなく、逆にモバイル、スマートフォンで見せたい内容・コンテンツを第一に考え、そこからPCやさらにはWebTVまで視野に入れたデザインをするという考え方です。これにより、どんなコンテンツを見せればいいのか、訪れたユーザーが見たいコンテンツとは何かをまず考える事になり、それをもとにモバイルページが構築できるわけです。
モバイルファーストの考え方だと、コンテンツにフォーカスがいき、そこからPC画面での導線の構築にもつながっていくという意味で、本来のWebのありかたにもっと近づくのではないかと思います。
Responsive Designについては、例えば、jQuery Mobileのページを見てください。
あるwidthまでは1カラムで表示されています。
しかし、ある程度のwidthを超えると2カラムになります。
このようなデザインは、海外で増えつつあるようです。また、こうしたデザインを採用することで端末確認として全ての端末を揃えて画面の確認をする必要がないという意味でも、非常にメリットが大きい事も特徴です。
Swap Skillsでは他にも面白いデータが数多く提示されており、興味深かった点を以下にご紹介しておきます。
・現在、jQuery MobileよりもCSS3の方がパフォーマンスが良い(Yahoo)
・モバイルサイト表示でネックとなる画像についてはCSS SpriteやdataURIを利用することで、250%程度改善する可能性がある。また簡単な画像の場合dataURIよりもCSS3の方がさらに高速化する。(NHN Japan)
・CSSだとborder-image、border-radius、transform-translateあたりの要素が重い。border-imageはimageの読み込みが原因だろう(NHN Japan)
・Tagによるスピードでは断トツでiframe、次にselect、a、ul、li、input、divの順で重い。
・スマートフォンのタッチ領域は29px*29pxを基本とするが、ボタンのビジュアル以上にタッチ領域を大きくするのが誤操作を防ぐポイント(Yahoo)
あたりでしょうか。
何よりHTML5、CSS3にしても最新の知識を常に吸収することが重要ですが、今回のミーティングでは、実際のコードの書き方や動きの実演等、非常に中身の濃いものとなりました。
普段Webデザインの流行りをあまり追っていませんでしたが、本当に興味深い内容が議論されているということがわかりました。現在ネットに接続しているデバイス数はうなぎのぼり。そしてそのデバイスの解像度がばらばらで、従来のようにPCサイト、モバイルサイト、スマートフォンサイトなどをUA等で区別してサイトを立ち上げるのには限界があります。
運用増からくる帰宅困難者を増加させるだけで、全くメリットがありません。
そこで！現在海外で注目されているのが
Progressive Enhancement
Responsive Design
OS/Device Specific
の３つ。
特に最初の２つがとても重要です。
Progressive Enhancementは、各ブラウザで全く同じデザインにしなければいけないという考え方ではなく、各ブラウザで適切なデザインを表示するというもの。そして、Responsive Designはブラウザの大きさによって表示内容を動的に変更するということです。
Responsive Designということは、One Sourceでマルチデバイス対応をするという概念ですが、Responsive Designをするにあたって考えなければならないのがモバイルファーストという概念。
従来のPCサイトをモバイルやスマートフォンに最適化するという流れではなく、逆にモバイル、スマートフォンで見せたい内容・コンテンツを第一に考え、そこからPCやさらにはWebTVまで視野に入れたデザインをするという考え方です。これにより、どんなコンテンツを見せればいいのか、訪れたユーザーが見たいコンテンツとは何かをまず考える事になり、それをもとにモバイルページが構築できるわけです。
モバイルファーストの考え方だと、コンテンツにフォーカスがいき、そこからPC画面での導線の構築にもつながっていくという意味で、本来のWebのありかたにもっと近づくのではないかと思います。
Responsive Designについては、例えば、jQuery Mobileのページを見てください。
あるwidthまでは1カラムで表示されています。
しかし、ある程度のwidthを超えると2カラムになります。
このようなデザインは、海外で増えつつあるようです。また、こうしたデザインを採用することで端末確認として全ての端末を揃えて画面の確認をする必要がないという意味でも、非常にメリットが大きい事も特徴です。
Swap Skillsでは他にも面白いデータが数多く提示されており、興味深かった点を以下にご紹介しておきます。
・現在、jQuery MobileよりもCSS3の方がパフォーマンスが良い(Yahoo)
・モバイルサイト表示でネックとなる画像についてはCSS SpriteやdataURIを利用することで、250%程度改善する可能性がある。また簡単な画像の場合dataURIよりもCSS3の方がさらに高速化する。(NHN Japan)
・CSSだとborder-image、border-radius、transform-translateあたりの要素が重い。border-imageはimageの読み込みが原因だろう(NHN Japan)
・Tagによるスピードでは断トツでiframe、次にselect、a、ul、li、input、divの順で重い。
・スマートフォンのタッチ領域は29px*29pxを基本とするが、ボタンのビジュアル以上にタッチ領域を大きくするのが誤操作を防ぐポイント(Yahoo)
あたりでしょうか。
何よりHTML5、CSS3にしても最新の知識を常に吸収することが重要ですが、今回のミーティングでは、実際のコードの書き方や動きの実演等、非常に中身の濃いものとなりました。