マルチデバイス時代のウェブ・デザインの組み立て方

過去記事 スタイルと文書構造、物理的に分離しただけじゃ意味がない から通じる話題。

メディアタイプやメディアクエリの仕組みに対応したブラウザが普及してくると、1つのHTMLで様々な端末に対応させることができるようになる。マルチデバイスに効率よく対応できれば、これまでと同等のコストで、より広いユーザにコンテンツを配信することが可能になるが、これを実現するには、これまでのウェブ・デザインの捉え方を少し変更する必要がある。

その1つとして、「ウェブ・デザインをページ単位で捉えるのではなく、パーツ単位で捉える」ということを挙げてみる。

普通のデザイン指示

例えばこんなデザイン(左図)。段落や見出しの間のマージン設定が、細かく指定されている。これは、ごく一般的で普通のデザインの指示だけど、この指示だけでは、マルチデバイス展開は難しい。それは、端末によって望ましい文字の大きさが同じとは限らないからだ。

handheld 端末は画面が小さく、PCスクリーンよりも文字を大きくしないと読みづらかったり、Nintendo Wii などの tv 端末では、3倍とか4倍の大きさにしないと読めなかったり(10feet UI)、端末によって適切な文字サイズは大きく異なる。

そうすると、要素間の空きがピクセル固定では、バランスが取れない。例えば、文字のサイズが3倍なのに、マージンは同じでは、レイアウトが崩れて見えてしまう。

それから、指示されたマージンが上下のどちらの要素に由来するか判別できない。そのため、結果としてマークアップエンジニアは、一つ一つの要素に個別にマージンを指定する羽目になり、後から一元的に変更するのが難しい状態ができあがる。

それぞれのメディアタイプ別に個別にマージンを設定するようなこともできるが、それでは対応する全メディアタイプそれぞれに個別の設定を用意することになる。これでは手間がかかって仕方がない。別々のサイトを作った方が早いくらいだ。

パーツ別にしたデザイン指示

そこで、こうしてみる(右図)。最初の例がページごとに細かく作りこんでいく形式なのに対して、こちらはパーツ単位でデザインしていくことになる。

基本的には、各パーツに上下のマージンを設定して、連続した場合に相殺されてちょうどよい空き具合になるように指定する。

それから、できればピクセル単位で固定する方法よりも、ボックス要素の幅や文字サイズに対して相対的に指定できるほうがよい(この例ではem単位で指定した)。そうしておけば、画面のサイズや文字サイズが端末によって様々だったりしても、おのずとちょうどいいサイズで表示されるようになるからだ。端末側で文字の大きさを変えたりしても崩れることはない。

そして、1つのパーツについて、対応デバイス分のスタイル設定を予め用意しておく。そしたら後は、コンテンツを作る人が、そのパーツを組み合わせてただ置いていくだけで、勝手にマルチデバイスに対応できるようになっているはずだ。

新しいページを作成するときにも、多くの工程で作業は最小限に抑えることができる。デザインされる要素は、パーツ単位で既に定義済みだから、組み合わせるだけですぐに実現できてしまう。いちいちデザイナがマージンを決める必要はない。

今回の例にしたパーツは、タグ一つで表現できちゃうような単純なものばかりだが、複雑なパーツほど、パーツ単位のデザインを取り入れたメリットは大きいと実感できるはずだ。

デザインパーツを詳細に作りこんでいく従来のアプローチも悪いとは言わないが、デザインをモジュール化して管理することで、より効率的に、上手く一元的にコントロールする方法を考えていかないと、大変な苦労をすることになっちゃうのじゃないかと思う。