セミナー

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

第四回 WebSig24/7会議

第四回 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標準実装のワークフロー

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


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事