|
|
|---|
この連載が本になりました！
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0
連載第1回で解説したレスポンシブWebデザインの概念に続き、今回からはシンプルなWebサイトを制作しながら、レスポンシブWebデザインの基礎を学びます。まずはサイト制作の流れと下準備について解説します。
レスポンシブWebデザインのワークフロー
従来のWebサイト制作では、PhotoshopやFireworksなどの画像編集ソフトを使ってデザインカンプを作成し、できあがったカンプをスライスしてHTMLやCSSをコーディングしていました。
レスポンシブWebデザインでは、複数のスクリーンサイズが想定されるので、さまざまなサイズのデザインカンプを作成していては時間と手間がかかりすぎます。そこで、デザインカンプは作成せず、簡単なワイヤーフレームと配置するコンテンツ（画像や文章）を用意して、HTMLとCSSをコーディングしながらブラウザー上で直接デザインするのが、レスポンシブWebデザインのやり方です（この方法を「Designing in Browser：デザイニングインブラウザー」といいます）。
レスポンシブWebデザインのワークフロー
これから、実際にレスポンシブWebデザインのワークフローに沿ってサンプルサイトを作ってみましょう。サンプルとして制作するのは、私が講師を務める「allWebクリエイター塾」のロゴマークである「枝豆」をモチーフにした「枝豆隊」というWebサイトです。架空のキャラクターが枝豆の魅力を紹介するWebサイトで、1ページで構成されるシンプルなサイトです。