SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Expression Webチュートリアル

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

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


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

 立ち上げの段階では、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 > カレンダーコントロールを挿入するには?

次のページ
Webデザインレイアウトの基本

この記事は参考になりましたか?

Expression Webチュートリアル連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/1772 2009/04/14 11:20

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー