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

Question

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

PCboy · Accepted Answer

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

sight · Answer

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

PCboy · Answer

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

zoh · Answer

＞画像サイズが大体５００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 · Answer

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

zoh · Answer

某所で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 · Answer

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

next-co · Answer

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

piyohiko · Answer

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

sight · Answer

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

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

私の意見として、いくつか整理させていただきます。

この回答への補足

間違いました!

＞画像サイズが大体５００KB以下だと、最新のIE5.5などのWebブラウザを使ってる分には、表示スピードにそんなに時間はかかりません!! （PCboyさん）

普通の、ホームページに<>タグを使って貼り付けても

某所でwebsiteを作成している、zohです。

ドリームウィーバーということなのでもしかするとファイアーワークスとかもお持ちでしょうか？

これは、簡単な事ですよ。

>1枚の画像としてはりつけたら、その中の部品（ボタンなど）は設定できなくなりますよね？

>>ペ－ジのデザインとして使うにはどうすればいいのですか？

PhotoShop6.0／ImageReady3.0には、デザインされた画像をスライスで切って（部品）HTMLにまで書き出す機能があります。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　間違いました!

　普通の、ホームページに<>タグを使って貼り付けても

　これは、簡単な事ですよ。