Webサイトの開発に精通している人は、通常HTML構造から始めないことを知っています。代わりにグラフィックプログラムを使用して、ページのレイアウトを構築します。 （エージェンシーで働いている人は、グラフィッカーまたは顧客からのレイアウトを受け取ります）。その後、そのレイアウトからページを構築するというのが課題です。それについて話していきます。
レイアウトの再構築に関連して、スライシングとダイシングという用語がよく出てきます。実際には、テンプレートまたはデザインを取り、グラフィックプログラムで切り分けてから、HTMLで再度組み合わせるという意味です。
適切なグラフィックプログラム
それぞれが好きなソフトウェアを選ぶ傾向があります。これは、グラフィックプログラムでも同様です。ただし、プロのウェブデザインに関連する場合、状況は異なります。そこでは、ほとんどがPhotoshopで作業されています。実際、ほとんどのデザイン案はPSDファイルとして提供されます。そして、このPSDフォーマットはすべてのプログラムで開くことはできず、編集することもできません。
Photoshopを持っていない人も、全く立ち往生しているわけではありません。GIMPが可能な代替手段です。このプログラムはhttp://www.gimp.org/から無料でダウンロードできます。私はGIMPを使用してレイアウトを作成する基本的な手順をご紹介します。これはPhotoshopでも同様に動作します。
独自のレイアウトを作成する
まず、基本的なデザインの側面を考えます：
• レイアウトの幅はどれくらいにするか？
• 何カラム含まれるべきか？
その後、新規ファイル＞を選択して作業領域を作成し、サイズを設定します。作成するレイアウトが「ページ全体」とすると、実際の内容は幅1000ピクセルです。また、レイアウトの高さは887ピクセルです。（ただし、ウェブサイトの高さは後でコンテンツに応じて変化します）。
「OK」をクリックして入力を確認します。これで作業領域があり、コンテンツを追加できます。 (私は、わかりやすさのためにドラフトで灰色のバックグラウンドを使用しています。ウェブサイトには表示されません)。
ウェブサイトに含まれる典型的な要素の1つは、通常グラフィックとして提供されるロゴです。これをレイアウトに挿入するには、ファイル>開くを選択し、ロゴを選択します（PNG、GIF、またはJPEG形式である必要があります）。選択を開くで確定します。次に、ロゴをクリップボードにコピーするにはCtrl+Cを押します。次に、実際のウェブデザインに切り替えてそこでCtrl+Vを押します。挿入されたロゴはまだ希望する位置にありません。しかし、移動ツールを使用すると、簡単に適切な位置に移動させることができます。
画像を移動できない場合は、まずレイヤーをアクティブにする必要があります。該当する設定は、ウィンドウ>ドッキング可能なダイアログ>レイヤーの下にあります。
整理のために、ガイドを表示します。これを行うには、ルーラーをクリックして、押されたままの左ボタンで希望の位置まで引きます。
これにより、ウェブサイトの要素を整列できるガイドラインをいくつでも引くことができます。
次に、別のレイヤーを作成します。このレイヤーには上部メニューが含まれます。
名前としてはトップメニューなどが適しています。このレイヤーをOKで作成します。矩形選択を開いて、ナビゲーションを挿入するエリアをドラッグします。
現在の例では、上部メニューの背景にグラデーションを付けることにしました。これを行うには、グラデーション: グラデーション付きの選択（塗りつぶし）をクリックします。
グラデーションは灰色から黒になるように設定されています。適切な色はカラーボックスで設定できます。グラデーションタイプはVGからHGに設定し、前景色から背景色に向かって変化します。希望する領域でCtrl-キーを押しながら、上から下に線を引きます。左ボタンを離すと、領域に望ましいグラデーションが付加されます。
基本的に、次の2つのオプションがあります：
• ナビゲーションエリアをそのままにする。
• 文字などを使った具体的なデザインを事前に把握するためにメニューアイテムを追加します。
どちらを選択するかは最終的にあなた次第です。ただし、例えば顧客にレイアウトを提示する場合、メニューアイテムを含めることをお勧めします。たいていの場合、多くの顧客にはここでのイメージがまったく足りない傾向があります。
まず、フォントを選択します。GIMPでは、ウィンドウ>ドッキング可能なダイアログ>フォントで該当する設定を見つけることができます。
これまでの連載でCSSとHTMLの関係の問題に対処してきました。理論的にはWebデザイナーとしてどんなフォントでも指定できますが、訪問者のコンピューターにそのフォントが実際に存在し、表示されるかどうかは分からないでしょう。したがって、結果を（特に非常にエキゾチックなフォントを使用する場合）は非常に難しいです。この連載では、サンプルウェブサイトのフォントについて再度取り上げる予定です。現在のレイアウトでは、次の設定に決めました：
• Verdana bold
• 20ピクセル
• 白色のフォントカラー
これで各メニューアイテムを挿入できます。最初のメニューアイテムが含まれている階層をコピーし、新しい階層として挿入します。その階層のテキストを調整します。これで上部メニューを作成します。
上部メニューにはホバーエフェクトを追加します。つまり、マウスポインターを各メニューアイテムの上に移動すると、背景色が変わります。この点もデザインで視覚化されるべきです。したがって、ホバー色を設定し、既存のメニュー階層の1つをコピーします。この階層に色を割り当てます。この例では、青色のグラデーションを想定しています。その後、メニューアイテムのテキストを挿入します。これにより、最終的なメニューの外観がどのようになるかについての感覚が得られます。
