WebSig24/7における「Web標準についての勉強会-神森さん」のセミナーのアジェンダと感想

2005年08月27日

第四回 WebSig24/7会議

今回mixiのWebSig24/7のコミュニティの勉強会で「Web標準」についての回だったのですが、その回での備忘録です。
前回は「Webサイトリニューアル与件へのプレゼン」や「RIA」に関する話などもしていて、今回は「Web標準」についての回となった次第です。

主催の和田さん(インテリジェントネット株式会社)

WebSig24/7って何?って所から、軽くこれまでの経緯をお話しされています。
「また隔月ではじめていきたいなぁ」との事!
これはネタ振りも含めて自分ももっと積極的に関わっていかないとなぁと思っています。

神森さん(アンカーテクノロジー)の話

「マークアップエンジニア」という言葉と、その意味・意義について。
自分がそれまでの業界からWebの業界に入って驚いたこと。
「マークアップ」がどうでもいい形でされている事がすごく悲しい。
「これからWebの標準」ってものをを目指していく上でそれ(=マークアップ・マークアップエンジニアの仕事)を共有していればいいな、と。

勉強会のアジェンダ

WWWで標準的に利用されている技術
実装の一つとしてXHTML+CSSでサイトを構築
Webサイトの品質を高める

実際の神森さんのセミナーの内容

WWWで標準的に利用されている技術メンテナンス性が向上する

メンテナンス性が向上する
アクセシビリティの向上
SEOへの効果
ファイルサイズ低減によるネットワーク負荷の軽減

DreamWeaverを使ったXHTML+CSSの利用

ツールは万能ではない
HTMLを知らない人は使うべきではない
ツールの癖、機能を知ること

失敗事例

日本電子専門学校の2004年4月の段階の事例ではCSSレイアウトによる制作現場の変化がかなり大きかった。
想定より、大幅な工数がかかってしまった。

従来の制作とは違うワークフロー
ブラウザチェックに要する時間の増加
グループ制作での個々のスキルの差による作業効率の低下
各要素をあらかじめきちんと洗い出す必要がある

成功事例

上記の失敗を踏まえた上での「日本電子専門学校の2004年6月のリニューアル第二段の事例」では先の失敗を吸収する形で成功事例にすることができた。

Web標準実装のワークフロー

Step0
- 現実問題として、どこまでWebの標準化の対応をどこまで(このPJ?予算内で?どのページのスコープ?)をクライアントとして決定していく事が必要となる。
Step1
- サイトの構造の解析
- 情報の分類が適切かどうか→ディレクターのタスクとして
- レイアウトパターンの洗い出し
  - エレメントの組み合わせパターンなど
    - titile、ページとしてのタイトル、GN、リード文、画像とテキストのセット、フッター、コピーライト・・・・等など=ページの要素を「部品」として考える
- ここの段階でクライアントにそのPJとしての構成要素やページ容量などをコミットしてもらう。作成に入ってから要素などが増えるとせっかく考えたエレメントに対してイレギュラーが増え、CSSだけがどんどん増えていく悪循環になってしまう。
Step2(アンカーではディレクターの仕事として)
- サイト構造
  - 情報の再構築
    - サイトマップ、ディレクトリマップの作成
    - 上記で調べた部品のカテゴライズ
- 文書構造
  - レギュレーション策定
  - マークアップルールの決定
  - 画面設計書という形でPPTでドキュメントに落としていく
Step3
- インターフェース作成
  - グリッド設計
  - エレメント(要素)毎の構成内容の作成(含:見た目のデザイン)
  - ここでは共通レイアウトに関するページ(第二階層以下?)の部分のデザインのチェック
  - トップや、個別なデザインのものはもっと引きずる事がある
- CSS基本設計
Step4
- 実装
  - 実装部隊のリーダー等による基本ベース作成(この間に量産に入れる準備の作業が入る)
- 量産
  - 準備に基づいて必要に応じて人員をアサイン
Step5
- 検証
- 修正

グリッドの定義とパーツ設計

ワイヤーフレームの形で構造をしめしたものをピクセル単位で指定されているものを作成

作業手順

正しいHTMLを作成(構造化)→ここが一番大事なので、この段階でCSSは一切考えない
CSSを作成
ブラウザチェック

量産部隊の為にDreamWeaverへの組み込み

コードスニペット
- どのようなもの?
  - よく利用するコードを登録することが出来る機能
  - もともとはHomeSiteに搭載
  - DreamWeaverMX以降で利用可能
  - 編集できるライブラリという感じのもの
- CSSレイアウト時の
  - グリッド定義とパーツ設計を元にコードを登録
  - プロジェクトメンバーに配布して全員共有
  - CSSのスキルの差を埋めることで作業効率を上げることが可能
  - Step1で洗い出したエレメントをMarkupしたものを登録していく
  - エレメント(モジュール)をしっかり管理することで、CMSなどにも応用が出来るのでは?と考えている

DreamWeaverからContributへの移行

コントリでは、ドリのコードスニペトをライブラリに登録をして、それをコントリに持ってくることで、共有アセットに登録することで、ドリのコードスニペットに近いことを実現することが出来る。

というような話で、Webディレクターが制作におけるWebディレクションをしていく上で、「Web標準」に準拠したサイト構築の失敗事例、成功事例、その構築のワークフローの中で何を意識していくのか?、そして制作におけるDreamweaverといったツールをどのように使っていくのか?ということを神森さんが、結構赤裸々にお話をしてくれました。

現実問題として名村は現時点ではまだ「Web標準」に準拠したサイト構築を、自社の案件で行えているわけではありません。
ただ、

それ自体がクライアントのビジネスへのメリットはある。
「Web標準」への準拠が、文書構造の整理のつながるのであれば、少なからず検索エンジンへのコンテンツの可読性の向上に繋がる。

ということをみせていただけました。
一方で、神森さんが失敗事例としてあげてらっしゃったのですが、

制作のワークフローの変化

というものは要素としてはやっぱり大きいかな?と思っています。
それを現場にどのように落としこんでいって、共有できるか?ってところが、実はいわゆる「HTML+CSSレイアウト」で作るということ以上に難しいことだろうな、というのが実感でした。

ただ、Web標準準拠、というのかどうかは分かりませんが、「HTML+CSSレイアウト」というのは明らかにこの流れになるでしょう。
そこへの準備とキャッチアップが出来ていないと、作ることへの付加価値は益々提供できなくなる、という意味では、Webディレクターとしても、手法については知り得ておくべきだと痛感しました。