数あるビギナーズガイドの中でも特にクオリティが高いと感じたWEBデザイナーの教科書的サイト色々

便利サイト

今日は、以前『WEB制作者になりたいと言う人が見ると良さ気な、様々なことを学べるサイト15選!』という記事を書かせて頂きましたが、そのリバイス版の記事になります!あの記事書いてからもう一年かぁ。一年もあればビギナー向けのサイトや記事もどんどんどんどん変わって新しい物もどんどん出てきますね!

特に前回もそうでしたが春先はそういった内容の記事も凄く多いので、流れに乗って今日は僕が今日まで見たなかで、これはクオリティたけぇ!と僕が独断と偏見で感じたビギナーズガイドの数々をご紹介させて頂きましょう!(Evernoteにそういうネタが溜まったのでアウトプットしよーってノリも大きいですが・・・w)

そいえば、この前バンクーバーにある美大の社会人向けWEBデザイナーコースに行ってきたのですが、やっぱこっちはあり得ない位授業の進みが早いんですよね。その話は別でするとして、HTMLって何?ってレベルから経った2ヶ月そこらでレスポンシブや今必要とされている技術まで作れるよう勉強するんですが、やはりこういうオンラインにある情報源は本当にフル活用している授業で勉強になりました!

是非これからWEB制作を学ぶという方はこういったオンラインレッスンやコンテンツを見て、第一線に早く立てるよう助走を付けられれば良いんじゃないかなと思います!

それでは早速いってみましょー!

 

HTML/CSS関連のビギナーズガイド

スクリーンショット 2013 03 25 7 24 24 AM

A Beginner’s Guide to HTML & CSS

HTMLとCSSビギナーのためのガイドライン!HTMLとCSSを学ぶための10レッスンが紹介されていて『まずこれ読んどいて!』で普通に僕が教えるより的確に学べちゃいそう…

レッスン内容はHTML5で、AudioやVideo系など割と今必要となりそうな物も学べそうなのでとりあえずメモ!

 

スクリーンショット 2013 03 25 7 27 20 AM

HTML Beginner Tutorial | HTML Dog

いつだったかはてブか何か見てて知った気がするので、日本でも知られているのかな?HTMLのビギナーチュートリアルとしては結構有名なサイトだと思います。サンプルも多く、XHTMLから教わるので、基礎からしっかり学べる感じですね。

 

スクリーンショット 2013 03 25 7 28 34 AM

CSS Beginner Tutorial | HTML Dog

お次はHTML DogのCSSビギナーチュートリアルですね。こちらも同じく非常に分かりやすく基礎から見ていくことができます。

 

スクリーンショット 2013 03 25 7 29 37 AM

beginners · beginners · WPD · WebPlatform.org

W3Cのウェブ開発者向けの支援サイトであるWebPlatformが出来た時は話題になりましたが、こちらのビギナー向けチュートリアルは非常に内容が分かりやすい上にHTML、CSS、JSの各ベーシックな事が大体学べるので、ぶっちゃけこれ一通りやったら普通に授業できるくらいの内容。

 

スクリーンショット 2013 03 25 7 30 38 AM

Learn CSS Layout 

上記のどれかをやったとしても、イマイチ理解に苦しむのがCSSレイアウト関連だったりします。ブロック要素とか何よって人や、スタイルシートで何ができんのよって人が見ると更に理解が深まること間違いなしかなと思います。

 

PhotoshopをWEBデザインで使うビギナーズガイド

スクリーンショット 2013 03 25 7 31 35 AM

Photoshop Etiquette

Photoshopを使ってWEBデザインなんてよう分からん!という人のためのPhotoshopを使ったWEBデザインガイドラインがこちらのサイト!日本語版が意味わからないですが、Photoshopを使った基本やノウハウが非常に細かくまとめられています!

以前も実はご紹介させて頂いた事があったんですが、気がついたらエラいリニューアルされていたので、今回また共有!

しっかし、日本語版の方、これ何言ってるか理解に苦しむw

 

ビギナーズガイド系の参考記事

スクリーンショット 2013 03 25 7 33 58 AM

CSS3 Introduction – New Features, What it Can Do, and Resources

CSS3になってからの新機能やら紹介、何が出来るのかを簡単にまとめた記事になります!

 

スクリーンショット 2013 03 25 7 35 14 AM

Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing [Part 1]

WEBデザインのビデオチュートリアルをまとめた物ですね!思えば、英語圏の記事だとこういうビデオチュートリアルが至る所で見られるのに、日本殆ど無いですよね。声入るの嫌なのか、はたまた他の原因なのか。

 

Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]

そして上記の続編がこちらになります!この2記事をめっちゃ頑張って見るだけでも相当基礎力ついていそうですね!

やっぱこういうビギナー系のまとめや考察記事は、1stwebdesignerさんの記事は凄い良いっすねー。

 

解析系

スクリーンショット 2013 03 25 7 38 49 AM

A Guide to Getting Started With Analytics – Search Engine Watch (#SEW)

Google Analyticsを使ったウェブサイトの解析は今やWEBデザイナーじゃなくともサイトを持っている人なら誰でも必要な知識の一つになりつつあります!こちらの記事ではGoogle Analyticsを使い出すためのガイドが分かりやすく紹介されてあります!

 

 

以上、いかがでしたでしょうか?

割と最近知ったり聞いたりした物を中心にご紹介させて頂いたつもりですが、やはり内容が凄い充実してる物が多いですねー。

例えば今回ご紹介させて頂いたレッスンや記事を全部理解することが出来れば、恐らく十分にWEBページを作るってことは可能だと思いますし、この辺を網羅した後で学校へ行くなどすればさらに理解と、先生に的確な質問をすることも出来る。

最近は特に、WEBの学校行こうと思っている人にこういうサイトをシェアさせて貰う事が多かったので、今回またまとめさせて頂く事にしましたー!

日本だと代表格としてだいぶドットインストールが流行ってきていると思いますし、是非これからそういったサイトやブログを通して学び、いつの日か自分から学びを促すことが出来るようなアウトプットが出来るWEB屋さんが増えてくれると嬉しいなとなんとなく思います!

それでは皆様、よきビギナーズライフを〜。

Pagetop