このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第2回

レスポンシブWebデザインのワークフローと画面設計

2012年06月11日 11時00分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷
responsive

この連載が本になりました!

本連載で紹介したレスポンシブ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:デザイニングインブラウザー」といいます)。

2-1-zu01.png
レスポンシブWebデザインのワークフロー

 これから、実際にレスポンシブWebデザインのワークフローに沿ってサンプルサイトを作ってみましょう。サンプルとして制作するのは、私が講師を務める「allWebクリエイター塾」のロゴマークである「枝豆」をモチーフにした「枝豆隊」というWebサイトです。架空のキャラクターが枝豆の魅力を紹介するWebサイトで、1ページで構成されるシンプルなサイトです。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング