執筆 : Amber Mitchell

対象アプリケーション
Microsoft Office FrontPage® 2003 Microsoft FrontPage 2002 Microsoft FrontPage 2000

ここでは、Web ページの要素について説明し、Microsoft FrontPage でそれらを配置することにより、Web ページのレイアウトを作成する方法を紹介します。

たとえば目の前にあるジグソーパズルが、これまでとは異なるパズルだと考えてください。各ピースがどれぐらいの大きさか、ピースをどのように組み合わせるか、さらには完成した絵がどのように見えるかも、自分で決定しなければなりません。Web ページはまさにこのようなパズルなのです。

Web ページのレイアウトには複数の方法がありますが、配置によってサイトの使いやすさが左右されます。Microsoft FrontPage の Web サイト作成および管理ツールは、学校のサイト、イントラネット ページ、または Web ベースのツールのデザインに役立ちます。

パズルのピース

ホーム ページとカスタマイズされたコンテンツ ページを除き、サイトのほとんどのページは 1 つのレイアウト テンプレートで処理できます。レイアウト パズルには通常、5 つのメイン ピースが含まれます。これらのコンポーネントは一般的であるため、FrontPage には、ピースを操作するための機能 (共有枠、挿入ページ、リンク バー) とピースを組み合わせるためのツール (表およびフレーム) があります。

下図は多くのサイトに適合する一般的なレイアウトの例です。もっと創造的で個性的なものにしたいかもしれませんが、サイトはユーザーのセッションの一部にすぎないことを覚えておいてください。特異なレイアウトを作成しなければならない理由がないかぎり、一般的なレイアウトの方がユーザーには喜ばれます (ヒント : レイアウトではなく、グラフィックを独創的なものにしましょう!)。

図 1 : 一般的な Web サイトのレイアウトの要素

1. サイトの識別子

各ページでは、どのサイトにアクセスしているかをユーザーに知らせる必要があります。この機能はホーム ページでは特に重要であり、ホーム ページでは学校のロゴ、名前、その他のグラフィックを強調します。サイトの識別子は多くの場合、最上部のバナーに表示されます。この領域の高さに注意してください。これが高すぎると、コンテンツが画面のずっと下に表示されてしまいます。

2. ナビゲーション バー

ナビゲーション バーは、コンテンツを見つけるためにユーザーによって使用されます。したがって、ナビゲーション構造は、サイトの情報の階層におおよそ一致する必要があります。情報のレイアウトを考える "前" に、その論理構造を決めるようにしてください。

ナビゲーション構造を決定したら、それに対するベスト プラクティスを見つけます。基本的には、ナビゲーション バーは画面の上部か横に表示します。両方に表示することもできます。

ナビゲーション バーを画面の上部に表示する場合の利点 :

• 見やすい
• コンテンツを画面の幅いっぱいに表示できる
• サイトの識別子と組み合わせることができる

ナビゲーション バーを画面の横に表示する場合の利点 :

• 必要なだけのナビゲーション項目をサポートできる
• 長い項目説明を利用できる
• サイトで検索を重ねるにつれて、複数のナビゲーション レイヤーが統合される

大規模なサイトでは、上部と横の両方にナビゲーション バーが必要なことがあります。たとえば学校区のサイトの場合、各学校のサイトを上部のナビゲーション バーでリンクし、学校区全体の情報は横のナビゲーション バーに配置します。

3. メイン コンテンツ

ページ タイトル、見出し、テキスト、および画像から構成されるメイン コンテンツは、ユーザーが訪問の目的とするものです。他の領域を組み合わせていって、残った領域をコンテンツに割り当てるのではなく、メインにふさわしいだけの十分な検討を加えてください。

コンテンツに関しては、読みやすさと柔軟性の 2 つに留意する必要があります。最も読みやすいのはコンテンツ領域が 100 ～ 600 ピクセル幅の場合です。基本的に、1 行が短すぎたり長すぎたりすると読みやすいとは言えません。このため、350 ～ 600 ピクセル合計のメイン コンテンツ領域であれば、1 列、2 列、または 3 列のレイアウトにも柔軟に対応できます。

4. セカンダリ コンテンツ

商業用サイトでは、広告のためにセカンダリ コンテンツ領域がよく使用されます。学校のサイトの場合、この領域を通知、ニュース、または関連リンクに使用している例が多くあります。サイトの情報量が多いときは、利用できる情報をより多くするために、このスペースを割り当てるのが望ましいでしょう。一方、その必要がないサイトでは、このスペースをメイン コンテンツに使用します。

5. コンテンツに関するコンテンツ

