このページの本文へ

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

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

文●菊池 崇/Web Directions East

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

コンテンツ素材の準備

 ワイヤーフレームができたら、次にWebサイトの素材を準備しましょう。一般的なWebサイト制作と同じように、ページに配置する文章と画像を集めます。ロゴや写真などの画像は、HTMLとCSSをコーディングしながらブラウザー上でサイズを調整するので、この段階では適当なサイズで構いません。最終的にリサイズして利用することを想定して、大きめのサイズで用意しておくとよいでしょう。

 枝豆隊では、以下のような画像ファイルを用意し、imagesフォルダにまとめておきました。

2-1-zu03_a.png

「枝豆隊」で使用する画像素材:ロゴ

2-1-zu03_b.png

「枝豆隊」で使用する画像素材:枝豆

2-1-zu03_c.png

「枝豆隊」で使用する画像素材:枝豆料理

2-1-zu03_d.png

「枝豆隊」で使用する画像素材:枝豆隊長イメージ

 次回は、ワイヤーフレームに沿って、HTMLとCSSを作成します。

著者:菊池 崇(きくち・たかし)

著者近影

Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。

前へ 1 2 3 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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