HTMLコーディングを始める前に
HTML文書を作成する前に全体の構想を練ることが大切です。
- 1. 何のためにWebサイトを作るのか。その目的は？
- 2. どのような人がWebサイトを利用するのか。
- 3. どのページに、どのようなことを書くのか
- 4. ページのリンク関係は？
- 5. ページの見た目・レイアウトはどうするか
企画は重要フェーズ
1.目的 と 2.利用者 については、Webサイトを作る根本的な部分です。
特にビジネスとしてWebサイトを作成する場合、企画フェーズは最重要フェーズといっても過言ではありません。
そもそもの企画内容に魅力が無い・または情報デザインが悪くユーザにとって使いにくいのであれば、HTML要素のタグ打ち・CSSによる見た目の調整にいくら時間をかけても本来のビジネス的な目的が達成されません。
コンテンツマップ
3.コンテンツ内容 と 4.リンク を表すものとして「コンテンツマップ」があります。
個人が5、6ページを作成する分には必要ありませんが、コーポレートサイトのように数十ページに渡る場合は作成しましょう。
ワイヤーフレーム
5.見た目・レイアウト に関しては、ワイヤーフレームがあります。
ワイヤーフレームをどこまで細かく作るかはケースバイケースです。
制作関係者間で意志の疎通を図る・大まかなイメージを膨らませるためにも作成しておくとよいでしょう。
今回の実践講座のゴール
Webサイトは複数のHTML文書から構成されますが、今回はとりあえず1枚、トップページを作ることをゴールとします。
レイアウトは上記ワイヤーフレームを元にして、横幅800px固定、横方向中央表示とします。
上記のコンテンツマップ、ワイヤーフレームを元にして、デザインツールを利用して全体のデザインを作成します。デザインを行うソフトウェアは Adobe photoshop、Adobe Fireworksが有名です。
今回作成するサンプルサイトのデザイン原案を示します。
この原案から制作に必要となる画像ファイル群を切り出して用意しておきます。
どのような画像を・どれだけの数だけ切り出すかどうかはHTMLをどう構築するか（コーディング設計）に含まれます。
デザイナーとHTMLコーダーが別人の場合はコミュニケーションをとって確認しましょう。
→次のページ：HTMLコーディング開始
←前のページ：簡単なルールを決めておこう