この記事は今から13年も前に公開された記事で、個人的にも非常に思い入れのある記事です。数年の間、翻訳をして公開することを考えていました。この度、時間はかかりましたが記事を公開できたことは非常に嬉しい限りです。記事内容は今のマルチデバイスの時代を予感していたかのものです。制作者のみならず、Web担当者の方や、クライアントの方にも読んでいただきたい内容の記事であり、レスポンシブWebデザインもここからはじまっています。

# 58

ウェブデザインのダオイズム

90年代のダオイズム(道教)は、最も有名な著書『禅とオートバイ修理技術』(著者 ロバート M. パーシグ)に見られる70年代の禅と同様である。多くの人が、『タオ自然学』のようにダオイズムを何かに適用させようとしたり、または逆に『タオのプーさん』(著者 ベンジャミン・ホフ)のように何かをダオイズムに適用させようと求めてきた。姑息な手段とも言えるが、最近私もタオ(道教)のプリズムを通して見るとウェブデザインについても理解が得られることが多くあることに気がついたのである。

ダオイズム(道教)は、仏教のように生活様式やこの世界で生きる方法を説いた哲学であり、大昔からある古典(「道徳経」)に由来する。この古典は道経37章、徳経44章の2部から構成され、全81章から成る。それは人間としての経験を暗号のような不可解な方法で説いているが、そこには常に共通のテーマ、すなわち「Harmony(調和)」が存在する。

ここ数年、善かれ悪しかれ、私の生活はスタイルシートを中心に大きな転機を迎えていた。私はソフトウェアやチュートリアル、それらのためのガイドを作成している。ニュースグループやメールを通じて多くの質問に答えてきた。その数は計り知れない。
そして私はウェブスタンダードプロジェクト(略称:WaSP)の受け入れに奮闘してきた。ゆっくりではあるがようやく、それに応じて完全に異なるウェブデザインを理解できるようになり、ウェブデザインとタオ(道教)との強い関連性を見出すに至った。

私が感じているのは、私達が知っているウェブと、今後そうでなるであろうウェブ間の事実上の緊張関係である。これは既存のメディア(印刷物)と、その子供的存在であるウェブの間に存在する緊張関係である。今は親と子の間の関係を本当に理解し、子に自らの道を歩ませる時なのである。

新旧同メディア?

“Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation.”

Tao Te Ching; 38 Ritual

「基礎のしっかりした支配層は容易には根絶されない;
密接に保持される信念は容易には放たれない;
従ってしきたりは代々に渡って引き継がれる」

引用:老子道徳経; 第三八章 徳

もしあなたが黎明期のテレビ番組を見たことがなければ、見ると教訓となる。当時テレビは「画像付きラジオ」と称されることがよくあったが、その表現はかなり的確である。多くテレビ番組は当時普及していたラジオのフォーマットに追随するものであった。事実上世界中で見られるようになった“Tonight Show”のようなテレビ番組(バンドがいて、司会者がカメラに語りかけ、座ったゲストがいるのが特徴である)や、スーツを着て真面目な顔でアナ
ウンサーがニュースを読むニュース番組は、テレビという媒体がラジオから進化した痕跡である。それらは過去のメディアのおもかげでもある。

最初のミュージック・ビデオ(我々の中に少なくともそれほどの年齢の者がいるということなのだが)についても考えてみると、事前に録音した楽曲に合わせて口パクで歌うのが典型であった。これもラジオの影響だろう。

新しいメディアが既存のメディアを模倣するとき、模倣するものの中には意味をなすものもあるが、模倣物の多くはあまり意味のないものである。まさに「しきたり」となって、それが新しいメディアを抑制することがしばしば起こる。時間とともに、新しいメディアは意味をなさない既存の慣習を投げ捨てて、独自の慣習を発展させていく。

初期の頃のテレビドラマを見るチャンスがあれば、この既存メディアからの習慣を強く反映する例が見られる。ラジオはリスナーが見ることができないものを表現するナレーションが必須であったことから、初期のテレビドラマではナレーターの声が入っているのが特徴的である。視聴者が見ることができるものをわざわざ説明するのである。これは、新しいメディアが既存のメディアから発展する時に起こるシンプルではあるが顕著な例である。

