ネットワーク サポート エヌズ|ホームページを作ろう|各ページ共通部分を考える。

各ページ共通部分を考える。(ページの構成と設計について、その1です。)

前回からだいぶ間隔が開いてしまいました。3回目でくじけそうでしたが、何とか続いています。今回は前置きが長いかも・・・

この作業が必要なわけ

インターネット上に公開したページ群(サイト)は、必ずトップページから順番に見てもらえるとは限りません。
全てのページが入り口になる可能性が有るため、ページ内に共通する部分を作っておくことで、求めていたサイト内にたどり着いたと意識してもらうことができます。
また、同一のサイト内にいるのか?外部へのリンクによって違うサイトに飛んだのかも知ることが出来ます。

アクセシビリティーユーザビリティーと言う言葉を聞いたことが有りますでしょうか?

アクセシビリティー(accessibility)
 例えば、手や腕の障害のためにマウスを使えない場合、ソフトウェアはキーボードだけで利用可能である必要がある。 弱視や老眼の人にとってはフォントサイズや配色は容易にカスタマイズ可能でなくては見にくい。
視覚障害の人は読み上げソフトを使うので、それに適したレイアウトや記述方法が求められる。
 特に、Webページについての「利用のしやすさ」を「Webアクセシビリティ」という。 これについては「WCAG」(Web Content Accessibility Guidelines)という指針がW3Cによって提唱されている。 画像や音声などには代替テキストによる注釈をつける、すべての要素をキーボードで指定できるようにする、情報内容と構造、および表現を分離できるようにするなどの方針が定められている。
詳しく知りたい方は、下記のURLをクリックすると別ウィンドウでガイドラインが表示されます。
「WCAG」のURL:http://www.w3.org/TR/WCAG20/(英語サイト)
ユーザビリティー
 ここでのユーザビリティーとは、ソフトウェアやWebサイトの「使いやすさ」のこと言っています。
様々な機能になるべく簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じないことなどが、優れたユーザビリティにつながる。
また、ユーザが目標の操作を完了するまでに費やした労力などもユーザビリティの指標となる。
ソフトウェアの使用感を指すことが多いが、広くハードウェアまで含めた工業製品全般に対して使う場合もある。 国際規格のISO 9241-11では、ユーザビリティを「特定の利用状況において、特定の利用者によって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、利用者の満足度の度合い」と定義している。

要は、誰にでも均等に同じだけの情報を解りやすく提供するようにしましょうと言うことだと思います。
配色(緑、赤は特に注意が必要)、リンクのわかりやすさ、機能的なレイアウト等を考慮に入れて考えましょう。

また、どこのページからでもサイト内の全てのページにたどり着けるようにしておく必要が有ります。
それを実現するのがグローバルリンクと言う物で、前ページ共通の項目の一つには欠かせない物になります。
このリンクが幾つあるかで、メニューの配置が決まってくることが有ります。

共通部分の決定という作業は、後のコーディングに大きく影響を与えます。
先々のことまで考えて決めましょう。

ページを構成する項目をリストアップする。

まずは、大きく3つの項目に分けましょう。
レイアウトについては、後で触れますが現時点から有る程度は意識しておいた方が良いでしょう。

ページ・ヘッダ
HTMLファイルの記述の中で<body>開始タグに一番近い可視記述です。
ここは、各ページ共通の項目を幾つか設定しましょう。
コンテンツ
ページ毎に表示内容が異なるコンテンツ用ページのメイン部分に当たります。
<div>タグを使用して表示内容の固まりを作ることで共通部分と異なる部分を混在させることも可能です。
ページ・フッター
HTMLファイルの記述の中で</body>終了タグに一番近い可視記述です。
ここも、各ページ共通の項目を幾つか設定しましょう。
但し、フッターは、コンテンツの後に表示されますので、閲覧して貰いたい情報を記述する場合工夫が必要です。

よく見るヘッダを構成する項目

  1. サイトロゴ画像、または会社ロゴマーク画像
  2. サイト名
  3. サイト全体に共通する文章(サイトの説明文など)
  4. グローバルリンク
    (グローバルにローカルリンクを連動させたりしている場合リンクだけ別にDIVで括る例もあります。)

よく見るフッターを構成する項目

  1. ページ作成日
  2. コピーライト表記
  3. コンテンツなどとは直接関係していないリンクページへのリンク

設計第2段階への準備

この時点で発信したい情報を整理してサイトマップを作成しておきましょう。
サイトマップの階層は、サイトのトップを1階層目として3階層までにまとめるのが理想です。 1階層は、サイトトップのindex.html、2階層目がグローバルリンク、3階層目がローカルリンクになります。
サイトマップの書き方がいまいちピンと来ないと思うなら当サイトのサイトマップを参考にしてみてください。
手書きのサイトマップを再現してあります。

<<前に戻るこのページの最初に戻る次へ進む>>