D2 03 レポート 【現場で生かせる Web標準の知識とテクニック】 | デザインってオモシロイ -MdN Design Interactive-

D2 03 レポート 【現場で生かせる Web標準の知識とテクニック】

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて
会場風景
Designer meets Designers 03 レポート

現場で生かせる
Web標準の知識とテクニック





2007年8月と11月に開催され、延べ参加者800名を超えたイベント「Designer meets Designers(D2)」。3回となった今回のテーマは「現場で生かせるWeb標準の知識とテクニック」。Web標準に関する深い知識を有する4名のプロフェッショナルが、Web標準の概要からビジネスとして生かすためのテクニックまで語る充実のイベントとなった。その内容をレポートする。
※本コンテンツ中の社名表記や肩書きなどは、イベント開催当時のまま表記されています。あらかじめご了承ください。

Web標準の利点と活用方法はもちろん
今後の展開なども徹底的に解説!


実際に現場で活躍しているWebクリエイターをゲストに迎え、Web業界の「いま」を見据えるイベント「Designer meets Designers」の第3回目が5月9日(金)、六本木アカデミーヒルズにて開催された。
今回のテーマは「現場で生かせるWeb標準の知識とテクニック」。Web業界の第一線で活躍する4名のゲストスピーカーが登壇し、4つのSESSIONが行われた。Web制作の現場では、いまだにテーブルレイアウトを使っているケースが見受けられる。しかし、Web制作者側にとってもWebを利用する側にとっても、よりよいWebサイトを構築するためにWeb標準準拠は避けて通れない。果たしてWeb標準とは、いったいどんなものなのか? 基礎知識から活用テクニックまで、実践ですぐに使える情報が語られるイベントだけあり、開場と同時にほぼ座席は満席になるほど、注目度が高いことがうかがいしれた。今回も400名近くの人が来場。Web標準についての知識を習得したいというWebクリエイターたちが、その第一歩を踏みしめるためにここに集ったのだ。

main 編集長挨拶 講義風景

Web標準準拠の
最大のメリットとは?

web creators編集長・佐藤弘基が登壇してD2開会のあいさつを述べたのち、早速SESSION1がスタート。トップバッターはフリーランスのWebクリエイターを経て、現在デジパでディレクターとして活躍している加藤善規氏。

「Web標準に準拠したサイト制作のための基本と実践」について、Web標準の基本から講演はスタートした。 Web標準準拠はすでに当たり前になってきており、正しく使うことが前提条件となりつつあるという業界の現状を解説したのち、Web標準準拠のメリットについて語った。 「Web標準のメリットはアクセシビリティの確保です。この場合のアクセシビリティは障害を持つ人など特定のユーザーだけではなく、すべての訪問者(人、ブラウザ、ソフトウエアなど)が対象です。人間だけではなく、コンピュータも訪問者と考えてよいでしょう。検索ロボットなどから、正しくWebサイトを見てもらえるつくりを実現することが重要なのです」 多様なブラウザや回線状況下でも、同一内容のWebサイトを見てもらうことは、ユーザーのアクセス機会損失を回避すると同様に、Webサイトに対する満足度を高めることができると加藤氏は説明した。

また、今後どのような仕様になっていくのかについては、社内管理やガイドライン策定など、クオリティの管理がしやすく再利用も容易にできるXHTML1.0と、ブラウザの対応を考慮したCSS2.1で構築するのがベストだと述べた。
さらに国際的協調性が高いWCAG2.0に準拠したWebサイトづくりを推奨。

「Web標準に準拠することは、いままでのやり方を変えなければいけないとか、デザインや機能的に制約があると思われています。しかし、Web標準によって、デザインや機能が制限されることはありません。ビジュアル・ユーザビリティ・アクセシビリティの3つが高いレベルでバランスよく配置されているWebサイト——つまりユーザー満足度が高いWebサイトは、クライアントの満足度も高まります。Web標準準拠は、Web制作をするうえでのスタートラインでしかありません。よりよいWebを実現するために、私たちWeb制作者ができることを、これからも考えていくことが大事です」と、80分の講演を締めくくった。

講義風景 講義の様子


正しいWeb制作に 必要なのは
バランス感覚を磨くこと


続いてSESSION2は、ミツエーリンクスの取締役兼R&D本部長を務め、Web標準の普及や啓蒙活動を展開し、Web Standards Project(WaSP)のメンバーでもある木達一仁氏が壇上に上がった。

