ウェブサイト開発

ウェブサイトの開発には色々な目的があるでしょう。最近は開発手法、デザイン技法に関する書籍も多く出回っています。目的に適合したものをご購入されると良いでしょう。

ここでは、ごくおおまかなアウトラインを述べます。

要件定義

目的と目標

ウェブサイトを開発する目的を明確にします。

企業のソリューション・デリバリーの一環として開発する場合は、そこで要件定義がされているでしょうが、基幹業務連携や EC サイトなどについてはここでは対象としていません。

ここで言う目的とは、例えば次のようなものが考えられます：

知名度向上

とりあえず公開すること自体が目的。知っていただく。

情報公開

知名度向上に続いて、具体的に知っていただきたい情報がある。

売上向上／サービス提供

小規模な通信販売のほかに、個人の趣味の文章、イラスト、写真などの公開もここに含めています。

他にもあると思いますが、最初にウェブサイト開設の目的を明確にすることが理想的です。自ずからサービス対象者も明らかになるでしょう。

目標も定められれば最高です。

個人ページでは設定が難しいかもしれませんが、例えば、掲示板／メールなどのレスポンス、検索エンジン／ディレクトリサービスへの登録、ヒットカウント数などでも良いでしょう。

目標と目的があいまいだと、企業サイトの「社長のごあいさつ」がトップページにきているような醜態を演じかねません。クワバラ、クワバラ。

要件

目的が明確になったら、それに沿ったコンテンツを考えます。

ウェブサイトが実現すべき機能／盛り込むデータです。項目として挙げて、そのボリュームも目安をつけることが必要です。項目は細かい方が理想的です。ブレインストーミングで項目を搾り出し、チーム作業ならば、個々の項目を膨らませましょう。

沢山挙がった項目をカテゴリ分けします。このカテゴリ分けが曲者で、なかなかイカシタ切り口が見付からないでしょう。少々デタラメでも多くとも６～８つに分けられると良いでしょう。項目のボリュームも考慮に入れて、どのカテゴリサイズも同程度になることが望ましいでしょう。

カテゴリとそれに属する項目が挙がったら、実際に開発段階に移行します。

設計

カテゴリと項目が決まったら、ウェブサイトとしてどのように実現するか考えます。ここで明らかにすることは次の３つです：

カットオーバー期限

目的と要件が決まっても、それを完全に実現するには時間がかかります。したがって、期限を設けて、第１次、第２次とプロジェクトを分割する方が現実的です。近々の納期を設けて、第１次の目的と要件を明確にします。

ディレクトリ構造

今回のプロジェクトで実現する項目間やカテゴリ間のリンクを考えます。各カテゴリ、各項目の意味を考えて、階層化し、自由に線で結べば良いでしょう。この際、次期プロジェクトの概要が決まっていれば、そのための拡張性も考慮することが出来るでしょう。 UNIX 系 OS のディレクトリ構造／設定ファイルの関係を参考にすることもできます。

ページデザイン

サイトのディレクトリ構成が明らかになったら、それに応じてどのようなページにするのか考えます。考慮すべき事柄として次のようなことが挙げられます：

インタフェース

大きいサイトならば、カテゴリごとに表紙が必要です。表紙ではそのカテゴリの項目ごとに適切なナビゲーションが必要です。リストタイプ、メニュータイプ、テーブルタイプなどなど、競合サイトが参考になります。カテゴリ以下にサブカテゴリが必要なこともあるでしょう。

ページデザイン

全体の階層関係、ナビゲーション方法が決まったら、個々のページをラフスケッチします。前後のページ間のナビゲーションなどに気を遣う必要があります。全体で一つのサイトであることを明示する為に、統一感を持たせましょう。配色、ロゴなどで統一感を持たせることが出来ます。

開発計画

ウェブサイトは一回作って終わりではなく、日常的に更新し続けるものです。一方、昨今ではサイト数が激増し、個人サイト以外の場合は、あまりに不完全なサイトを公開するのは憚られる趨勢になってきました。最終目的達成の為の目標へ向けた段階的なプロジェクトを計画して、各プロジェクトごとにまとまりのあるサイトを提供するように心掛けると良いでしょう。

サイト開発では、作成計画だけではなく、更新計画も必要です。

サイトデザイン

