ATELIER KANAE - for Beginner - Webサイトリフォーム入門 ch.03デザインCheck 20/25

	Chk: I 1 2 3 II 4 5 まとめ
			page20/25

１．コンテンツを載せる場所は確保していますか？
２．現在位置を表示していますか？
３．更新の可能性を考慮していますか？

テンプレート（コンテンツを流し込むページの雛型）を画面の中で要素をうまく構成できているかチェックしていきましょう。

実際の作業は以上のように行います。細かい点では違いますが、トップページとほぼ同じです。テンプレートはトップページと違ってコンテンツごとに複数作る場合もあるので、それぞれのコンテンツの特徴を生かしながらデザインしましょう。

ページのチェック解説図
ページのチェック

以前のトップページを見ながら、基礎チェックとこのパートのチェックをします。ここで問題点を洗い出し、コンセプトを参照しながら新たなサイトの完成をイメージしていきましょう。

ラフイメージ作成解説図
ラフイメージ作成

具体的にならなくてもかまわない程度に、ページのイメージを決めていきます。いろいろイメージしたままを書き留めておくといいでしょう。

レイアウトの確定解説図
レイアウトの確定

イメージを参考にしつつ、機能としての面も重視して要素の配置を確定していきます。ある程度HTMLを意識することも重要です。組み込むコンテンツによってレイアウトも多少変化します。

プロトタイプデザイン解説図
プロトタイプデザイン

ほぼ完成した状態を作成します。プロトタイプなので、デジタルで製作しましょう。画像ファイルでもHTMLでもかまいません。画像ファイルならイメージの編集が容易で、HTMLでつくれば後のHTML作成が容易になります。

ここでチェックを再度行い、クリアすれば後は作るだけです。チェックは念入りに行いましょう。実際にコンテンツが入ったときのデザインもテストしましょう。

HTML作成解説図
HTML作成

ここからは実際にサイトに載せるためのコーディングです。この時点でJavaScriptの付加や部品用画像の分割および配置、CGIとの接続、表示チェックや動作テストなどを行います。テンプレートなのでコンテンツをはめ込んでページを生成したりなども行います。具体的な注意点はCh4で触れる予定です。

流れが明確になったところで早速チェックをはじめましょう。

page20/25