ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ 機能的ウェブデザインの意味 ]

論理的にデザインする

CSSでデザインとレイアウトがされているページはCSSを外すとhtml構造だけが表示される。この状態で文章が論理的に流れていなければならない。デザインは装飾として後から付随する。この考え方がこれからのウェブデザインの考え方になってきている。

1 December,2005

1.サイトマップをはじめに作る

フロントページにドカンと大きな写真を貼ったりFlashの大画面が動いたり、それで内容はというとメニューだけをナビゲートしたウェブがある。誰でも知っている企業なら、この方法は成立するんだろうけど、普通はあれもこれも考慮すると非常によろしくない。

賢明なことは、はじめにサイトマップを作ることだ。ウェブページはリンクでページとページが関連性を持ちこれが素晴らしいのだが、サイトマップを作るとこの関連性の重み付けも明らかになってきて、だんだんとページの構想と階層が見えてくる。つまり、ここで煮詰めるとメニュー項目とその順番が決定することになる。

サイトマップが完成したらデータとして打ち込んでおく。素材になる写真や印刷物を用意して、各ページに収まる文章を保存しておけば、大体の準備は終わりだ。

ここまできたら、デザインに取り掛かれる。ニ段組がいいのか、メニューバーは右側でいいのか、フロントページで使う画像は何がいいかなど、そしてここから第三者が入るので、客観的な細かい注意書きの要望もきっと出てくるだろう。こんなふうに後は制作する人と相談してひとつひとつ進めることになる。

2.トップページとメインコンテンツ

ウェブサイトのフロントページは階層下のページへナビゲートする構成にしなければいけないので、中には画像を使ってアイキャッチを狙う必要もあるだろう。その中で、閲覧者をじれったく待たせるFlashはザッピングするネット サーファーにとって不向きなようだ。

ブログ型のウェブページが増えてきたのが最近の傾向だ。このタイプの利点はテンプレートのデザインがメインになっているため比較的簡単にデザインを変更できることだ。レイアウトとデザインはCSSで設定する。そして、ページの構成は上から順にH1、H2、H3、Hx…とタグをうつことが定石だ。ウェブ・ポジショニング(SEO)との関係で以前ほどタイトル回りに関しては一切画像を使わなくなった。そのページにふさわしいイメージ画像を用意することも大切だ。

作り手からすると、非常に大切な意味を持つフロントページだが、公開するとわかると思うんだけど、殆どのビジターがフロントページをヒットするとは限らない。階層下のページからフロントページへ上がってくることも多いので、そういう視点での構成も必要だ。

3.検索されたページの処理

1ページでリンク数が多いときは、 iframeを使った部分的画面の切り替えなどの手法が必要になるかもしれない。簡潔なカテゴリーにまとめあげることが閲覧者にとってやさしいページ構成となるし、ウェブデザインとしてもまとまりのあるものになるだろう。

さて、ここで気をつけなければならないことがある。検索エンジンを使って閲覧されたページがフレームの中に入っているページかもしれない。その場合はそのページのアンカーリンクで本来のページを表示させてあげるか、BODYタグでonloadイベントを使って本来のページを自動的に読み込む設定をする(※リンク先11を参照のこと)と閲覧者にやさしいコンテンツになる。

4.リニューアル(リデザイン)

さて、サイトを立ち上げ、ページを追加していくと、トッ プやサブトップの変更を迫られる時期が来る。これがウェブデザインのリニューアルの時期だ。

アクセス解析をしていれば閲覧者のさまざまな行動体系が見えてくる。 意図に反してアクセスが上がらないページをトップで如何にアピールできるか。雑然としてきた内容を如何にうまくメニューに押し込めるか。またはメニューを変更したりと、 ウェブサイト全体をレベルアップさせるのが狙いだ。 テキストが多すぎる傾向のページはここで初めてイメージインデックスが生れるかもしれない。アクセスが増えたウェブサイトにはリンクしたい人のためのバナーが必要になるかもしれない。そのひとつひとつがデザイン上のエレメントとして組み込まれウェブデザインが完成されてくる。

5.フォントサイズはフリーになってきた

シルバーエイジにもやさしいサイト作りはフォントサイズを変更できることだ。今までは圧倒的に固定サイズにしたウェブが殆どだったが、近年少しずつ変化を見せている。

制作依頼する場合はフォントサイズをフリーにするのか固定にするのか言及する必要がある。制作が完了した段階で「フォントサイズを変更できるようにしてください」と気軽な気持ちでお願いしても、そっくり作り変えなければならないほどの大掛かりな作業になってしまうこともあるので念頭に置いておこう。

何故なら、フォントサイズを固定にした場合は画像を絡めたデザインが出来たものだが、サイズフリーになるとこのあたりのロジックが全く使えないため、経験のないウェブデザイナーはきっと閉口するに違いない。

サイズフリーでウェブを制作したいのであれば、CSSでレイアウトとデザインを組むのが賢明だ。よってウェブデザイナーはCSSができる人を選ぶことになるが、くれぐれも人選には注意したほうが良い。

「Mozilla Firefox」

ところで、2004年からブラウザー事情が少し変化を見せている。Firefoxがシェアを伸ばしてきて、今ではInternet Explorerにつぐ2番目のブラウザーだ。表示スピードが早く、タブで複数の画面を切り替えられるのが受け入れられている勝因だ。

ウェブデザイナーにとっては良いことばかりではない。 「ctrl」+「+」でテキスト標準サイズより拡大方向へ8段階、「ctrl」+「-」でテキスト標準サイズより縮小方向へ8段階コントロールできてしまう。フォント固定の設定はFire foxには効かないので、ワンランク大きいテキストサイズに変更しただけで崩壊するようなレイアウトだけは避けたいものだ。

ウェブページにおいて完璧なデザインは不可能だ。より弊害のないデザインを心がけることがプロのデザイナーだろう。

最後に、完成したウェブはInternet ExplorerとFire foxでしっかり確認することを忘れてはならない。世界で名ブランドで通っているあのウェブだってこのチェックをしていないようだから、Fire foxで見るととんでもないことになっているのが現状なのだ。

プロフェッショナルの品質は高品質

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。