初心者さんのためのWebサイト制作に役立つリンク集
「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！
↑私が10年以上利用している会計ソフト！
Webサイトを作る流れ
-
まずはWebサイトを作る目的を考える
誰のため？何のため？Webサイトを作り始める前に。 -
サイトマップと呼ばれる構成図を作成
Webサイトの構成図を簡単に作れる便利ツール -
ワイヤーフレーム（Webサイトのレイアウト）を作成
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する -
Photoshopなどでサイトのデザイン
-
ここでやっとコーディング！
今回はこの５番目にあたるコーディングに関するチュートリアルサイトを中心に紹介します。基本は大事です。基本は。ちなみに私がWebの勉強を始めた時に毎日のように見ていたおすすめサイトは、海外では誰もが知っている（はず）の「W3 Schools」です。HTML、CSS、JavaScript、PHPなどなどかなりわかりやすくまとめられています。
HTML
Webサイト制作の基本中の基本である言語: HTMLに関するチュートリアルサイト。
TAG index
多くの方におすすめしてもらったので追加。HTMLの基礎の他、CSSやJavaScriptについても説明されています。
初心者のブログ作成 HTML研究所！
こちらもHTMLの基本。HTMLタグの練習ページはなかなか使えます。
http://www4.plala.or.jp/htmltag/
HTMLタグボード
カテゴリー毎に基本のHTMLタグが並んでます。
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入門講座
音声解説もあります。なんだか学校に通っている気分になれます。
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入門
フォームなどの作成例もあってわかりやすい。
そふぃのPHP入門
難しい単語がいっぱい…と思いきや、ひとつひとつ丁寧に解説してくれています。
Webデザイン
Photoshopを中心に画像を駆使して素敵なデザインに。
Photoshop Vip
最新のWebデザイントレンドからPhotoshopの使えるブラシ、背景用テクスチャ画像など、Webデザインに関するホットな話題が多いブログ。
Best Web Gallery
世界中の素敵なデザインのサイトを集めたWebデザインギャラリー。
ウェブデザインライブラリー
Photoshopメイン。Webデザイン基礎講座には興味深い記事がたくさん。
http://www.webdesignlibrary.jp/
Webサイトを彩る画像・イラスト・アイコン集
以前書いた記事。Webデザインに使える画像などの素材を紹介。
https://www.webcreatorbox.com/tech/website-images-illustrations-icons/
配色パターンからWebデザインを考える
こちらも以前書いた記事。Webデザインの大事な要素である色の基本を簡単に説明しています。
https://www.webcreatorbox.com/tech/web-design-color-scheme/
SEO
SEOって？という人でもわかりやすい検索エンジン最適化講座。
リンクシェア
この「初心者向けSEO講座」は初心者さんにはわかりやすいかも。
http://www.linkshare.ne.jp/study/knowhow/2008/12/seo01.html
超初心者のSEO講座！？
SEOの超初心者によるカルチャーショックから始まった物語。
初心者さんにぜひとも読んで頂きたい記事
画像で見るウェブデザインのプロセスいろいろ
Webデザイナーによるラフスケッチから完成デザインまでのプロセスを見ることができます。
http://www.designwalker.com/2009/05/design-process.html
Webデザイナー辞典
Webデザイナーを目指す人のための記事がたくさん。Webサイト制作の基本も説明しています。
http://www.it-work.jp/web-designer/
Webデザイナーになりたい！就活に打ち勝つポートフォリオWebサイトの作り方
Webデザイナーとして就職を目指す人へ。ポートフォリオは大事です。
https://www.webcreatorbox.com/tech/web-designer-portfolio-website/
Web制作関連の学校に通うのもいいですが、こうしてオンラインのリソースを見て自分で学習するのもアリかと。上記以外にもたくさんのサイトがWebサイト制作に関する記事を書いていると思います。いろんなサイトを見て今後の活躍に役立ててください！
[…] […]
[…] […]
いきなり方向性の確認…
Webクリエイターボックスさんの 「初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイターボックス」という記事を見て、 こういうのまじめに考えた事無いかもと思い いきなりケツ見せ！ もとい！ いきなりやり直し（ぁ ま、始めはこんなもんさw ということで、…
[…] […]
[…] […]
[…] […]
参考になります。
どうもありがとうございます。
JQueryの紹介サイトですが、サイト名は「kyosuke.jp」になりますかね？
＝DokuWikiは、wikiアプリの一名称なので、他のものを紹介しているようなかんじになっちゃう？
ほんとですね、早速修正しました！報告ありがとうございます！
はじめまして。
仕事でWebに関わってます。
学生時代、及び、現在もど忘れしたときの確認用に長年お世話になっている「TAG index」というサイトをご紹介します。
http://www.tagindex.com/
完全な初心者向けというわけではありませんが、とても見やすいサイトだと思います。
HTMLとCSSの基本がまとめらていますね。カラーチャートなんかも初心者さんにはいいかも！ありがとうございます！
[…] […]
こちらで紹介されている「初心者向け」のHTML解説サイトをざっと見てみましたが、どういう基準でこれらのサイトを選んだのですか？
「HTMLタグボード」は覚えなくて良いものや覚えるべきでないものを紹介し（例えばbodyのbgcolor属性）、ulタグの記述例に文法的誤りが見られ、blockquoteタグの解説も疑問がもたれる内容です。
「初心者のブログ作成 HTML研究所！」はHTMLを「プログラミング言語」と解説するなどさらにひどい内容です。
「小難しい単語が並んであるようなサイトは避けているつもり」とのことですが、初心者が誤った知識を学んでしまうようなサイトを紹介するのはいかがなものでしょう？
ちなみに私が推薦する初心者向けHTML解説サイトは以下の２つです。
辞典的解説サイトなら「TAG index」
http://www.tagindex.com/
入門サイトなら「脱初心者をめざす人のためのホームページ作成講座」
http://az-store.nrym.org/archive/mynotes/lecture/
初心者さんがHTML等をイチから学ぶ時は、まず検索して関連ページを探すと思います。私もこの記事を書く際にGoogleで検索してみましたが、かなりの数の古い情報・間違った情報がヒットしました。その中で「ひとまとめに観覧できるか」「古い情報でないか」「わかりやすいか」などを基準に上記２サイトを掲載しました。
サイトの推薦ありがとうございます。Tag indexはその他たくさんの方におすすめして頂いたので追加掲載しました。
[…] […]
[…] […]
[…] 初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイター …… […]
内容はともかく
素敵なデザインのサイトですね。
こういうサイトデザインがイイなって
とっても参考になります。
まず集客も大事ですが集客後の
お客様への印象は重要ですからね。
Google新アルゴリズムで低品質サイトは順位が下がる…
YahooもGoogleのアルゴリズムと使うようになり 今では唯一の検索サイトと言っていいGoogleですが ご存知の方も多いと思いますが もうすぐ作りがちゃんとしてないサイトは 検索順位が格段と下がる可能性があるそうで。。。…
[…] […]
[…] 初心者さんのためのWebサイト制作に役立つリンク集 […]
[…] 初心者さんのためのWebサイト制作に役立つリンク集 […]