Webデザインの下書きとなるワイヤーフレームやデザインカンプを描く時に、プロの現場ではいろいろな理由から、PhotoshopやFireworksが使用されています。本講座ではFireworksについては扱っておりませんので、Photoshopを使用して描く時の準備事項をご説明しておきます。（WebデザインにおいてはFireworksも非常に有力なツールですので、参考書等で勉強されてみてもいいと思います。）
【ワイヤーフレームの例】
【デザインカンプの例】
まずは、Photoshopから新規カンバスを開きます。ここで、幅と高さをそれぞれ1200px、1200pxとしておきます。
上で、カンバスの幅を1200pxとしたのは、ページコンテンツの幅を960pxと想定し（960pxの意味については別項をご参照のこと）、左右に壁紙用余白分を120pxずつ計算した結果です。つまり120px+960px+120px=1200pxという訳です。（高さについては、768pxから逆算した、650px程度以上ならいくらでも構いませんが、ここでは仮に1200pxとしておきます。）
x軸とy軸の数値を指定してガイド線を引くには、[表示]→[新規ガイド]で座標を入力します。垂直方向を選択し、位置に120pxを指定してコンテンツの左端のガイド線を引きます。同じように1080pxの位置にもガイド線を引きましょう。
ツールパネルから長方形ツールを選択し、プロパティパネルの図形の選択肢の右にある小さな下向きの三角形アイコンを押します。そうすると長方形オプションが開きますので、ウインドウ右下にある「ピクセルにスナップ」のチェックボックスをオンにします。
Photoshopの環境設定を行います。[編集]→[環境設定]→[単位・定規]を開きます。単位グループの[定規]と[文字]の設定を「pixel」にしておきましょう。次に、[編集]→[環境設定]→[ガイド・グリッド・スライス]を選択し、グリッドの設定を行います。[グリッド線]を「5px」とし、[分割数]を「5」にします。
ガイド・グリッド等の表示設定を行います。まずは、[表示]→[定規]にチェックを入れて、画面に定規を表示させます。次に、グリッドを表示させます。[表示]→[表示・非表示]→[グリッド]にチェックを入れておきましょう。画面上に5ピクセル毎のグリッド線が表示されます。
次に、[表示]→[スナップ]にチェックを入れます。これでスナップ先の指定が有効になります。ここでは、[表示]→[スナップ先]→[ガイド]と、[表示]→[スナップ先]→[グリッド]と、[表示]→[スナップ先]→[ドキュメントの端]にチェックを入れておきましょう。
以上で、長方形ツール等で描いたシェイプを、ピクセルにスナップさせることができるようになったはずです。ただ、5px単位のグリッド線は常時表示させていると邪魔なので、必要に応じて「ctrl+@」で表示・非表示を切り替えましょう。これは頻繁に使うショートカットキーなので覚えましょう。
ワイヤーフレームやデザインカンプを描く時、図形描画にはシェイプを使用します。
シェイプを移動・変形させる時は、自由変形ツールを使います。ショートカットキーは「ctrl+t」です。多用しますので覚えましょう。この時のプロパティパネルは、下図のようになっていると思います。ここでは、原点の位置を左上端にして、WとHの数値入力欄を「%」から「px」に変更します。
WとHの単位の変更は、それぞれの数値入力欄にカーソルを合わせて、右クリックでポップアップメニューが出ますので、そこで「pixel」に変更します。
残念ながら、この設定はPhotoshopを起動するたびに「%」に戻されてしまいますので、毎回設定する必要があることを覚えておきましょう。
Photoshopでデザインの部品（レイヤー）を選択する時には、選択ツールのプロパティパネルから、自動選択のチェックボックスをオンにして、その右横にあるセレクトメニューから「レイヤー」を選択して使用します。例えば、下図の場合には、１のサムネイル写真をクリックすると、画面右下のレイヤーパネルの「thumb1」が自動的に選択されます。必要に応じて設定を変えながら、作業を進めましょう。
Photoshopでは、アニメーションズームを使用していると、ズームツールで一部分を拡大表示した時に、定規の数字が追従してくれません。
[編集]→[環境設定]→[一般]でパネルを開き、アニメーションズームのチェックボックスを外します。
これで、ズームツールを使用した時にも、定規の数字は正しく表示されるようになります。
移動させたいレイヤーを選択した状態で、矢印キーの↑↓←→を押すと、1pxずつ移動させることができます。また、shiftキーを押しながら↑↓←→を押すと、10pxずつ移動させることができます。このショートカットキーも多用しますので覚えておきましょう。
Webデザインにおける下書きの方法の説明は以上になります。それでは、実際に「ワイヤーフレーム」、デザインの仕上がりを確認する「デザインカンプ」を描いてみましょう。
■参考
このページで使用した例の完成品です。ご参考までに。