イラストレーターでWEBデザインするときの画像の配置方法

質問

イラストレーターでWEBデザインをする際の画像配置方法について教えていただきたいです。

普段、イラストレーターでWEBサイトのデザインを行っています。
写真などをレイアウトするとき、

(1)
Photoshopで実際に使用するサイズ、画像解像度72でjpg画像作成
↓
イラレで配置

とするのと、

(2)
使用する画像をそのままイラレに配置
↓
イラレ上でサイズ調整（縮小など）

とするのと、どちらが正しいのでしょうか？

両方行ったところ、最後にスライスで書き出した際に（2）の方法で配置した画像の方がきれいな画像になりました。
DTPデザインの場合、画像配置するときは必ず実寸サイズ、印刷用解像度で画像をあらかじめ作成したものを配置するのが基本だと思います。
WEBデザインの場合はやはりちがうのでしょうか？

（1）、（2）の方法はどちらが正しいのか？もしどちらも間違っているなら、正しい方法を、特に決まりがない、という場合は、皆さんはどのようにされているのか、教えていただけないでしょうか？

よろしくお願いいたします。

回答No.1

ORUKA1951

そもそも、DTPとHTMLでは理念、目的がまるで違う。
DTPは、紙への印刷を目的とした処理で、HTMLは、大きなディスプレイは無論、携帯端末のような小さな画面、読み上げブラウザ、点字ブラウザ、サーチエンジンなどあらゆる端末で情報を共有するためのもの。
　また、イラストレーターは元々、ベクター画像(ドロー系画像)を扱うソフトで、写真のようなビットマップ(ラスター画像)は苦手なはず。
　イラストレーターでベクター画像を作成するなら、Scalable Vector Graphics - Wikipedia ( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics )で保存して、HTMLに貼り付けるほうが良い。ただし古いブラウザは対応していないので、HTML側で未対応ブラウザへの対策をするべき。
<OBJECT title="みかんの図" data="./SVC/orange.csv" width="200" height="160" type="text/x-csv">
<OBJECT data="orenge.png" type="image/png">
<OBJECT data="orenge.gif" type="image/gif">
みかんの図画
</OBJECT>
</OBJECT>
</OBJECT>
　とかね。

　ですので、「WEBデザインの場合はやはりちがうのでしょうか？」のこたえは、まったく根本的に違います。としか言いようがない。
　DTP経験者は、Webデザインに進むと、その世界観からすべてが違いますので、混乱すると思います。
　もしInDesignやイラストレーターでDTPを行い、その結果をそのまま反映させたいのなら、PDFに出力すべきです。
　あくまで、イラストレーターでは画像だけを作成して、HTMLで画像や文章を配置すべきです。イラストレーターでは、あくまで「HTMLにできるよ」という程度のものにしかならない。たとえできても、とてつもないデータ量の汎用性のない陳腐なものしかできないです。

　基本的な流れは、
画像がビットマップ/ラスター・・いわゆる写真・・の場合はpngかjpeg
ベクター画像/ドローなら、CSVで、古いブラウザ用に、PNGあるいはGIFも作成
HTMLはテキストエディタやHTMLオーサリングソフト
デザイン、配置はCSSで
　が基本です。
　もし印刷を想定されるなら、画像は実際の画面サイズよりも３倍から４倍の画素数にして、表示サイズを小さくする。(CSVはその必要なし)そのうえで、A4用ならＡ４用のスタイルシートを用意しておけばよいです。

お礼

詳しい説明ありがとうございました☆
とても参考になりました！