印刷媒体から生まれたものではあるが、ウェブは新しいメディアである。しかしそこでは印刷媒体のスキル、設計用言語、および慣習が強く影響しており、それによって形作られすぎている。「キラー・ウェブサイト(Killer WebSites)」などは通常ウェブをうまく利用した類のものであり、まるでサイトが紙媒体であるかのようにページを操る(ウェブ上デスクトップ・パブリッシングといえる)。
この保守主義的なところは自然である。まさに「密接に保持される信念は容易には放たれない」のであるが、今はウェブを独自のメディアとして受け入れ、前に進むときなのである。印刷されたページ(印刷物)という「しきたり」を捨て去り、新しいウェブというメディアとその特性に取り組む時である。

何百年に及ぶ印刷の知恵と何千年に及ぶ文学から得られた知恵を捨てろというわけでは全くないが、ウェブという新しいメディアの中でこれらの教訓のどれが適切で、どれが単なるしきたりであるのかを理解する必要がある。

ウェブページのコントロール

“… accepts the ebb and flow of things,
Nurtures them, but does not own them,”

Tao Te Ching; 2 Abstraction

「賢人は衰退期と事の流れを受け入れる。
それらを育成せよ。しかしそれらを自分のものとしてはならぬ」

引用:老子道徳経; 第二章 養身

ウェブデザインのニュースグループやメーリングリストに時間を費やしていると、何度も繰り返される共通の言葉やアイデアが見つかる。次々にわいてくる疑問はもちろん、では「それはどうやってやるのか?」である。しかし、「すべてのプラットフォームで自分のページを同じに見せるにはどうしたらよいのか?」や「どうしたらフォント表示を Macintosh と Windows 上で統一できるのか?」などのような疑問の根底には潜在的な問題がある。それは「ユーザーのブラウザをコントロールするにはどうすればよいか?」である。実際文字のコントロールに関しては出現頻度が驚くべきほど高い。

すべての根底にあるのが、デザイナーはコントローラーであるという信念である。この概念は「ピクセル・メカニック」という用語からも伺える。デザイナーは、ユーザーの好みや閲覧環境などのユーザー自身の選択を覆したいのである(例えばフォントサイズを固定するなどによって)。例えばMacintoshの72dpi VS 標準Windowsの96dpiというような、異なる論理解像度によって引き起こされる、プラットフォーム相違をデザイナーは予測しておきたいと考えている。デザイナーは全知全能で、すべてのブラウザでピクセルのずれのない完璧なレンダリングを求めているのである。

もちろん、これは大げさなケースではあるが、それ程かけ離れているわけではない。スタイルシートが「ウェブのためのDTP」ではないことを開発者が気づいた時、開発者の失望が見られるというのが、このような例を強く強調している。Macユーザーであれば、実にどれほど多くの主要サイトがスタイルシートを乱用しており、ページを読みにくくしているかに気づくだろう。フォントサイズの大きさにポイントを誤用している可能性が高い。この選択の根底にあるのは、「デザイナーは管理者である」という哲学なのである。

ではこのアイデアはどこから来るのだろうか?
私は、そのアイデアとは印刷媒体から流れてきているものであると信じている。印刷媒体において、デザイナーは神である。巨大産業が WYSIWYG(What You See Is What You Get(見たままが得られる)) から生まれ、ウェブデザイナーの多くにこの信念と慣習すなわち印刷媒体のしきたりが根付いている。デザイナーとして私達はコントロールすることをやめ、ページとの新しい関係を捜すためにこの役割を考え直す必要がある。

それはなぜ重要か?

“A newborn is soft and tender,
A crone, hard and stiff.

Plants and animals, in life, are supple and succulent;
In death, withered and dry.
So softness and tenderness are attributes of life,
And hardness and stiffness, attributes of death.”

Tao Te Ching; 76 Flexibility

「新生児は柔らかい、しなびた老婆は硬い、
生のある植物や動物は、みずみずしい
死ぬとしぼんで、乾燥する。
従って、柔らかさは生に属し、硬さは死に属すのである」

引用:老子道徳経; 第七六章 戒強

