最近著しく普及してきていて注目の、レスポンシブWEBデザインでのサイト制作に役立つ本を紹介します。
随分以前ならPC向けだけにWEBサイトは作っておけばOKだったんですが、最近ではスマートフォン（以下スマホ）やタブレットのようなPC以外の端末（デバイス）でネットをする人が急激に増えていて、ビジネスサイトなどの場合はそういった複数のデバイス（＝マルチデバイス）に対応していかないと、ビジネスチャンスを逃してしまう状況になっている訳です。
そんなご時世において、ビジネスチャンスを逃さないためにマルチデバイス対応するためのサイト制作手法の手法の一つとして、今最も注目を集めている手法が本書のテーマである、レスポンシブWEBデザインです。
レスポンシブWEBデザインとは
レスポンシブWEBデザインは単一のWEBページを画面のサイズに応じて適応するCSSを切り替える手法です。 ちなみにCSSの切り替えにはCSS3のメディアクエリーを使用しています。
画面のサイズに応じてCSS、つまりデザインを切り替えることで、PC・スマホ・タブレットなどのあらゆるデバイスからのアクセスに対応することが可能になります。これがレスポンシブWEBデザインの最大のメリットだと思います。
またページ自体も単一ページなので、PCとスマホのページでURLが異なる事はなく、すべてのデバイスで同一のURLで表示されます。 つまりSEOの効果も期待できそうです（実際、googleの公式ページはレスポンシブWEBデザインでのサイトを推奨していたりします）。
そんなレスポンシブWEBデザインがテーマの本書では、全４章からなる構成になっています。章ごとの内容は下記の通りです。
chap1／レスポンシブWEBデザインの概要・要点・設計、ワークフロー。
chap2／様々なレイアウトのトップページのサンプルを課題として制作する。 ワンカラムレイアウト、フルードレイアウト、ドロップレイアウトなど、様々なレイアウトでのページ制作を実践。
chap3／合計5ページからなる旅行会社のサンプルサイトを、情報・画面設計→プロトタイプ→スモールサイズの実装→ミディアムサイズの実装→ラージサイズの実装→最終調整というワークフローで、小規模ながらもレスポンシブWEBデザインでのサイト制作を自力で行う。
chap4／発展的な技術やツールという事で、知っておくと制作に役立つ技術やツールの紹介。画像や高解像度ディスプレイへの対応や、WEBフォント、テーブル(table)のレスポンシブでの扱い方など、実践に役立つTIPSが掲載。
本の感想
レスポンシブWEB、レスポンシブWEBと念仏のように最近よく耳にしたり目にしていて、まぁ当初は馬の耳に念仏状態だったんですが、最近では結構サイト規模や内容に関わらずレスポンシブWEBデザインのサイトが徐々に増えてきました。
さすがにちょっと覚えないといけないかなぁと思い、本腰入れて一度勉強してみようと思って購入したのがこの本でした。
本の正直な感想ですが、HTML/CSSはボチボチ書けるけどレスポンシブWEBデザインの初心者という自分の場合、この本を最初に購入して非常に良かったと思っています。大満足です。
まず素晴らしいのは、レスポンシブWEBデザインに関する情報が豊富かつ分かりやすく掲載されているという点です。 たぶんページの流れも良いんでしょう。
chap1でレスポンシブWEBデザインを知らない初心者向けに、レスポンシブWEBデザインの基本的な事を学びます。
そのうえで、chap2で様々なレイアウト（計７パターン）のトップページのサンプル制作で、どのようにレスポンシブWEBデザインでのコーディングを行うかというところで、実践的なコーディングスキルを身に付けられます。
各レイアウトごとで詳細な解説があるので、コーディングのコードだけでは意味がわからない部分も、本文の解説と読み合わせれば、コーディングの理解が理解できました。
レスポンシブWEBデザインをやって強く感じたのは、モバイルファースト（スマホファースト）という考え方です。
いつも制作はPCでやるので、どうしてもPCをメインに考えがちなんですけど、アクセス解析とか見てるとスマホからのアクセスってもう４０％～５０％ぐらいになっていたりする訳で。
レスポンシブWEBデザインのコーディング手法はこのモバイルファーストな考えに沿っていて、スモールサイズ（スマホ向け）でCSSを先にレイアウト・デザインしておくと。そして、メディアクエリーで画面幅が○○○px以上になったら、ミディアムサイズ（ミニタブレット向け）・ラージサイズ（PC向け）のCSSでスモールサイズのCSSを上書きしてレイアウト・デザインを切り替えるという感じなんです。
既存のコーディング手法とは全然違います。
なるほど～、という自分にとっては斬新なコーディング手法が満載で非常に勉強になりました。
chap3で5ページの小規模ながらもサンプルサイトの制作では、四苦八苦しながらも解説を何度も読み返したりしながら自分なりに理解して、自分でコーディングして、なんとかサンプルと同じのサイトを完成した時には、ちょっとした達成感と自信にもなりました。
また、サイト制作ワークフローの一部である制作的な部分（HTML/CSSコーディング）だけではなく、レスポンシブWEBデザインでのサイト制作における全体的なワークフローについて解説してくれているのも、良いなと思いました。
レスポンシブWEBデザインの場合、１つのページをマルチデバイス対応させるために、何でも自由にレイアウトできる訳ではないので、プロトタイプ（テスト）を行いながら、微修正を重ねていく方法は、photoshopなどで完成版のデザインカンプをもとにそれを正確に再現するようにコーディングしていくという従来の制作ワークフローとはまるで異なります。
chap4のテクニカルなTIPSの紹介では、テーブル<table>をレスポンシブ対応にする手法がとても参考になりました。こんな簡単な方法でレスポンシブ対応できるんだ、という驚きですね。
また、レスポンシブWEBデザインで避けて通れない画像の扱いについても、その対処方法がいくつも掲載されていて、とても参考になります。
１ソースマルチデバイスのレスポンシブの場合、１つの画像をスマホとＰＣの両方で使いまわす場合、画像を大きくすればＰＣでは綺麗だけどスマホでは無駄に読み込みに時間がかかるし、逆に画像のサイズを落とすとスマホでは読み込みスムーズで表示も問題ないけどＰＣだと画像を引き延ばすので画像が荒れる、という片方をたてれば片方が立たないという、どっちつかずの問題があるわけでして。
で、その対処方法として、本書ではjqueryプラグインなどを使ってメディアクエリーのように”画像を切り替える”手法を紹介してくれています。
まとめ
HTML/CSSでコーディングしてサイト制作はできるけど、レスポンシブWEBデザインでのサイト制作をした事がないという、レスポンシブWEBデザイン初心者の方におすすめしたい最高の1冊です。
読みごたえがあるので、読むのにも結構パワーを費やしますが、この本を一冊しっかり学べば、レスポンシブWEBデザインでのサイト制作が必ずできるようになると思います。
自分もこの本を読んだ後に、レスポンシブWEBデザインで自分のサイトを１つ立ち上げる事ができました。 また、忘れた時に読み返したくなるレスポンシブWEBデザインのバイブル的な書籍だと思います。
