HTML5 Style

HTML5/CSS3をフル活用した高度なデザインを簡単に実現したい!!

世の中にWebサイトはごまんとあるのだが、おおよそのページの構造なり、色彩の使い方なり、似たようなものがたくさんあって、組み合わせで考えれば、実はデザインのパターンはそれほど多くない。つまり、自分が欲しいデザインに近いデザインを見つけてきて改良すれば簡単に欲しいデザインが手に入りそうなものなのだが、実際はそうならない。それは、例えば自分が使うフレームワークとの適合性やらライセンスやら面倒くさい問題があって、そういったものを解決しようと思っていると、本来のかっこいいデザインを作るというところ以外のところに労力を取られるからだと思う。もちろん、他人のデザインの権利は守らないといけないのだが、ありきたりのパターンを実現するのにも、そういったライセンスやら色々面倒くさい問題が生じるのでは、デザインの進歩の妨げにしかならないと思う。

既存のデザインのもう一つの問題は、そのほとんどがユーザインタラクティブな部分の少ない無い静的なデザインであることだ。せっかくHTML5にて表現力が増しているのに、動的なサイトを作ろうとすると各スタイルに合わせていちいちプログラムを作りこまなければならないなんてことも多い。サービスを作りこんでいけばいくほど、ユーザの好みによってデザインを変えたり、ユーザ操作に合わせてデザインを変えたり、サイトの各ページにあわせてデザインを変えたりと、動的なデザインが欲しくなる。

その理由は、HTML5/CSS3の自由度が高すぎるからだと思っている。まあ、表現の自由度が高いのは良いのだが、例えば同じデザインを実現するのにやり方が多数あれば、それぞれのデザインの互換性を維持するのが難しくなってしまう。なので、なるべく同じような処理はテンプレート化して同じように記述できるようにしたほうが良いと考える。そうすればスタイルを使いまわせるし、動的なページを作ろうと思ったときに、色情報など欲しい属性値を汎用的にとってくる仕組みが簡単に出来るというものだ。

というわけで、処理のテンプレート化という観点で「HTML5/CSS3をフル活用した高度なデザインを簡単に実現したい!!」シリーズを書いていこうかと思う。

詳細

コメントを残す