ページを「コントロール」できないことは「制限」なのかもしれない(ウェブのバグと言える)。私達デザイナーが WYSIWYG の世界から来た時、本能的にそう考えるだろう。そしてそれは私の最初の反応でもあり、長い間にわたって私の信念であったとことは自分も認める。しかし私はもう、それが「制限」であるとは思わない。今や私はそれを新しいメディアの強みとして見ている。

これをさらに突き詰めてみよう。紙のページをコントロールすることをできるという事が、実は印刷媒体においての制限なのだ。テキストのサイズを修正することができるとも、テキストのサイズは変更できないものだとも考えられる。またはページの大きさをコントロールできるとも考えられるし、ページの大きさは変更できないものだとも考えられる。これらは単にこの印刷媒体の事実なのである。

そして、そのデザイナーによるコントロールは、特に読み手にとっては、必ずしもよい事というわけでもない。
仮に読み手の視力が悪ければ、デザイナーがした選択は、なんらかの拡大手段なしに快適に読むには小さすぎるという可能性は高い。読み手が飛行機や通勤列車の中などの制限されたスペースにいれば、大判の新聞紙は大きすぎるし、こういった事実に関して読み手がなせるすべはほとんどないのだ。

印刷媒体においてデザイナーが心得ているコントロールとは、ウェブ媒体中でもよく望まれているコントロールではあるが、このようなコントロールは単に印刷ページの制限という機能である。ウェブは同じ制約を持たず、この柔軟性に向けてのデザインをしなければならないという事実を受け入れるべきである。しかし、まず私達は「事の発展や衰退を受け入れていく」ということが必要になってくるのだ。

順応性はアクセシビリティである

“The best of man is like water,
Which benefits all things, and does not contend with them,
Which flows in places that others disdain,
Where it is in harmony with the Way.”

Tao Te Ching; 8 Water

「最良の人とは、水のような人である。
万物に役立つが、万物と戦うことはない。
他が蔑む場所においても、それは流れる。
そういった場所で人は「道」と調和する」

引用:老子道徳経; 8 水

道徳経は宿命論であると考える人々がいる。道徳経のその単調な文章は、人は流れに身をまかせ、それを受け入れるべきであることを伝えている。私はそれを、「遠い将来の展望に固執するべきではなく、むしろ柔軟でいるべきであり、自分たちの見解や方向性にとらわれるべきでない」ということを伝えるものであるととらえている。

“As observing detail is clarity,
So maintaining flexibility is strength;
Use the light but shed no light,
So that you do yourself no harm,
But embrace clarity.“

Tao Te Ching; 52 Clarity

「詳細に観察することは明晰さをもたらし、
柔軟性を維持することは強みとなる。
光を使いなさい、しかし光を放ってはいけない。
そうすれば自分自身に害は及ばないだろう。
しかし明晰さを受け入れなさい」
引用:老子道徳経; 第五二章 歸元

これまでに私が話した柔軟性を、私は「順応性」として考える。私がこれまで言ったことすべてを、次のように要約することができる:

順応性のあるページを作るべきであること。読み手が選んだ、またはページにアクセスするのに使用しなければならなかったブラウザの種類や、プラットフォーム、スクリーンに依存しないアクセシブルなページを制作するべきであること。ページが印刷されること、音声リーダーに読み上げられること、点字リーダーを使って読まれることを念頭に置き、スクリーン解像度やサイズ、色数に関係なく可読性に優れたページであること。つまりは、視力が完璧ではなく、大きなフォントサイズで読めるページを望む読み手のニーズに順応することを意味している。

デザイン的に順応性があるページはアクセシブルなページである。そしてウェブに期待されるのは、まだ実現には程遠いが、情報に対するアクセシビリティとなるだろう。これは World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)の掲げる重要な信念である。ウェブページは法によって誰もがアクセスできることを要求されるようになるだろうと考えられ、ウェブデザインにおいて重要となってきている。ちょうど世界中の建築基準法が建築物に要求するアクセス基準のようなものである。

