レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」

先日、「A Dao of Web Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。この「A Dao of Web Design」には、ウェブ制作の歴史と未来が記されています。当時は存在すらしなかった「レスポンシブWebデザイン」やウェブの基本理念である「One Web」にも通じる内容です。

この記事が書かれてから12年以上たっていますが、日本のウェブ制作を次のステップに進めるためにも、「ウェブの哲学書」とも言えるこの「A Dao of Web Design」が、いま一度、日本で見直される必要があると感じています。

いったいどんな記事？

「A Dao of Web Design」は、オーストラリア出身のJohn Allsopp氏が書いた記事で、2000年4月7日にA List Apartに掲載されたものです。John Allsopp氏は、早くからウェブ標準の大切さを訴え、ウェブ標準プロジェクトの「CSS Samurai」のメンバーでもある人で、現在もウェブ開発者として制作をする傍ら、世界中で講演を行っています。また「Web Directions」というウェブ・プロフェッショナル向けカンファレンスの創設者であり主催者でもある方です。

レスポンシブWebデザインを考案したEthan Marcotte氏がA List Apartに寄稿した記事「Responsive Web Design」でも、この「A Dao of Web Design」が引用されていて、レスポンシブWebデザインの根底にある考え方が記されています。

「A Dao of Web Design」から学ぶべき3つの「ウェブの哲学」

この記事のすごさは、これからのウェブ制作（特に日本の）に必要な考え方がぎっしりつまっているところにあります。それらは、いまの日本のウェブ制作において見直されるべき重要な「哲学」だと思います。スマホの波が日本に大きく押し寄せているいまだからこそ、日本でのこの記事の意義が増しています。

では、「A Dao of Web Design」から学ぶべき「ウェブの哲学」とはなんでしょうか？

僕は以下の3つに集約されると考えています:

1. ウェブはそもそも柔軟な媒体
2. デザインのコントロールを諦める
3. ウェブはレスポンシブであるべき

※以下にある英語の引用は、すべて「A Dao of Web Design」から抜粋されたもので、それに添えられた日本語は、記事の内容をふまえ僕が意訳したものです。

ウェブはそもそも柔軟な媒体

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.

柔軟であることはウェブの性質である。デザイナーや開発者として、私たちはその柔軟性を喜んで受け入れるべきだ。そして、柔軟であることで、すべての人にアクセシブルなページを制作するべきである。

ウェブが作られたとき、ページ作成の見本とされたのは印刷媒体のレイアウトやデザインでした。本や雑誌のデザインやレイアウトから、いろいろな要素を借りてきて初期のウェブは作られました。しかし、ウェブはそもそも印刷物のように物理的に固定されたものではないのです。

In print the designer is god.
印刷媒体ではデザイナーは神である。

印刷物ではデザイナーが、紙のサイズ、レイアウト、フォント、フォントサイズ、色など、使われるすべてのデザイン要素を完全にコントロールすることができました。しかし、ウェブという媒体では、それらのコントロールがある程度ユーザに委ねられる柔軟な作りになっています。ウェブの生みの親、Tim Berners-Lee氏が思い描いたWorld Wide Webは、さまざまなデバイスや回線環境からアクセスされることを想定し、誰でもアクセスできるオープンなものであるという理念のもとに作られたものです。

たとえば、本や雑誌の場合、物理的な紙のサイズがあり、そこには変えることができないデザインやレイアウトがあります。たとえば、あるユーザにとって文字が小さ過ぎても、それを変えることはできません。また、電車などの狭いスペースでは読みにくい新聞も、物理的な紙面サイズを変えることはできません。（綺麗に折りたたんで、狭いスペースで器用に読んでいる方もいますが。。。）

反対に、ウェブサイトではユーザがフォントサイズを読みやすい大きさに変えたり、ウィンドウサイズを変更して自分好みの読み方で「紙面」を読むことが可能です。

いまだからこそ活かせるウェブの柔軟性

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and conventions strongly influence it. Yet it is often too shaped by that from which it sprang.

印刷物という媒体から生まれ、デザインの手法、言語、ルールは印刷から大きく影響を受けてはいますが、ウェブは新しい媒体です。それにもかかわらず、ウェブは「印刷」という概念から抜け出せずにいます。

※強調は僕が追加しました。

It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

「印刷されたページ」の習慣から抜け出し、新しいウェブという媒体やその特性にしっかり向きあうべきだ。

ウェブはユーザがユニバーサルにアクセスでき、自分の好きな時に好きなように閲覧できる、自由で柔軟な媒体です。以下の3つの環境が整ったいま、その柔軟で自由な媒体を最大限に活かせる時代になってきています。

1. スマホやタブレットなどの端末
2. 3Gや4Gの回線、公共WiFiなどのインフラ
3. どの端末からでもアクセスできるクラウドサービス

今までの印刷的な固定された考え方やコントロールからウェブを解き放って、その柔軟さや自由さを最大限に活用するべき時代です。「A Dao of Web Design」から12年以上の時が経ちますが、「印刷媒体」からの脱皮のプロセスは今もまだ続いているように思います。僕自身もつい最近まで「コントロール」にこだわって「脱皮」できずにいました。

