
素人がWebデザイン/制作をするのにお勧め書籍ありますか?
会社のWebサイトをリニューアルしたいと考えています。小さいところなので、外注できる予算はまったくなく、自分たちでやらねばならない状況で、それまでビルダーやFront Page、Wordなどで作ってきましたが、やはり素人臭さが抜けないのと、おぞましいソースになってしまうので、アクセシビリティの面から考えてXHTML+CSSで作り直したいと考えています。
プロはおそらくイラレやフォトショでデザインを作って、そこからコーディングしていく形でサイトをデザイン、構築していく流れになろうかと思いますが、この一連の流れを勉強できるお勧め本(テキスト)があれば教えていただきたいです。XHTML+CSSだけ、イラレだけ、フォトショだけ、ならそれぞれたくさんの書籍が発行されてると思うのですが、「サイトを作り上げる」という観点で書かれた本ないかなぁ、と思ったしだいです。
現在持っているのはソシム社の「HTML/XHTML&スタイルシート レッスンブック」だけで、イラレやフォトショ関連の本はまだ持っていません。同じくソシム社の「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳 改訂版」がいいのかなと思いましたが、Amazonのレビューの書き込みがなかったこともあり、質問させていただきました。
AdobeのCS4デザインプレミアムを持っているので、DWが加わっても大丈夫です。
ちなみに当方のスキルは昔HTMLだけでホームページを作成し、ビルダーでもちょこちょこ作っていたのでその辺のことはわかります。イラレ・フォトショ・DWはイーラーニングで一通り学びはしましたが、あまり身についていない感じがしています。特に、デザインされたものをコーディングしていくのってどうするんだろう・・・?というレベルです。
webデザイン、サイト制作関連でお仕事されている方、教育機関などで関連の講座を担当されている方、同じく勉強中の方、広くご意見いただけるとうれしいです。よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳」を今夜一通り学習し終えたばかりです。
ワイヤーフレームやデザインカンプの作成は、この本では期待出来ません。
イラレやFireworksのレッスン本を買いたいところですが、中々いいのがないです。
デジハリの「Webデザイン Illusutrator & Photoshop」もFireworks CS4の「CSS書き出し」を見てしまうと、今ひとつ非効率なワークフローに思えてしまいます。
イラレからPhotoshop用にPSD形式に書き出したあとPhotoshopで読み込みガイドを引き、スライスを切り「Web及びデバイス用に書き出し」までの操作は、慣れるまで手間が掛かる操作ですが、この本では何度も出てきてタイトルの通り「練習」になります。
ですが、Photoshopでは「CSS書き出し」ができません。
Div要素の範囲の決め方は、それなりに参考になり、これも良い練習になります。
CSSのセレクターの書き方は「省略化」した書き方で、この方がブラウザーの表示されるまでの待ち時間が短くなるようです。
デジハリの「Webデザイン HTML & Dreamweaver」は「グループで共同作業をする際は、省略すると他の人に分かり辛いので省略せずに」と言う旨の記述がありますが、長すぎると初心者は返って分かり辛くなります。
Dreamweaver CS4からはダイヤログに「省略化」と「詳細化」のボタンが出る様になり、この本の様に「省略化」する場合は楽になりました。
当方が学習したのは改訂版ではなく、8&CS3までの物ですが、サンプルの内容は同じです。
Dreamweaverの操作手順は、他書に比べて効率的な方法ではないかと思います。
テキストも画像データも「デザインビュー」にドラッグ&ドロップで配置するやり方です。
この場合、テキストには取り敢えずpタグが付きます。
必要に応じてテキストをクリックして、「タグセレクタ」をクリック(ここがポイント)、プロパティ・インスペクタなりメニューバーから他のタグに変更出来ます。
この変更は「コードビュー」ではだめで「デザインビュー」のまま行います。
画像データも右側の「ファイルパネル」からドラッグ&ドロップしますとwidthやheightの値がHTML側に自動入力されます。
依ってあとはaltを手入力するだけです。
画像を保存するフォルダー数や画像ファイル数が程々であれば、ファイルパネルからのドラッグ&ドロップが効率的かと思います。
思ったよりボリュームがあり、似た様な操作が繰り返し出てきて、練習にはなります。
丁寧に学習したら100時間ぐらいは掛かります。
イラレとフォトショでそれなりの事が出来る人なら、Dreamweaverへの良い橋渡しにはなるかと思います。
とても詳細なご回答をありがとうございます。お礼が遅くなってしまって申し訳ありませんでした。結局のところやっぱり数をこなすものなのかなぁ、というのが、拝読させていただいた感想です。100時間ですか・・・でもやらないといつまで経っても身に付きませんものね。日々忙しい中でも少しずつ時間を見つけて計画だててやっていくしかないですね。非常に参考になりました。ありがとうございました。

