CodeZine(コードジン)

特集ページ一覧

Expression WebでWebサイトを作ってみよう (2)

.NET開発者のためのWebサイト制作入門(後編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/01 14:00
目次

フォルダ一覧作業ウィンドウでのサイトの構成

 立ち上げの段階では、Webサイトのコンテンツはそれほどないかもしれません。しかし、無計画にすべてのコンテンツファイルを同じ場所に保存していくと、更新によってファイルが増えるにつれ、探したいファイルを見つけるのが困難になり、メンテナンス性も低下してしまいます。そこで、最初からコンテンツごと、または種類別にフォルダで分類するとよいでしょう。

 Webサイトの構成は、画面左上の[フォルダ一覧]作業ウィンドウで操作できます。[フォルダ一覧]作業ウィンドウの右上には、(新しいフォルダ)や(新しいページ)ボタンがあり、これらのボタンを使って新しいフォルダやファイルを追加できます。また、ファイルやフォルダを移動したり、名前を変更したりすることもできます。この際、移動先や名称変更に合わせ、リンクが自動的に更新されるため、リンク切れの心配はありません。

[フォルダ一覧]作業ウィンドウ
[フォルダ一覧]作業ウィンドウ

ホームページのファイル名を変更する

  1. ホームページのファイル名は、デフォルトでは「default.htm」になっています。「index.html」に変更したい場合は、[フォルダ一覧]作業ウィンドウで「default.htm」を右クリックして[名前の変更]を選択するか、[F2]キーを押します。
     
  2. ファイル名が編集できるようになるので「index.html」と入力し、[Enter]キーを押します。
     
     
  3. 名前変更の確認メッセージが表示されるので、[はい]ボタンをクリックします。
     
  4. 「default.htm」から「index.html」にファイル名が変わりました。
     

閲覧者にとって使いやすいWebサイトとは?

 Webサイトにとって最も重要なのはコンテンツであり、伝えたい人に的確に情報を伝えるためのツールであると筆者は考えています。必ずしもWebデザインに凝る必要はありません。ただ、皆さんが共通して無意識に「ここをクリックしたらトップに戻れるんじゃないか」とか、「ここをクリックしたらインデックスページに戻れるんじゃないか」とか、そういった予測がつきやすいサイト作りに心がければいいのです。

 Webサイトの閲覧者は、決してそのWebデザインを見るためではなく、コンテンツ(情報)を探しに訪れているのです。たとえサイトのデザインがどんなに優れていたとしても、自分の求める情報をなかなか見つけられないようでは結局「使えないサイト」になってしまいます。

 閲覧者が探している情報にすぐにアクセスできるように工夫し、また、今どのページを見ているのかのナビゲーションをしっかりしておけば、そのサイトを見ている人は快適にコンテンツを利用することができます。とりわけ、シンプルなつくりのWebサイトの方が、さまざまなプラットフォームやブラウザにも対応しやすくなります。

 使いやすいWebサイトにするポイントとして、以下が挙げられます。

  • シンプルで、インターネット上でよく見かけるWebサイトレイアウト
  • 迷子にならない、しっかりとしたナビゲーション
  • どのページからでもすぐに元のページに戻れるようにする
  • 探したい情報を見つけるまでのクリックの回数を減らせるように工夫する
  • ページ表示までの時間が短い

 Expression Webは、このようなサイトの制作に適しています。

かしこいナビゲーション作成のポイント

あまり細分化しない

 ナビゲーションバーやメニューリストの作成には、ポイントがあります。

 まず、コンテンツの分類(カテゴライズ)を、あまり細分化しないようにしてください。特に、長い間フレームページを愛用してきた方は、フレームの利用をやめて単一のWebページに移行した際、従来の感覚で、増えていくコンテンツページに対して、ついサイドメニューに直接リンクを設置しがちです。これを行うと、サイト管理に非常に手間がかかり非効率です。

 コンテンツを追加するごとに更新する記事リストは、カテゴリごとに分けて、各カテゴリのトップページのメインコンテンツエリアに作成するべきです。また、サイドメニューやナビゲーションバーで行うナビゲーションは、個々のカテゴリのトップページに絞って行うのがポイントです。

迷子にならないようなナビゲーションの工夫

 閲覧者が(特に初めて)あなたのサイトに訪れたとき、トップページに戻るリンクがなかったり、今どのページを見ているのか分からなくなったりすると困ってしまいます。

 サブページには、必ずトップページに戻るリンクを設置しましょう。

 多くのWebサイトでは、左上のサイトロゴにトップページへのリンクが張られています。ブログにおいても、個々の記事ページを閲覧中にブログタイトルをクリックすると、そのブログのトップに戻れますよね?

 欲しい情報をすぐに見られるように、そのコンテンツに到達するまでのクリック数が最小になるように工夫することも大切です。

 また、今どのページを見ているのか一目で分かるようにしておくと、とても使いやすいサイトになります。そのためには、「パンくずリスト」を各ページの同じ場所に設置するのが良いとされています。パンくずリストでは、次のように階層構造を表します(通常、区切り文字は「>」)。

HOME > ASP.NET > Tips > カレンダーコントロールを挿入するには?

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Expression Webチュートリアル

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5