| 完成したモックアップをスライスする |
スライスをする前にWebサイトをイメージする
実際のWebサイトの仕様を把握する
できあがったモックアップ【1】をスライスをする前に、実際にどのようなWebサイトになるかを把握しよう。これを行わないと、HTMLにする際に不具合が生じたり、構造自体が複雑になってしまう恐れがある。スライスは、なるべくシンプルにすることが望ましい。それは、HTMLをシンプルにすることにもつながる。
【2】のように、このモックアップのサンプルでは、「ヘッダーエリア」、「メニューエリア」、「プロモーションエリア」、「コンテンツエリア」、「フッターエリア」といったレイアウトを想定している。具体的な仕様としては、ヘッダーエリアでは、サイトのロゴ画像をクリックするとトップページに飛ぶ。メニューエリアでは、個々のメニュー画像をクリックすると個々のページに飛ぶ、マウスカーソルを合わせる時には別のメニュー画像を表示する。プロモーションエリアでは、大きなイメージ写真を配置する。場合によっては、Flashにしてもよいだろう。コンテンツエリアでは、背景にイラストを配置したうえでテキストを記載する。また、コンテンツ全体を中央に配置し、周囲にドロップシャドウを使用する。そのドロップシャドウがコンテンツに合わせて縦方向に伸びるようにしたい。
応用として、その背景にテクスチャ画像を配置することも考えてみよう。これらのWebサイトのイメージを踏まえて、実際に、スライスの切り方・設定・書き出しに移ろう。
【1】モックアップのサンプル。今回は、比較的オーソドックスなレイアウトにした。スライスの前に、実際にどのようなWebサイトにするかをイメージしよう
【2】「ヘッダーエリア」、「メニューエリア」、「プロモーションエリア」、「コンテンツエリア」、「フッターエリア」といったレイアウトを想定
［INDEX］
>>> スライスをする前にWebサイトをイメージする
>>> スライスの切り方・設定を工夫してから書き出す
>>> スライスの名前や保存形式などの設定をする
>>> タイトルやボタン画像など細かい素材をスライスする
>>> ディレクトリ構成を考えて下準備をする
>>> 文書構造重視のマークアップを考える
>>> スタイルの付与・常套テクニックを使う
