ホームページのデザイン・構成を決めよう
人が登録発信する情報が決まったら、今度は、ホームページのデザイン・構成を決めましょう。
テーマカラーを決めよう
基本カラーは3色まで！
私のサイトはかつて、虹色に凝っていたことがあります。
確か、西暦2000年前後での初期のサイトでは、ナビゲーションリンクは虹色で・・・みたいな。
まあ、きれいといえばきれいなんですけど(笑)
しかし、これはちょっと洗練された感じではないため、結局使用するカラーを減らしました。
いろいろとWebデザインに関する本とかWebサイトとかをチェックしてみると、
基本カラーは3色までにとどめておくように、と書かれてあり、「ガーン」という感じで（滝汗
カラフルにしてしまうと、逆にWebページ全体のポイントがぼやけてしまうものです。
業務で参照されるお役立ちサイトとして徐々に認められるようになってから、
遊び要素を弱く、逆に、業務中に閲覧しても問題がないように、落ち着いた色に変更しました。
ということで、私のサイト内で一番アクセス数の多いとされる（苦笑）、「ワニchanのぱそこんわーるど」はグレー色調に変更しました。事務机ってだいたいグレーだし（たぶん）。
一方、このサイトは、FrontPageのアイコンの色に近い色にしちゃいました。
同じコンテンツページでは色を統一しよう！
同じコンテンツページであれば、すべて色を統一するように心掛けてください。
サブページに進んだら、全然違う背景色だったりすると、訪問者は不安になったり、違和感を感じたりします。逆に、同じ背景色で統一すると、「あ、他のホームページに外れてないんだな」と訪問者に安心感を与えることができます。
ちなみに、私のサイトにおいても、同じコンテンツは同じカラーに統一しています。
- ワニchanのうぇぶわーるど・・・・・・#8080C0
- ワニchanのぱそこんわーるど・・・・#999999
- ワニchanのびぎなーずがいど・・・・#AA77DD
- ワニchanのとらべるわーるど・・・・・#809F60
- ワニchanのぶっくわーるど・・・・・・・#999966
- wanichan's Profile・・・・・・・・・・・・#FFBBBB
- Pinky the Crocodile・・・・・・・・・・#FFBBBB
サイトのレイアウトを決めよう
あらゆるサイトのレイアウトを見てみると、だいたい基本的には
下記の共通したレイアウトになっていると思います。
 |
 |
 |
 |
 |
 |
 |
 |
ブラウザのメニューは左上にありますよね？
ナビゲーションメニューは上部、または左側に配置すると、ユーザーはたいていそこにナビゲーションリンクがあると認識するため、上部や左側にナビゲーションリンクやサイドバーを設置するのが一番無難ではないかと思います。
人間の目は、左上から右下に視線を送りますから、ね。
・・・一部の言語は右から左っていうのはありますが、それは例外、として(笑)
迷子にならないナビゲーションと構成に気を配ろう
迷子にならないナビゲーション
訪問者がはじめてあなたのサイトに訪れたとき、HOMEに戻るリンクがなかったり、今どのページを見ているのかわからなくなったりすると困ってしまいます。
サブページには、必ずHOMEに戻るリンクを設置しましょう。
また、見たい情報をすぐに見られるように、そのコンテンツに到達するまでのクリック数を出来るだけ少なくするように工夫することも大切です。
今、どのページを見ているのか一目でわかるようにしておくと、とても使いやすいサイトになります。
そのためには、パンくずリストを各ページの同じ場所に設置するのがよいとされています。
パンくずリストとは、このページでいうと、
HOME > ホームページを作る前に・・・
という部分です。
「Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの」が、パンくずリストになります。通常、>
で階層構造をあらわします。
パンくずリストを設置することによって、訪問者にとって現在位置を直感的に理解する手助けになります。
論理的にサイトを構成しよう
私のサイトは、コンテンツごとに専用ディレクトリ（フォルダ）に分けています。
「ワニchanのうぇぶわーるど」は、http://www.wanichan.com/web/
ですよね。
で、このサブコンテンツのトップページは、
http://www.wanichan.com/web/before/ となります。
このように、論理的にコンテンツを分類すると、訪問者もURLを見て「あ、ここはサブコンテンツなんだ」ということが明確にわかるようになります。
くれぐれも、なんでもありのごった煮状態にならないように気をつけてください。
全く違うテーマのコンテンツを同居させてしまうと、お互いのコンテンツが喧嘩し合うため、
サイト自体の魅力が落ちてしまいますので注意してください。
また、サイト全体で共通して使用する画像ファイルを入れるための専用フォルダを作成して、
ファイル管理しやすいように分類してください。
でないと、後が大変になります。
ちなみに、私のサイト内の現在のページのフォルダの構成は左の図の通りです。
（現在使用中のExpression Webにおける[フォルダ一覧]作業ウィンドウでの画面です）
このように、それぞれ論理的にサイトを構築して、それぞれのコンテンツに使われる画像ファイル格納フォルダ「images」も存在するということがわかると思います。
同じテーマの内容は同じフォルダでまとめ、コンテンツを分類してください。
そうすることによって、アクセスアップが図れますし、使い勝手の良いサイトになります。
論理的にサイトのコンテンツを分類して構築することにより、Yahoo!ディレクトリなどに掲載されやすくなるというメリットも生まれますよ！
- ホームページを作る前に・・・
- ホームページ作る前の準備とポイント
- ホームページで何を伝えたいか明確にしよう
- ホームページ作成に必要なものとは？
- ホームページのデザイン・構成を決めよう
- ホームページを公開する上での注意事項
- ホームページ作る前の準備とポイント
HOME > Resources > ホームページを作る前に