誰もがアクセス可能となるページをデザインするのは不可能に聞こえる。恐らく現在はまだ、ブラウザがうまく動作したりしなかったりで、ウェブにアクセスするデバイスの多くは未成熟の状態、またはまだ生まれてすらいないと考えられる状況において、それはあくまで理想であり続けるだろう。しかし、ユーザーの願望やニーズに順応するページの基礎を築き、アクセシブルにするなど、私達が現在できることはたくさんある。

“The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea.”

Tao Te Ching; 32 Shapes

「道は歩くによって形作られる
しかし形は失われる。
だから形にしがみつくことはできない。
川が海に注ぐように、
感覚を世界にゆだねてみよう」

引用:老子道徳経; 第三二章 聖徳

では、順応性を目的としたデザインをすることで、アクセシビリティを得るために何ができるのか?まず役に立ちそうな考え方がいくつかある。そこで、あなたが自分のページをアクセシビリティのないものにしてしまうのを避けるためのステップについて実際に役立つ提案をしよう。

まずは、外見ではなく、あなたのページの役割について考えてほしい。ウェブページの外観を全体的に頭で思い描くことにデザインをゆだねるよりも、 ユーザーに提供するサービスにデザインをゆだねてみよう。特定のデザインを選び、それがうまくいくよう努力するというよりも、むしろ「形式は機能に従う(form follows function )*(1」にゆだねてみよう。

訳注1)「形式は機能に従う。(form follows function. )」建築家ルイス・サリヴァンの言葉を引用したものと思わる。

