岐阜県なんちゃってブロガーyossyの書き綴るブログ。[公開記事480件/2016年11月27万PV]

カテゴリー

固定ページ

本レビュー『レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~』小川 裕之 (著)

yossy'sイチオシ記事セレクション

最近著しく普及してきていて注目の、レスポンシブWEBデザインでのサイト制作に役立つ本を紹介します。

随分以前ならPC向けだけにWEBサイトは作っておけばOKだったんですが、最近ではスマートフォン(以下スマホ)やタブレットのようなPC以外の端末(デバイス)でネットをする人が急激に増えていて、ビジネスサイトなどの場合はそういった複数のデバイス(=マルチデバイス)に対応していかないと、ビジネスチャンスを逃してしまう状況になっている訳です。

そんなご時世において、ビジネスチャンスを逃さないためにマルチデバイス対応するためのサイト制作手法の手法の一つとして、今最も注目を集めている手法が本書のテーマである、レスポンシブWEBデザインです。

レスポンシブWEBデザインとは

レスポンシブWEBデザインは単一のWEBページを画面のサイズに応じて適応するCSSを切り替える手法です。 ちなみにCSSの切り替えにはCSS3のメディアクエリーを使用しています。
画面のサイズに応じてCSS、つまりデザインを切り替えることで、PC・スマホ・タブレットなどのあらゆるデバイスからのアクセスに対応することが可能になります。これがレスポンシブWEBデザインの最大のメリットだと思います。
またページ自体も単一ページなので、PCとスマホのページでURLが異なる事はなく、すべてのデバイスで同一のURLで表示されます。 つまりSEOの効果も期待できそうです(実際、googleの公式ページはレスポンシブWEBデザインでのサイトを推奨していたりします)。

そんなレスポンシブWEBデザインがテーマの本書では、全4章からなる構成になっています。章ごとの内容は下記の通りです。

chap1/レスポンシブWEBデザインの概要・要点・設計、ワークフロー。
chap2/様々なレイアウトのトップページのサンプルを課題として制作する。 ワンカラムレイアウト、フルードレイアウト、ドロップレイアウトなど、様々なレイアウトでのページ制作を実践。
chap3/合計5ページからなる旅行会社のサンプルサイトを、情報・画面設計→プロトタイプ→スモールサイズの実装→ミディアムサイズの実装→ラージサイズの実装→最終調整というワークフローで、小規模ながらもレスポンシブWEBデザインでのサイト制作を自力で行う。
chap4/発展的な技術やツールという事で、知っておくと制作に役立つ技術やツールの紹介。画像や高解像度ディスプレイへの対応や、WEBフォント、テーブル(table)のレスポンシブでの扱い方など、実践に役立つTIPSが掲載。

本の感想

レスポンシブWEB、レスポンシブWEBと念仏のように最近よく耳にしたり目にしていて、まぁ当初は馬の耳に念仏状態だったんですが、最近では結構サイト規模や内容に関わらずレスポンシブWEBデザインのサイトが徐々に増えてきました。
さすがにちょっと覚えないといけないかなぁと思い、本腰入れて一度勉強してみようと思って購入したのがこの本でした。

本の正直な感想ですが、HTML/CSSはボチボチ書けるけどレスポンシブWEBデザインの初心者という自分の場合、この本を最初に購入して非常に良かったと思っています。大満足です。

まず素晴らしいのは、レスポンシブWEBデザインに関する情報が豊富かつ分かりやすく掲載されているという点です。 たぶんページの流れも良いんでしょう。

chap1でレスポンシブWEBデザインを知らない初心者向けに、レスポンシブWEBデザインの基本的な事を学びます。

そのうえで、chap2で様々なレイアウト(計7パターン)のトップページのサンプル制作で、どのようにレスポンシブWEBデザインでのコーディングを行うかというところで、実践的なコーディングスキルを身に付けられます。
各レイアウトごとで詳細な解説があるので、コーディングのコードだけでは意味がわからない部分も、本文の解説と読み合わせれば、コーディングの理解が理解できました。

