体験のレイヤーをつくるWebデザイン

2012年10日6日は、神戸ITフェスティバルの講演に続いて CSS Nite in KOBE でも登壇しました。神戸での記念すべき第一回目ということで、技術話がほとんどない働き方をテーマにした話題が中心でした。私のセッションは、終わりなき Web の旅と題して、予測不能でトレンドも目まぐるしく変わる Web の世界で変わらないもの、目標にできるものを紹介しました。

再考 Progressive Enhancement

今頃「Progressive Enhancement」なんて言葉を使うなんて古いと考える方もいるかもしれません。不幸にも日本語で最適な表現がなく、カタカナ表記でプログレッシブ エンハンスメントとしてもピンと来ないのが、言葉のもつ意味が浸透しないひとつの要因ではないかと考えています。例えば、昨年からよく耳にするようになったレスポンシブ Web デザインにしても、Progressive Enhancement の設計概念を取り入れずに、テクニックから入ると落とし穴にハマることがあります。今後の Web デザインにおいて外すことの出来ない考えだからこそ、WD101シリーズで詳しく解説しました。

今回の講演で、私は Progressive Enhancement を体験のレイヤーという言葉に言い換えて解説しました。最低限の使い勝手やコンテンツへのアクセスは保証するものの、異なる状況に応じて適した見た目（CSS）や、補助する機能（JavaScript）を追加するという Progressive Enhancement の考え方は、体験を少しずつ重ねていく行為のようにみえます。たとえ、スマートフォン専用のサイトを作るときにも、こうした考えを基礎に少しずつ体験・体感を積み立てていくと、より多くの方に情報を提供しやすくなるはずです。

Web らしく Web デザインするための基礎中の基礎の考えではありますが、デザインプロセスや評価の仕方が、Progressive Enhancement を実践しにくくしている場合があります。 Web におけるデザインの捉え方が厳密な表現を再現することに集約されることがあるからでしょう。

Webで残るビジュアルデザイン

Web ではビジュアルは関係ない。
使えれば良い。
コンテンツが見れれば良い。

こうした言葉が時々 Web 上で飛び交うことがあります。Web におけるビジュアルの重要性に関してよく議論されますが、ビジュアルデザインへの理解の違いがある場合があります。まず第一にビジュアルは使いやすさに大きな影響を及ぼしている点です。利用者であれば気に留めることのない、枠線や色の演出が、「ここから先に進める」という認知を無意識に知らせていることがあります。また、ビジュアルの演出が「なんか分からないけど良いね」「ちょっと見てみよう」という論理的ではない感情の後押しを与えることがあります。

ボタンではなく、ページがめくれたような見た目にすることで、その先に何かがあるかのように演出しています。これもビジュアルデザインの力。

ビジュアルデザインの第二の誤解は、レイアウトがデザインと考えられている場合があることです。作り手の世界観を完全に再現しつつ情報や感情を伝える手段としてレイアウトは紙媒体では有効でしたが、様々なスクリーンサイズがあるだけでなく、利用者の設定次第でレイアウトが変化する Web では、同じような効果を得ることはできません。複雑なレイアウトがつくれないからといって、デザインが出来ないというわけではありません。レイアウトはデザインにおいて重要な要素ですが、数ある要素のひとつに過ぎないからです。

レイアウトから装飾を加えるというプロセスであるが故に Progressive Enhancement のような体験のレイヤー作りが導入しにくいという場合があります。そこで、ビジュアルデザインを部品と捉えて構築していきます。例えば色、線、タイポグラフィ、余白などといった基礎的な部品や、ニュースアイテム、テーブル、ギャラリーなどといったコンテンツタイプまで、レイアウトに捕われない部品を作ります。これらの部品をサイトの全体の雰囲気を作り出す「ビジュアル言語」と見立てて、案件に合う構成を組み立てていきます。レイアウトから入らないので、コンテンツから始める設計思考になりやすいだけでなく、各コンテンツに対してどのような体験レイヤーを加えたら良いのかも検討しやすいというメリットもあります。

コンテンツ、利用者を補助するためのビジュアルデザインは今後も必要でしょうし、多デバイス化する Web でも残るものだと考えています。

Webらしいデザインをもっと知りたい

ここ 1, 2 年ほど、機会があればセミナーで 1992 年につくられた Web ページを紹介しています。この時点で数十億人が携帯デバイスで Web が観覧される日が来ることは予測できなかったはずです。しかし、上記のサイトは問題なくアクセスすることができます。読みやすいですし、スクリプトによるエラーや非表示になることはありません。ビジュアルは退屈ですが、今でもコンテンツを消費することができます。

自分が作ったサイトで、未知のデバイスからでも情報へアクセスできるものが一体どれくらいあるでしょうか。サイトの役割によって、今この時点で見れれば十分というのもありますが、Web の強みは誰でも何処でも（形状や見た目は異なるものの）情報へアクセスできることだと思います。装飾を重視したサイト作りから、コンテンツを補助するためのビジュアルデザインという捉え方の変化が Web を Web らしくデザインし、情報配信するための一歩になるでしょう。

覚えることが多いですが、Web の本質はデバイスが増えようが、アクセスの仕方が多様化しても変わりないので、今後の進み方の基になると思います。

ワークフローが確立されている。
対クライアント、対代理店との構造上の課題。
社内での文化形成。

様々な要因で「Web らしい」と考えられる作り方が難しい場合があります。変化を作るのは難しいことですが、もはやパソコンから Web へアクセスすることが主流ではなくなりつつ状況になってきた今だからこそ、変化をつくる良いチャンスではないかと考えています。

このサイトに訪れている方の変化の力になれるような情報をこれからも提供していきたいと思います。