Blog

Webデザイン応用 第2回「レイアウトの基本」

(1)基本フォーマット

Webブラウザは狭いインターフェースと広い情報開示エリアを持っている。しかも、機能として用意されているのは「進む」や「更新」など極めてシンプルな機能ばかりだ。
これが何を意味するのかというと、Webサイトの閲覧にはこちらで用意したインターフェースだけが頼りということだ。つまり、機能的なレイアウトやユーザーインターフェース(以下、UI)のデザインが極めて重要なのである。

1-1.縦方向基準フォーマット

レイアウトを構成するにあたり基準となる考え方は、実際に閲覧するスペースと操作用の機能を盛り込むスペースをわけるといった、機能別に画面を分割するものだ。一般的には縦方向に画面をわける方法がもっとも用いられている。このとき、画面を移行するためのメニュー郡を左部分に配置するケースが一般的だ。
いまさらながらだが、Webは左を基準に考える。
これはブラウザにリサイズという機能があることが理由で、リサイズすることによってページの右側が移動するためだ。移動するのが何故、まずいのかと言うとUIが移動することでユーザーが混乱する可能性がある。

1-2.横方向基準フォーマット

ビジュアルを前面に押し出すようなサイトで非常に効果的なレイアウト。
ブロードバンド化が進み、大きなイメージを見せることが多い昨今では、よく利用される。

1-3.機能を考えた分割を

縦横の選択基準は、制作するサイトの目的によりだいたいの傾向が決定できるが、最も重視すべきはサイト全体の情報量だ。メニュー構成を重視して、大量の情報へ簡単にアクセス可能なサイトを実現したいのであれば縦方向分割が適している。反対に、写真を見せるなど、ゆったり余裕のあるレイアウトが必要な時は横分割が適してることになる。
大まかなフォーマット決定にも、こうしたサイトの性質を見極めることが重要だ。

1-4.レイアウトの種類と特徴

・左ソデ型縦方向分割

メニューとコンテンツを明確に分けた形。
もっとも一般的な分割方法で、左ソデはメニューにのみ利用する場合が多いが、サイトタイトルを大きくする必要のないものは、左側上部に固定して配置しても、情報掲載面積が保持できる。こうしたパターンでは、左側の作り込みによってサイトの質が決まってくる。

・両ソデ型3分割

ポータルサイトなど大量の情報を扱うサイトで利用される。
こちらは「左ソデ型縦方向分割」の構成に右ソデを足した形となるので、左側の重要度が高く捉えらえられる。右はバナー広告や、付加的なトピックへのリンク集を配置する認識が強い。おまけの要素として、トップページ以降は右ソデが省略され、「左ソデ型縦方向分割」の構成に戻る傾向もある。

・左ソデ型ロゴスペース付

タイトルを上部スペースに配置するためにとられるフォーマット。
また、この箇所はもっとも目立つので、広告スペースやメインメニュー用としてケースもある。
このレイアウトの最大の特徴は、メインメニューとサブメニューを明確に分割できることにあり、多くのコンテンツを抱えるサイトでよく利用される。

・上下横分割

ビジュアル重視の構成が多いパターン。
上部のスペースに質の良いイメージを配置することで、十分な効果を発揮する。このパターンであまりに多くの情報を掲載すると、とたんにバランスが悪くなる。情報を掲載するにしても、情報の絞り込みを検討しよう。
このパターンは中央寄りで作成されることが多いようだ。

(2)内容別ルール

基本フォーマットを選択しても、実際にレイアウトをすすめるにはちょっとしたルーリング(規則付け)が必要だ。
第2回で見たようにサイトにはある種のルール付けが行われており、それをきちんと適用することで、よりクオリティの高いデザインを施すことができる。ここでは素材の配置、マージンの取り方を覚えよう。

2-1.縦の方向を活かす

縦方向のフォーマットを選択した場合、レイアウトによってその流れをより明確にできる。まず、メニュー用のスペースとサイトのロゴマークを配置すると、その位置を基準として、2つの流れが決まってくる。一つはメニュー項目、もう一つはページタイトルの配置位置だ。
このレイアウトの印象は左部分のメニューの作り込みにかかっているといっても過言ではない。余裕ができてきたら、十分に作り込んでみよう。
(サンプル：02-01.psd)

2-2.イメージを活かす

上下2分割の構成はメインイメージの際立つスマートなレイアウトができる。ここでポイントになるのは、画像のクオリティ以上に画面全体の調和を配慮することだ。
いかなるレイアウトでも言えることだが、掲載される情報・パーツにはすべてパワーバランスや関係が存在する。1画面で簡潔するレイアウトの場合、これがとくに顕著に目立つ。その画面で伝えたいことをきちんと把握し、明確に配置することが重要である。
(サンプル：02-02.psd)

