POINT
■グリッドデザインや遠近法など、絵画や印刷物で培われてきたデザイン技法をWebデザインにも役立てることができます。
■Webサイトでは情報を提供するだけでなく、ユーザーが利用しやすいデザインを心掛けることが大切です。
■現実世界で広く利用されているデザインルールに基づくと、分かり易いビジュアルデザインが制作できます。

【グリッドデザイン】
平面に要素をバランスよくレイアウトするには、グリッドデザインを用いてデザインすることが多いようです。グリッドデザインは、キャンバスに対して一定の間隔で縦横のガイドラインを引き、その線に合わせて要素を配置していく方法です。グリッドを用いて一定の間隔で並べた要素には規則性やリズムが生まれるので、視認性や安定感が増します。
一般的には画面の幅に応じて12や16などの特定の数字で分割したグリッドを用いることが多いようです。これは画面を3分割したり4分割したりといったカラム（段）設定に都合が良いからです。

また、このグリッドデザインで分割し易いように、Webデザインの横幅も960ピクセルなど、多くの数字で割り切れるものに左右マージン分を加味して設定することが多いようです。Webサイトにおけるカラム数は2もしくは3が多いようです。カラムは等分割ではなく、メインコンテンツのカラムを広めに、ナビゲーションやサブコンテンツのカラムを狭く設定するのが一般的です。カラムの分割によって、1行あたりの文字数を減らし、可読性を向上することもできます。また、追加の情報表示や関連コンテンツへのナビゲーションの配置など、可視範囲にある情報の種類を増やすことができます。グリッドデザインにおいては、カラムだけでなくマージンによってコンテンツとしての始まりと終わり、1つのコンテンツブロックを作ることで情報としての区切りを表現することができます。文字の読み易さに影響する行間と合わせて、適切に設定したいものです。Webサイトは、印刷物と違ってユーザーによって閲覧環境が異なるため、制作者が意図した画面レイアウトで表示されないことがあり得ます。Webブラウザの横幅に合わせてカラムを伸縮させたり、カラム数を変える「可変レイアウト」という手法や、画面解像度が異なるデバイスに別に複数のスタイルを用意する手法もよく利用されます。

【縦横比】
ビジュアルデザインにおいて、グリッドを用いるだけでなく、配置される矩形（くけい）にも美しい縦横比があるとされています。黄金比は1：1.618という矩形のバランスで、最も美しいとされています。名刺サイズやカード類はもとより、ギリシアのパルテノン神殿や美術品などの人工物、自然界においても植物の葉の並び方や巻貝などにも見られます。同様に、1：1.414の白銀比も安定した比率として知られていて、印刷用紙などで利用されています。
これらの縦横比を、キービジュアルや画像パーツの制作、カラムの横幅のサイズ決定に用いることができます。

【左右非対称（アシンメトリー）】
正確に左右対称の物は自然界に存在しないことから、ビジュアルデザインでも不自然さを軽減するために左右非対称を意識するのが原則です。2分割カラムでは黄金比や白銀比を利用するなど非対称な割合の面積配分を行うことがバランスの良いデザインにつながります。

【グループ化・規則化】
Webサイトでは情報を伝えると同時に、共通の要素や似た要素をグループ化したり、規則的に配置するなどの、ビジュアルデザイン上の工夫が行われています。これは、グループとしてまとめられた一連の情報群や、それらの用いられた装飾の種類によって、その情報の持つ秩序をユーザーが無意識に学習するためです。そのため、ユーザーがその情報体系を学習し易く、利用し易いデザインにする必要があります。例えば、あるカテゴリーに属するページのリンク一覧をサイドバーに配置することで、それらが同一のカテゴリーに属するページであることが理解でき、さらに行き来がし易くなります。
規則化の例としては、ロゴやナビゲーションのデザインや位置、見出しや段落のレイアウトなどを全てのページで共有にし、ユーザーが一度学習した規則に基づいてサイト内を回遊できるようにすることです。

