少しでもWeb開発の分野に携わったことがある人であれば、Webサイトを短時間で作成しなければならない状況に直面したことがあることでしょう。新しいデザインの使い勝手をテストするため、そのモックアップを作成することが必要になるかもしれません。納期を遅らせることができない顧客をかかえているかもしれません。あるいは、仕事の遅い人といっしょに開発をすることになるかもしれません。いずれにしても、Webページを短時間で作成し、しかも将来のためにそれを柔軟なものにしておくことが必要です。

この記事では、大量のページを短時間で開発するために活用できるテクニックをいくつか紹介します。示されている例は、ほとんどあらゆる開発システムで使用できる手法を示すものです。そのアイデアは、開発と配置のために使用している実際のプラットフォームやツールに適合させる必要があります。

前提条件: 始めるのに必要なもの

速さを重視するWeb開発では、効率的にサイトを構築する必要があります。まずは、何を構築する必要があるのか、ということを明確にします。そのためには、そのサイトの機能に関する要件は何かをよく理解し、サイトの動作方法を示す設計とフローチャートの作成が必要です。

機能に関する要件では、完成後のサイトで何をしなければならないのかを明確に指定する必要があります。要件と、プロジェクトの適用範囲をよく理解しておくなら、後になって遅れが出たり頭が痛くなるような状況に直面したりするのを防ぐことができます。機能に関する要件というのは、たとえば次のような質問の答えです。

• このWebサイト/ページでは何を実行することが必要か?
• どの程度処理速度が求められているか?
• どのブラウザーに適合しなければならないか?
• どんなサービスを提供する必要があるか?
• どんなシステムを対象とするのか?

これらの質問に対して、できる限り具体的な答えを用意する必要があります。

そのWebサイトで実行するべきことを理解することに加えて、ユーザーにとってどんなデザインでどんな動作をするかを理解しておく必要があります。そのためには、Webユーザー・インターフェースの設計が必要です。さらに、画面から画面にユーザーがどのように進むかを示すフローチャートやストーリーボードがしばしば役立ちます。

速さを重視するWeb開発過程

各Webプロジェクトはそれぞれに異なってはいますが、多くのプロジェクトに共通のステップがいくつかあります。

• 潜在的な問題がないかどうか、設計と機能の要件を調べる。
• 設計を、ブロックやペインを構成するモジュール化されたページへ分解する。
• XMLまたはデータベース・レコードとしてデータを集積するためのモデルを作成する。
• ページの結果/プレゼンテーションにXHTMLを使用する。
• プレゼンテーションスタイルを、中心となる標準スタイル・シートにできる限り移す。
• 自動処理によってコンテンツの要素を作成する。

上に戻る

インターフェース設計に問題がないかどうか調べる

Webページで何をする必要があるのかを理解し、インターフェース設計が決まったら、潜在的な問題がないかどうかを調べる必要があります。設計の実装や使用を困難にしかねない技術的な問題がないかどうかを調べてください。ページやアプリケーションを作成する前に、それらの問題を率直に認めるなら、長い目で見て大きな時間の節約になることがあります。

インターフェース設計の印刷出力を見て、一般的なユーザーが期待するようなものになっているかどうかを検討してください。このことは、作業をやり直したり納期間際に修正を入れたりしてプロジェクトの時間を無駄にしないようにするのに役立つ優れた訓練となります。デザイナーのためには、ページ・デザインを8.5" ×11" のフルサイズで印刷出力したものを用意してください。次のことを調べます。

• 重要なインターフェース要素がすべて表示されており、印刷出力上で見やすいかどうか?
  • 会社のロゴや会社名
  • サイト全体のナビゲーション
  • 常に表示しておくべきツール (ヘルプ、会社情報、検索、サイト・マップ、プライバシーなど)
  • ページ・コンテンツ域
  • 現在のページのコンテンツに関連するリンク
  
  
• 重要なナビゲーション要素の一部が隠れていたり、ドロップダウンやマウス・オーバーなどによって実装されていたりしないかどうか?
  • 8.5" ×11" の印刷出力で表示が切れてしまった要素は、多くのユーザーのコンピューター画面からはみ出す可能性が高くなります。
  • ドロップダウンやマウス・オーバーは、使い勝手の点で不利であることが知られています。そのような機能を使用する場合は十分な注意を払う必要があります。
  
  
• グラフィックスはWebにおいて効率的に使用されているか?
  • インターフェース設計がどれだけ美しいものであるとしても、ユーザーの期待する速度でサイトが表示されるということは重要です。
  • 連続した色合いのイメージやグラデーションが広い領域で使用されていないかどうか、また不必要なイメージが使用されていないかどうかを確認してください。
  
  
