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

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

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

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

ホームページを作る手順

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

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

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

dreamwaderとホームページビルダー プロ試用
・Dreamwaver(Adobeソフト)

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


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

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

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

【用意するもの】
・ノート:ラフスケッチ用
・画像編集ソフト:デザイン用(Photoshopなど)
・テキスト編集ソフト:コーディング用(メモ帖・TERAPAD)


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

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

まずは、模倣です。

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

161118_img_03
161118_img_04

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

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

161118_img_05

・ヘッダー

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



161118_img_06

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

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



161118_img_07

・コンテンツ

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




161118_img_08

・サイドメニュー

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



161118_img_09

・フッター

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


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

次のお話