初心者さんのためのWebサイト制作に役立つリンク集

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


↑私が10年以上利用している会計ソフト!

Webサイトを作る流れ

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

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

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

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

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

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

HTML

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

TAG index

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

http://www.tagindex.com/

HTML基礎 タグインデックス

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

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

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

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

HTMLタグボード

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

http://www.dspt.net/

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/

CSS HappyLife ZERO

JavaScript

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

JavaScript入門講座

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

http://piyo-js.com/

JavaScript入門講座

JavaScript例文辞典

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

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

JavaScript例文辞典

jQuery

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

kyosuke.jp

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

http://wiki.kyosuke.jp/jquery

Doku Wiki

Skuare.net

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

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

jQuery 388 プラグイン

PHP

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

初心者用PHP入門

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

http://www.standpower.com/

初心者用PHP入門

そふぃのPHP入門

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

http://php-beginner.com/

そふぃのPHP入門

Webデザイン

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

Photoshop Vip

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

http://photoshopvip.net/

Photoshop Vip

Best Web Gallery

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

http://bestwebgallery.com/

Best Web Gallery

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

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の超初心者によるカルチャーショックから始まった物語。

http://www.yslrr.com/

超初心者のSEO講座!?

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

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

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

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

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

Webデザイナー辞典

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

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

Webデザイナー辞典

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

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

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

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

シェアする

コメント

“初心者さんのためのWebサイト制作に役立つリンク集” への21件のフィードバック

  1. いきなり方向性の確認…

    Webクリエイターボックスさんの 「初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイターボックス」という記事を見て、 こういうのまじめに考えた事無いかもと思い いきなりケツ見せ! もとい! いきなりやり直し(ぁ ま、始めはこんなもんさw ということで、…

  2. 浜村拓夫 より:

    参考になります。
    どうもありがとうございます。

    JQueryの紹介サイトですが、サイト名は「kyosuke.jp」になりますかね?
    =DokuWikiは、wikiアプリの一名称なので、他のものを紹介しているようなかんじになっちゃう?

  3. Webクリエイターボックス より:

    ほんとですね、早速修正しました!報告ありがとうございます!

  4. 佐々木椛 より:

    はじめまして。
    仕事でWebに関わってます。

    学生時代、及び、現在もど忘れしたときの確認用に長年お世話になっている「TAG index」というサイトをご紹介します。

    http://www.tagindex.com/

    完全な初心者向けというわけではありませんが、とても見やすいサイトだと思います。

  5. Webクリエイターボックス より:

    HTMLとCSSの基本がまとめらていますね。カラーチャートなんかも初心者さんにはいいかも!ありがとうございます!

  6. mick より:

    こちらで紹介されている「初心者向け」のHTML解説サイトをざっと見てみましたが、どういう基準でこれらのサイトを選んだのですか?

    「HTMLタグボード」は覚えなくて良いものや覚えるべきでないものを紹介し(例えばbodyのbgcolor属性)、ulタグの記述例に文法的誤りが見られ、blockquoteタグの解説も疑問がもたれる内容です。

    「初心者のブログ作成 HTML研究所!」はHTMLを「プログラミング言語」と解説するなどさらにひどい内容です。

    「小難しい単語が並んであるようなサイトは避けているつもり」とのことですが、初心者が誤った知識を学んでしまうようなサイトを紹介するのはいかがなものでしょう?

    ちなみに私が推薦する初心者向けHTML解説サイトは以下の2つです。

    辞典的解説サイトなら「TAG index」
    http://www.tagindex.com/

    入門サイトなら「脱初心者をめざす人のためのホームページ作成講座」
    http://az-store.nrym.org/archive/mynotes/lecture/

  7. Webクリエイターボックス より:

    初心者さんがHTML等をイチから学ぶ時は、まず検索して関連ページを探すと思います。私もこの記事を書く際にGoogleで検索してみましたが、かなりの数の古い情報・間違った情報がヒットしました。その中で「ひとまとめに観覧できるか」「古い情報でないか」「わかりやすいか」などを基準に上記2サイトを掲載しました。
    サイトの推薦ありがとうございます。Tag indexはその他たくさんの方におすすめして頂いたので追加掲載しました。

  8. […] 初心者さんのためのWebサイト制作に役立つリンク集 | Webクリエイター &#8230… […]

  9. 内容はともかく

    素敵なデザインのサイトですね。

    こういうサイトデザインがイイなって

    とっても参考になります。

    まず集客も大事ですが集客後の

    お客様への印象は重要ですからね。

  10. Google新アルゴリズムで低品質サイトは順位が下がる…

    YahooもGoogleのアルゴリズムと使うようになり 今では唯一の検索サイトと言っていいGoogleですが ご存知の方も多いと思いますが もうすぐ作りがちゃんとしてないサイトは 検索順位が格段と下がる可能性があるそうで。。。…

  11. […] 初心者さんのためのWebサイト制作に役立つリンク集 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)