• 重要な要素は、ユーザーが期待する場所に表示されているかどうか?
  • ロゴと "ホーム" ボタンは、ページの左上に
  • サイトの主なカテゴリーへのリンクは、ページの上部または左端に
  • 常に表示しておくべきツールはページの上部に
  • 内部リンクはページの左側に
  • 外部リンクはページの右側に
  • 広告はページの上部または右側に
  • ページの中心となるコンテンツはページの中央に
  
  
• ナビゲーション要素の階層構造は、ユーザーが期待するものになっているか?
  ユーザーは、まずコンテンツに含まれるリンクを探し、次にページの左側を、その次にページの上部を探す、という調査結果があります (参考文献を参照)。それゆえに、広い範囲にわたるカテゴリー・ナビゲーションはページの上部に、関連リンクはページの左側に、アクション項目やコンテキスト・リンクはコンテンツ域に配置するのが一般的です。たとえば、Amazon.comはその典型的な例です。設計がこのような階層に従っていない場合、あるいは印刷出力で要素のいずれかが表示されていないなら、問題があるということになります。

設計に潜在的な問題があるなら、作成作業に取りかかる前にそれを修正してください。サイト特有の理由や目的があるために、一般的でないアプローチを使用して設計するということは考えられます。しかし、コーディング作業の前に開発、使い勝手、またはパフォーマンスに関する問題点を調べるなら、問題の発生を回避できます。

上に戻る

設計をモジュール化された要素に分解する

次に、レイアウトを評価して、それらをいくつかのモジュール化された要素に分解します。これは、デザインの印刷出力を使って実行できます。

ほとんどのWebレイアウトは、いくつかの一般的なセクションに分割できます。

• 上部ブランド表示域 （図では"Branding"）
• 上部ナビゲーション （図では"Top Navigation"）
• 左欄 （図では"Left Column"）
• 中央 (主コンテンツ) 欄 （図では"Main Content"）
• 右欄 （図では"Right Column"）
• フッター （図では"Footer"）

印刷出力を検討して、それぞれに相当する領域が含まれているかどうかを調べてください。サイト・デザインによっては、上記のすべての要素が含まれていないかもしれず、あるいは上記には含まれない付加的な領域があるかもしれません。このステップの主な目的は、ページの各領域をだれが担当するか、あるいはどのプロセスで処理するかを決めることです。そのための1つの簡単な方法は、印刷出力に領域を書き込み、責任範囲が重なり合わないようにすることです。

このようにして複数のセクションに分割したなら、それを使ってページの構築方法を分析できます。それが終わると、ページの論理サブセットを識別できたことになります。それらのサブセクションを使用することにより、サーバーサイド・インクルードや動的プロセスをどのように使用するか、あるいはロジックが相互にどう関係し合うかを判別できます。

次に、分割の例を示します。

上に戻る

一貫したデータ集積モデルの作成

実際のコンテンツの作業に入る前に、一貫した方法でコンテンツを集積するための戦略を立てる必要があります。このプロセスは、データベースのスキーマ定義によく似ています。コンテンツを一貫した方法で集積するなら、アプリケーションによる操作が可能になり、プレゼンテーションとコンテンツ自体を分離できます。

コンテンツの集積方法を定義します。

• サンプル・ページを見て、それぞれのページで固有なのはどの要素かを調べます。
• タイトル、ヘッドライン、イメージ、本文コピーなど、共通のページ要素を見つけます。
• 標準的なWebメタ・キーワードや記述など、付加的な情報の集積方法を判別します。ページごとに、表示には現れないが集積のためには必要な情報が含まれていることがあります。たとえば、ページの分類名や、そのページがワイヤレス・デバイスに対しても発行されているかどうか、などです。

このプロセスの結果は、ページを構成するそれぞれ別個のコンテンツ要素のマスター・リストになります。簡単な例を示します。

• ページ・タイトル
• メタ・キーワード
• メタ記述
• サイトのカテゴリー
• ワイヤレス発行フラグ
• ページ要約
• ヘッドライン
• 日付欄
• 作成者
• 本文コンテンツ
• フッター・タイプ

作成したリストを使用して、コンテンツの集積方法を定義します。たとえば、このリストをデータベースやXMLのスキーマに変換することができます。InterwovenのTeamsiteなどのコンテンツ・マネージメント・システムを使用しているなら、このリストを使ってデータ・キャプチャー・レコードを定義できます。

上に戻る

ページの表示にXHTMLを使う

コンテンツの集積方法を定義したなら、ページのプレゼンテーション・テンプレートを作成できます。このプロセスは実際に使用されるインフラストラクチャーにかなり依存するものの、開発プロセスのスピードを上げるためにどんなシステムでも採用できるテクニックがいくつかあります。