レスポンシブWEBデザインをやって強く感じたのは、モバイルファースト(スマホファースト)という考え方です。
いつも制作はPCでやるので、どうしてもPCをメインに考えがちなんですけど、アクセス解析とか見てるとスマホからのアクセスってもう40%~50%ぐらいになっていたりする訳で。
レスポンシブWEBデザインのコーディング手法はこのモバイルファーストな考えに沿っていて、スモールサイズ(スマホ向け)でCSSを先にレイアウト・デザインしておくと。そして、メディアクエリーで画面幅が○○○px以上になったら、ミディアムサイズ(ミニタブレット向け)・ラージサイズ(PC向け)のCSSでスモールサイズのCSSを上書きしてレイアウト・デザインを切り替えるという感じなんです。
既存のコーディング手法とは全然違います。
なるほど~、という自分にとっては斬新なコーディング手法が満載で非常に勉強になりました。

chap3で5ページの小規模ながらもサンプルサイトの制作では、四苦八苦しながらも解説を何度も読み返したりしながら自分なりに理解して、自分でコーディングして、なんとかサンプルと同じのサイトを完成した時には、ちょっとした達成感と自信にもなりました。
また、サイト制作ワークフローの一部である制作的な部分(HTML/CSSコーディング)だけではなく、レスポンシブWEBデザインでのサイト制作における全体的なワークフローについて解説してくれているのも、良いなと思いました。

レスポンシブWEBデザインの場合、1つのページをマルチデバイス対応させるために、何でも自由にレイアウトできる訳ではないので、プロトタイプ(テスト)を行いながら、微修正を重ねていく方法は、photoshopなどで完成版のデザインカンプをもとにそれを正確に再現するようにコーディングしていくという従来の制作ワークフローとはまるで異なります。

chap4のテクニカルなTIPSの紹介では、テーブル<table>をレスポンシブ対応にする手法がとても参考になりました。こんな簡単な方法でレスポンシブ対応できるんだ、という驚きですね。
また、レスポンシブWEBデザインで避けて通れない画像の扱いについても、その対処方法がいくつも掲載されていて、とても参考になります。
1ソースマルチデバイスのレスポンシブの場合、1つの画像をスマホとPCの両方で使いまわす場合、画像を大きくすればPCでは綺麗だけどスマホでは無駄に読み込みに時間がかかるし、逆に画像のサイズを落とすとスマホでは読み込みスムーズで表示も問題ないけどPCだと画像を引き延ばすので画像が荒れる、という片方をたてれば片方が立たないという、どっちつかずの問題があるわけでして。
で、その対処方法として、本書ではjqueryプラグインなどを使ってメディアクエリーのように”画像を切り替える”手法を紹介してくれています。

まとめ

HTML/CSSでコーディングしてサイト制作はできるけど、レスポンシブWEBデザインでのサイト制作をした事がないという、レスポンシブWEBデザイン初心者の方におすすめしたい最高の1冊です。

読みごたえがあるので、読むのにも結構パワーを費やしますが、この本を一冊しっかり学べば、レスポンシブWEBデザインでのサイト制作が必ずできるようになると思います。
自分もこの本を読んだ後に、レスポンシブWEBデザインで自分のサイトを1つ立ち上げる事ができました。 また、忘れた時に読み返したくなるレスポンシブWEBデザインのバイブル的な書籍だと思います。

メッセージ・感想フォーム

このブログの記事に関してメッセージや感想などあれば、下記フォームよりご連絡下さい(^_^.)

お名前
メールアドレス
メッセージ本文
岐阜県美濃加茂市のyossy(よっしー)
ブログの書き手:yossy(よっしー)
岐阜県美濃加茂市在住。1979年2月生まれ。♂。
趣味はギター・読書・グルメ散策など。
2015年2月から自分への備忘録・雑記としてブログを始めました。
身の回りの出来事・思った事・少しは他の誰かに役立つかもしれない情報などをフリーテーマで書き綴っています。
クレオフーガで気まぐれに自作した音楽をアップしてたりします。

ヨッシーのつぶやき

Amazonで一週間だけのビッグセール開催中ですがな(~12/12)。
早速プリンタのインクとワイヤレスキーボード&マウスをポチっちゃった(/・ω・)/

月別アーカイブ

ページトップへ