ページのコンテンツに関する情報には、著作権、最終更新日、セキュリティ/プライバシー リンク、およびコンテンツに対する責任者が含まれます。この情報は必須ですが、たいていのサイト ユーザーにとっては重要ではありません。通常は小さなフッターをこれに割り当てます。この情報には小さなフォント サイズを適用して、コンテンツ内の他の情報と区別します。

表を使用してレイアウトを作成する

これでサイトのレイアウトが決定しました。次に、レイアウトを実際に作成してみましょう。Web ページのレイアウトを作成する最も一般的な方法は、表を使用することです。

Web ページの表は、行、列、および個々のセルから成り、スプレッドシートとまったく同じです。ただし、Web ページの表では、厳密な表のレイアウトを外れて、セルが複数の行や複数の列にまたがることがよくあります。たとえば、図 1 の第 1 行は 2 列にまたがり、左の列は 2 行にまたがっています。これは複雑な操作に思えますが、FrontPage を使用すれば簡単に作成できます。

FrontPage には表を作成して操作するための複数のツールがあります。最初に、描画ツールバーを使用して、図 1 に示すようなページ全体のレイアウトを作成します。番号 4 のボックスは別のテーブルを表示する場合に使用するため、省いてもかまいません。

描画ツールバーを使用してページ全体のレイアウトを新規作成するには

1. [表] メニューの [表の描画] をクリックします。[表] ツールバーが表示され、[表の描画] が選択されています。
2. ページ上で、表の左上隅をクリックし、右下隅にドラッグして、表の外枠を描きます。
3. セルを作成するには、表内に縦線および横線を描きます。

表のプロパティを調節するには

1. 表の中をマウスの右ボタンでクリックし、[表のプロパティ] をクリックします。
2. 表の幅を指定します。ピクセル数かブラウザ ウィンドウのパーセントを入力します。
3. セルのスペースを設定し、セルの周囲に余分なスペースを追加します。
4. ページ全体のレイアウトの表では、枠に [0] を設定します。

表を使用する際のヒント :

• スタック化された表。   Web ページが読み込まれるとき、表はコードで現れる順に読み込まれます。長い複雑な表の場合、コンテンツの表示に時間がかかることがあります。1 ページ全体を占める長い表は、上、真ん中、および下の 3 つの部分に分割するとよいでしょう。コンテンツが読み込まれている間、(単なる空白のページではなく) 学校の名前とロゴが表示されます。
• ネストされた表。   表は "ネストする" ことができます。ただし、この方法を多用しすぎると、ページの読み込みに時間がかかります。図 1 の番号 4 のボックスは、ネストされた表の例です。
• テキスト列の周囲に空白を残す。   通常、メイン レイアウトの表ではセルのスペースを 0 に設定して、パズル ピース間に隙間が空かないようにしますが、テキストは他の要素と離すためにその周囲に余分なスペースを追加します。そのためには、空白スペースの列を使用します (図 2 を参照してください)。これは上記で表内にセルを作成したのと同じ方法で描きます。

図 2 : 空白スペース (赤色で表示) によりテキストが読みやすくなる

• 配置を微調整する。   垂直方向のスペースが適切な大きさになるように、テーブル セルの配置を調整します。一般に、コンテンツがセルの上端に沿って配置されるように各セルのプロパティを指定します。コンテンツの位置が上端に近すぎる場合は、手動でスペースを少し追加できます。Enter キーを押して改行するのは、スペースを追加するためによく使われるテクニックです。

パズルにフレームを使用する

フレームは、Web ページのレイアウトを作成するもう 1 つの方法です。フレームはあまり評判が良くありません。ブックマークや検索エンジンのインデックスの挿入は簡単ではなく、サイトのユーザーが混乱する可能性もあります。こうした理由から、フレームは学校の Web サイトには不向きと言えます。

しかし、イントラネット サイトや Web ベースのツールでは、フレームを使用するとナビゲーションが簡単になる場合があります。たとえばスタッフの連絡先情報データベースを管理する Web ベースのツールを作成するとします。デーベース アクション (スタッフ メンバーの追加、編集、および削除) に 1 つのフレームを使用し、スタッフ メンバーの情報の編集に別のフレームを使用します。データベース アクションのフレームは 1 回だけ読み込まれ、情報のフレームはアクションごとに更新されます。 これが表の場合には、クリックごとに両方のセクションが再度読み込まれなければなりません。

結論

Web ページはパズルと似ていますが、レイアウトを単純で標準的なものにすることで、サイトのユーザーは必要な情報を見つけやすくなります。