ホーム > ホームページの作り方 > デザイン準備とページ内の各名称

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

いよいよホームページを「作って」いきます。


先に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 ・フッター

ホームページの閉めの部分です。

コピーライトだけ乗せる人が多いですが、ここでもう一度「グローバルメニュー」の内容を乗せるだけ、見る人のページ移動が楽になります。

(ちなみにこれをユーザビリティといいます)



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


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.