このページの先頭です
ここから本文です 実践ノウハウ

ワークフローの概要とその考え方
-木達 一仁の『Web標準に準拠したサイト構築』 第1回

Web標準に準拠して、文書構造を適切なマークアップにより明示し、文書の見た目はスタイルシートで定義するようサイトを構築する際の、具体的なワークフローやポイントについて、これから4回にわたりお話させていただきます。第1回の今回は、全体的なフローの紹介とその考え方についてご紹介します。

ワークフロー概要

レイアウト目的で(X)HTMLのテーブル要素を使用し、スタイルシートはまったく(あるいはほとんど)使用していない実装手法に基づくサイトをWeb標準に準拠させる場合、そのフローは以下の7つのプロセスから成ります。

既存サイトをWeb標準に準拠させる場合の7つのプロセス: 1.要求分析、2.現状把握、3.要件定義、4.基本設計、5.詳細設計、6.実装、7.検品

個々のプロセスの呼称や、全体をいくつのプロセスに分けて定義するかは、プロジェクトの規模等によって異なるでしょうが、概ねこのようなプロセスが必要になるのではないかと思います。

サイト制作は段取り八分

ワークフロー全体を眺めたときに、実装(ここではサイト内の各文書のマークアップ作業を意味します)に至るまでのプロセスが長く複雑過ぎるとお考えでしょうか?サイトに対する要求を収集し、それを踏まえて現状の把握を行い、プロジェクトの要件やスコープを定義のうえ設計(ビジュアルデザイン含む)を行う一連のプロセスは、その後の実装プロセスを効率的に進めるために欠かせないものです。

これはWeb標準に準拠するとしないとにかかわらず、あらゆるサイト構築において必要なことと思います。ただWeb標準に準拠する場合は特に、サイト全体に適用するさまざまなルール、仕様、デザインをあらかじめ詳細かつ確実に定めておかなければ、後になって想定外の手戻りが発生することが容易に懸念され、またその影響の度合いによっては、プロジェクトに深刻な事態を引き起こしかねません。同じプロセスに複数人が携わるプロジェクトであれば尚更です。

従来のレイアウトテーブルを利用した制作手法においては、構造と表現を一緒くたに扱うマークアップが行われてきました。しかし、両者を可能な限り分けて取り扱うことがWeb標準を適切に使いこなすうえでの重要なポイントであり、それはワークフロー上もまた然りです。であればこそ、ビジュアルデザインの確定後にスタイルシートを作成するという順序を崩すことは難しいでしょう。

総じて、サイト構築は段取り八分であるということを強く認識していただければと思います。

概念としてのCMSの重要性

ビジュアル要素やレイアウトをあらかじめ定義したうえでスタイルシートの作成に着手するという意味では、Web標準に準拠したコンテンツ制作は、実はCMS(コンテンツ・マネジメント・システム)の導入と非常に近いものがあります。

どれほど大規模なサイトであろうと、全体的なトーン&マナーが統一されていれば、そのサイト上に登場するビジュアル要素やレイアウトパターンの多様性は、一定の幅に収斂しているものです。それはつまり、見た目の同じ情報要素の繰り返しや組み合わせで、サイト全体の見た目が構成されていることを意味します。

Blogツールを含めCMSの多くは、あらかじめ部分化(モジュール化)したコンテンツを組み合わせたり、用意しておいたテンプレートにコンテンツを流し込むことで文書を生成します。この手法が、上述の「全体は部分から成る」という事実をベースとしており、ひいては見た目を先に定義してからスタイルシートを作成するという手順と良くフィットします。

たとえCMSツールを実際に導入せずとも、CMSのもつ考え方をワークフローに適用することで、効率的に作業を進めることができると思います。特にその概念は、詳細設計のプロセスにおいて重要となります。

次回以降は、各プロセスの詳細を順を追ってご紹介していきます。

プロフィール

顔写真:木達一仁

木達一仁(きだち かずひと)
株式会社ミツエーリンクス フロントエンド・エンジニア。Web Standards Project(WaSP)メンバー。2004年2月より、株式会社ミツエーリンクスに参画。Webコンテンツの実装工程に多数従事した経験をベースに、Web標準の普及・啓蒙活動を展開している。書籍『Designing with Web Standards ― XHTML+CSSを中心とした「Web標準」によるデザインの実践』、『Web標準デザインテクニック即戦ワークブック―XHTML+CSSを正しく賢く書くための15問』(ともに毎日コミュニケーションズ)などを監訳。

株式会社ミツエーリンクス:http://www.mitsue.co.jp/

木達一仁の『Web標準に準拠したサイト構築』

このページの先頭へ▲