Webデザインの勉強方法

質問

この度、会社のWebサイトを作ることになり、HTMLを勉強しようと思っています。
ただ、どのように勉強すればいいかわかりません。一応、HTMLとスタイルシートの本を1冊勉強しました。
読むだけでなく、実際にソースをエディターに打ちこみました。次の段階として、どのような勉強をすればいいでしょうか？
経験者の方、アドバイスよろしくお願い致します。

それから、本格的なサイトを作るには画像加工ソフトが必須だと思いますが、お奨めのものはあるでしょうか？
フォトショップがいいのでしょうが、予算オーバーです。
フリーウェアもしくは低価格なものをお願いします。

回答No.3

raichioisi · ベストアンサー

>初歩的な質問で恐縮ですが、どのような点に着眼して研究すればいいでしょうか？

私でしたら、どのようなコードを記述し、
どのようなレイアウトをしているかを中心にみます。
色やキーワードの置き方も参考になります。

>どのようなコンテンツが必要かは比較的容易にわかるのですが、
>それをどのようなデザインすればよいかがわかりません。

どのような会社か分からないので
アドバイスしにくいですが、
仮に、銀行のサイトを制作するとします。

銀行のサイトということから、閲覧者に安心感や
誠実な印象を与えるデザインをしなくてはいけません。
私でしたら、青や緑など信頼感のある、
また比較的万人に好まれるカラーを基調に
（コーポレートカラーがあれば、それをメインに）
それに合わせた写真や画像を選び、企業の持つ
イメージを壊さないように制作します。

またコンテンツの多いサイトでしたら
閲覧者が迷わないようなメニューの配置を
考えます。

紙に手書きで画面のイメージやコンテンツを書き出し、
それを元にデザイン案を作り、コーディングします。

特に初心者の方がいきなり製作にかかるのは、
闇雲な方法に感じられますので、あまりお勧めはできません。

>それと、Webサイトに使う画像データは、主にどのような加工をすることが多いでしょうか？
（画像加工ソフトを選ぶ際の判断材料にしたいと思いますので）

一般的にはフォトショップが多いかと思うのですが
サイトによって変わってくるので、何とも言えません。

>最後に、一つのサイトの制作期間は大体どれくらいでしょうか？

これもサイトによって変わってきますので、
何とも言えません。

既にお気づきかと思いますが、
Webデザインは一長一短ではできるものではありません。
ホームページはソフトがあれば、ある程度簡単に製作できますが、
デザインを絡め、ユーザビリティを考慮したサイトをきちんと
作ろうと思えば、知識と時間が必要になってきます。

お急ぎの場合でしたら、専門の業者さんにお願いするほうが
無難かもしれません。

が、独学でも充分可能です。
もし時間があるのでしたら、ぜひじっくり挑戦してみてください。
大変ですが、webデザインは楽しいですよ。(^^)

補足

ご教示ありがとうございます。
細かいツッコミで恐縮ですが、再度質問させてもらえますか(^_^;)？

>紙に手書きで画面のイメージやコンテンツを書き出し、
>それを元にデザイン案を作り、コーディングします。

デザイン案はどのような方法で作りますか？

>>最後に、一つのサイトの制作期間は大体どれくらいでしょうか？
>これもサイトによって変わってきますので、
>何とも言えません。

アパレルの会社なので、洋服が中心です。
商品は全部で1,000点くらいあります。
これだとプロならどれくらいの期間で作りますか？
また初心者だとどれくらいかかりそうですか？

>お急ぎの場合でしたら、専門の業者さんにお願いするほうが無難かもしれません。

時間はたっぷりありますので、できるだけ独力で作りたいと思っています。(^_^)

回答No.2

seaw

私は、
Webサイト作成には、以下のようなソフトを利用しています。

ez-HTML
http://www.w-frontier.com/

FFFTP
http://www2.biglobe.ne.jp/~sota/

FE - Color Palette
http://www.fieldeast.com/

画像の加工には、次のようなソフトを利用しています。

GIMP [画像の作成、加工]
http://www.vector.co.jp/soft/win95/art/se352400.html
http://www004.upp.so-net.ne.jp/iccii/
http://hp.vector.co.jp/authors/VA025935/

PictBear Second Edition [画像の作成、加工]
http://sleipnir.pos.to/

A/PIXIA [画像の作成、加工]
http://homepage2.nifty.com/~maru_tacmi/

Giam [Gifアニメーション作成]
http://homepage3.nifty.com/furumizo/

BitmapResizer [画像の縮小、拡大]
http://www.vector.co.jp/soft/win95/art/se105658.html

Yukari [減色]
http://omoikane.my-sv.net/

OptimumJPEG [JPEG形式に変換]
http://www.theorica.net/download.htm
http://www.softpedia.com/get/Multimedia/Graphic/Image-Convertors/OptimumJPEG.shtml

────────────────────
Webサイト作成についてのおすすめサイト

とっつきやすいサイト
http://www.ushikai.com/ [少し古い(HTML4.01等で非奨励要素が多い、一部独自拡張も有り。)]
http://www.interq.or.jp/www1/da4393/begin/
http://masaboo.cside.com/

おすすめのHTML(XHTML)解説サイト
http://www.tg.rim.or.jp/~hexane/ach/
http://www.hajimeteno.ne.jp/
http://www.htmq.com/
http://bakera.jp/hatomaru.aspx/ref/html
http://www.shoshinsha.com/
http://www.scollabo.com/banban/
http://www.awcs.org/ [Mozilla系ブラウザではサイトのレイアウトが崩れている]

おすすめのCSS解説サイト
http://www6.plala.or.jp/go_west/nextcss/
http://www.cybergarden.net/
http://www.eris.ais.ne.jp/~haza/

回答No.1

raichioisi

会社のサイトと一口にいっても様々なサイトがあるので
まずは作りたいサイトに近いものを探し、
ソースをダウンロードして研究してみるのをお勧めします。

またwebデザインは、まず情報の整理です。
どのような内容でどのようなコンテンツが必要か
紙に書き出してみるといいと思います。

個人的にですが、以下はサイトを製作する際に
参考にしているサイトです。

（TAG index）http://www.tagindex.com/
（とほほのＷＷＷ入門）http://www.tohoho-web.com/

画像加工ソフトも様々なものがありますが
フォトショップエレメンツというソフトが
低価格で手に入ると思います。
フォトショップに機能が似ているので
初心者向きではないかと思います。

がんばってくださいね(^^)

補足

ご教示ありがとうございます。

>ソースをダウンロードして研究してみるのをお勧めします。

初歩的な質問で恐縮ですが、どのような点に着眼して研究すればいいでしょうか？

>またwebデザインは、まず情報の整理です。
>どのような内容でどのようなコンテンツが必要か
>紙に書き出してみるといいと思います。

どのようなコンテンツが必要かは比較的容易にわかるのですが、
それをどのようなデザインすればよいかがわかりません。
そのあたりのコツを教えていただけると助かります。

それと、Webサイトに使う画像データは、主にどのような加工をすることが多いでしょうか？
（画像加工ソフトを選ぶ際の判断材料にしたいと思いますので）

最後に、一つのサイトの制作期間は大体どれくらいでしょうか？