このアイデアの基盤となっているのは、コンテンツと外観の分離である。あなたはたぶんこれを百回と聞いたかもしれないが、恐らくこれが最も重要なステップなのである。簡単な例を見てみよう。あるページに、イタリック体にされたテキストがある。それはなぜイタリック体にされたのか?それは強調のためであるかもしれないし、引用であるかもしれない。または英文の中に用いられた外国の言葉であるかもしれない。伝統的な出版物においては、「形式は機能に従う(form follows function )*(1 」ものであり、それによって判断される。

ウェブ・パブリッシングの有利な点は、紙面上の体裁では暗黙的なものを明示的にすることができる点である。例えば、もしイタリック体にする理由が強調であるならば、ページを<i>要素でマークアップする理由はない。 <em>要素を使う。しかも<em>要素を使えば、PCベースのウェブブラウザ以外のブラウザでも適切な要素として処理してくれる。

より大きなスケールでは、プレゼンテーション(見栄え)のためにHTMLは使用しないこと。 従って<font><b><i>および他のプレゼンテーション要素は用いない。HTMLが適切な要素となる所では、HTMLを使用する。適切な要素とならない所では、クラスを使用する。そしてもちろん、プレゼンテーション的(見栄え的)情報に対してはスタイルシートを使用する。過去に固執するのではなく未来に目を向ける時である。

もしあなたがスタイルシートはあくまでページの外観を提案するものであり、ページの外観をコントロールするものではないという観念の元、適切にスタイルシートを使用し、情報を伝えるのを目的としてスタイルシートに頼っていなければ、過去そして未来のどんなブラウザでもあなたのページは正しく動作するだろう。スタイルシートをサポートしないブラウザは単に装飾のない簡素なページを表示するだけだろう。
私達の一番の大きな懸念は、ブラウザのCSSバグである。今日それが問題となっている。しかし問題となくなるのもそう遠くはないだろう。今のところは十分サポートされている一部のCSSに限ればいい話であり、それでもプレゼンテーションHTMLを使用するよりも、より見栄えに対して効果的となるであろう。別のところでこれについては多く触れているので、ここでは繰り返しを避けることとする。

具体的に言うと、スタイルシートでデザインする時、するべきことと、するべきではないことがある。そしてそれらの選択があなたのページの順応性に影響を与えることとになる。何よりも、ページのアクセシビリティに取り組むのに、スタイルシートに頼ってはいけない。ピクセルやポイントといった絶対単位は避けられるべきであり(これがあなたにとって驚くべき事実であれば、このままこの記事を読み進めて欲しいのだが)、色も慎重に用いなけばならなず、常に動作が保証されるわけではない。

フォント

一般に、Windows、Macintosh、または他のシステムにインストールされているフォントはほんの一握りだけである。これら様々なシステム上にデフォルトでインストールされたフォント間にはオーバーラップはほとんどない。すでに、多くのブラウザでそうであるように、今後はユーザーがウェブページを見たいフォントで見ることができるようになるであろう。CSSを用いると、あなたは多くのフォントを提案し、可能な限り多くのベースをカバーすることができる。しかし、そのフォントがどれほど一般的なものであったとしても、信頼はおけない。

フォントサイズはさらに重要である。同じフォントで同じポイントサイズでも、Macintosh上ではほとんどのWindowsコンピューター上よりも「小さく見える」ということにあなたは気がついているかもしれないが、要するにこれは、デフォルトでWindowsの「論理解像度」が96dpiである一方、Macintoshは72dpiであるためである。この意味は重要である。 第一にそれは、テキストをMacintoshとWindowsベースシステム上で同一に見えるようにすることが本質的に不可能であることを確約しているのだ。しかし、あなたがこの順応性哲学を受け入れるならば、それはどうでもよいことである。

何?あなたはまだ自分のウェブページが正確にどのように見えるかにこだわるのであれば、それは順応的なページについて考えていないサインである。最も重要なアクセシビリティの問題の1つはフォントサイズである。小さなフォントは読みづらい。視力が良い人にとっては驚くべきことかもしれないが、相当高いの割合の人が紙面上のフォント“Times”で14ポイント以下のものを読むのに苦労するということである。解像度がより低いため、スクリーンは紙面より読みにくい。

ではこれは、私達が使うべき最小のポイントサイズが14ptsであることを意味するのか?
そうしたところで、もっと視力の悪い人がいれば意味がない。では、私達が使うべき最小のポイントサイズはいくつなのか?どれでもないのだ。ポイントを使用しないことだ。これは、読み手が自分に適するフォントサイズを選ぶことを可能にするということである。同じことがピクセルにさえもあてはまる。論理解像度の違いのため、あるプラットフォーム上の1ピクセルは別のプラットフォーム上の1ピクセルではない。

それでもヘディングや他の要素に対してはより大きなフォントサイズを提案することができる。CSSは、順応性を支援するような方法で、テキストのサイズを提案するいくつもの方法を提供している。そのアイデアを理解するために1つだけ見てみよう。

CSSを使うと、あなたはフォントサイズを、親要素のフォントサイズのパーセンテージとしてを指定することができる。例えば、ヘディングはページのBODY中にある。もしあなたがテキストサイズをBODY中で設定しなければ、BODYのテキストは、ユーザーがデフォルトサイズとして選んだサイズになるであろう。このように何もしないことで、すでに私達は自分たちのページの順応性をサポートしているのだ!

もし私がそれをそのままにしたら、あなたは「でも、テキストがあまりにも大きく見える」と言うかもしれない。だったら小さくすればいいのである。ただしあなたのブラウザ中でどうぞ。あなたのページを読む人々には、好みやニーズに応じて、彼らのブラウザ中で大きくしたり小さくしたりするオプションがあるだろう。

私達は、ヘディングや他の要素を、以下のように指定することでフォントサイズを目立たせることができる。レベル1の見出し要素は-ボディテキストより30%大。レベル2の見出し要素はボディテキストより25%大など。そこでは、ユーザーがメインテキストに選ぶサイズに関係なく、ヘディングはメインテキストに対するパーセンテージの割合に比例して大くなる。同様に、メインテキストより小さくすることもできるが、これはテキストが読みにくくなるほど小さくなる状況を引き起こすかもしれないので、慎重に用いなければならない。

私達は、本当に全くと言っていいほど何もしていないのだが、絶対単位のフォントサイズを使うのを避け、ヘディングに対してパーセンテージを用いたサイズを使用しただけで、自分たちのページをもっと順応性がありアクセシブルなものにできてしまった。

レイアウト

マージン、ページ幅、およびインデントはすべて、読みやすさを支援することができるページデザインの局面である。これらのそれぞれがデザイナーに難題を課すことになる。ブラウザウィンドウはリサイズでき、従ってページサイズを変更することができる。ウェブデバイス(ウェブテレビ、高解像度モニタ、PDA)が異なれば、最小および最大のウィンドウサイズも異なる。固定されたフォントサイズと同様に、固定されたページレイアウトは、ウェブのアクセシビリティ問題をもたらすのである。

フォントと同様に、ページのレイアウトの局面でも、順応性のあるページを作成するためにパーセンテージを使ってデザインすることができる。マージンは、それらを含む要素の幅のパーセンテージとして指定することができる。

CSSにおいて、ページレイアウトを指定するためにパーセンテージ(または他の相対的な値)を用いることは、自動的に順応的なページを作成することになる。ブラウザウィンドウが広がったり狭くなったりする時、一つの要素のレイアウトは、同じ比率を維持するために順応する。従ってページレイアウト全体が順応する。ユーザーはニーズに適したウィンドウサイズを選ぶことができる。

マージン、テキストインデントや他のレイアウトの局面はまた、テキストのサイズに関連して指定することができる。それはマージン、テキストインデントや他のレイアウト局面を<em>単位を使って指定する方法である。

例えば以下では:

P {margin-left: 1.5em}

パラグラフの左マージンがそのパラグラフのフォントの高さの1.5倍になるように指定するものである。従って、ユーザーがページを読みやすくするためにフォントサイズを調整する時、マージンは比例して増大し、調整してより小さくすれば、マージンは再びそれに順応する。

ウェブは概してプリントされたページ(印刷物)よりカラフルな媒体である。
ウェブ上の色はより安価である。色は装飾的なものであったり、ビジュアル的なアイデンティティを確立するのに役立つこともでき、実用的な価値(赤は重要な情報に注意を引き付けるなど)を持つこともできる。しかし、色は同時にアクセシビリティに対して難題をつきつけるものでもある。

あなたは、全ての国とは言わないが、多くの国で、赤緑色の色盲の人は航空機操縦士のライセンスを取得できないことを知っていただろうか? これは、他のどのような能力に関係なく、警告情報がほぼ必ずと言えるほど、危険に対しては赤、安全に対しては緑色を使って伝えられるからである。警告ライトに単に順応性がないとは、恥ずべきことであろう。

あなたのウェブページも上記の例と同様に人々を排除してはいないか? 近い将来ほとんどのウェブブラウザが、ユーザーがウェブページ上の要素の色を調整する簡単な方法(あなたのスタイルシートをオーバーライドできるユーザースタイルシート経由で行われるもの)を提供するようになるであろうという時に、それは恥ずべきことである。現在IE5Macintosh版でこれが可能である。

どのようにこれらの問題を避けるか? HTML要素というよりもスタイルシートを使うのである。そして、色の組み合わせだけで何か意味を伝えようとすることに頼るのは避けなければいけない。

“Yet a tree broader than a man can embrace is born of a tiny shoot;
A dam greater than a river can overflow starts with a clod of earth;
A journey of a thousand miles begins at the spot under one’s feet.”

Tao Te Ching; 64a. Care at the Beginning

「一抱えもある大木も毛先ほどの芽から生まれ、
大きな建物も土台を盛る事から始め、
千里の道も一歩から始まる*」

引用:老子道徳経; 第六四章 守微

考え方や行動様式を変更することは容易ではない。まさに「密接に保持される信念は容易には放たれない」のである。
しかし私は、ゆっくりながらも自分が当然と見なしたものの多くが、再評価される必要があったことに気がつくようになった。
見たもの、読んだもの、そして私がした会話、ここ2、3年の間に読んだEメールなどから判断しても、多くの人が密接にこれらの信念を保持しおり、それらは再考される必要があることがわかる。

現在こそ、ウェブ媒体はプリントされたページ(印刷媒体)という起源から脱却する時である。多くの知恵と経験を捨てるのではなく、必要に応じて自らの進路を示すのである。

ウェブの最大の強み(私は強みだと信じている)は、よく「制限(欠点)」として見なされることが多い。柔軟であることがウェブの性質であり、この柔軟性を受け入れ、柔軟でありながらすべてに対してアクセシブルなページを作り出すことが、私達デザイナーやウェブ開発者としての役割でなくてはならない。

旅は、コントロールをやめ、柔軟になることから始まる。

Tao Te Ching quotes from the GNL’s not Lao Tao Te Ching Copyright © 1992,
1993, 1994, 1995 Peter A. Merel.