WD101: Webは寛容性をデザインする場である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。

• Webは見た目のコントロールがきかない
• モニターの外をデザインするのが大半である

コンテンツと、取り囲む要素のバランス

Webは、コンテンツを配信・消費するために最適化された媒体（又はシステム）です。テキスト、画像、ビデオなど様々な種類のコンテンツが存在しますが、それらコンテンツを通して人と人、コンテンツとコンテンツ、人とコンテンツが繋がる場が Web です。デザイナーであろうと開発者であろうと、この前提を抜きにして Web デザインを語ることはできません。

コンテンツは純粋な形であればあるほど、より多くの人に届けることが出来ます。装飾された画像テキストより、010111011101 のバイナリーで書かれているテキストのほうが、数十年先もアクセスできるコンテンツです。しかし、コンテンツを生の形で公開しておけば良いというわけではありません。コンテンツに装飾を入れることで、より人の感情に響くことがあります。インタラクティブにすることで、コンテンツに触れやすくなります。構造を作ることで、自分の思い通りに操作できるようになります。

コンテンツを補助するためにデザインが必要になるわけですが、ここで駆け引きが発生します。マークアップ、スタイル、インタラクションなど、開発者やデザイナーが手を加えれば加えるほど、コンテンツへのアクセスの幅が狭くなります。画像をひとつ入れる、JavaScript で高度なインタラクションを加える・・・そんなデザイナーによる行為が、ひとり、またひとりの Web アクセスの足かせになります。

ひとりでも多くの方にコンテンツにアクセスしてもらえるような配慮をしつつ、表現の幅を広げるにはどうしたら良いのか・・・ Web デザインにおける課題のひとつです。

Webらしい、やさしいデザイン

今までの媒体、つまり TV、ラジオ、CD-ROM におけるコンテンツの消費は「見れる」か「見れない」かの2つしかありませんでした。TVを持っていなければ番組が見れない。 サポートしているシステムでなければ CD-ROM の内容は見れない・・・2つにひとつだったわけですが、Webはそうではありません。Webテクノロジーを活用することによって様々な「見れる」を実現することができます。

配信しなければならないコンテンツに、スタイルやインタラクションなど様々なレイヤーを被せていき、利用者のコンテキストに合わせた体験を提供することが Web では可能です。これが Progressive Enhancement の基本的な考え方になります。Webデザインにおける Progressive Enhancement は、コンテンツという『核』に対して徐々にレイヤーを重ねていく作業に近いかもしれません。

コードで書くとしたら、以下のようなアプローチが考えられます。<div class="box"> ... </div> にスタイルを加えたときの例になります。

.box{
     background: #715886 // 背景色
     background: linear-gradient(top, #8a69ae 0%,#4c3f49 100%); // グラデーション
     border-radius: 20px; // 角丸
     box-shadow: 0 0 5px #000000; // ボックスシャドー
     -webkit-transition: All 1s ease; // アニメーション
}
.box:hover{
     box-shadow: 0 0 10px #a1f6f9; // マウスオーバーしたときのボックスシャドー
}

最新のブラウザであれば、グラデーションのかかった角丸ボックスで、マウスオーバーすると影の色が変わるようなエフェクトがかかります。しかし、場合によっては、影がなかったりグラデーションがないかもしれません。もしかすると、CSS がまったく適応されていない場合もあるでしょう。それぞれ見た目は違いますが、コンテンツにアクセスするという目的の阻害になることはありません。デバイス、ブラウザ、回線、設定、身体状況など、利用者のコンテキストによって見た目は異なるものの、様々な状態に耐えることができるデザインになります。

利用者の状態に応じて、様々な補助が可能になるデザイン。
マークアップは最低限の体験を保持するための基礎であり、高度なスタイルやインタラクションを加えるためのリンクにもなる。

同じ見た目にすることで、装飾画像を増やしたり、ハックを加えることで現状維持は可能でしょう。しかし、2, 3 の異なる状態を同じ見た目にする処理が、他の数十・数百ある別の状態の負荷に繋がることがあります。

Progressive Enhancement のような考え方は、見た目を同じにすることより、利用者とコンテンツを尊重したアプローチだと思います。利用者に技術的な制約を与えるのではなく、彼等の思うようにコンテンツを消費できるように出来るわけです。レイヤーのようにスタイルやインタラクションを被せていくことによって、テクノロジーを賢く繊細に適応できるようになるわけですから、「やさしい」デザインではないでしょうか。

見た目からではなく、体験を積み上げる

実際作るとなると、課題は山のようにあります。まず最初にぶつかる課題が「どれだけやれば十分か？」だと思います。スマートフォン向けの Web サイトを開発されている方であれば、もう嫌というほど体験していることだと思いますが、どれだけやっても不十分ではないかと思ってしまうことがあると思います。今後、Web へアクセスできるスクリーンの数が増えることを考えると、頭が痛くなるかもしれません。

まず、最初のステップとしてブラウザでの表示ではなく体験に注目すること。どんな Web ブラウザでもテキストと基本的なマークアップを理解することが出来ます。その最低限の状態で提供できる体験は何なのか？そこで提供できる体験を基礎として、どのような価値を付け加えることが出来るのかを考えながら徐々に積み上げていきます。付加価値はビジュアル、インタラクション、ユーザビリティなど様々です。

もちろん、こうしたレイヤー（価値）を積み上げていく方法でも、十分に感じることはないかもしれません。しかし、コアの体験から積み上げていくことで、より多くの利用者のニーズに応えた作り方になると思います。

さらに良い見た目、さらにダイナミックなインタラクションといった付加価値は作り手としてはおもしろいですが、利用者全体の割合からすれば小さなニーズです。より高度なWebテクロジーを使うことで、よりリッチな体験にはなりますが、まずは基礎を押さえることが優先です。そのためには、可能な限りシンプルな構造にしたシンプルなサイトにすることを心がけると良いでしょう。

細かいステップを踏まなければ Progressive Enhancement の考え方を適応出来ないわけではありません。熟練した Web デザイナーであれば、様々な状況を把握した上で、デザインカンプを作る人もいますし、ビジュアル・インタラクティブ性が高いサイトをいきなり作り始めても、体験の基礎を保持している人もいます。作り方は様々ですが、コンテンツという核をどう活かすかという部分はブレてはいけませんし、活かし方を考える上でも利用者を忘れるわけにはいきません。

Progressive Enhancement を意識した Web デザインは、カスタマーサービスそのものになります。そして、よりアグレッシブに新しい Web 技術を取り入れるキッカケにもなります。これは古いブラウザでも同じように見せる・・・という作業とはまったく異なる苦労が発生しますが、同時にエキサイティングなプロセスになるはずです。