デザイン準備とページ内の各名称

いよいよホームページを「作って」いきます。先にHTMLで枠組みをつくってから、後で写真追加したり、色とか装飾する人がいますが、これは間違った作り方です。 作ってる最中に写真（イラスト）と背景色が合わなかったり、文字が枠内に収まりきらなっかり、その度に修正していたらとても非効率です。

ホームページを作る順序は、

「デザイン」→「分解（画像切り出し）」→「コーディング（プログラム化）」です。

何か錬金術みたいですね。

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

そしてプログラム化にも専門的なソフトがあると、比較的容易に作成できます。

プロ試用
・Dreamwaver（Adobeソフト）

個人用ソフト
・ホームページビルダー

ないと作れないというわけではないですが、あると作業がかなり楽です。特にページが増えてきたときに、全ページのリンクを差し替えるといったとき、一括編集などできて便利です。

ブログなんかで自動でページが生成されるものでは、あまり必要とされませんがー

とりあえず「とにかくお金かけたくないんだ！」と言う方のために、今回は無料でのホームページの作り方をご説明します。ちなみに、今回つくるのはブログなどではなく、自分でHTMLファイルを一からつくった「普通のホームページ」です。

さて、まずどんなホームページを作るかイメージする所から始めます。「誰も見たことのない斬新なホームページ」なんて作ろうとするのはやめましょう。

まず、第一に誰も見たことなかったら、使い方がわかりません。また、そんな複雑なページはコーディングできません。 どんなジャンルの本も、表紙があって目次があってページがありますように、ホームページにも見てもらうための一般的なセオリーがあります。

まずは、模倣です。

自分がよく見るホームページ。自分が使いやすいと思ったホームページのレイアウトを参考にデザインしてください。 10年以上いろんなタイプのホームページを作ってきましたが、「見やすいホームページ」はデザインの流行廃りはありますが、全く変わりません。

上記2パターンですが、圧倒的にAパターンの方が見やすいので、Aパターンで作ります。まず、名称を覚えましょう。

上のサンプルをもう少し細かく分類します。

・ヘッダー

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

・グローバルナビorメニュー

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

・コンテンツ

ページ移動すると変動する部分です。

・サイドメニュー

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

・フッター

ホームページの閉めの部分です。 コピーライトだけ乗せる人が多いですが、ここでもう一度「グローバルメニュー」の内容を乗せるだけ、見る人のページ移動が楽になります。（ちなみにこれをユーザビリティといいます）

さて、名称がわかったところで、いよいよデザインしていきましょう！