レスポンシブWebデザイン/国内事例

2回目のテ−マはHTML5やCSS3と同じようによく耳にする「ワンソースマルチデバイス、レスポンシブWebデザイン」についてご紹介したいと思います。

これまではPCとフィーチャーフォン(携帯電話)の2つのサイトを用意していましたが、スマートフォン、タブレット端末の登場で幅広いデバイスからのアクセスを想定する必要がでてきました。
ウインドウサイズは320px~1680pxの幅が想定され、各端末ごとに最適化されたサイトを用意する方法以外に、ウインドウの幅に合わせてレイアウトを変更する「レスポンシブWebデザイン」の手法が、2010年に米国の技術系ブログで初めて紹介され欧米を中心に増えてきました。日本国内でも事例が複数出ていますが、依頼側も請負側も手探りで進めている状況だと思います。

レスポンシブWebデザインでは画面設計が重要になります。ウインドウサイズに応じてCSS3のMediaQueriesでレイアウトを変更し、カラム数などの調整や不要な要素(コンテンツ)を非表示にしたりします。非表示にした要素は画面上では見えなくても、HTML内にはデータが存在しているので、非表示にした要素(画像)のファイルデータが大きい場合レスポンスのパフォーマンスが落ちる事が発生します。制作が終わり検証の段階でレスポンスのパフォーマンスが問題で 再設計やデザインの修正を避ける為にラフデザイン時点でモックを用意してパフォーマンスの確認をする進行方法も必要になります。

また、ワンソースで作るため初期投資の制作費用が抑えられると考えられがちですが、「設計」と「検証」に充分な時間が必要になる為、単純に制作期間が短くなり費用に反映されるわけではありません。

上記のようにレスポンシブWebデザインについて、いくつか注意する事がありますので、メリットと注意点について下記にまとめてみました。
( メリット )
・ ワンソースマルチデバイスの為メンテナンス性が良く費用と時間が短縮できる
・ユーザーにストレスの無い閲覧環境を提供できる
・ Google検索と相性が良い(Googleウエブマスター向け公式ブログ:2012年6月12日)
( 制作の注意点 )
・ ブラウザのバージョンを意識した設計
→ CSS3のMedia QueriesはIE9以降しか対応していない
・ OSやメモリ容量の小さいスマートフォンを優先した設計
・ カラムの列を意識した画面設計
・ ラフデザイン時点でモックを用意してデバイスごとの表示速度などのパフォーマンスを確認する
・ デザインやレイアウトが切り替わる主要デバイスのサイズを事前に決める
→ 例:iPhone320px、iPad768px、デスクトップPC1024px
・ ワンソースだからといって制作費用が単純に抑えられるわけではない

 最後に、日本国内のレスポンシブWebデザインの事例をご紹介いたします。上場会社(東証1部、2部、マザーズ、旧ヘラクレス)の中で「業種情報・通信業」であれば、HTML5に対応しているサイトの確立が高いのでは?と考え対象355社を調べてみました。27社(7.6%)がHTML5を使用しており、NTTデータ、AOI Pro.、IMJの3社(0.84%)がレスポンシブWebデザインに対応されていました。上記であげた上場会社3社含む10社のレスポンシブWebデザインの事例をご紹介させていただきます。

( レスポンシブWebデザイン事例 )

1:CASIO | G-SHOCKオフィシャルサイト

2: ゴールドウイン|チャンピオンオフィシャルサイト

3: ロート製薬|肌研(ハダラボ)オフィシャルサイト

4: マークス|オフィシャルサイト

5: 大分健生病院|オフィシャルサイト

6: nico slime|2012秋冬コレクション

7: LOFT|2012CHRISTMASスペシャルサイト

8: NTTデータ|オフィシャルサイト

9:AOI Pro.|オフィシャルサイト

10:IMJ|オフィシャルサイト

では、次の記事ではレスポンシブWebデザインの海外事例を、ご紹介したいと思います。