1つのテクニックは、XHTMLを使用してWebインターフェースを作成することです。XHTMLにはたくさんの利点があります。それは最新のWebブラウザーで動作し、XMLとして有効なので、他のXMLアプリケーションとの間でインテリジェントに相互変換できます。XHTMLの利点を最大限に活用するには、可能な限りプレゼンテーション・スタイルとXHTMLとを分離するのがよいでしょう。

HTMLの代わりにXHTMLを使用してページを作成する場合、注意するべき重要な点がいくつかあります。

• doctype宣言を含める。
• 要素が整形式であるようにする。
• すべての属性を引用符で囲む。
• IDには小文字を使用する。
• 空要素にも終了タグを使用する。

次に、どのページ・スタイルがCSSとして実装可能かを判断します。そのためには、プレゼンテーション・スタイルをスタイル・シートに移すことの利点と、ユーザーのブラウザーとの適合性を維持することの必要性との間でうまくバランスを取る必要があります。すべてのスタイルをXHTML文書外に移すことができれば、それが理想的です。しかし、Webブラウザーの非互換性のため、多くのインターフェース設計は、CSSを使って正確に実装することが不可能です。スタイル・シートに置き換えることができない効果の主なものは、ページ・レイアウトを定義するのに使用されるテーブル要素です。

XHTMLを、前に決定したレイアウト・セクションに対応するセクションに分割します。そのコンテンツを担当する担当者およびプロセスに応じて分割してください。これによって、ページのセクションごとに、最終的にプレゼンテーションを行うXHTMLがどんなものになるべきかを決定できます。

その結果は、プレゼンテーションを行うコーディングが最小となるようなXHTMLコンテンツでなければなりません。そして、このコンテンツはいくつかの論理セクションに分割されます (リスト1)。

                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Language" content="en-us" />
  <title>Title</title>
</head>
<body>
  <table border="0" width="100%">
    <tbody>
      <tr>
        <td width="100%">Branding</td>
      </tr>
    </tbody>
</table>
<table border="0" width="100%">
  <tbody>
    <tr>
      <td width="100%" height="16">Navigation</td>
    </tr>
  </tbody>
</table>
<table border="0" width="100%">
  <tbody>
    <tr>
      <td width="120">Left column</td>
      <td width="100%">Center</td>
      <td width="120">Right column</td>
    </tr>
  </tbody>
</table>
<table border="0" width="100%">
  <tbody>
    <tr>
    <td width="100%">Footer</td>
    </tr>
</tbody>
</table>
</body>
</html>

骨子のテンプレートができたなら、その結果を確認してください! XHTMLをW3バリデーターで検査してください (参考文献を参照)。

上に戻る

グローバル・スタイル・シートの作成

プレゼンテーション作成の最後のステップは、グローバルCSSの作成です。このスタイル・シートには、サイト規模のスタイルをすべて含めます。スタイル・シートを使うことによって、可能な限りプレゼンテーション・スタイルとXHTMLコンテンツ・マークアップとを分離してください。

