Webデザインのルール化 - 奮闘記2006

賞味期限が切れたので、某プロジェクトのメモを不定期に掲載していきます
書籍「The Rule」はまだ執筆中です‥

---

アーカイブ（1）

今年（2006年）は「ルール化・モジュール化・ワークフローの改善」にどっぷり浸かった年であった。Web業界の人間ではないにもかかわらず、業務の骨幹といえるワークフローを解体するという責任重大なお手伝いをさせていただいた。この経験は「The Rule」という本のなかで反映したいと思っている。

FrontPageを使っているデザイナーとDreamweaverを使うデザイナーが同じテーブルについて、Webデザインのガイドラインを決めていく際、肝となったのが「ルール化」であった。300ページ以上の「ルールブック」とモジュールのバリエーションを掲載した「プランブック」によって、クライアントに対する説明コストが抑えられ、作業途中で修正が入るという手戻りも大幅に減少した。
この経験は、書籍「CSSビジュアルデザイン・メソッド」（毎日コミュニケーションズ）、「Webデザイン・ルールメイキング」（ソーテック社）、「The Rule ”ルール”」（xxx）に記していきたい。

プロジェクトでおこなった10日間戦争の抜粋を以下に記します。小規模なプロジェクトなので、随所に無駄があります。ただ、低予算でもある程度の成果を得られたので「成功事例」と書いておきます（かなり消極的に‥）。

実践したルール化の手順（抜粋）：

1. W3Cの（HTMLおよびCSSに関する）TRをほぼ全てプリントアウトする
2. ドキュメントを読み込む
3. 採用するHTMLの要素を決める
4. 必要と思われるセレクタの名前を列挙してリストを作成する
5. 採用するCSSのプロパティを決める
6. 記述するプロパティの順序を決める
7. 使用するアプリケーションソフトの環境設定を変更する（ソフトの各機能を記述ルールにあわせる）
8. プロトタイプを作成する
9. バリデータでチェックする
10. Firefox、Opera、Safari、IE 7（ベータ版）でプレビューする
11. バグや解釈の違いを確認する
12. ルールを決定する
13. アクセシビリティガイドラインを読み込む
14. 優先する項目を列挙してリストを作成する
15. リストに沿ってプロトタイプを作成する
16. バリデータでチェックする
17. ホームページリーダーでボイスプレビューする
18. 問題を修正する
19. ルールを更新する
20. IE 5、5.5、6 およびMac版IE 5でプレビューする
21. バグや解釈の違いを確認する
22. デザイナーの評価が高いWebサイトのソースを検証してブラウザ対策の傾向を知る
23. 安定した対策方法（CSSハックなど）を列挙する
24. 条件付コメントとの組み合せでローカルルールを決める
25. IE 5、5.5、6 およびMac版IE 5でプレビューして確認する
26. ルールを更新する
27. 使用するアプリケーションソフトの環境設定を変更する（CSSハックと条件付コメントのローカルルールを取り込む）
28. ルールブックを印刷して各チームに配布する（オンライン版のURLを公開する）
29. Web Designing、web creatorの2005年11月からのバックナンバーをすべて購入する
30. 大藤幹氏、益子貴寛氏などのCSS関連の書籍を購入する
31. 雑誌と書籍を分解して概論、技法、裏技などに分ける
32. 分類したページを箱に入れ、番号をつける
33. ルールブックのアップデート可能な部分に番号を記載していく
34. ルールを更新する
35. 著作権フリーの素材集を購入する
36. Webサイトのカテゴリを12に絞り、プロトタイプを作成する
37. サイトのStructure（構造）を示す図をどのように描くか検討する
38. サイトのDesign Guideline（ガイドライン）を示す図をどのように描くか検討する
39. 描画ルールを決定する
40. プランブックの仕様を決める
41. 各ルールのアイコンをデザインする
42. ルールのヘッドラインを書く
43. カテゴリ12のプロトタイプWebページをバリデータでチェックする
44. ホームページリーダーでボイスプレビューする
45. Firefox、Opera、Safari、IE 7（ベータ版）でプレビューする
46. IE 5、5.5、6 およびMac版IE 5でプレビューする
47. プランブックを作成する
48. プランブックを印刷して各チームに配布する
49. クライアント向けのプランブックを編集する
50. 発注先のデザイナーを対象にルールブックとプランブックの使い方、勉強会を開催する
51. クライアントを対象に説明会を開催する
52. ルールブック更新手続きを決める
53. クローズドネットもしくはSNSにコミュニティを立ち上げる
54. 海外のWebデザイン関連の情報を翻訳してもらい定期的にアップしてもらう
55. 楽しんで仕事をするため「余裕が持てる」ように意識を高める

このプロジェクトでは、Web標準の導入やCSSデザインへの移行といった目標を持たず、最悪（必要であれば）部分的な物理マークアップ、たとえばtable要素による固定レイアウトなども許容する覚悟であった。ところが、DreamweaverやFrontPage、ホームページビルダーなどが混在する恐ろしい協業だったので、一度すべてをリセットするしかなかったのである。W3CのTRをプリントアウトすることから始まり、ルールブックとプランブックが出来上がる頃には、いわゆる「Web標準」的なものになっていた。逆の見方をすれば、時間をかけて準備をしないと標準化を導入するメリットは十分に得られないのかもしれない。スキルの高い人たちが集まっていれば、最初から共通のリソースが豊富なので問題ないが、アプリケーションソフトに99%依存するチームにおいて無計画の標準化導入はうまくいかないようだ。各人の自己学習の努力にかかってしまうと、足並みが揃わない。

プロジェクト2006の概要：

現状把握：

• Web業界の裾野の広さ
• ホームページビルダーの業界普及率
• 中小企業、自治体のWebサイトもホームページビルダー
• Dreamweaver MX 健在

要望：

• クライアントからの要求に変化
• ワークフローを改善したい

実利判断：

• デザイナーの教育コスト（困難）
• 教育時間の確保（困難／休日は可）
• アプリケーションのバージョンアップ（段階的なら可）

体制：
4つの制作会社の協業（使っているアプリケーションソフトがまったく異なる。ハンドコーディングできるデザイナーは少ない）

• プロダクションA：Dreamweaver 8
• プロダクションB：Dreamweaver MX、MX2004
• プロダクションC：ホームページビルダー10
• プロダクションD：FrontPage 2003（変更：Expression Web）

ミッション：

• クライアントの要求に応えられる体制とスキルをつける
• 採用するアプリケーションの種類に影響されないワークフローをデザインする
• A、B、C、D社で共有するためのルールを決める

参考：
アセット管理で実現する「Web Magazine - Designing」
Web本の執筆メモ