レスポンシブ・ウェブデザインを使った企業ウェブサイト

海外では多くの事例があるレスポンシブ・ウェブデザイン(リサーチ参照)ですが、国内での事例はまだ少数に留まっています。クライアント様にこれからの企業ウェブサイトの企画を提案するにあたり、レスポンシブ・ウェブデザインの経験を深めるべく自社ウェブサイトにこの新しい技術を適用することにしました。

ワンソースですべてのデバイスに対応したウェブサイトを制作する手法がレスポンシブ・ウェブデザインですので、まずはスクリーンサイズごとにこのウェブサイトのデザインがどのように変化するのかを確認してみましょう。なお、この記事ではPCでお読みいただいていると想定して話を進めますので、ご了承ください。

はじめはPCでの表示です。特別なレイアウトではありませんが、スクリーンサイズの変化に適応しやすいようにページを構成する要素を極力絞り込んでいます。

130627SSPC

次に、タブレットサイズでの表示です。PCの場合とは上部のアイコンの位置、左側の画像の大きさが小さくなっていることなどが変化します。このサイトの場合は構成要素が少ないのでPCとタブレットの間で大きな変化はありませんが、構成要素が多いサイトでは大きな変化が見られます。

130627SSTB

最期にスマートフォンです。かなり大きくレイアウトが変化します(変化を際立たせるために要素のデザインも意図的に変えています)。基本的にスマートフォンの場合はページのカラム(列)を1列にすることになりますので、スマートフォンにおけるレイアウトの変化は大きくなるのが普通です。

130627SSSP

異なったデバイスに対応するためには、通常はそれぞれのデバイスの解像度、スクリーンサイズ、OSなどを調査して、それぞれに適したHTMLやCSSを用意する必要があります。次々にOSやデバイスがバージョンアップされる現状ではそれらの調査もそれにかかるコストも相当になります。さらにサイトの更新も煩雑です。例えば画像をひとつ更新するだけでもそれぞれのHTMLを更新することになります。

これに対してレスポンシブ・ウェブデザインは、ひとつのHTML(ワンソース)で、ブラウザのスクリーンサイズを基準にしてCSSでレイアウトを調整することによってあらゆるデバイスに対応します。ウェブサイトの構築、更新の手間はかなり少なくなるといえます。

なお、PCでブラウザの幅を変化させることで、各デバイスでのレイアウトの変化を確認することができます。ブラウザの幅によって行の文字数の変化なども動的に確認できますので、お試しください。

 

参考ウェブサイト 「レスポンシブWebデザインとは」(ASCII,jp)