可能な限り、スタイルをXHTMLの標準要素に適用するようにします。それによって、Webページのサイズを最小限にすることができ、同時にコードが複雑になるのを最低限に抑えることができます。また、開発者ごとにページ・スタイル要素のコーディング方法が違うという事態の発生する可能性が小さくなります。

                
body { font-family: Verdana, Arial, Helvetica, sans-serif }
h1 { margin-left: 14px; margin-bottom: 5px; margin-right:14px }
h2 { margin: 14px; font-size: 1em; font-style: italic; }
h3 { color: #FFFFFF; margin-left: 5px; margin-top: 2px; margin-bottom: 2px }
h4 { font-size: .8em; margin-left: 5px; margin-top: 2px; 
margin-bottom: 2px; color:#FFFFFF }
h5 { font-size: .6em; margin-left: 5px; margin-top: 2px; margin-bottom: 2px }
p { margin: 14px; font-size: .9em; }
.Offer { color: #FF0000; font-size: .6em; font-weight: bold }
.OfferCopy { font-size: .6em }
.OfferHead { font-size: .6em; font-weight: bold; margin-top: 5px}

サイトのスタイル指定を集中管理することにより、一貫性が向上し、メインテナンスがさらに容易になります。スタイル指定を別のリンクされたファイルに移すなら、ページのサイズがさらに劇的に小さくなります。

上に戻る

可能な限り自動処理によってコンテンツの要素を作成する

一貫性のある方法でコンテンツを保管したなら、プログラムによってページ要素を生成することは容易になります。たとえば、索引、分類、および関連情報へのリンクを自動生成できます。

                
SELECT key, dateline, headline, summary FROM Articles ORDER BY Date DESC

リスト3 は、保管されているコンテンツから、照会を使用してその一部を構成する情報を抽出する方法を示しています。抽出された日付欄、ヘッドライン、および要約情報をページ・テンプレートに挿入することによって、索引を生成できます。その書式を設定することにより、たとえば次のような結果が得られます。

• 2001/7/6
  サイトの成功度を測定する
  Webサイトが成功しているかどうかは、どうすればわかるでしょうか? この質問の答えを知ることは、企業Web開発者に与えられる主要な役割となりつつあります。サイトの成功度を測定するための主要な4つの方法について紹介します。
  
  
• 2001/9/6
  Webのパーソナライズ
  パーソナライゼーションとは、顧客についての情報を得た上で、その顧客の必要に応じるということを意味します。規則に基づく意思決定や協調フィルタリングなどの方法論を論じて泥沼にはまり込み、その結果、パーソナライゼーションという考えを見失ってしまうことはよくあることです。パーソナライゼーションを活用することにより、顧客がこちらの気遣いを感じ取れるようにしてください。
  
  
• 2001/9/6
  ワイヤレス・インターネットへの対応は十分ですか?
  多くの場合、企業には、PDAや携帯電話などのワイヤレス・インターネット・デバイスを仕事に活用する情報通の社員がいるものです。それらのデバイスを活用して連絡先情報やスケジュールなどを常に持ち歩くことは、今や当たり前のことになってきました。社員がワイヤレス・デバイスを活用できるようにする方法についてご説明します。
  
  

カテゴリー名と日付による照会を使うことにより、サイトの主要なセクションのための索引ページを生成できます。同じように、コンテンツ・データベースへの照会を使用すれば、関連記事の索引を生成したり、作成者ごとのリストを生成したりできます。それらの要素は、コンテンツが変更されると自動的に更新されるため、サイトのコンテンツを作成したりメインテナンスしたりするのに必要な労力を最小限にすることができます。

上に戻る

変更を加える

納期間際に変更を加えなくて済むようなWeb開発プロジェクトは、ないと言ってもいいでしょう。速さを重視するWeb開発プロセスを採用すれば、納期間際での変更にもずっと容易に対応できます。

• コンテンツ・セクションに影響する変更であっても、それに関係するのは、そのセクションを担当する人またはプロセスだけなので、容易に変更を加えることができます。
• ルック・アンド・フィールを変更するには、集中管理のインクルードを変更するだけです。
• 全体的なルック・アンド・フィールの変更は、CSSの変更により実現できます。
• それらの各変更操作により、サイト内の関係するすべてのページが更新されます。

次の2つの例は、集中管理用ファイルを少し変更するだけでサイト規模の変更を加えることができることを示すものです。

例1 - メイン・スタイル・シートでのテキスト書式設定
例2 - ヘッダー・インクルードの変更およびスタイル・シートの更新後の結果

ページ・テンプレートを大きく変更することにより、さらに劇的な変更を極めて容易に加えることができます。

上に戻る

要約

速さを重視するWeb開発プロセスには、たくさんの利点があります。まず、大規模プロジェクトを管理の容易な小単位に分割できます。また、短期間に数多くのWebページを作成するのに役立ちます。この方法は柔軟性が高く、どんな開発環境にも適用できます。最大の利点は、要素が論理的な小単位に分割され、それらが集中管理されるため、急いで変更を加えることが必要な場合に、変更作業が容易であるということです。

参考文献

• WebReviewのAn XHTML Roadmap for Designers には、XHTMLの概要が簡潔にまとめられています。
  
  
• WebReviewには、便利なWebブラウザー互換性一覧表 (Browser Compatibility Chart) も用意されています。
  
  
• W3のWebサイトには、XHTMLに関する詳しい情報があります。そこには、オンラインのXHTMLバリデーターもあります。
  
  
• Apache Weekでは、Apacheでサーバーサイド・インクルードを使用する方法について説明されています。
  
  
• Society for Technical Communicationには、充実したヒューリスティック評価チェックリストがあります (Heuristic Evaluation - A System Checklist)。これは、インターフェース設計に潜在的な問題があるかどうかを調べるのに便利です。
  
  
• IBMのPatterns for e-businessサイトには、アプリケーション開発プロセスの速度を上げるのに役立つ再利用可能な多くのリソースが示されています。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• 前提条件: 始めるのに必要なもの
• インターフェース設計に問題がないかどうか調べる
• 設計をモジュール化された要素に分解する
• 一貫したデータ集積モデルの作成
• ページの表示にXHTMLを使う
• グローバル・スタイル・シートの作成
• 可能な限り自動処理によってコンテンツの要素を作成する
• 変更を加える
• 要約
• 参考文献
• 著者について
• コメント