「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！

Webサイトを作る流れ

1. まずはWebサイトを作る目的を考える
   誰のため？何のため？Webサイトを作り始める前に。

2. サイトマップと呼ばれる構成図を作成
   Webサイトの構成図を簡単に作れる便利ツール

3. ワイヤーフレーム（Webサイトのレイアウト）を作成
   Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

4. Photoshopなどでサイトのデザイン

5. ここでやっとコーディング！

今回はこの５番目にあたるコーディングに関するチュートリアルサイトを中心に紹介します。基本は大事です。基本は。ちなみに私がWebの勉強を始めた時に毎日のように見ていたおすすめサイトは、海外では誰もが知っている（はず）の「W3 Schools」です。HTML、CSS、JavaScript、PHPなどなどかなりわかりやすくまとめられています。

HTML

Webサイト制作の基本中の基本である言語: HTMLに関するチュートリアルサイト。

TAG index

多くの方におすすめしてもらったので追加。HTMLの基礎の他、CSSやJavaScriptについても説明されています。

http://www.tagindex.com/

初心者のブログ作成 HTML研究所！

こちらもHTMLの基本。HTMLタグの練習ページはなかなか使えます。

http://www4.plala.or.jp/htmltag/

HTMLタグボード

カテゴリー毎に基本のHTMLタグが並んでます。

http://www.dspt.net/

CSS

Webサイトを装飾するのがCSS。基本をしっかりマスターすればWeb制作がかなり楽しくなります！

初心者のスタイルシート

例文が多く、タイトルがわかりやすいので初心者におすすめ。

http://www.d3.dion.ne.jp/~tiyoko01/style/style2.html

CSS HappyLife ZERO

CSS HappyLifeの初心者向けCSS講座。CSSの書き方など丁寧に説明されています。

http://zero.css-happylife.com/

JavaScript

Webサイトに動きや機能をつけちゃいます。一見難しそうですが、基本の文法を押さえるとWebサイトの機能の幅がグッと広がります。

JavaScript入門講座

音声解説もあります。なんだか学校に通っている気分になれます。

http://piyo-js.com/

JavaScript例文辞典

日本語で検索すると必ずこのサイトがヒットしたような。例文の数が豊富。

http://www.openspc2.org/reibun/javascript/index.html

jQuery

jQueryとは、複雑なJavaScriptをより簡単に使うためのライブラリー。Flashのようなアニメーション効果からフォームのバリデーションなど、Webサイトに様々な効果を簡単に実装できます。

kyosuke.jp

基本的なコードの書き方が説明されています。

http://wiki.kyosuke.jp/jquery

Skuare.net

jQueryプラグインのサンプルがたくさん！

http://www.skuare.net/test/jQuery.html

PHP

ブログサイトなどでは代表的なプログラミング言語。HTML・CSSでのサイトが作れるようになったらぜひ覚えてほしい言語です。（HTML・CSSを勉強し始めたばかりの人は気にしなくてOK）

初心者用PHP入門

フォームなどの作成例もあってわかりやすい。

http://www.standpower.com/

そふぃのPHP入門

難しい単語がいっぱい…と思いきや、ひとつひとつ丁寧に解説してくれています。

http://nyx.pu1.net/

Webデザイン

Photoshopを中心に画像を駆使して素敵なデザインに。

Photoshop Vip

最新のWebデザイントレンドからPhotoshopの使えるブラシ、背景用テクスチャ画像など、Webデザインに関するホットな話題が多いブログ。

http://photoshopvip.net/

Best Web Gallery

世界中の素敵なデザインのサイトを集めたWebデザインギャラリー。

http://bestwebgallery.com/

ウェブデザインライブラリー

Photoshopメイン。Webデザイン基礎講座には興味深い記事がたくさん。

http://www.webdesignlibrary.jp/

Webサイトを彩る画像・イラスト・アイコン集

以前書いた記事。Webデザインに使える画像などの素材を紹介。

http://www.webcreatorbox.com/tech/website-images-illustrations-icons/

配色パターンからWebデザインを考える

こちらも以前書いた記事。Webデザインの大事な要素である色の基本を簡単に説明しています。

http://www.webcreatorbox.com/tech/web-design-color-scheme/

SEO

SEOって？という人でもわかりやすい検索エンジン最適化講座。

リンクシェア

この「初心者向けSEO講座」は初心者さんにはわかりやすいかも。

http://www.linkshare.ne.jp/study/knowhow/2008/12/seo01.html

超初心者のSEO講座！？

SEOの超初心者によるカルチャーショックから始まった物語。

http://www.yslrr.com/

初心者さんにぜひとも読んで頂きたい記事

画像で見るウェブデザインのプロセスいろいろ

Webデザイナーによるラフスケッチから完成デザインまでのプロセスを見ることができます。

http://www.designwalker.com/2009/05/design-process.html

Webデザイナー辞典

Webデザイナーを目指す人のための記事がたくさん。Webサイト制作の基本も説明しています。

http://www.it-work.jp/web-designer/

Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方

Webデザイナーとして就職を目指す人へ。ポートフォリオは大事です。

http://www.webcreatorbox.com/tech/web-designer-portfolio-website/

Web制作関連の学校に通うのもいいですが、こうしてオンラインのリソースを見て自分で学習するのもアリかと。上記以外にもたくさんのサイトがWebサイト制作に関する記事を書いていると思います。いろんなサイトを見て今後の活躍に役立ててください！