デザイン関連 Archive

　今日は、“超”初心者が始めるスタイルシートによるリキッドレイアウトについて書いてみる。リキッドレイアウトとは、ウエブページの左右幅をブラウザの表示範囲に依存させるもので、ごく簡単に評してしまえば、閲覧者の環境に影響を受けづらいと言えるレイアウトだ。ウエブページは判型が決まっている書籍や雑誌などと違い、閲覧者の使用するモニタの解像度によって画面に表示できるサイズが変わってくるから、それを考えたデザインをしなくてはならないと言われている。

　最近では800×600の解像度を持つモニタを使用する人口は減ってきていると思うけれど、全くゼロでは勿論無いし、その範囲内で見られるページを作るのが基本のようで、ウエブページの横幅はおおよそ760ピクセル以下で作られる事が多い。ただ、近年液晶モニタの急速な低価格化によって高解像度のモニタが容易く入手できる様になり、その解像度を守って作ると、解像度の高いモニタで見るとコンテンツ以外の場所に広大なスペースが感じられるようになったりするから、意外にウエブページのデザインは難しい。

　僕がリキッドデザインを取り入れた理由は簡単で、ユーザー側に自由度があるという事だ。これはレイアウトだけではなくて、例えばリンクのtarget属性やフォントサイズの指定などにも当て嵌まる。

　例えば文章を読むのに、“ブラウザの左右幅が余りにも大きいと文字の折り返しが長くなって読み辛くなるから、固定幅のデザインを使う”というのは広く流布されている言説だ。ただ逆に言うと、ユーザーは自分の好きな幅にブラウザをリサイズ出来る訳だから、それに追随出来るデザインであれば良いとも言えるだろう。同じように、フォントサイズをピクセルで指定するとＩＥでは文字のサイズ変更が出来なくなる（慎重に言えばユーザースタイルシートを使えば変更出来るけれど、ユーザースタイルシートを利用しようとするシェアを考えればそれは無きに等しい）ので、もし字が小さくて見づらいと思ったとしてもユーザーの側で変更出来ないという不自由さがある。

　また、リンクのtarget属性で"_blank"という指定をするのも、特にリンク集のページなどではよくある事だ。リンクをクリックすると、ユーザーの意志とは無関係に新しいウインドウが開き、リンク先を表示するというもの。これもまたここまで書いてきた内容と同様の理由で、ユーザーの自由度を奪っていると言える。shiftキーを押しながら、もしくはウインドウズであればリンクを右クリックしてポップアップメニューから、などという方法でリンクを新しいウインドウで開く方法は存在していて、逆にリンクを同じウインドウで開く方法は皆無と言って良い。

　コンテンツの幅やフォントの大きさが固定されていた方がデザインしやすいし、別サイトへ飛ぶリンクは別窓で表示したいというのも良く判る。僕もつい数ヶ月前まで同じような思考回路でいて、そうやって自分の趣味ページを作っていた。ただそれはあくまでも作っている側の論理だけでしかなく、ユーザー側の意向は余り汲まれていない。確かに、自分が使うときには感じていない事でも、他の人だと気になる部分というのは沢山あるのだろうし、そうした時にユーザー側の選択肢は多ければ多いほど良いと、最近考えるようになった。

　数ヶ月前まで固定幅のデザインに固執していた僕が、ひょいとその考えを翻してリキッドレイアウトに入れ上げている。固定幅のデザインはやはりDTP的であり、グラフィックソフトなどを使ってかっちりと作る事が出来るから作りやすい事には間違いなく、可変幅のレイアウトは慣れていないせいもあるのか奥が深く感じるし、ある程度どんなサイズのウインドウで見られても大丈夫なように設計しなくてはならないから、面倒な事も多い。次からは、リキッドレイアウトの細かな部分を書き記していきたい。