Web サイトを設計する

Web サイトを設計するには、サイト内のページ間の相互関係を判別し、 サイト全体に適用される一貫性のある設計を作成する必要があります。

Web サイト・ナビゲーションは、Web サイトを 設計および作成するために提供されているツールです。 Web サイト・ナビゲーションを使用すると、 一貫性のあるテーマ (レイアウトおよびスタイル) を持つ 複数の Web ページから成る、Web サイトを作成することができます。レイアウトは ページ・コンポーネントの位置を定義します。例えばページ・テンプレートを使用して、 Web サイトでナビゲーション・バーが常に各ページの上部に表示されるように指定することが できます。スタイルは Cascading Style Sheet (CSS) を使用してページの外観を 定義します。Web サイト・ナビゲーションから、Web サイト内の すべてのページの CSS を指定することができます。CSS は、 ページ・テンプレートで定義することもできます。Web サイト の計画と設計が終わったら、Page Designer など、多くの Web ツールを使用して 個々の Web ページを作成することができます。

Web サイト・ナビゲーションを、 ファイル関係のビジュアル・マップとして使用することができます。 Web サイト・ナビゲーションは、 トップ・ページから始まるすべてのレベルを持つ階層として、 サイト構造を表示します。

階層としてのサイト構造
サイト構造は、Web プロジェクトにおける Web ページ間の関係を確立することにより、作成できます。 Web プロジェクト内のファイル間の関係を作成するため には、Web サイト・ナビゲーションにページを追加する順序に従って、 トップ・ページとその子ページの間のリンクを作成します。 トップ・ページの子ページを確立した後は、 子ページについてそのプロセスが繰り返されます。上記の例では、索引ページがトップ・ページです。 製品ページとフィードバック・ページは索引ページの子です。販売ページは 製品ページの子です。

すべてのリンク・ページがサイト構造に追加されると、 プロセスが完了します。Web サイト・ナビゲーションは、 子ページと兄弟ページを、ページが確立された順序で表示します。 Web サイト・ナビゲーションは、 開発時にサイト構造のレイアウトを作成したり、 サイト実動中にサイト訪問者が使用するナビゲーションを 生成したりするのに最適です。

Web サイトの設計では、次の 2 つの メイン・アクティビティーが実行されます。
  1. ページ間の相互関係を判別する
  2. 一貫性のある Web サイト設計を作成する

ページ間の相互関係を判別する

新規 Web サイトを作成するための方法論には、 実ページの設計を移植することに先立って、Web サイト およびページ同士の関係を概念化する作業が欠かせません。 Web サイトは Web ページがどのように共に適合するかを示す、 階層設計および編成です。Web サイトにはハイレベル・ゴールがあり、 各 Web ページはそのハイレベル・ゴールに到達するために特定の目的を果たします。

Web ページ 間の相互の関係を作成したり、Web サイトを設計するためには、 まずすべての Web アプリケーション・リソースを入れる Web プロジェクトを 作成する必要があります。それから、Web サイト構造を作成します。

Web ページ間の 相互関係を作成したり、Web サイトを設計するには、以下のようにします。
  1. Web プロジェクトを作成またはインポートする。
  2. Web サイト構造を作成する

一貫性のある Web サイト設計を作成する

一貫性のある Web サイト設計を 作成することにより、Web サイトのすべての Web ページで一貫性のあるルック・アンド・フィール を設計します。Web サイトに共通のルック・アンド・フィールを 制御するには、以下を実行するのが最良の方法です。
  1. ページ・テンプレートを作成します

    ページ・テンプレートは、Page Designer での新規 HTML、XHTML、JSP、 または Faces JSP ページの作成に使用できるパターンです。それぞれの新規ページは ページ・テンプレートのように見え、通常はそのページに特定の情報を追加するための ページのセクションが含まれています。ページ・テンプレートを使用すると、 Web サイト全体で一貫したルック・アンド・フィールを維持することができます。複数ページ で一貫性のあるフォーマットにしたり、各ページで同じグラフィックを 使用することができます。例えば、Web サイトの各ページが会社のロゴと同一ヘッダーを 持つことができます。ページ・テンプレートを変更すると、更新されたページ・テンプレートを 保管したときに、そのページ・テンプレートを使用するすべてのページが自動的に 更新されます。Web サイトは複数のページ・テンプレートを使用することができます。また、 ページ・テンプレートから CSS ファイルにリンクしてサイト全体のスタイル・シートを 作成することもできます。

  2. Web サイト・スタイルを定義します

    Cascading Style Sheet (CSS) は、Web ページと CSS が 別々に保守されているため、Web サイト全体で一貫したスタイルを持っているかを 確認するために使用できる単一ファイルです。CSS を更新するたびに、その CSS にリンクする サイト内のすべての Web ページに変更が自動的に適用されます。

サイトのレイアウトと構造の設計について学習するには、 以下のチュートリアルを実行してください。

チュートリアル: Web サイトのレイアウトおよび構造を設計する』。このチュートリアルでは、 Web ページをデータベースにリンクさせるシンプルなダイナミック Web サイトを設計する手順を学習します。

関連概念
Web サイト・ナビゲーション
Web プロジェクト
Cascading Style Sheet (CSS) Designer
関連タスク
Web サイト開発
Web サイト方針を定義する
Web ページと Web リソースを作成またはインポートする
Web サイト構造の作成
ページ・テンプレートを作成する

フィードバック