WEBサイト制作
2015.08.25
レスポンシブwebデザインを見直そう (第一回)
近年、WEB制作では外すことのできないレスポンシブWEBデザイン。
PC、スマートフォン、タブレット、どのデバイスにも最適なレイアウトで表示するとても優れた技術です。
しかし自分自身、WEB制作現場に身を置くものとして、最近感じること。
レスポンシブって言いきれる定義があやふやになっているのでは・・・と。
実際に後輩から、「レスポンシブの定義がいまいち分かりません。教えてください先輩。」みたいに相談されることを考えると、「これぞレスポンシブの定義だ！」って言えるボキャブラリーを持ち合わせていません。
とういうわけでレスポンシブとはをしっかり定義してみました。
感覚で掴んだレスポンシブデザインの定義
まずは調べる前に、現在、感覚で把握しているレスポンシブデザインは、
・ひとつのHTMLソースで、PC、スマートフォン、タブレットの各デバイスをCSSで調整して、マルチデバイスに最適化する
・CSSの切り替え方法は「メディアクエリ」と「ユーザーエージェント」と呼ばれる方法で切り替えている
・画像はPC用、スマートフォン用をそれぞれ用意して使い分ける
という事。
ここまでを踏まえての定義は、
「ひとつのHTMLソースで、CSSの切り替えによってあらゆる画面サイズに最適化されたレイアウトを表示する」
と考えています。
レスポンシブデザインのメリット・デメリット
現在レスポンシブデザインは数多くのWEBサイトで取り入れられ、WEB制作会社で働く人にとっては必須項目となっています。
制作側にもクライアントにもユーザーにもメリットがある優れた技術ですが、もちろんデメリットもあります。
何でもかんでもレスポンシブデザインを取り入れれば良いというわけではありません。メリット・デメリットを見極めて導入するのが大切です。
メリット
・ひとつのHTMLソースで製作する為、更新・管理がとても楽。
・URLがPCもスマートフォン共通になり、SEO面で有利。
デメリット
・PC、スマートフォンでのデザイン面での大幅な変更が難しい。
・読み込む速度が遅くなる。
・工数が多くなる為、費用がかかる。
ひとつのHTMLソースを使うので、PCとスマートフォンでの大幅なデザインの変更は難しいです。
また、無理にデザインを違うものにすると、ソースが長く、表示速度が遅く、ユーザーに対してストレスを与えてしまいます。
またそこにJavascriptやjQuery、WordpressやMovable TypeなどのCMSを組み込むと予期せぬ動きが出て作業時間がかかり、費用と工数のバランスが良くないです。
ですのでメリット、デメリットはコーディングをする人はもちろん、デザイナーやクライアントの窓口となるディレクター、営業も知識を身につけるとより良いサイトの提案・制作が出来ると考えています。
制作を行う際に必要な知識
レスポンシブのデザインを制作するには、いくつか知っておかなければならない知識があります。
リキッドデザイン、フレキシブルデザイン、グリットデザイン、可変グリットデザインです。
・リキッドデザイン
幅を%で指定して横幅を可変させ、レイアウトを変化させるデザイン
・フレキシブルデザイン
幅を%で指定して横幅を可変させ、レイアウトを変化させるデザイン
・リキッドとの違いは最大値（max-width）、最小値（min-width）を設定してデザインの崩れを抑えることができる。
・グリットデザイン
縦横の格子状に均等に分割されたところにコンテンツを配置していくデザイン
・可変グリットデザイン
グリッドレイアウトとリキッドデザインを組み合わせたデザイン
参考にさせていただいたサイト
マルチデバイス対応に適した「可変グリッドレイアウト」
上記のデザインが、レスポンシブデザインです。…という訳ではありません。
これらのデザイン要素を含めて各デバイス毎に対応したデザインをするのが、レスポンシブデザインです。（ん。何かややこしい）
リキッドデザインを活用したレスポンシブとか
グリッドデザインを活用したレスポンシブとか
そんな表現の仕方をします。
ですので、どの概念でレスポンシブ対応をするのか理解をしておくことが重要ですね。
アダプティブデザインとは
最初の段落で書いた通り、CSSでの切り替え方法は「メディアクエリ」と「ユーザーエージェント」という方法があります。
どちらの方法でも、PC、スマートフォンをそれぞれのデバイスに対応して表示させる事ができるのでレスポンシブデザインと考えがちです。
実際にひとつのHTMLでCSSの切り替えをしていたのでレスポンシブデザインの定義には当てはまっています。
しかし、これはレスポンシブデザインの定義には当てはまりません。
それぞれのデバイスでは対応するかもしれませんが、様々な画面サイズに対応はできないからです。
これは、アダプティブデザインと言うそうです。
特定のブレークポイントで対応している部分以外の横幅になった時はコンテンツが途中で見切れている状態になるのです。
この状態がレスポンシブデザインの定義に当てはまらないです。
自分自身、このアダプティブデザインというのを耳にしたのは今回が初めてで、理解して飲み込むまではできていません。
今の理解度で言えば、レスポンシブデザインとアダプティブデザインは非常に似ているものだと考えています。
アダプティブデザインを最適化したのが、レスポンシブデザインだと考えています。
アダプティブデザインは、今後レスポンシブデザインとともに技術の発展とともに定義などが明確になっていくと思います。
まとめ
今回、改めてレスポンシブWEBデザインを定義してみましたが、定義はあるが曖昧な部分も感じます。
なんだか音楽ジャンルとも似ているようで。
今後、ますますレスポンシブデザインでの案件は増えていくと思います。
もちろん表示速度など、改善すべき問題も多くあるので、これが最適な構築方法というわけではないですが。
今は数ある中の一つの手段ですが、まだまだ発展途上中の技術です。
その中で、新しい技術や情報が見つかればみんなで共有していき身につけることでより良いサイトが制作でき、クライアントに提供できるのだと思います。その為には、フロントエンドエンジニア、デザイナー、ディレクター、営業のWEB制作に関わる全ての人間が、レスポンシブWEBデザインの知識を身につけておく事がとても大切です。
参考にさせていただいたサイト
レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた
「レスポンシブ」デザインを前提としたWebサイト制作【基礎編】
アダプティブWebデザインとは？