Webデザインにある駆け引きとコダワリ

Webは人とデータに開放された世界

電子書籍の登場で、再び DTP デザインと Web デザインが比較されることが増えてきた印象があります。もちろん以前から「DTP デザインの呪縛」のようなものが Web デザインの世界で長く受け継がれています。随分 Web に最適な手法が盛り込まれているものの Dreamweaver のような老舗アプリは「DTPデザイナーでも Web サイトが作れる」というコンセプトが今も残っています。Webデザイナーは表現の仕方の違いからフラストレーションをためている方もいると思いますし、発注者側も DTP と Web の違いを伝えてもらっていないことからコミュニケーションに困っている場合もあると思います。

紙には物理的な境界線があることから情報量に限界がありますが、完全に隔離された世界を作ることができます。その世界は紙という媒体によって完全に守られていて、デザイナーや発注者側の意図を完全に再現するとが可能です。だからこそ、再現性こそが紙のデザイナーの実力でありコダワリだと思います。タイポグラフィ、グラフィック、レイアウト・・・様々なスタイリングを施すことによって世界観を明確にし、発注者側の意図を時には抽象的に時には具体的に再現します。

当然、Webデザイナーも発注者側の意図を目に見える形で再現しなければいけません。しかし、紙と同じような感覚であらゆる部分まで作り込んで世界感を構築すれば良いのかといえばそうではありません。Web デザインには「柔軟性」という紙のデザインにはなかった新たな要素を考慮しなければならないからです。

Webデザインにおいて柔軟性とスタイリングは相反する関係

紙のデザインにはない駆け引き

紙は完全に隔離した世界だからこそ、見る人はその世界をそのまま受け取ることになります。だからこそ相手が受け取る姿が明確ですし、それを前提にして洗練させることもあります。しかし Webサイトは受け取る側の像が多用であるだけでなく、誰でも自由に操作が出来ます。Webサイトをデザインする際に見た目をコントロールすることを考慮すると同時に柔軟性への配慮が必要になります。

スタイリング

タイポグラフィ

グラフィック

レイアウト

フロー

柔軟性

表示領域

操作の自由度

共有性

フォールバック

※ ここでいうフォールバックとは、利用者の通信速度や設定、又は操作の仕方のよって意図した見た目が完全に再現されなかった場合に、代替コンテンツや表示方法があらかじめ実装されているかどうかを指します。

「スタイリング」と「柔軟性」は対の関係にあると考えています。
スタイルを加えれば加えるほど柔軟性を失われていきますし、柔軟性を重視すれば見た目は退屈なものになりがちです。ひとつ画像文字を加えることでスタイリングは洗練されますが、データのポータビリティが失われたり、DPI が高いモニターでは文字がクスんで見える可能性があります。凝ったレイアウトにすれば、PC など特定のデバイスで見たときには美しいですが、モバイル環境でみると縦にも横にもスクロールしなければならない操作性が悪いページになります。では、１カラムでテキストばかりのサイトにして柔軟性が高いページを作れば良いのかといえばそうでもなく、見た目の魅力は失われ人々は去ってしまうかもしれません。

いずれかの要素を強めると、片方の要素が弱くなります。

スマートフォン専用など特定のデバイスに向けてサイトを作ったとしても「スタイリング」と「柔軟性」のバランスは繊細です。ひとつ装飾を加えるだけでも表示速度も変わりますし、凝り過ぎるとスマートフォンの中でもさらに特定のデバイス向けになってしまう場合もあります。デザイナーや発信者側の「コダワリ」が利用者への負荷へ転換してしまう可能性があります。Webサイトデザインに関わる方はこの２つの要素の駆け引きをしており、プロジェクトごとに微妙に変わるミドルポイントを何処に置くかに知恵を絞っています。

利用者はいずれの要素を同時に最大限まで上げてくれるサイトを期待している場合があります。

しかしながら利用者はそんなことは分かりません。利用者が求めているものは彼等がやりたいように操作が出来る柔軟性と、魅力的なデザインです。対の関係にある２要素をいずれも最大限にしたいという無理難題をデザイナーがどう応えるのかが課題になります。「スタイリング」と「柔軟性」いずれも最大限というのは難しいですが、ミドルポイントの領域をさらに広げる手段は幾つかあります。

技術・テクニック・アイデアによってミドルポイントの領域（透過の赤色部分）を広げることが出来ます。

例えば今まで画像にしていた装飾を CSS3 に変えてみてはどうでしょう。現状画像で作るほど美しくないかもしれませんが、ある程度の見た目は保つことが出来ます。それと同時に様々なデバイス（ウィンドウサイズ）への柔軟な対応、そしてファイルサイズとリクエスト数の軽減で早く表示されます。Media Queries を活用して様々な状況に絶えられるレイアウトを用意するのも手段のひとつです。完全なひとつの見た目の世界でもなければ、素晴らしく柔軟性があるわけではありません。しかし、特定のデバイスでたままた見たウィンドウサイズを想定した見栄えの良いレイアウトをひとつ提供よりかは良いソリューションでしょう。

Webデザインでのコダワリとは？

Webサイトは紙のデザインとは異なり、ひとつの完全な世界観を作ってもかえって柔軟性が失われ利用者の負荷に転換する場合があります。

たまに耳にする「コダワリ」という言葉。この言葉がデザインで使われるときは、どれだけ細かく精査した世界を作り出しているかを指している場合が多いと思います。Web デザインもデザインの一種であるわけですから、タイポグラフィ・レイアウト・グラフィックに細心の注意を払うことは当然でしょう。ただ、そこだけが「Webデザインにおけるコダワリ」だとしたら危険だと思います。その「コダワリ」が利用者の負荷になる可能性を考えていないのであれば、それは同業者の内輪ウケでしかありません。

私は Web デザインでも「コダワリ」というものは存在すると思っています。しかしそれは紙デザインにおける世界観の再現性という視点とは少し違うものです。今回紹介した「スタイリング」と「柔軟性」という２要素の駆け引きと戦いながら、ミドルグラウンドを見つけること。技術・テクニック・アイデアを駆使してミドルグラウンドの領域を広げること。これが Web デザインのコダワリだと思います。ただ単に魅力的な見た目を再現するだけで評価出来ないところが難しいわけですが、同時におもしろい部分だと思います。