【三次元表現】
ビジュアルデザインでは、表面上で遠近感などの三次元表現が求められることがあります。遠近感の表現方法として、線遠近法と空気遠近法の2つが一般的です。

線遠近法は、平面上に消失点を取ることで描画物に対してつじつまが合う歪みを与える手法です。描画物の歪みとは、立方体であるはずの高層ビルを見上げた場合にパース（歪み）がつき、上部が狭まって見えるような現象を指します。消失点は1ないし2点設け、奥行きを表現する線をその消失点に向かうように描いていきます。

空気遠近法は、遠くにあるものをぼかして描く方法です写真では被写体深度によってぼかしを調整しますが、グラフィックデザインや絵画では、遠景に有る物の輪郭をぼかしたり、彩度を落とした配色によって距離感を強調します。通常は、まず、線遠近法によって全体の構図を決めた後、空気遠近法によって配色や描画方法を工夫しながら遠近感を演出します。

平行線を使って描画物の立体感を表現する方法もあります。特に利用されるのがアイソメトリック図法で、縦・横・奥行きの3方向の線が互いに120度で交わるように描きます。全ての面に歪みが加わるので、立体としてのリアリティが高くなります。
また、影（シャドー）、べベルやエンボスによる立体表現もよく利用されます。グラフィック制作ツールの多くがこのような視覚効果に対応していて、比較的簡単に設定できます。

【ビジュアルランゲージ】
情報を効率的に伝える上では、ピクトグラムも有効な方法です。ピクトグラムは何らかの情報や注意を示すために表示される視覚記号（サイン）で、公共機関の標識やトイレ、禁煙、非常口など多くの場所で用いられています。言葉が分からなくてもその意味するところを理解できるのが利点で、グローバルな情報空間であるインターネットに適した表現手法です。

また、現実世界にあるものをデザインに取り入れる方法もあります。これはメタファー（隠喩）と呼ばれています。例えば表示する内容の切り替えにタブのデザインを用いることです。

既に図書館での索引カードや辞書などでタブの役割がユーザーに広く認知されていて、その形状を真似ることで、ユーザーにその目的を容易に理解させることができます。
また、ユーザーがクリックできる要素に対して、立体的な視覚効果を用いたり、現実世界のスイッチやボタンを真似た装飾を施す方法もあります。ただし、情報の伝達手段を色や形状のみに頼ることはWebアクセシビリティの観点からは望ましくありません。色や形状による表現と、文字による情報伝達を組み合わせることが望ましいのです。

【ジャンプ率】
文字情報を読み易く伝えるために、主題や大見出し、中見出しと本文の各文字サイズにメリハリを付けることがあります。この文字サイズの比率をジャンプ率と呼びます。Webブラウザでは、HTMLのタグを解読し、ブラウザが自動的にそのタグに合った文字サイズを割り当てますが、そのままではデザインにマッチしないことが多いので、CSSで適切なサイズや色に調整するのが一般的です。

【人間工学とWebデザイン】
ユーザーは、2～3秒の間にWebページ全体を見渡し、必要な情報があるかを判断し、視線は「F」の字を描くとされています。（ヤコブ・ニールセンの「軌跡は“ F ”を描く」）
ユーザーは最初に最上部のコンテンツエリアに対して視線を横移動させ、その後少し下の部分で次の横移動を行います。最終的に左側を下方向にスキャンするように視線を移動させます。このような動作を2～3秒の間に行うわけです。Webデザインではこのユーザーの短い判断を前提にして、重要な要素の配置、見出しの視認性などを考えます。

印刷物とWebサイトは同じ平面デザインですが、見やすいデザインの解は異なります。
Webデザインではテキストボックスに影やグラデーションを用いて装飾する例が見られますが、印刷物では少ないようです。一方、印刷物のように文字間の細かなカーニングや禁則処理、斜め方向に行を配置する方法などはWebデザインではあまり用いません。（当然、相応の理由があります）

さまざまな媒体のビジュアルデザイン技法を学びつつ、Webサイトの目標達成につながり、かつ、ユーザーにとって利便性の高いデザインを追求することが求められます。