CSS3のデザイン実装

WEB制作のひとつのデザインとして定着した感のあるボックスの 角丸表現は、 CSS3によってデザイン実装で頭を悩ませることから解放されるはずだ。すでに海外では、 Firefox やSafari などでは特定のボックスが角丸で表示され、対応していないIE などのブラウザでは 通常の形のボックスが表示されるWebサイトもいくつか存在する。 この角丸の表現には、 CSS3のBackgrounds and Borders Modulesに含まれるborder-radiusプロパティを利用する。 基本となる記述は border -radius: 値であるが、仕様では上左・ 上右・下左・下右のそれぞれの角を個別に設定することもできるため、 指定次第ではちょっと変わったボックスもつくることができる。

情報構造上不要であっても、画像をふんだんに使い視覚的な見せ方にこだわったホームページ作成を実現するためには、 HTML文書構造を利用した複数のブロックレベル要素への背景画像の指定など を行わなければならない。時にはデザインの実装のために、泣く泣く不要なdiv 要素などを追加する状況もあるはずだ。 アルファチャンネルをサポートしたPNG24の画像形式がどのブラウザでも表示できればまだ作業は楽になるが現実はそうはいかな い。やはりブラウザの対応やユーザーの利用状況を考ると、画像の 切り出し方に頭を悩ませながら複数のブロックレベル要素への画像 の適用が正攻法といえる。 現在多くの制作者が抱えるこのような実装面での苦労は、 background-image プ口パティが拡張されることで負荷が軽減するかもしれない。 CSS3では background-image プロパティに複数の画像を指定できるようになる。もちろん、それに付随するbackground-position プロパティで複数画像の位置指定が必要になる。 また、これまでは HTMLのimg 要素だけで指定できた画像サイズ は、 background-size プロパティの追加でスタイルシートで利用する画像もサイズ指定が可能になるようだ。

 

情報アーキテクチャとは?

ホームページ制作を行う際、Webサイトの構造に関して考えるときは、情報アーキテクチャという体系化された技術を利用するとよい。情報アーキテクチャは、図書館のように大量に存在する情報をより効率よく整理し、ユーザーがより便利に使えるようにしたりできるかなどという点において、さまざまな研究がなされている。ひと言で情報アーキテクチャといっても、さまざまな側面があり、例えば、人々の経験則の中で生み出されてきた情報整理ノウハウから人と情報との関連性を科学的に研究した学問的側面までがあったりする。こういった要素を含めて情報アーキテクチャ(lA)と総称しているのである。

Web情報アーキテクチャは、 Webサイトの構造からラベルのありかた、 ナビゲーションまで、色々な要素を生み出す技術群だが、 Webデザインとどこが違うの? という議論はもちろん存在する。デザ インという言葉は適用範囲が広く、たとえば情報デザインという言葉 があるように、色々な分野の設計についても利用することができるのである。情報アーキテクチャ自体は、広義のデザインに属するものであると思っておけばいいだろう。 Webデ ザインという言葉に含まれるビジュアルデザインだったり、狭い意味でのユーザーインターフェイスデザイン、モーショ ンデザインなどは情報アーキテクチャには含まれないといえる。