2004年3月、そのセミナーは開催された。テーマは「アクセシビリティ」、主催はアンカーテクノロジー(株)。都合で最初の1.5時間しか聞けなかったが、背筋が凍る思いがした。いままで何をやってきたんだろうと自分自身を情けなく感じた。新技術にキャッチアップできるかという問題ではなく、面倒だから避けてきた自分を卑下する思い。久々に味わう劣等感。
私的には2004年のWeb界のメインテーマは、この「アクセシビリティ」に決まりだ。正直言って、いままで見ないフリをして逃げてきたテーマだ。しかし、もう逃げられない。逃げる言い訳がなくなってしまった上に、その理論と実装方法に惚れ込んでしまった。
セミナーの講師は、森川氏と神森氏。Web業界を見てきている人で、この二人に存在感を感じていない人はモグリだろう。特に森川氏は、今ではMacromedia社の主力製品であり、Web業界人の標準ツールであるDreamweaver/Fireworks(DW/FW)の伝道で、MM社員よりも貢献したといっても良い御仁だ。3時間程から始まった伝道セミナーは徐々に伸び、5時間耐久、8時間耐久までにも拡張していった。体力の続く限り、知っていることは全て伝いたい。そんな氏の姿勢に頭が下がる。それにお世話になった業界人は山のようにいるし、神森氏は、月刊誌WebCreatorsで「いますぐはじめるCSSデザイン」をロングラン連載中だ。森川氏の「動」に対して、神森氏の「静」という感じもする。異色といえば異色だが、Webの流れから見ると必然とも言えるコンビなのかもしれない。
ref)- 森川氏サイト : http://www.siliconcafe.com/
- 神森氏サイト : http://www.t-studio.jp/
- アンカーテクノロジー(株) : http://www.digital-magic.co.jp/
そもそもtableタグを用いて、正確な(どのブラウザでも同じく見える)レイアウトの作成方法を広めたのは森川氏だった。横幅を正確に固定することのできないtable構造に、「spacer.gif」という固定幅実現のための「つっかえ棒」を配置することでカチッとしたレイアウトの実現が可能になった。その正確さを重視するために、tableは何重にも入子状に配置された。Webデザイナ必須のTipsと言っても良い。
そうした手法を提案してきた氏が、それを否定した。申し訳なさそうだった。しかし、良いモノを見つけてしまったからには伝えざるを得ない。DW/FWの時と根っ子も姿勢も同じだ。申し訳ないけれど、この方法を見てくれと力説する氏の姿に、言ってる事が違う等と怒りを持つ訳もなく、再度信頼してみようと思わされる。
アクセシビリティ。従来は身体障害者にも「優しい」Webサイトの指標として捉えられていた。今でもそういった響きが強いかもしれない。多くは音声ブラウザへの対応を指し、目が見えなくても情報入手が可能か、情報操作ができるのかという観点で捉えられてきた。
しかし、ここ数ヶ月の間に行われたアクセシビリティ系セミナーに参加して、実際の音声ブラウザの「声」を聞いていて、違う点に気付かされた。それだけではない。ページを読上げ聞きなおすと、そのページの「意味付け」が明確になる。自分が無意識に何を「装飾」として付け足しているのかがはっきりする。
例えば、左上端にメインロゴを置く。その下にサイトのメインページへのリンクを貼る。左側にメニューを置き、その横にメインコンテンツを置く。それを音声ブラウザで読んでみる。そこで気付かされるのは、メインコンテンツに辿りつくまでに読みあげられる、二次的な情報の多さだ。音声ブラウザでこのページを「見ている」ユーザは、このページの中心点に到着するまでに山ほどのリンク情報を我慢して聞かなくてはならない。このページは一体何なのだ、そうした一番肝心な情報が最初に語られていない訳だ。
別に目の見えるユーザの方が多いのだからそれでも良いじゃないかと考える気持ちが一般的だろう。しかし、昨今のセミナーの主眼は、そんなところに無い。情報の「整理」という部分を今一度見直してはどうかと問いかけている。
Web情報が様々なデバイスで見られるようになるずっと以前から、何度も「ワンソース・マルチユース」という夢物語は語られてきた。しかし、現場に居るものとして、情報(コンテンツ)とレイアウトを切り離さずに書いている限り、薄々とではあるが、それが単なる夢であることは皆が感付いている。でも今回は少し違う。単なる夢ではないかもしれないという希望が見える。
今のアクセシビリティの流れは、こうした問題を解決するものとして、CSS(Cascading Style Sheets)を中心技術に据えている。CSSは、デザインの幅を広げるモノとして、今までもスポットライトは当たってきている。しかし今回の文脈は少し違う。
ref)方法論的には、情報の優先順位をキチンと考え、そのタイトルを、今まで使ったことも無い、H1～H6タグでランク付けをする。ランク付けされた情報部品の中身の体裁を分類(ID付けや、クラス分け)し、情報整理する。情報整理された情報をHTML化し、分類された体裁をCSS化する。出来上がったHTMLは、H1-6,div,span,p,...等の非常にシンプルなタグで構成される。情報は全て左側に張り付いている。そっけなくも感じるが、上から読み上げると論旨は明確。装飾が殆ど無い。装飾に関する情報は全てCSSの中に書かれている。
これを読んだだけでは、こうした構成方法の苦労の本当のところは分からないだろう。森川氏はセミナーの中で、「この方法はウワベを変えるような作業ではない、まるでビルを土台まで壊して更地にしそこから再度作り上げるような作業です」と言った。聞いたとき、私もその意味するところは分かっていなかった。
しかし、Ridualサイトで試してみることにして、泣かされた。正直言って今までの考え方が全然通用しない。情報を見るたびに、trやtdタグが頭をよぎる。いやいやそうではない、レイアウトをしたい訳ではない。情報を整理して表示したいのだと言い聞かせる。装飾を削ぎ落とす、それがこんなに難しいとは思っても見なかった。味も素っ気も無いHTMLを見ると、そこがコンテンツ自体の勝負であることが明確になる。ただでさえ、Ridualサイトは説明不足の部分があるのだが、それが浮き彫りになる。それは如何に見た目で「上げ底」をしていた自分と対峙することにもなる。
CSSで何ができるのかが分かっていないと、効率的な情報分類は不可能だ。情報分類ができていないと、CSSレイアウトは進まない。鶏が先か卵が先か。そんなジレンマの中で試行錯誤を重ねる。おまけに、ブラウザ依存の問題が頭を持ち上げる。何となくどのブラウザがどのタグをどのように表示するのかが、常識的に感知できるようになっているのに、それも白紙になる。そもそも対応していないブラウザもまだ存在する。まるっきり一年生状態だ。
でも苦労して作ったサイトは気持ちが良い。まだまだコンテンツが足りないことは自覚しているが、今までと違った満足感がある。CSSをONにした状態と、OFFにした状態とで見比べる(NetScape7.*は標準出可能、IEはPlugIn「ス切りボ」が必要)。故意に非対応にしたブラウザではOFF状態で見える。イメージもCSS中で規定しているので、非対応版では絵は表示されない。iModeで見ても文字だけでそのページで何を伝えたいのか簡潔に表示される。二重に配置したCSSはiModeでは感知されないので、余計な装飾グラフィックはダウンロードされない。パケット代もかからない。
ref)メインメニューも表示上は上のほうに来るが、HTML上は下の方にある。先ほどの読まれる順番を意識した。そのページのアイデンティティのようなものにできるだけ早くアクセスできるようにしたつもりだ。その分、今までに無いことも起こっている。下に記述されているが故に、最後の方で読み込まれレンダリング(表示)される。じっくり見るとメインメニューの出方が遅い。キャッシングも少し今までと違う体感がある。
実は公開後もCSS部分は、上記対応も含めて毎日のようにいじっている。HTMLはそのままで。レイアウトだけ別に修正可能だという実証実験。まだズレがあったりするので、改修工事は暫く続く。ブラウザ依存テストも並行して続けているが、それすら後ろ向きではない。毎日が発見の連続。久々にページ記述が楽しい。ウチのチームは少人数ながら結構湧いている。なんだか最先端を行っている気がするのも、こそばゆく嬉しい。
これからのWebサイト開発では何が主流になってくるのか。間違いなくCSSレイアウトだと思う。私自身はデザインに敬意を払わないエンジニアは二流だと信じて疑わないが、開発プロセスを考えればデザイナ作業とエンジニア作業の接点は少ない方が良いに決まっている。衝突も間違いも少なくなる。CSSレイアウトではそれが可能だ。
つまりそれは、JSPやASP等動的ページの開発にも適応できるということだ。サーバで生成されるHTML部分には装飾要素は無い。装飾はCSS任せ。JSP内のHTML部分で、デザイナが苦心した部分をエンジニアが踏みにじって、レイアウトだけではなく、チームの仲さえ滅茶苦茶にする事例は多々ある。面倒な衝突をただ避けるために、デザイナを入れないプロジェクトも少なくない。しかし、今度は情報整理がなされて、class/idが付加されていたら、デザイナが独立に見た目を、情報伝達の滑らかさを演出できることになる。
セミナー中にも紹介されたが、端的な例が"CSS Zen Garden"。共通のHTMLを使い、CSSのみを替えることで何が起こるかの実証実験サイト。ページ内の英語はまだ読んでいないが(読まなくても大丈夫)、同じ内容のページの見た目がこんなに変わるという事実。CSSのデザイン能力の幅が実体験できる。行間調整とか微妙なスタイル調整にCSSを使っていた方にとっては、目から鱗の話かもしれない。既にガイドブックが出ている。既に書籍になっているということ自体に、自分のふがいなさも感じる。また、最近流行のBLogを通じてもCSSの表現力は実感可能だ。
ref)- CSS Zen Garden : http://www.csszengarden.com/
- スタイルシート スタイルブック : http://www.stylesheet-stylebook.com/
今アクセシビリティへの対応を考えていない企業サイトは少しヤバイかもしれない。この6月にはJIS化もされる。「tableレイアウトは望ましくない」というレベルの表現がなされると予想されている。JIS側には、強制的にtableレイアウトを排除したいとう意思はどうやらなさそうだが、それでもインパクトは絶大だろう。公的サイト構築の指針に組み込まれるのは時間の問題だし、「右にナラえ」大好きなお国柄だ、大きなところが動き出せば一気に普及が進むだろう。しかも、実は多くのメジャーな企業は既に、ポスト・プライベートポリシーとして独自の規定を設けてきている。アクセシビリティポリシーが無いサイトは、情報を読んでもらうという意識に欠けていると言われる可能性もある。情報を出したいだけの自己満足サイトという印象すら持つ。情報は、読ませる方向から読んでもらう方向に向いているのかもしれない。読んで頂く「おもてなし」ができないサイトは無粋といった感じか。
しかし、「我々」には大きな問題が出てしまった。情けないが、、RidualでRidualサイトが解析できない。Ridualは、まだCSS対応できていない。まだJavaScript解析で苦戦中。今まではこれでも、Ridualのダウンロード機能で試されても良いように考えてきた。でも、今回は付け焼刃では対応できない。グラフィック部品を殆どCSS内に記述してしまっているので、リソースの感知さえできない。でも、方向性を見つけた。次のターゲットは、CSSだ。
情報構造をレポートする機能、定義されているスタイル情報、どれがどう使われているのかのトレーシング機能。今後、コンテンツとレイアウトの分離が進めば、こうした情報が必須になってくる。今までデザインガイドラインという分厚い「遵守されるべき」ドキュメントが、「実際にどう適応されている指針か」という実装レベルの情報として必要になってくる。
これらを自分で書くのは、私は勘弁して欲しいと思った。ましてや、他人の書いたサイトのCSS仕様チェックは、かなり辛そうだ。こうした作業こそ自動でやるべきだ。勿論設計時は自分で書く。しかし、納品時にそれが「現状」を表すものと言い切れるほど、私は自分を信じていないし、大きなサイトになるほどブレは大きくなると思わざるを得ない。納品前のサイト構築デバッガ。更に、自分が納品してもらう側になったときの確認ツール。これが無いとこれからの道のりはかなり厳しい。
サイト解析は、「リンク情報」と「リソース情報」と「情報構造」の三方向から行われると予想してる。現状は前二者だけ見ていれば、ほぼ事足りる。が、次世代はそれだけでは足りないのだろう。当然、CMS(コンテンツ・マネージメント・システム)との絡みも出てくる。大量のコンテンツを扱うように慣れば、効率的に管理したくなるのが常だ。この時にも、どういった情報はどういったレイアウトで表示すべきだという「設計」が必要になる。
羅列された情報を整理して、サイトが出来上がってきたように、まさに一度更地に戻すようなフェーズを経て、構造化された情報の密集地としてのサイトが徐々に現れてくるのだろう。
今は、そんな七面倒な作り方ができるかと思う方が多い気がする。でも、trやtdで組まれた情報から、本質的な情報を抜き出して別デバイス用に加工するような作業をしてみると、このCSSレイアウトが本流のように感じることだろう。
もうひとつ。今まで現場を無視した、学者肌HTMLチェッカーと思っていたlintで高得点が取れるようになる快感。普通にtableレイアウトをしていると、マイナスの評価しか得られない。-20点とかで、-40点のサイト管理者を笑うという、「目くそ鼻くそを笑う」状態だったはず、普通は。。それが情けなくて寄り付かなくなってしまったツールだが。CSSデザインにすると高得点が取れる。高得点を取れて悪い気がするはずが無い。最近行きつけのサイトになっている。立ち返れば、HTML記述の根本精神をツール化したものだ。今になってそこで高得点を得られること自体が不思議な感覚だ。
ref)特定の技術だけを見ていると、その浮き沈みに一喜一憂してしまう。ブラウザ戦争のような欲望の渦に巻き込まれることで、苦しむこともある。Web制作の現場には、この先余り良い話はなく、面白そうな技術の登場が香辛料程度に広がっていくのだろうかと思った時期もあった。しかし、地道な人たちが実は地道に頑張っていたんだ、と気付かされる。CSSの意味に漸く気がつく私は大馬鹿だ。壮大な構想と、シンプルな実装。このWebの中心二軸は光を失わずに生き続けていた。愚痴言っている場合じゃない、勉強不足を言い訳にしている場合じゃない。改めて、大きな流れと、Web業界に居させてもらえて良かったと実感する。
以上。/mitsui