第3回 ホームページのデザイン

目  次:  1.ページレイアウト
2.ナビゲーション
3.マシン環境の制限

1.ページレイアウト
  ホームページのレイアウトを考えるとき、次のことを考慮しましょう。

文字は多く表示しすぎない
  文字は興味を引く程度にします。キャッチフレーズやコンセプトなど必要なもの、企業の顔となるような言葉を入れます。また、トップページの上部にキーワードになる言葉や会社の説明文を入れておくとそれを拾ってくれる検索エンジンもあるようです。
 
トップページは非常に重要!
  第一印象は大切です。ページ全体の構成がある程度分かるように、自社の得意とするもの、こだわりが一目で分かるように工夫しましょう。
 
統一したデザイン
  ページのレイアウト、色、文字は全ページ統一して使うと安心感が生まれます。また、色は会社のイメージにつながるため、会社のイメージにあった色を使うようにしましょう。 

2.ナビゲーション
  ユーザーがトップページからリンク設定された別のページにスムーズに移動できること、またいつでもトップページに戻れることが重要です。ブラウザ自体のナビゲーション機能(「戻る」や「進む」ボタン)を使用しなくても戻れるよう工夫しましょう。

●使いやすいナビゲーションの工夫
1.トップ、検索、FAQへのリンクは各ページから可能にする。
2.標準のリンクカラーを使用する。(独自に設定する場合でも見やすい色)
3.検索、FAQ、ダウンロードなど、汎用性の高い単語はそのまま使う。
4.ナビゲーションは上領域に配置する。(スクロールせず表示される範囲)
5.サイトマップ(階層図)を作成する。
6.「3回クリック」のルールを考慮
   →目的のページにたどり着くまで3回クリック以内で移動できるように
    構造を考える。
7.ナビゲーション用ツールは、シンプルで分かりやすい直感的なものにする。
    ・アイコンは分かりやすいが、必要に応じ文字を付ける。
    ・会社のロゴに「トップに戻る」リンクを張っておく。
●ナビゲーションの利用例
ナビゲーション(メニューなど他ページへ移るための案内部分)を配置する場所は、上部、左端などがよく使われます。

また、ナビゲーションを作成する方法は、フレーム(画面分割)を使用する場合とテーブル(表)を使用する場合があります。ここでは、ナビゲーションを上部に配置する想定で説明します。


今、Googleという検索サイトがよく使われています。Yahoo Japan はサイト検索なのでサイト(ホームページ全体)単位で検索しますが、Googleはページ検索のためページ単位で検索します。フレーム構造にしておくと固定部分に会社名やメニューを表示させておくのでページ単位で検索した場合、ナビゲーションの部分が無い状態で表示される可能性があります。せっかく検索してもらっても連絡先が分からなければ何にもなりません。そこで、ナビゲーションをフレームにせず、テーブルで作り、どのページもトップページのようにしておくというホームページが多いようです。また、フレーム構造にする場合でも、各ページに会社名・連絡先、トップページへのリンクを入れておくなどの配慮は必要です。
※Google のURL: http://www.google.co.jp/

3.マシン環境の制限
  ホームページを作成するとき、自分のマシンとユーザーのマシン環境が同じとは限らないということを考慮しましょう。ユーザーのマシン環境が特定できないので、低いレベルのマシン環境で作成・確認することを心掛けましょう。

 ●使用ブラウザ:
    対象ユーザーを想定すると、最新ブラウザを使用しているとは限りません。
    最新ブラウザで作る場合でも古いバージョンでの表示確認もしておくと
    よいでしょう。
    また、Internet Explore と Netscape Navigator では表示が異なります。
    両ブラウザで表示確認をしておくと安心です。

 ●解像度:
    現在のマシン環境の場合、画面の解像度は「1024×768」が一般的ですが、
    ホームページを作成する場合、「800×600」の解像度を想定して作成する
    ようにしましょう。
    

    文章の幅を揃える場合、幅を指定したテーブルを作りその中に文章を
    入力します。その時、テーブルの枠を表示させないようにします。
      例: < TABLE BORDER="0" WIDTH="640" >   
  

 ●色の指定:
    マシンの環境設定の中に「画面の色」があります。
    (「コントロールパネル」→「画面」プロパティ→「設定」タブ)
    その設定により表示可能な色数が異なります。どんな環境でも同じ色で
    表示させるためにはWebのセーフカラー(216色)を使います。

     ・True Color (32ビット)・・・フルカラー(16,777,216色)
     ・High Color (16ビット)
     ・256色          ← Webのセーフカラー(216色)

私はホームページのレイアウトを決めるとき、「640×480」の解像度でもきれいに見えるように、またページを印刷した時、A4版にちょうど収まる幅ということで、640ピクセルに設定しています。 ホームページ作成ソフトを使う場合でも、表を作成してその中に文章を入力することができます。その場合、表の線は表示しない設定にしておきましょう。

ホームページのデザインについては以上です。
自分で初めからデザインを作成するのは大変ですが、ホームページ作成ソフトを使うと、テンプレート(ひな型)や既存デザインを利用することができます。




Copyright(C) 2007 Yoshie Yamamoto All Rights Reserved.