WD101: Webのデザインは枠のない世界である
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。
Webサイトのデザインは、グラフィックデザインやエディトリアルデザインと同じような感覚でデザインをすると、柔軟性・拡張性が欠けたものになるだけでなく、特定の環境でしか見れないものになることがあります。
こうなるひとつの要因として、グラフィックデザインやエディトリアルデザインが、特定の環境で見るということを前提にしてデザインしているからだと考えられます。A4の紙であったり、名刺サイズだったり、特注のコーティングを施したビルボードなど、決められた枠の中で世界を作り上げるデザインに対し、Webは枠があるようでありません。作り上げた世界をまとめるための「枠」が存在しないのが Web です。
どの枠にするか定められない
Ratina Display で見た細長くなった Webサイト【参照】。パソコン向けの横幅にしているつもりでも、見た目が大きく異なる場合がでてきています。一見、Webでも枠があるように見えます。モニターの大きさや、Webブラウザのサイズもそうですし、CSS の width や height 属性で自由に枠を設定することもできるでしょう。しかし、これらの「枠」は、ある特定の状態でしか存在しません。パソコンにデバイスを限定したとしても様々な大きさがありますし、Webブラウザもユーザーによって自由な大きさに変えることができます。「17インチのモニターで、ブラウザを 1024 x 768 の大きさに変更して見てください」と、利用者に指示するでしょうか。そこまでしないと、枠を意識したデザインは出来ないわけですが、そんな要望を利用者に強いることはできません。
様々なモニターサイズがあったとはいえ、パソコンは比較的シンプルでした。800ピクセル、960ピクセルなど、時代によって「だいたい標準」と呼ばれる横幅サイズがあり、そのサイズを固定で指定すればデザインする上で必要となる枠を手に入れることが出来ました。擬似的に枠が作りやすかった環境だったことから、紙デザインのような作り方が出来たのかもしれません。しかし、タブレットやスマートフォンになると状況は大きく異なります。
市場に出ている Android デバイス（スマートフォン＋タブレット）のスクリーンサイズ【参照】日本だけでも 100以上の Android 機器があり、サイズだけでなく解像度も様々です。 iOS に絞ったとしても 4つの異なるサイズが存在し、今秋出ると噂されている iPhone 5 が登場することによって新たなサイズが加わるかもしれません。
現状 4種類しかない iOS に絞るのであれば、それぞれ異なる枠に対してデザインすることが出来るかもしれません。しかし、利用者数を考慮すると、iOS に限定するのは現実的ではありません。シェアが高いデバイスに絞るといっても、昔の Windows vs. Mac のときのように、順位が付けられるほど明確ではありません。
それでもデバイスを特定することで、枠という概念を少しでも活かしたデザインをするのか。それともレスポンシブWebデザインをはじめとした、可変グリッドを用いた枠に捕われない作り方にしていくのか。ケースバイケースですが、いずれにせよ、紙やビルボードのような明確な枠組みの中で世界を作り出すことは困難だといえます。
枠がないという新たな制約
紙には上下左右に枠があります。
そして、この枠を最大限に活かしたデザインをするのが、紙のデザインの面白いところであり、腕の見せ所です。紙の枠は、紙という媒体の特徴であると同時に、デザインにおける制約です。そして、こうした制約を理解し、活用しているからこそ、媒体に適したデザインが可能なわけです。
Webには、この「枠」という制約がありません。
明確な枠があるのは、上部だけで、その上部もどれくらい横幅があるのか分からないという、あやふやなものです。下部はコンテンツの長さよって変幻自在に変わりますし、両脇も同じようなことがいえます。つまり、紙のデザインにおける制約が、Webでは存在しないわけです。あたかも制約があるように枠を引いてデザインすることは出来ますが、Webという媒体に適した作り方というよりかは、紙に似せるための擬似的な手段に過ぎません。
適したデザインをするには、扱う媒体における特有の制約を理解して、初めて実装できます。紙には「枠がある」という制約があり、Webには「枠がない」という制約が存在します。制約を理解せずに、別の媒体の制約を無理に持ち込もうとするから「Webは難しい」「紙は難しい」ということになるわけです。
Webへ繋がるデバイスがますます増えていく中で、今後より一層、枠がないという制約を理解し、活用したデザインが必要とされています。枠がない世界でどうデザインしていくのか。いろいろな模索が今も続けられています。
Yasuhisa Hasegawa
Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。