魅力的な小説サイトをつくろう！--[6]いよいよWeb構築実践編！

[6]いよいよWeb構築実践編！

一枚絵からHTMLに書き出す実作業

サイトトップページの一枚絵（2002年10月21日現在）。スライスしたい部分にきっちりとガイドラインをひき、これに合わせてスライスツールでスライスを作っていきます

これがPhotoshopやImageReadyのスライスツール。カッターナイフのようなアイコンなんですね

スライスツールでスライス部分を作成したところ。うちのトップページはこんなふうに構成されているというのがわかりますね。しかし、後述のように、スライス部分以外（グリーンの背景になる部分）も画像として書き出されてしまうため、あとで手直しが必要になってきます。余計なところまで画像にして書き出してくれるのが困りものです(^ ^;;

　先ほど一枚の絵で作り上げたページのデザインを元に、HTMLをくみ上げていく作業に入ります。
　私はPhotoshopで一枚絵を作り、それをPhotoshopあるいはImageReadyから「スライス」という機能を使って個々の画像やパーツを切り出し、HTMLファイルに保存しています。Photoshop5.0からはこうしたスライスという便利な機能がついたおかげで、作業効率は格段に向上しました。一枚絵の中の要素の切り出したい部分を「スライスツール」と呼ばれるツールを使って切り込みを入れます。それからそれぞれのパーツをGIFで圧縮するのか、JPEGで圧縮するのか、さらにはGIFなら何色にするのか、JPEGならどれくらいの圧縮をかけるかを設定できるので、それぞれ設定し（しかも切り出す個々のパーツに、切り出したあとのファイル名もここでつけられます。便利な世の中です）、最終的にHTMLファイルと画像として書きだしていくわけです。書き出されたファイルは、（設定にもよりますが）基本的にTABLEでレイアウトされます。TABLEが嫌いな人にはおすすめしないのですが、私のようにTABLE大好きな人間にとって、一枚絵とほぼ変わらぬ状態のまま自動でレイアウトしてくれるのはとてもありがたい機能です。

スライス選択ツールでスライスを選択状態にすると、スライスの画像形式や色数、圧縮率を設定できます。一枚の画像の中でスライスしたそれぞれのパーツのファイル形式、圧縮率を変えられるのがとても便利

　が。
　Photoshopはとても高いソフトです（コラムにも書いたとおりですが(^ ^;;）。また、お手持ちのソフトでそれに近い機能がない場合は、めんどうですがグラフィックソフトのツールを駆使して、それぞれのパーツをひとつずつ切り抜いては別名で保存を繰り返します。グラフィックソフトによってはガイドラインをひけるものもありますから、切り抜きたい部分にガイドラインをひき、それに合わせて切り抜いていきます。
　私もPhotoshop5.0の登場までは、切り出したい部分を最大限の1600%までに拡大表示させ、矩形選択ツールで画像内を選択、切り抜いて別名で保存という作業を延々と繰り返していました。途中で気を失うこともありましたけど、それでもできないことはありませんから、がんばって気合いを入れてトライしてみましょう。
　その後、書き出されたHTMLをそのまま使うというのも手なのですが、私はいったんそれをDREAM WEAVERへ持っていき、レイアウトの調整と大まかなタグの修正を行います。特に、Photoshopなどのスライス機能は画像内のすべてを画像にして保存してくれるので、いらない（必要ない、使わない）画像までついてきやがります。それを削除する必要があるんですね。
　DREAM WEAVERでの大まかな修正が終わった後も、私の作業は続きます。今度はテキストエディターに持っていって、細かいタグの調整を行います。DREAM WEAVERやGoLiveなど、サイトビルダー系のソフトは便利なのですが、どうしてもいらないタブやらスペースやらを入れてくれるし、私からすると「ソースが汚い」ように見えて、調整したくなるんです。後ほどご説明しますが、テキストエディター上でタグを整形するとともに、誰が見ても（もちろん自分が見るためですが）どのタグがどの部分を構成しているかなどの「コメント文」を挿入していきます。
　ちなみに、Photoshopから書き出してDREAM WEAVERなどのソフトで調整していくまでの過程を「仮組み」といい、プロのWebデザイナーもこうした手法を取っています。もちろん、0からHTMLで書き起こしていく人も中にはいるでしょうが、商売としてクオリティと時間（手間）を両立させるために、また効率化を図るために、こうした手法をとるのが一般的です。もちろんソフトを使って仮組みしたあとは、やはりテキストエディターに読み込ませて、タグの調整、スクリプトの埋め込み、コメント文の挿入などの細かい調整作業を行います。

Back<< | トップページへ | >>Next