締切済み

ホームページのデザインについて

2001/08/24 15:56

ページのデザインを、イラストレーターまたはフォトショップで作った場合（文字等のレイアウトも含めて）、それをそのままペ－ジのデザインとして使うにはどうすればいいのですか？やっぱり部品ずつでレイアウトしていくのでしょうか？ Dreamwever4を使っています。

Malco
お礼率70% (120/170)

グラフィックソフト
回答数11
ありがとう数10

みんなの回答 （11）
専門家の回答

みんなの回答

sight
ベストアンサー率53% (199/370)

2001/08/25 11:46 回答No.11

私の意見として、いくつか整理させていただきます。・一枚の画像ファイルとして出力し、クリッカブルマップとしてリンクなどを設定することはおすすめしません。　理由は、当然ファイルサイズが大きくなるから。全体を読み込むまでにどれだけ待てば良いのでしょう。　そして、もう一つの理由は、全然ユーザーフレンドリでないから。　最近、プロの作ったページでも、メニュー部分を一枚の画像で作り、クリッカブルマップとしているものも見受けられますが、言語道断ですね。画像を読み込み中や、画像の読み込みを切っている場合は使い物になりません。ちゃんとスライスで切って、分割された画像でALTの設定などをしていれば、このような場合も閲覧者のストレスを抑え、機能することができます。・Macromedia Flashは・・・おすすめしません。　デザイン面では優れていますが、基本的に上の後者と同じ理由は当てはまりますし、閲覧者がプラグインのインストールが必要になります。一回flash使ったページ見れば入っているでしょうが、それでもうっとうしいですね。どうしても、というのなら、トップページに３００×３００くらいの小さめのサイズで使い、見たくない人はスキップできるような手段も講じる必要があると思います。基本的に、Flashのページは、「見ると効果的だけど、べつに見たくなかったら見なくてもかまわない」とった作りをするべきだと思います。　もう一つ、ちょっとしたミスで、結構ヘンな挙動をします。たとえば、IEで正常に使えるページを作っても、NNでは暴走を始めるFlashページ・・・なんてのもあります。FLASHに関して素人の人が、が一回限りで使うのでしたら、やめた方がいいと思います。試用期限過ぎたら作成済みのページの修正もできなくなるし・・・。 >PhotoShop6.0／ImageReady3.0とゆうのを持ってないので、ちょっとわからないのですが・・・とのことですので、それ以前のバージョンでしょうか。PhotoShop5.5にもImageReady2.0がついていたように記憶していますが、HTMLの出力／スライスの作成機能があったかな・・・？画像作成側のソフトがHTMLの出力／スライス作成機能を持っていれば一番楽なんですが、そうでなければNo.6の方のおっしゃるように、一枚の画像として出力したものを読み込んで、スライス作ったりできるソフトがあればよし。なければ、ちょっと面倒ですが、部品ごとに保存するしかないでしょうね。とにかく、ページを分解した形で出力すれば、その合計のファイルサイズは全体を一枚の画像ファイルとしたときよりも小さくなるはずですし（細かく最適な圧縮方式、画質が選べるから）、閲覧する方にしても、見やすいです。

質問者

補足 2001/08/25 19:49

アドバイスどうもありがとうございました。イラストレーターに「属性」とゆう機能がありました。そこで、部品に直接URLをつけることができました。それを「web用に保存」したら、1枚の絵が30～40KBになり、それをDreamwever4で開くことができました。画像も重くないし、一応この方法でやろうかと考えています。いろんな方法を教えていただいて、本当にありがとうございました。ここでみなさんへのお礼とさせていただきます・・・。

PCboy
ベストアンサー率30% (150/490)

2001/08/25 08:01 回答No.10

　間違いました! 200KB前後まで　です。

zoh
ベストアンサー率34% (273/789)

2001/08/25 06:27 回答No.9

＞画像サイズが大体５００KB以下だと、最新のIE5.5などのWebブラウザを使ってる分には、表示スピードにそんなに時間はかかりません!! （PCboyさん）とのことですが、どういった接続環境を想定しての回答でしょうか？500KBytesの画像ファイルは、アナログ回線による56Kbpsの接続でしたら、データのみで考えても(headerのデータサイズやnegotiationにかかる時間、伝送遅延は除くと言うことです)「（500000*10）/56000≒89.3」となり、この計算のみで約１分半、実際には確実に2分程かかる事になりますが…。(「*8」でなく「*10」なのは、理由はおわかりですよね？) またIEは、5.5になって、RenderingSpeedが通信速度を越えるほどを速くなったのでしょうか？少なくとも56kbps程度の接続速度では、500KBytesの一枚の画像を表示するに場合において、IE4.xやNN4.7xとの速度差は体感できるほどの物ではない（実際には1%無い）と思いますがいかがでしょう？

PCboy
ベストアンサー率30% (150/490)

2001/08/25 04:57 回答No.8

