素人がWebデザイン/制作をするのにお勧め書籍ありますか？

素人がWebデザイン/制作をするのにお勧め書籍ありますか？

会社のWebサイトをリニューアルしたいと考えています。小さいところなので、外注できる予算はまったくなく、自分たちでやらねばならない状況で、それまでビルダーやFront Page、Wordなどで作ってきましたが、やはり素人臭さが抜けないのと、おぞましいソースになってしまうので、アクセシビリティの面から考えてXHTML+CSSで作り直したいと考えています。

プロはおそらくイラレやフォトショでデザインを作って、そこからコーディングしていく形でサイトをデザイン、構築していく流れになろうかと思いますが、この一連の流れを勉強できるお勧め本（テキスト）があれば教えていただきたいです。XHTML+CSSだけ、イラレだけ、フォトショだけ、ならそれぞれたくさんの書籍が発行されてると思うのですが、「サイトを作り上げる」という観点で書かれた本ないかなぁ、と思ったしだいです。

現在持っているのはソシム社の「HTML/XHTML＆スタイルシート　レッスンブック」だけで、イラレやフォトショ関連の本はまだ持っていません。同じくソシム社の「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳　改訂版」がいいのかなと思いましたが、Amazonのレビューの書き込みがなかったこともあり、質問させていただきました。
AdobeのCS4デザインプレミアムを持っているので、DWが加わっても大丈夫です。

ちなみに当方のスキルは昔HTMLだけでホームページを作成し、ビルダーでもちょこちょこ作っていたのでその辺のことはわかります。イラレ・フォトショ・DWはイーラーニングで一通り学びはしましたが、あまり身についていない感じがしています。特に、デザインされたものをコーディングしていくのってどうするんだろう・・・？というレベルです。

webデザイン、サイト制作関連でお仕事されている方、教育機関などで関連の講座を担当されている方、同じく勉強中の方、広くご意見いただけるとうれしいです。よろしくお願いいたします。

No.2 ベストアンサー 回答者： OYAKATASAMA 回答日時： 2010/04/30 00:29

「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳」を今夜一通り学習し終えたばかりです。

ワイヤーフレームやデザインカンプの作成は、この本では期待出来ません。
イラレやFireworksのレッスン本を買いたいところですが、中々いいのがないです。
デジハリの「Webデザイン Illusutrator & Photoshop」もFireworks CS4の「CSS書き出し」を見てしまうと、今ひとつ非効率なワークフローに思えてしまいます。

イラレからPhotoshop用にPSD形式に書き出したあとPhotoshopで読み込みガイドを引き、スライスを切り「Web及びデバイス用に書き出し」までの操作は、慣れるまで手間が掛かる操作ですが、この本では何度も出てきてタイトルの通り「練習」になります。
ですが、Photoshopでは「CSS書き出し」ができません。

Div要素の範囲の決め方は、それなりに参考になり、これも良い練習になります。
CSSのセレクターの書き方は「省略化」した書き方で、この方がブラウザーの表示されるまでの待ち時間が短くなるようです。
デジハリの「Webデザイン HTML & Dreamweaver」は「グループで共同作業をする際は、省略すると他の人に分かり辛いので省略せずに」と言う旨の記述がありますが、長すぎると初心者は返って分かり辛くなります。
Dreamweaver CS4からはダイヤログに「省略化」と「詳細化」のボタンが出る様になり、この本の様に「省略化」する場合は楽になりました。

当方が学習したのは改訂版ではなく、８＆ＣＳ３までの物ですが、サンプルの内容は同じです。
Dreamweaverの操作手順は、他書に比べて効率的な方法ではないかと思います。
テキストも画像データも「デザインビュー」にドラッグ＆ドロップで配置するやり方です。
この場合、テキストには取り敢えずｐタグが付きます。
必要に応じてテキストをクリックして、「タグセレクタ」をクリック(ここがポイント)、プロパティ・インスペクタなりメニューバーから他のタグに変更出来ます。
この変更は「コードビュー」ではだめで「デザインビュー」のまま行います。
画像データも右側の「ファイルパネル」からドラッグ＆ドロップしますとwidthやheightの値がHTML側に自動入力されます。
依ってあとはaltを手入力するだけです。
画像を保存するフォルダー数や画像ファイル数が程々であれば、ファイルパネルからのドラッグ＆ドロップが効率的かと思います。

思ったよりボリュームがあり、似た様な操作が繰り返し出てきて、練習にはなります。
丁寧に学習したら100時間ぐらいは掛かります。
イラレとフォトショでそれなりの事が出来る人なら、Dreamweaverへの良い橋渡しにはなるかと思います。

この回答へのお礼

とても詳細なご回答をありがとうございます。お礼が遅くなってしまって申し訳ありませんでした。結局のところやっぱり数をこなすものなのかなぁ、というのが、拝読させていただいた感想です。100時間ですか・・・でもやらないといつまで経っても身に付きませんものね。日々忙しい中でも少しずつ時間を見つけて計画だててやっていくしかないですね。非常に参考になりました。ありがとうございました。

お礼日時：2010/05/03 16:07

No.1 回答者： kapakapa 回答日時： 2010/04/27 11:07

こんにちは。

私も同じ悩みを持っています。
書籍ではないのですが、下記サイトにザックリ流れが書いてあって勉強になりました。

http://www.adobe.com/jp/special/creativesuite/po …

しかし、私の場合　実践になるとなかなか難しく、実際はフリーのXHTML＋CSSを持ってきて、ボタンやイメージを書き換えています。
http://www.css-designsample.com/csstemplate/


お互いがんばりましょう

参考URL：http://www.adobe.com/jp/special/creativesuite/po …

この回答へのお礼

ありがとうございます！こんなサイトがあるんですね。まだ初めの部分をちょこっと見ただけですが、有益な情報であることは間違いありません。テンプレート集のサイトも、ご紹介ありがとうございます。やっぱり無の状態から作るのはセンスがないと厳しいですから、土台があるだけでも違いますよね。

私も教わったサイトなどで少しずつ勉強しながら作り進めていきたいと思います。連休中は時間取れそうなのでさっそく取り掛かってみます。ありがとうございました！

お礼日時：2010/04/27 19:25