No.1
- 回答日時:
こんにちは。
私も同じ悩みを持っています。書籍ではないのですが、下記サイトにザックリ流れが書いてあって勉強になりました。
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 …
ありがとうございます!こんなサイトがあるんですね。まだ初めの部分をちょこっと見ただけですが、有益な情報であることは間違いありません。テンプレート集のサイトも、ご紹介ありがとうございます。やっぱり無の状態から作るのはセンスがないと厳しいですから、土台があるだけでも違いますよね。
私も教わったサイトなどで少しずつ勉強しながら作り進めていきたいと思います。連休中は時間取れそうなのでさっそく取り掛かってみます。ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 就職 業界未経験でWebデザイナーの面接を受けるのですが、なぜWebデザイナーになろうと思うのか?といった 4 2022/12/11 15:30
- その他(プログラミング・Web制作) ほぼwordpress案件のWEB制作会社ってどうですか? 1 2022/06/23 09:26
- インターネットビジネス 個人事業用のwebサイトを作るためのおすすめの本を教えて下さい。 4 2022/06/30 17:20
- HTML・CSS お金をあまりかけずにプログラミングを勉強する方法を教えてください。 こんにちは。 Webデザイン系の 3 2022/08/05 03:22
- Web・クリエイティブ 今本当に悩んでいます。将来グラフィックデザイナーを目指し専門学校に通ってるのですが、正直グラフィック 1 2022/09/10 17:58
- Web・クリエイティブ 未経験からのWebデザインとプログラマーについて。 4 2022/10/12 00:00
- Web・クリエイティブ 1.現在webデザイン系のサイト開発・運営してるのですが、サイト内ジャンルに「人間関係」を入れるor 1 2022/11/12 11:11
- SOHO・在宅ワーク・内職 DTPデザイナーの副業についてお聞きしたいです。 54歳男性で印刷会社(福岡市)でDTPデザイナーと 2 2022/05/24 21:00
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・「これはヤバかったな」という遅刻エピソード
- ・初めて自分の家と他人の家が違う、と意識した時
- ・いちばん失敗した人決定戦
- ・思い出すきっかけは 音楽?におい?景色?
- ・あなたなりのストレス発散方法を教えてください!
- ・もし10億円当たったら何に使いますか?
- ・何回やってもうまくいかないことは?
- ・今年はじめたいことは?
- ・あなたの人生で一番ピンチに陥った瞬間は?
- ・初めて見た映画を教えてください!
- ・今の日本に期待することはなんですか?
- ・集中するためにやっていること
- ・テレビやラジオに出たことがある人、いますか?
- ・【お題】斜め上を行くスキー場にありがちなこと
- ・人生でいちばんスベッた瞬間
- ・コーピングについて教えてください
- ・あなたの「プチ贅沢」はなんですか?
- ・コンビニでおにぎりを買うときのスタメンはどの具?
- ・おすすめの美術館・博物館、教えてください!
- ・【お題】大変な警告
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・最強の防寒、あったか術を教えてください!
- ・歳とったな〜〜と思ったことは?
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「全面リニューアル」の意味
-
「戻る」を押しても戻らないweb...
-
Webサイト内に埋め込んだmp4動...
-
WINDOWSが起動したと同...
-
はぁ?VALIDSEOの提供被リンク...
-
jquery loadでページを読み込...
-
Google サイトでPDFの特定のペ...
-
ページ内リンククリックでアコ...
-
戻るボタンの作成
-
画面のどこかをクリックすると
-
robots.txtが”allow”のサイトを...
-
iFrame内の変数を、親フレーム...
-
クリックすると文字が消えるHTML
-
キーワード検索で検索される最...
-
白紙の次ページを削除できない...
-
GOM Playerの設定
-
CIG(掲示板)の設置が上手くい...
-
ページ内リンクでアコーディオ...
-
cgi-binディレクトリにアクセス...
-
自サイト内でのキーワードリン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
「全面リニューアル」の意味
-
コーディングが苦手…向いていな...
-
Webデザインのセンスを磨き方
-
WEBデザインど素人WEBサイトの...
-
「戻る」を押しても戻らないweb...
-
画面のどこかをクリックすると
-
HTMLのリンクの色をクリックす...
-
静止画画像をクリックすると音...
-
Webサイト内に埋め込んだmp4動...
-
白紙の次ページを削除できない...
-
リロードした時にページの一番...
-
動画の自動再生を止めたいので...
-
Google サイトでPDFの特定のペ...
-
トップページの配下にあるペー...
-
WINDOWSが起動したと同...
-
ホームページにブログ更新情報...
-
戻るボタンの作成
-
自転車について
-
WEBページのジャンプ。素早く行...
-
リンク先を新しいタブで開けな...
おすすめ情報