SESSION2では、「Web標準準拠に求められるバランス感覚」について語られた。
木達氏は「バランス感覚こそがWeb標準準拠の鍵」と述べ、Web制作での「スケジュール・コスト・リソース」の関係性、それぞれの立ち位置を示す「ユーザー・クライアント・制作者(自分自身)」の関係性、時間軸としての「現在・過去・未来」の関係性、Web標準実装のための「仕様・Webブラウザ・ベストプラクティス」の4つの関係性について解説した。

これらの関係性のバランスをとることが、制作のうえで重要となってくるという。
「現在のグッドノウハウは、のちのちバッドノウハウになる可能性があります。特にWeb標準を実装するうえで、このバランス感覚は養わなければなりません。どんな文字コードやHTML文書のメディアタイプを選ぶのか、HTMLやCSSはどれを使うのか。また、Web制作で大事なブラウザについても、バランス感覚が必要です。よく問題となるのが、どこまで古いブラウザに対応するのか? だと思います。シェアが低い古いブラウザだが、大事なクライアントが使用している可能性があるなら採用するなど、ターゲットユーザーを見極めることが大事です。
また、ゲームや携帯電話からのアクセスも踏まえなければなりません。どんなアクセス方法でも、表示上の品質を保証することが、Web制作者の役目でしょう」 さらに、「自分以外のだれかがソースを読む必要性がある限り、可読性を高める(キレイに書く)ことは必要」、「ブラウザによっては、文字サイズのズーム機能がどこにあるかわからないものがあるので、ページ内に置いておくことでアクセシビリティが高まる」など、細かな例を挙げながら実例を披露。

最後に、「バランス感覚を磨くには、関係性にある構成要素を掘り下げ、学習や情報収集を怠らないように」と語った。実制作に役立つヒントや注意点が多く盛り込まれ、多くの来場者がメモを取りながらのSESSIONとなっていた。

講義風景 講義風景


「掟」としてのWeb標準は
もういらない


続いてSESSION3に登壇したのは、『スタイルシートスタイルブック』や『Web Designer 2.0』などの著者で、多くのWeb関連業務にかかわる長谷川恭久氏。壇上に上がるなり開口一番「みなさん、名刺交換をしましたか? これから名刺交換をしましょう!」と、会場の前列に座っていた来場者と、次々に名刺交換をし始めた。
いろいろな人とコミュニケーションをとることで、デザインの幅も広がっていくという長谷川氏なりのコミュニケーション方法のようで、身体を使ってそのノウハウを披露。なるほど、一気に会場の雰囲気が柔らかなものへと変化していき、長谷川氏への興味が高まったようだ。

SESSION3のテーマは「さよならWeb標準」という、トリッキーなタイトル。講演は、Web標準が生まれた経緯からスタートした。WWWが発明され、W3C(World Wide Web Consortium)が設立。W3CはWWWで用いられる技術の標準化、相互運用性の確保を目指す団体だ。しかし、約10年前にInternet ExplorerとNetscapeによるブラウザ戦争が勃発。独自の機能を追加した専売環境がウリとなるブラウザの出現で、ブラウザによっては見られないWebサイトができてしまった。これをどうにかしたいと立ち上がったのが、Web Standards Projects(WaSP)だった。
「WaSPは、シンプルで手ごろなWebアクセスとテクノロジーを、すべての人たちに保証するスタンダードを勝ち取るための草の根運動機関。WaSPの活動をわかりやすく伝えるための一種のバズワードが、WebStandard(Web標準)なのです」 Webの歴史とその発展をていねいに解説し、W3CやWaSPの実際の活動を紹介。続いてWeb標準という言葉の誤解について解説した。

「Web標準は、CSSでレイアウトすればいいと思われがちですが、それは誤解なんです。テーブルレイアウトでも、アクセシビリティを確保しているWebサイトはたくさんあります。しかし、CSSには優れている部分がいくつかあります。表示速度の向上、拡張性の向上、進歩的なサポート、より高いアクセシビリティなどです。Web標準だからCSSを使う、というのではなく、より優れているからCSSを使うというのが正しいですね。特定の技術だけを導入したり、意味を理解せずに機械的なところだけを注目するといった、Web標準=掟といった誤解があるようです。これ、忘れちゃってください」
長谷川氏の講演のテーマ「さよならWeb標準」とは、掟やしきたりであると思われているWeb標準のこと。「制度」としてWeb標準準拠のWebサイトを構築しなければいけない、と思ってしまいがちなWeb制作者にとっては、ハッとする内容だったのはないだろうか。

名刺交換 講義風景 


サイト移行の成功の秘訣は
Web標準を同じ視点でとらえる


