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

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

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

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

普通のデザイン指示

ページごとにデザイン

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

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

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

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

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

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

パーツごとにデザイン

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

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

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

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

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


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

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


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る