セミナー

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ディレクターとしても、手法については知り得ておくべきだと痛感しました。


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

名村晋治

株式会社サービシンク

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

名村晋治

1996年よりWeb制作に携わり、キャリア25年目のWebディレクター

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からはWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。

詳しいプロフィール

もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、またNHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

俳優時代の経験を活かし、演劇の訓練メソッドを利用した「コミュニケーションスキル」向上を目指したセミナー・研修も実施しています。

最新の記事