コンテンツの洗い出しと画面設計
一般的なWebサイトと同様に、最初にWebサイトの全体像をサイトマップとしてまとめる必要がありますが、枝豆隊は1ページだけのサイトですので省略し、画面設計から始めましょう。
画面設計では、これから制作するWebページに必要なコンテンツを洗い出します。「ロゴ」「文章」「写真」など、大まかな要素を列挙しましょう。枝豆隊の場合は以下のようなコンテンツで構成します。
- サイトロゴ
- 文章……枝豆の特徴、枝豆料理の紹介、枝豆隊長について
- 写真……枝豆料理の写真、枝豆隊長の写真
- ナビゲーション……グローバルナビゲーション
次に、列挙したロゴ、文章、画像をもとに簡単なワイヤーフレームを作成します。ワイヤーフレームはWebサイトのおおまかなレイアウトを決定できればよいので、厳密に描く必要はなく、手描きのスケッチで構いません。レイアウトや見た目はCSSを記述しながらブラウザー上で調整していくので、ここではあまり細かい点は気にせず、どの位置にどの要素が入るかがわかるように、ざっくりとしたラフを描きましょう。
レスポンシブWebデザインではスクリーンサイズによってレイアウトが変わりますので、スマートフォン向け、タブレット向け、デスクトップ向けの3パターンのレイアウトを作成します。図のように、枝豆隊では、スマートフォンとタブレット向けにはシングルコラムのレイアウトを、デスクトップ向けには2コラムのレイアウトを用意しました。
「枝豆隊」のワイヤーフレーム
なお、実際の画面設計では、必ずしもこのような3パターンのレイアウトを用意するとは限りません。たとえば、よりスクリーンサイズの大きな、テレビのような端末をターゲットにする場合は、4パターンのレイアウトを用意する場合もありますし、逆に今回の枝豆隊のサイトのように、スマートフォンとタブレット、あるいはタブレットとデスクトップでレイアウトがほとんど変わらない場合は2パターンのワイヤーフレームでも構いません。
