Web担当者が、レスポンシブWebデザインについて知っておくべきこと

Webデザイン界やIT業界では、レスポンシブWebデザインがここ数年大きなムーブメントになっています。いろいろな記事で「レスポンシブ対応の最新機能」やレスポンシブウェブサイトの作り方などが解説されています。サイトリニューアルの際はレスポンシブ対応するサイトが多いことで、ブーム以上の「時代の流れ」を感じている人も多いのではないでしょうか。

非レスポンシブウェブはもう古い？

小さなWebサイトやホームページのサイト管理者や、サイトオーナーには、自分もレスポンシブに対応したWebサイトに乗り換えるべきか？　検討中の人もいるでしょう。今回は、このレスポンシブ問題の背景を紹介します。

レスポンシブウェブにする本当の目的は？

レスポンシブウェブとは、ブラウザのウィンドウサイズやブラウザ環境によって、コンテンツのレイアウトを柔軟に変更できる設計のWebサイトです。

具体的には、大きなパソコン用のブラウザで見れば大きな写真と大きな見出しが横に3つ並んでいるような同じウェブになるのに、同じサイトにスマートフォンからアクセスすると小さな写真にモバイル用メニュー、そして写真は横ではなくスクロールしやすい縦並びになっているサイトとして表示されるようなものが典型的です。

レスポンシブウェブは、主に複数のCSSを読み込み分けることでデザインを巧みに切り替えられるしくみになっています。同じ内容の写真や文字を、さまざまなデバイスで最適な見え方ができるように、デザインを変えているのです。

見た目が最適化されてキレイに表示されるのは使いやすく嬉しいです。では、それがレスポンシブウェブの本質でしょうか。
実はレスポンシブとは、コンテンツ提供側の都合による効率化のための手法なのです。

なぜレスポンシブウェブがもてはやされるのかは、これまでのWebの流れをみるとよくわかります。いままでも様々なブラウザ、小さなデバイスなど、新しい表示画面が増えるたび、Web制作者はその対応や新規の別サイトの制作に追われてきました。

そして現在は、パソコン、各社から発売されるタブレット、ミニタブレット、大型のスマートフォン、従来の小型のスマートフォン、そしてゲーム機など、実に多様なデバイスでウェブを閲覧できます。そしてそららのすべてのデバイスから観てもらうためには、Webデザイナー、開発者はどれだけの作業をしなければならないでしょう……？

そこで考えられたのがレスポンシブと言えましょう。どんなに端末のサイズが増えても、1つのHTMLで済むのが画期的な点だったのです。

かといって、多様なデバイスに合わせるCSSの最適化は、必ずしも簡単な作業ではなく、初期費用は高くなると言われています。

スマホ・ケータイ専用サイトではダメなのか？

では、これからは、すべてのサイトがレスポンシブウェブであることが必須でしょうか？　これは必ずしも正解とはいえません。

読みやすいデザインならばスマホサイトなしという選択も

まず、レスポンシブウェブでないサイトの代表例のアップル社のサイトを見てみましょう。サイトがよくデザインされており、スマートフォンでも見やすいのであれば、あえてスマートフォンサイトは作らないという選択もあるのです。

スマホなどを重視すると専用サイトやアプリという選択も

さらに、スマートフォンやケータイサイト専用サイトを作るメリットには、その端末でやるであろうこと（出先で店を探す／ベッドサイドでショッピングをする／通勤電車でニュースを読む）を想定した上でオリジナルのデザインをすることができ、この専門性と使い勝手は、レスポンシブに勝るものがあります。ホームページ制作ツール「BiNDup」でも、このモバイル専用に最適化したサイトを作るというモバイルファーストの考え方を採用しています。※BiNDupではレスポンシブウェブに対応

なお、スマートフォンへの最適化を最大限にするのであれば、アプリを作るのが一番定着率がよいとされています。

レスポンシブは多デバイス対応における1つの選択肢

つまり、レスポンシブは、他デバイスへ対応するための１つの回答であり、自サイトにとってレスポンシブサイトが本当にベストかどうかは、どんな人に、どんなスタイルでサイトを閲覧してほしいか（みてもらいたいか）があってこそ、決定できるのです。

BiNDupなら、テンプレートをカスタマイズするだけでレスポンシブWebを自在に作ることができますよ。
まずは無料でBiNDupでサイトを作る