　普通の、ホームページに<>タグを使って貼り付けても画像サイズが大体５００KB以下だと、最新のIE5.5などのWebブラウザを使ってる分には、表示スピードにそんなに時間はかかりません!! 　<Body Background="cosmo1.jpg">などのように、普通のHTMLタグ貼り付け方法で充分です!!(^o^)丿　

zoh
ベストアンサー率34% (273/789)

2001/08/25 03:36 回答No.7

某所でwebsiteを作成している、zohです。専門家の意見としては、先に回答されているような「全部を一枚の画像として扱う」方法はお勧めしません。その画像がいったい何KBytesになることやら。べた塗りが多い画像を色数の少ない「*.gif」で保存すれば別ですが、「Illustrator」「PhotoShop」を使っていると言うことはそれなりに凝った画像になっていると思われます。まだまだアナログ/ISDN程度の接続環境でご覧になる方も多いと思いますので、内輪だけの限られた人にあらかじめ「重いサイトだよ」と言って、我慢してみてもらうのであれば別ですが、多くの人に見てもらいたいのならそれはやめるべきです。恐らくあまりの重さに読み込み途中でキャンセルする人が多発します。「じゃあ、どうすればいいの？」ですよね。お答えします。「macromedia FLASH」を使うのが良いと思います。「Dreamweaver 4」との親和性も高いはずです。そして、これなら「*.eps *.ai」を読み込むことが出来ます。オブジェクトごとに扱えますし、線は線として、塗りは塗りとして扱えます。また、多くのPCに再生プラグインがインストールされています。まずは書店で「おしえて！macromedia FLASH 5」と言う本を買ってきましょう。そうすれば、30日間フルに使える体験版が使えます。本の解説もとてもわかりやすいです。もしくはmacromediaのサイトから体験版がダウンロードできます。参考URLからどうぞ。ついでに、「おしえて！macromedia FLASH 5」は↓こんな本です。 http://shopping.yahoo.co.jp/shop?d=jb&id=30797781 …しかしながら、全面にイラストをちりばめた一枚絵なら、FLASHを使うメリットはあまりないかも知れません。

参考URL：: http://www.macromedia.com/jp/software/flash/

none123
ベストアンサー率30% (49/162)

2001/08/25 01:22 回答No.6

ドリームウィーバーということなのでもしかするとファイアーワークスとかもお持ちでしょうか？もし持っているなら、ファイアーワークスにＰＳＤファイルを読み込んで、ファイアーワークスの機能で、スライスとかを行うのはどうでしょう。ドリームウィーバーと連携が取れるはずです。イラストレータのデータが読み込めたかどうかは記憶にないのですが、ベクトルデータも扱えたのでもしかすると読み込めるかもしれません。

PCboy
ベストアンサー率30% (150/490)

2001/08/24 23:30 回答No.5

　これは、簡単な事ですよ。フォトショップで、その作ったイメージデータを画像(形式)で保存してやって、フリーソフトのホームページエディターなどを使って、<imag src>タグで、その画像を貼り付けてやれば良いです。　フォトショップは、Gif形式でもJpeg形式でも保存出来るので、どちらでもお好きな方で保存してやると良いです! その保存の際、Jpeg形式の場合は、パーセントで保存画質の設定などが出来るようになってます。

next-co
ベストアンサー率28% (43/149)

2001/08/24 19:13 回答No.4

>1枚の画像としてはりつけたら、その中の部品（ボタンなど）は設定できなくなりますよね？クリッカブルマップを使用すれば、画像の任意の場所をクリックするとリンクさせたりすることができます。 Dreamweverを使用していませんから、解かりませんが多分この機能は付いていると思います。

piyohiko
ベストアンサー率30% (7/23)

2001/08/24 17:10 回答No.3

>>ペ－ジのデザインとして使うにはどうすればいいのですか？ここらへんがよく分からないのですが、作った画像を背景にしたいのであれば bodyのところに"background"で置けばいいんじゃないかなと思います。

質問者

お礼 2001/08/24 17:26

ありがとうございます。 backgroundeに置いた場合、その絵の中のボタンとかは指定できないですよね？（意味わかりますか？←説明下手ですいません）ページ全体の構成をイラストレーターで書いたんです。ボタンやロゴやイラストを。ロゴやイラストはそのまま背景として使えると思うけど、ボタンは別ではりつけないといけないですよね？その場合、自分で作ったボタンは、その画像にHTMLソースをつければ、ちゃんと機能するのですか・・・？

sight
ベストアンサー率53% (199/370)

2001/08/24 16:07 回答No.2

PhotoShop6.0／ImageReady3.0には、デザインされた画像をスライスで切って（部品）HTMLにまで書き出す機能があります。一度この機能を作ってページを作成し、変更したい箇所があればDreamweverで読み込んではいかがでしょう。スライス作成機能のないバージョンのPhotoShopの場合は部品を作成して、Dreamweverでちまちま配置していくしかないのではないかと思います。

質問者