全体として注意するべきことは、ナビゲーションが適切であることと、一ページの情報量を削減することです。

メンタルモデル

メンタルモデルとは、利用者が直感的に把握することがらです。例えば、ＥＣサイトでは購入商品を「ショッピングカートに入れる」、「買い物かごに入れる」などの表現があります。これはレジで「ショッピングカート／買い物かごに入れる」＝「決済する前」というメンタルモデルを頼んだ表現です。

メンタルモデルは日常の経験によって形作られるものですから、利用者のバックグラウンドによって異なります。対象閲覧者が明確な場合は考慮すべき点です。一方、新たにメンタルモデルを構成しやすいデザインもあります。サイト全体がどうなっているのか、どこをクリックするとどうなるのかなどの直感的把握がしやすくなります。

メンタルモデルを構成しやすいデザインが優れたユーザインタフェースといえます。

ページサイズ

１つのテーマに付き１ページ割り当てますが、あまりに長大なスクロールを必要とするページは、閲覧者にストレスを掛けるだけでなく、対象閲覧者を分散させてしまいます。どの閲覧者にもページの６０％程度は要求されるようなサイズに分割すると良いでしょう。

１ページ１テーマに絞ってページを分割することは、印刷目的などの場合に不向きであり、サイト全体を把握しづらくさせますが、検索エンジン対策、閲覧の容易性などに関しては重要な要素です。

クリック回数

ある有名な調査では、ウェブ利用者は３階層以上深い情報は見つけられないとされています（３クリックの法則）。カテゴリが７つあって、サブカテゴリが各カテゴリごとに７つずつ３階層存在すれば、全部で幾つになりますか？実に３４３個です。ウェブ閲覧者が全部見るでしょか？他のリンクから逃げられることは明白です。

一方、クリック回数を減らす為に、１ページにナビゲーションリンクを大量に詰め込むと利用しづらくなります。

限られた対象が繰り返し利用することを想定したサイトの場合は、一ページに全てのリンクが揃っていた方が良いこともあります。操作性を把握すればその方が使いやすいでしょう。

ナビゲーション

閲覧者が、現在どこにいて、このリンクを辿るとどこに行くのか、などの情報を適切に提供できるナビゲーションの工夫が必要です。特に、検索窓やサイトマップなどが有効でしょう。

通常のナビゲーションの場合は、メンタルモデルを構成しやすく心掛けることが重要です。例えば、目的に応じて、色、名前、アイコンなどは統一すべきです。ホームディレクトリに戻るのに、「ホーム」、「トップ」、「目次」、「戻る」などの名前が別々に使われているのはよくないことです。例えば、「左上のロゴをクリックすると必ずホームに戻る」などの操作の一貫性、ツールとしてのソリッド感が重要です。

敢えて外すアート系のサイトもあります。

具体的な配色や、リスト／マトリックス／メニューなどのインタフェースの選びかたは個人の天才に任せるのが楽しいでしょうが、手法として開発もされています。書店で関連書籍を探してください。

開発実施

目的が決まって、コンテンツが決まって、リンクやデザインが決まったら、いよいよ開発です。ここでデザイン局面との手戻りが発生します。実際にコーディングすると、ページサイズが大きすぎる、クロスブラウザを考慮すると実現できないなどの問題が発生するからです。

開発が小規模、長期間の個人サイトならば、要件定義局面まで戻って、スパイラルに完成させていくのが良いでしょう。この場合は、「完全」を待たずに、「こんなものだろう」という時点で公開したほうが良いでしょう。

関連サイトを沢山閲覧して、ユーザから見た使用感に基づいて検討し、フィードバックできれば理想的です。具体的な技術として、ページ記述に (X)HTML ,CSS, JavaScript など、インタラクティブコンテンツのために CGI プログラミング言語などが必要になります。それ以前に、ウェブサイトを公開するためにウェブサーバにディスクスペースが必要です。 CGI 言語としては Perl が簡単でよいでしょう。

運営

ある程度完成して、ウェブサーバで公開したら、運営／更新の局面です。ここからが本番です。

作りっぱなしで更新されないサイトはかっこよくありません。最低でも月に一度は更新しつづけることが理想です。完全に個人サイトの場合は無理せず、ゆっくり気が向いたときに更新すればよいでしょう。続けることが肝要です。