category : Blog, 講義資料 | この投稿にタグはありません。 | comment & trackback : 0
by 青山 in 2008.03.08. 19:53

Webデザイン応用 第1回「グリッドシステム」

(1)Webデザイン・ワークフロー

素人が作成したWebサイトと、デザイナーが作成したWebサイトの差は、極論すればクオリティの差である。この差がどこから来るのかと言えば、やはりきちんとしたデザインを施しているかどうかである。
この点で言えば、前期のようなパーツ毎に画像を作成し、HTMLに埋め込んでいくという手法はその手軽さにおいてメリットがあるものの、クオリティの追求と言う点においてデメリットが目立つ。これは、コーディング(HTMLの作成)と、デザインを同時に行う場合、場当たり的な発想が増加し、しかも実際にコーディングしてしまうとデザインの変更が困難になってくるからである。
そこで現在のWebデザインの手法は、まずPhotoshopやFireworksを使ってデザインをすべて行い、その上でコーディングに入るというものである。こうすることで、コーディングの際によりベストなWebページの作成が可能となる。
本講議ではこのワークフローに習って、コーディングの前に全てのデザインを済ましてしまうという手法をとる。

(2)Webサイトの模写

Webサイトの模写は、レイアウトの基本、コーディングのテクニックなど非常に多くのことを気付かせてくれる。
特に今回、題材としているアップルのサイトはシンプルな形状ながらも、Webデザインに必要な多くのものを含んでいるので、最初に模写するにはうってつけの題材と言える。

■手順

1. Photoshopでレイアウトのトレース
2. 質感の調整
3. Dreamweaverを使ってのコーディング

(3)グリッドシステム

現在のWebサイトはグリッドシステムというデザイン手法が多く用いられる。もともとは紙面のレイアウト手法として開発されたが、現在のテーブルタグを用いたWebに最適なので、広く普及している。
グリッドとは「格子」のことで、画面を機能ごとに分割・整理していくことで比較的容易にレイアウトを整えることができるのである。
説明だけではなかなか分かりにくいので、アップルのサイトを分析してみよう。

■手順

1. サンプルファイル「wd_b01_01a.psd」をPhotoshopで開く。
2. [ビュー → 定規]でルーラーを表示する。
3. ルーラーからドラッグするとガイドを引くことができるので、メニューやトピックス部分にガイドを引く。
   サイトの多くは5pxや10pxなど5の倍数でできていることが多いので、それを基準にすると分かりやすいだろう。ガイドを精密に引く時は、選択範囲を上手く使うのがコツ。

(4)レイアウト

次に、ガイドに沿って各画面要素を配置してみよう。
今回は質感なしで、アウトラインを配置する。

■手順

1. メニュー→ニュース→トピックスの順で要素を配置する。
   角丸の四角は標準のツールでは描くことができないので、「矩形選択ツール」と「楕円形選択ツール」を併用して作成する。描写色で塗りつぶしは[編集→塗りつぶし]で実行できるが、このコマンドは頻繁に利用することになるので、ショートカット[alt+delete]を覚えておくと便利だろう。
2. 次にメインの画像を配置する。
   アップルのサイトから画像をコピーしてきたら、ペーストして配置する。今回は模写が目的なので、写真をペーストしたレイヤーの描写モードを「差の絶対値」にしておくと分かりやすい。
3. ここまででの作業で完成したのが「wd_b01_01b.psd」だ。実際に開いてみて、自分の作成したものと比べてみよう。

(5)演習

「wd_b01_02.psd」を開いて、ガイドの配置を実際にしてみよう。

(6)総括

今回の講議で見たように、整ったデザインを行うのにグリッドシステムは非常に威力を発揮する。ある一定のリズムで構成された画面は見ていて安定感があり、読み易い。また、分類ごとマージンを調整してやれば括りが分かりやすく、理解を促すという効果を持つ。
クオリティを高めるにはグラフィックテクニックも必要だが、まずはレイアウトの基本を身に付けるのが一番、近道である。そして、その近道でも最も効率的なのがグリッドシステムなので、この手法をまずはモノにすること。
Webページは1ページでは完結しないことがほとんどだ。こうした時に、そのページの機能をしっかりと考え、最適なレイアウトを導き出すことができれば優れたサイトを作成することができる。反対に、この設計の部分で方向を誤ると、後々まで後を引くことになるので注意が必要だ。

category : Blog, 講義資料 | この投稿にタグはありません。 | comment & trackback : 0
by 青山 in 2008.03.08. 15:50