ウェブにとって変化の時代

これら「ウェブの哲学」は、ウェブデザイナー、コーダー、プログラマーなどの制作側、開発側だけでなく、ウェブサイトを発注するサイトオーナー側、また、できればユーザにも広める必要のある、大切な考え方だと思います。テーブルレイアウトからCSSレイアウトへ。CSSレイアウトからウェブ標準、セマンティック・ウェブへ。そして、いま、レスポンシブWebデザインのような、より柔軟な形にウェブが変わろうとしています。僕は15年以上ウェブ制作に携わっていますが、いまのウェブは変化の時代にあり、とてもエキサイティングな時だと心から感じています。数十年前に考えられた「理念」がうねりとなって実現に向かっている。そんなふうにも感じます。

「印刷媒体」から自分を解き放ち、この「ウェブの柔軟性」という特性を活かすことにこだわってみたら、新しい道が見えてくるように思います。そして、その道はウェブのビジネスや社会への貢献にも通じているように思うのです。

コントロールという制約からの開放

As designers we need to rethink this role, to abandon control, and seek a new relationship with the page.

デザイナーとして、その役割を考えなおす必要がある。コントロールを放棄し、ウェブページとの新しい関係を探す必要がある。

ウェブはそもそもその設計上、柔軟なつくりなっています。しかし、たいていのウェブデザイナーは、その柔軟性を無理やりコントロールし、フォントを固定し、レイアウトをすべてのブラウザで同じように閲覧できることにこだわり、画像を多用して印刷物に負けない「固定された」美しいページ・デザインを作ろうとしてきました。

Underpinning all this is the belief that designers are controllers.

根底にあるのはデザイナーはコントロールする者であるという考え方だ。

Designers want to override the wishes of users, and the choices that they have made about their viewing experience (by “fixing” font size, for instance).

デザイナーはユーザの望みや閲覧環境に関するユーザの選択を覆したいのである（たとえば、フォントサイズを固定することで）。

Designers are all-knowing, and will not tolerate anything less than a rendering on every browser that is pixel perfect…

デザイナーは全知全能で、すべてのブラウザで1ピクセルもずれない完璧なレンダリングを求めている。

少し皮肉な表現もありますが、いままでのウェブ制作は、実際このように行われてきたと思います。どのブラウザでも同じように表示させたい願望は、自分も長い間持ち続けて来ました。今でも捨てきれていないかもしれません。しかし、難しいと思いつつも「ウェブデザインに対する考え方を変えるべきだ」と、頭の中で葛藤を続けています。そして、レスポンシブWebデザインでウェブ制作をはじめてみて、「コントロールから自分を解き放つ」という考え方が一層深まっています。

繰り返しになりますが、ユーザは自分の好きなデバイスで、好きな方法で、好きな時に情報を消費したいのです。ユーザの問題を解決し利便性を提供することで利益を享受するウェブサイトで、デザイナーがそれを邪魔する意味はどこにもないはずです。

Perhaps the inability to “control” a page is a limitation, a bug of the web.

もしかしたら、コントロールできないことはウェブのバグであり「制限」なのかもしれません。

しかし、

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.

時としてウェブ媒体でも望まれる「印刷媒体」でのデザイナーの持つコントロールは、印刷物の制限の一つでしかないとも考えられる。

We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”.

ウェブには同じような「制約」がないことを喜んで受け入れるべきだ。しかし、はじめにコントロールできること、できないことを受け入れる必要がある。

たとえば、余分なものばかりが目立って、肝心な本文が読みにくいウェブサイトは、ReadabilityやInstapaperのようなツールを使って、ユーザによって読みやすい方法で読まれるようになるのです。また、そのウェブサイトでそれが不可能なら、ユーザは他に読みやすいサイトを探すでしょう。

スタイルシートはページのデザインを提案するもの

If you use style sheets properly, to suggest the appearance of a page, not to control the appearance of a page, and you don’t rely on your style sheet to convey information, then your pages will “work” fine in any browser, past or future.

ページのデザインをコントロールするためではなく、ページのデザインを「提案する」ために、そして、情報を伝達するためにスタイルシートに依存しないように適切に使えば、作られたページは過去や未来のどんなブラウザでもうまく「動作する」はずだ。

※強調は僕が追加しました

「スタイルシートはページのデザインを提案するもの」という考え方は、僕にとっては衝撃的なものでした。どちらかというと、僕は「スタイルシートはページのデザインをコントロールするもの」だと考え、ウェブページを作ってきたからです。そして、ユーザがそれらの「コントロール」を崩すことをあまり好ましく思っていませんでした。しかし、よく考えてみると、それがユーザのためにならないのであれば、「コントロール」する意味はない。いまでは、そんなふうに思うように変わってきています。

そして、スタイルシートで行うレイアウトやデザインは、制作者である自分がユーザに提供する「1つの提案」でしかないと心から思えるようになってきました。

