| 完成したモックアップをスライスする |
スライスの切り方・設定を工夫してから書き出す
最適なスライスの切り方を検討する
スライスのシンプル化を図るために、モックアップ画像のすべてをスライスするのではなく、必要最小限のエリアのみをスライスしよう【3】。スライスの余白部分や背景画像のリピートなどは、HTMLで記述したほうがWeb最適化の観点からも作業効率化の点からも効果的である。
では、実際にPhotoshopのスライスツールを使って作業してみよう。まずは、ガイドを使って、それぞれのスライスの位置を調整する。このとき、ビューメニューの“スナップ”がオンになっていることを確認しておく。ヘッダーエリアでは、クリックのしやすさを考慮し、ロゴの周囲をスライスする【4】。余白部分はCSSで調整する。次に、メニューエリアをスライスしよう。ここでもクリックのしやすさを考慮し、それぞれのメニューごとにスライスする。これらは、マウスカーソルを合わせた時に変化する個所であるので、それぞれのサイズを同じにしておくとよいだろう。その際、スライスを分割ツールも有効な手段である。プロモーションエリアでは、クオリティと更新性を考慮し、イメージ写真を丸ごとひとつスライスする。コンテンツエリアでは、背景となるイラストの個所をスライスし、その上でボタンの箇所だけをスライスする。それから、ドロップシャドウ用の画像をスライスしよう。縦方向のリピートを想定し、［縦：8px］、［横：850px］に設定している。
【3】必要最小限のエリアをスライスし、なるべくシンプルなスライスを心がけよう。コーディングしやすいように、それぞれのスライスの位置を調整しよう。その際、ガイド機能を使うと効率的である
【4】Photoshopのスライスのオプションバー。ここには「スライスの順番」、「スライスオプション」、「スライスを分割」などがある
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
