いよいよホームページを「作って」いきます。先にHTMLで枠組みをつくってから、後で写真追加したり、色とか装飾する人がいますが、これは間違った作り方です。
作ってる最中に写真(イラスト)と背景色が合わなかったり、文字が枠内に収まりきらなっかり、その度に修正していたらとても非効率です。
ホームページを作る順序は、
「デザイン」→「分解(画像切り出し)」→「コーディング(プログラム化)」です。

何か錬金術みたいですね。
さらっと言いましたが、あの英語がずらーと書かれている、HTMLファイルをつくる作業を『コーディング』と呼びます。
本格的に作るのならば、フォトショップなどのデザインソフトで完成イメージをつくり、それを画像とテキストデータにわけて、プログラム化します。
そしてプログラム化にも専門的なソフトがあると、比較的容易に作成できます。

・Dreamwaver(Adobeソフト)
個人用ソフト
・ホームページビルダー
ないと作れないというわけではないですが、あると作業がかなり楽です。特にページが増えてきたときに、全ページのリンクを差し替えるといったとき、一括編集などできて便利です。
ブログなんかで自動でページが生成されるものでは、あまり必要とされませんがー
とりあえず「とにかくお金かけたくないんだ!」と言う方のために、今回は無料でのホームページの作り方をご説明します。ちなみに、今回つくるのはブログなどではなく、自分でHTMLファイルを一からつくった「普通のホームページ」です。
・ノート:ラフスケッチ用
・画像編集ソフト:デザイン用(Photoshopなど)
・テキスト編集ソフト:コーディング用(メモ帖・TERAPAD)
さて、まずどんなホームページを作るかイメージする所から始めます。「誰も見たことのない斬新なホームページ」なんて作ろうとするのはやめましょう。
まず、第一に誰も見たことなかったら、使い方がわかりません。また、そんな複雑なページはコーディングできません。
どんなジャンルの本も、表紙があって目次があってページがありますように、ホームページにも見てもらうための一般的なセオリーがあります。
まずは、模倣です。
自分がよく見るホームページ。自分が使いやすいと思ったホームページのレイアウトを参考にデザインしてください。
10年以上いろんなタイプのホームページを作ってきましたが、「見やすいホームページ」はデザインの流行廃りはありますが、全く変わりません。


上記2パターンですが、圧倒的にAパターンの方が見やすいので、Aパターンで作ります。まず、名称を覚えましょう。
上のサンプルをもう少し細かく分類します。

・ヘッダー
ホームページの看板部分です。
サークル名や簡単な説明文を入れます。同人サイトではこの中に、イラストを入れるひとが多いです。

・グローバルナビorメニュー
ホームページの大見出しを載せる部分です。ヘッダーとセットにして、全ページ同じものを表示させます。デザインによっては、ヘッダーの中に入れたり入れなかったりします。

・コンテンツ
ページ移動すると変動する部分です。

・サイドメニュー
ページの小見出しを入れる部分です。例えば、イラストを載せる「ギャラリー」ページなら、ここには各作品名を載せます。

・フッター
ホームページの閉めの部分です。
コピーライトだけ乗せる人が多いですが、ここでもう一度「グローバルメニュー」の内容を乗せるだけ、見る人のページ移動が楽になります。(ちなみにこれをユーザビリティといいます)
さて、名称がわかったところで、いよいよデザインしていきましょう!