Free the Web! – ウェブをコントロールから解き放て！

ちょっと大げさかもしれませんが、古い考えを捨てて、新しい時代への一歩を踏み出そう！そんなふうに思います。

デザイナーはウェブの柔軟な特性を受け入れ、印刷媒体から引き継がれたウェブでの「コントロール」から解き放たられるべきだと思います。そして、その「コントロール」をユーザに委ねることができる自由な発想で新しいデザインやレイアウトを考えるべきだと思います。今はないウェブデザインやレイアウトが、日本の優れたデザイナーや開発者に生み出されることを想像すると、今からワクワクしてしまいます。

次世代のウェブの「こだわり」

これからのウェブデザインのこだわりは、「どのブラウザでも1ピクセルもずれない完璧な表示」ではなく、以下のようなものに変わっていくのではないでしょうか？

• ブラウザ間の表示差を受け入れる柔軟なデザインへのこだわり
• デバイスごとの特性を生かし、それらに巧妙に順応する柔軟なデザインへのこだわり
• ページをより早く表示させることへのこだわり

ウェブはレスポンシブであるべき

…make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors (and remember too that pages may be printed, or read aloud by reading software, or read using braille browsers).

…順応性のあるページを制作するべきだ。ユーザが選ぶ（または選ばなくてはならない）ブラウザの種類や、プラットフォーム、スクリーンに依存しないアクセシブルなページを制作するべきだ。それは、スクリーン解像度やサイズ、色数に関係なく可読性に優れたページを意味する（また、ページが印刷されること、音声リーダーに読み上げられること、点字リーダーを使って読まれることを忘れてはならない）。

This means pages which adapt to the needs of a reader, whose eyesight is less than perfect, and who wishes to read pages with a very large font size.

それは、視力が良くないユーザや文字を大きくしたいと望むユーザのニーズに順応するページを意味する。

テーブルレイアウトからCSSレイアウトに移行してデザインとコンテンツを分離させ、ウェブ標準を学び、セマンティック・ウェブについて考えウェブ制作をしてきました。いまレスポンシブWebデザインで制作を始めてみて、それらの重要性を再度認識しています。そして、それらはAllsopp氏が述べている「順応性のあるページ」につながっていると思います。

デザインとコンテンツの分離

スタイルシートを利用してコンテンツとデザインを分離させることで、レスポンシブWebデザインのような手法は成り立っています。また、3G回線のような遅い回線でのウェブサイトのパフォーマンスを考慮して、CSS3のような新しい技術を活用して画像の使用を最小限に抑えるといった工夫が必要になります。

標準に準拠したウェブ制作

デスクトップ端末でもモバイル端末でも、技術はものすごいスピードで進化しています。たとえばウェブの技術であるHTML5やCSS3だけでなく、カメラ、GPS、各種センサー（方位センサー、加速度センサーなど）など、新しい端末技術を最大限に活用できるように新しい仕様の標準化も進められています。それら新しい仕様をサポートするブラウザを搭載したさまざまな端末で、うまく「動作する」ウェブサイトを作ることを考えると、自然と標準に準拠したウェブ制作にならざるを得ません。

コンテンツの意味に忠実なマークアップ

ユーザは、コンテンツを自分の好きなときに、好きなように消費したい。そう考えると、コンテンツのポータビリティが重要になります。たとえばRSSリーダーで読まれても、ReadabilityやInstapaperのようなリーダーアプリを介して読まれても、うまく「動作する」ウェブサイトにするには、コンテンツの意味に忠実なセマンティックなマークアップをすることが必須になります。

「モバイル対応」をきっかけとして、スマホやタブレットなど、さまざまな端末でもうまく「動作」する、アクセスできるウェブサイトを考えることで、閲覧環境に依存しない「順応性のある」ページ制作ができるようになると思います。また、レスポンシブWebデザインのような手法を用いることで、さまざまな閲覧端末に順応するウェブサイトを制作し、スタイルシートでユーザが望む閲覧体験に近いレイアウトやデザインを「提案する」ことができると思います。

まとめ

The journey begins by letting go of control, and becoming flexible.

旅路はコントロールを手放し柔軟になることからはじまる。

ウェブ制作者が「ウェブの柔軟性」を心から理解し、ウェブサイトでデザインやレイアウトを完璧にコントロールすることから自らをを解き放つことで、ウェブという媒体の持つ特性を最大限に引き出せるようになると信じています。そして、それは自然とレスポンシブWebデザインのような制作の方法やW3Cの理念である「One Web」といった考え方につながっていくと思います。

逆に、これら「ウェブの哲学」を理解せずに、本当の意味での「レスポンシブWebデザイン」はできないと考えています。「レスポンシブWebデザイン」を小手先だけの対応だけで終わらせないためにも、モバイル対応が早急に求められているいま、これらの「ウェブの哲学」を見なおして、ウェブ制作を次のステージに持っていく必要があるのだと思います。

2012年7月20日に公開された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存