最後のゲストスピーカーは(株)アイ・エム・ジェイでWebディレクターを務める山本聰氏。「Webデザインとマネジメント」や、デジハリ ディレクターズコースなどで教鞭をとり、数々の講演会などの実績を持っている。SESSION4では、山本氏のWeb制作ディレクターという立ち位置から、Web標準プロジェクトをビジネスとしてとらえ、進めていくためのコツと「Web標準サイトへの移行ガイド」について語られた。

「言葉として独り歩きしている“Web標準”。一般的にはXHTML+CSSという、文書構造とデザイン要素が分離したスタイルだと思われています。では“非Web標準”とは何でしょう? たとえば非Web標準でWebサイトを制作すると、SEO(検索エンジン最適化)の確保ができなかったり、HTMLファイル転送量が軽減できなかったり、メンテナンス性や汎用性の向上ができないといったデメリットがあります。
しかし、文書構造とデザイン要素が分離されているWeb標準なら、これらはすべてメリットとなるのです」 Web標準にする理由は多くのメリットを確保できるから、ということを端的に分かりやすく説明。

続けて、Web標準への移行のコツを解説。まずはマークアップエンジニア、Webデザイナー、Webディレクター、情報設計者などからなるプロジェクトメンバーが同じ視点でWeb標準をとらえるという、Web標準への意識が大事と語った。
さらにプロジェクトの成否は、クロスブラウザへの対応が重要だという。
「W3Cが目指しているのは、アクセシビリティを含めた“情報伝達上の公平性”であり、“すべてのブラウザでまったく同一のデザインを見せることではない”のです。古いブラウザや新しいブラウザなど、前方・後方互換性がサイト制作時に問題となってきますが、きちんと最初に定義する必要があります。コンテンツ管理も突き詰めていくとパターン化することができますし、より効率的かつ運用しやすいWebサイトづくりが、Web標準準拠によってできあがるでしょう」

最後に山本氏は、「Web標準とは水や空気のようなもの。みんながこれを意識することで、美しい便利なWebができてくるかもしれません。Just Do It!」と、来場者に熱いエールを送った。

講義風景 講義風景

5時間にも及ぶ講演だったが、途中入退場可にもかかわらず、ほとんどの人がすべてのSESSIONに参加し、最後まで熱心に講演を聴いていた。長谷川氏の影響か、閉演後も、そこかしこで名刺交換をする多くの来場者が見受けられ、今回も大好評の中、すべてのSESSIONが幕を閉じることとなった。

main 講義風景 講義風景


■ゲストプロフィール

加藤善規(デジパ)

加藤善規氏(デジパ)
SESSION 1「Web標準に準拠した サイト制作のための基本と実践」
1975年生まれ。フリーランスによるWebサイト制作業務などを経て2004年よりデジパ勤務。現在はディレクターとしてWebサイト構築におけるディレクション業務、コンサルティングなどを行う。そのほか書籍の執筆、クリエイター向け雑誌への寄稿、企業向けセミナー講師なども務める。


木達一仁(ミツエーリンクス)

木達一仁氏(ミツエーリンクス)
SESSION 2「Web標準準拠に求められる バランス感覚」
宇宙開発関連組織でWebマスターとしての経験を積んだのち、IT業界へ。以後、Webコンテンツの実装工程に多数従事。ミツエーリンクスには2004年2月より参加。現在は、同社の取締役兼R&D本部長を務めるかたわら、Web標準の普及・啓蒙活動を展開している。Web Standards Project(WaSP)メンバー。


長谷川恭久氏

長谷川恭久氏
SESSION3 「さよならWeb標準」
デザインやコンサルティングを通じてWeb関連の仕事に携わる活動家。ブログやポッドキャスト、雑誌などを通じて情報配信中。 著書に『スタイルシートスタイルブック』シリーズ、『Web Designer 2.0』など。

www.yasuhisa.com/


山本 聰氏(アイ・エム・ジェイ)

山本 聰氏(アイ・エム・ジェイ)
SESSION4 「Web標準サイトへの 移行ガイド」
WI第3事業本部チーフディレクター。コピーライター、出版プランナーを経て2002年から現職。慶応義塾大学湘南藤沢キャンパス「Webデザインとマネジメント」(2004年〜現在)、デジハリ ディレクターコース(2004年〜現在)などの教鞭、COMEDEX Korea(2004年)など講演会の実績多数。共著として『Webディレクション成功の法則48』、『Web検 Webプロデュース』など。

www.imjp.co.jp/

 


文=秋山由香((株)Playce)
撮影=飯田昌之

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在