読者です 読者をやめる 読者になる 読者になる

wanichan's web tips

Expression Web ユーザー向けにサイト制作のコツと問題解決のヒントを取り上げていきます。

Webサイト構築のポイント

Webサイト制作の基礎知識

Webサイトを構築する場合は、まず作成する前にWebサイトの目的を定め、テーマ別にコンテンツを分類しながら設計するようにします。

Webサイトの目的を定め、想定とする閲覧者について考える

Webサイトを作成していくうえで、内容や構成についての制限はなく、自由に構築できます。

たとえば、旅先で撮影した写真ギャラリーコンテンツを含む個人サイトを立ち上げるのであれば、はじめはフォトギャラリー、自己紹介、日記、リンク集といった数ページで構成された規模の小さいWebサイトになるはずです。

そのあと、更新作業を重ね、そのWebサイトの規模が大きくなるにつれて、コンテンツは自然に多岐にわたっていきます。

すると、あまり構成や目的を考えずに自由にWebサイトを作成し更新していくことで、まったく異なる要素のコンテンツがすべて混在したWebサイトになり、本来のWebサイトの目的を見失ってしまう恐れがあります。

これらの問題を未然に防ぐためには、まず、Webサイトの目的を定め、対象とする閲覧者を想定しながら構築していく必要があります。

テーマ別にコンテンツを分類する

たとえば、海外旅行、音楽、そしてペットやパソコンなど、さまざまな分野のコンテンツを同時に配信したいと考えた場合、もしこれらの情報がすべて同じ場所に混在していたらどうでしょうか。一体何の情報を発信しているホームページなのか判断できなくなるでしょう。どのコンテンツがメインなのかぼやけてしまい、Webサイト全体の魅力が失われたものになるのです。

そこで、これらの混在したコンテンツを以下のようにテーマ別に分類してまとめることで、それぞれのコンテンツが独立した「生きた情報」に生まれ変わります。

  • 海外旅行
    • 写真集
    • 旅行記
    • 関連リンク
  • 音楽
    • アルバムレビュー
    • ライブレビュー
    • 関連リンク
  • ペットの話題
    • 猫関係
    • 犬関係
  • IT関係
    • ハードウェア
    • ソフトウェア
    • インターネット
    • 関連リンク
  • プライベートコンテンツ
    • 自己紹介
    • 日記
    • 友人のWebサイトの紹介

上記のようにテーマ別に分類した情報はそのままフォルダで分類します。このようにすることで、Expression Webでのコンテンツの管理や更新の作業が行いやすくなります。なお、フォルダを作成する場合、日本語(2バイト)のファイル名やフォルダ名の利用ができないサーバーやブラウザもあるため、原則として半角英数文字で指定します。また、スペースの代わりにアンダースコア「_」または半角ハイフン「-」を利用します。

  • travel
    • gallery
    • travelogue
    • link
  • music
    • album
    • live
    • link
  • pet
    • cat
    • dog
  • pc
    • hardware
    • software
    • internet
    • link
  • aboutme
    • profile
    • diary
    • link

階層構造にしてコンテンツを管理する

テーマ別に分類しても、その中のコンテンツのファイルなどがすべて同じ場所(階層)にあっては意味がありません。[フォルダ一覧]作業ウィンドウ(Expression Web 3以降では[フォルダーリスト]パネル)で目的のファイルを見つけるのにも手間がかかってしまいます。そこで、テーマ別のフォルダごとにそれおぞれ階層構造(ツリー状)にコンテンツをまとめていくことで、どこに何があるのか明確になるため、Webサイトの管理、更新がしやすくなります。

たとえば、以下のような階層構造の場合、音楽関連のサブコンテンツ、アルバムレビューサイト(/music/album/)を閲覧中、そのコンテンツのトップページに戻る場合、上の階層へたどると音楽関連のトップ(/music/)へアクセスできるようになります。

Expression WebのWebサイトのルートディレクトリ(フォルダ)は、 C:\Users\<ユーザー名>Documents\My Web Sites のようになりますが、インターネット上のWebサイトでは、これが「http://」からはじまるアドレスに置き換わります。

  • C:\Users\<ユーザー名>\Documents\My Web Sites
    (インターネットではhttp://www.example.com/というようなアドレスになる)
    • travel
      • gallery
      • travelogue
      • link.html
      • index.html
    • music
      • album
      • live
      • link.html
      • index.html
    • pet
      • cat
      • dog
      • index.html
    • aboutme
      • diary
      • profile.html
      • link.html
      • index.html
    • index.html

それぞれのフォルダごとに「index.html」または「index.htm」ファイルを用意する

それぞれのコンテンツのフォルダには「index.html」などのトップページファイルを用意し、コンテンツのインデックス(目次)などを作成します(Expression Webでの既定のファイルは「default.html」)。

このようにすることで、閲覧者が現在どのコンテンツにアクセスしていて、そこにはどのような情報があるかがわかるようになります。

インターネット上では「index.html」というファイル名は省略できるため、旅行関係のアドレス(URL)は、http://www.example.com/travel/gallery/ になります。

このようにフォルダ単位でコンテンツを管理し、それぞれ充実させることによって、アクセスアップにつながります。