イラストレータレイアウト(データ)を webページへ

質問

いつも有り難うございます。
HPの管理もどきのようなことをやっている個人事業者です。(独学レベルです。)

イラストレータでページ自体(.ai)を作成されたデータがあります。
これをweb上に公開・管理運営するように依頼されました。　
質問は、どのような手順で行えば良いか、です。
　・ページは全体で8枚ほどです。(それぞれ.aiで作成されています。)
　・デザインは崩したくないです。
　・ページをトップページからリンクでつなげます。
　　　　(その他、ページ内のイラストや文にもリンクを付けたいです)
　・写真が50枚程度あり、またこれからも不定期で更新していきたい。
　・写真は拡大したい　(HPビルダーでの作成・操作はできます)
　・持っているソフトはHPビルダー10、イラストレータ9.0

現在思い浮かんでいる手順は、
イラレ上で、ページ内のイラストや文面を細かくデータに分割・保存　→　HPビルダーで配置し直し、リンク作成(htmlファイル作成)　→　アップロード
この手順は、非常に作業に手間がかかり過ぎるように感じています。

技術的には、タグが多少解っており、CSS等が使いこなせていないレベルです。　他の質問や各ソフトの紹介解説をみても、私の状態にあうかどうかが良くわかりません。　　ご回答いただけるとありがたいです。

回答No.3

dezimac · ベストアンサー

Photoshopを使った場合も基本的には同じような感じです。
先程、紹介したURLに載っているように、
・データ書き出しでPhotoshop形式で書き出す。
・そのデータをPhotoshopで開いて、ツールパレットの一番したのボタン押してImageReadyに渡す。（直接ImageReadyで開いてもいい）
・ImageReadyのスライスツールでパーツごとに分ける。
・あとは、JpegやGIFで書き出す。一応HTMLも書き出してくれます。
・それをビルダーで編集

↓ImageReadyでのスライス例
http://www.too.com/ec/tutorial/slice/index.html

ようはIllustratorで個別にWeb用に保存としていたのを後からやっているだけ。

ImageReady使えるようになれば、ロールオーバー（マウス重ねると絵が変わる奴）やアニメーションGIFが作れるようになります。
ビルダーでも出来るかもしれませんが。

繰り返しになりますが、印刷物と違って、Webページは見る側の環境に大きく左右されるので、レイアウトにはズレが生じます。
どうやるにしても、Illustratorのデータを100％再現するのは難しいです。
SEOやアクセシビリティを考慮しないなら、FlashやPDF、画像にすることで100%再現する事はできますが…。

どんなソフト使うにしても、貴方が思い浮かべていた手順のように、
ボタンや見出し等の装飾されたもの、写真やイラストをJpegやGIFで保存して、文章は一旦Illustratorからメモ帳等にでもコピー＆ペーストしておいて、
Illustratorのレイアウトを参考にして、
ビルダーで新規にレイアウトを作り、適切に配置するしかありません。
CSSを使えば、ある程度レイアウトを制御できますが、ブラウザによって解釈が異なるので、ちゃんとやらないと悲惨なことになります。

相手には印刷物とwebページは全く違う事を説明をしておいた方がいいでしょうね。

お礼

dezimacさま

再度の詳しいご回答ありがとうございました♪
私の知りたかったことが、すべて聞けたようです。　そしてスマートな説明で、本当にわかりやすかったです。　
重ね重ねありがとうございました！

依頼主とこのtopicをみて、相談しながら、これから先を考えていきます。　

また次回、よろしくお願いします～(^o^)/

回答No.2

hoychoi

ちょうど同じ悩みがあります。
私も今、友人のホームページを作っています。
実は広告系のデザイナーなので、初めて今回HPを作りました。
やっぱり使い慣れている、イラストレータでラフを作りました。
（友達にもそのラフを見せてデザインの了解を得ました）
ところが、そこからＷｅｂ用にデータを作るのが、ほんとに大変でした。ぜんぜん再現できないのです。
問題1
オブジェクトの重なりがフレームに落としこめない。
私はできるだけ、一枚のｊｐｇに書き出して、背景で配置しています。
（flashをつかうとできるらしいのですが・・時間も無く。）

問題2
フォントの行間が、設定できない。種類も選べない。
（これはＣＳＳで対処できました。でも字間は無理みたいでした）

問題3
写真を切り抜いて、重ねることはできない。
（私の技術ではです・・）

文字はなんとかなりそうですが、問題はフォトショップが無いことですね。使いやすい画像ソフトがあればいいのですが・・無料のものでもｊｐｇが作れればいいと思います。プロじゃないし。

動かないところはできるだけ、1枚背景にしてしまうことをお勧めします。リンクがある文字だけ別で作るのはどうでしょうか？
（更新を自分でやる前提で）まずはテキストを除いて、イラストレータでjpg書き出してみてはどうでしょうか？
それを画像ソフトで適正な処理をするのです。

まったくの素人意見です。私もいい解決法を探しているところです。

お礼

早速のご回答ありがとうございました。

同じ悩みをお持ちでしたか！　
このように問題点を書き出し、その結果を書いていただいただけで、とってもすっきりいたしました。　ありがとうございます。

依頼主と共に、このご回答を参考にさせていただきます。　
ありがとうございました。

回答No.1

dezimac

Photoshop（に付属のImageReady）があればいくらか楽なんですがね。

パーツ単位でWeb用に保存して、ビルダーで配置し直して再構成するしかないと思いますよ。

Illustratorはボタンとかのパーツを作るには適していますが、もともとWebページをレイアウトするソフトじゃないですからね。
チラシとか印刷物を作るならIllustratorでいいけど。
Webページは印刷物と違って見る環境にも影響されるので、PDFやFlash、画像にでもしない限りレイアウトは多少なりともズレてきますね。

http://www.too.com/ec/tutorial/t2_2/ai9web1.html

参考URL：

http://www.too.com/ec/tutorial/t2_2/ai9web1.html

お礼

早速のご回答ありがとうございました。
書きそびれましたが、photoshop5.5　を持っています。
ただほとんど使用したことがなく、今までの画像処理でしたらMSofficeのPictureManagerなどで事足りていました。

photoshopを利用する場合は、どのような手順になるのでしょうか？
よろしければ引き続きご回答いただけるとありがたいです。