最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。
ブログに置いておけばこれから先また誰かに伝える機会があってもURL一つで教えれるので便利ですよね。

Index

1. 1.WEBデザイン全般
2. 2.色彩・配色
3. 3.レイアウト
4. 4.ユーザビリティ
5. 5.文字・文章
6. 6.フォント
7. 7.コーディング
8. 8.著作権
9. 9.グラフィックツール関係
10. 10.チュートリアル等

1.WEBデザイン全般

• [連載]Webデザイン入門（1日目）：Stocker.jp
• [連載]Webデザイン入門（2:スケッチしよう）：Stocker.jp
• [連載]Webデザイン入門（3:光とボタン）：Stocker.jp
• サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。：MAKA-VELI.COM
• Webデザインの原理原則はリアリティと、それに反した想像を超えるアイデアだと思う。 ：MAKA-VELI.COM

2.色彩・配色

• 配色パターンからWebデザインを考える：WEBクリエイターボックス
• カテゴリー別配色アイデア100：WEBクリエイターボックス
• 色覚障がい者に配慮したWebサイトの作り方：WEBクリエイターボックス
• 色と人の感覚とウェブデザインのはなし：バニデザノート

3.レイアウト

• デザインの要素と原則：WEBクリエイターボックス：WEBクリエイターボックス
• デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き：WEBデザインレシピ
• デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則：WEBデザインレシピ
• ホワイトスペースを使ったウェブデザインの考え方：バニデザノート
• デザインの基礎、黄金比から大和比、第2黄金比まで：KOJIKA17

4.ユーザビリティ

• もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ：WEBクリエイターボックス
• ユーザビリティの原則と現場で使えるユーザビリティテストの方法：ホームページを作る人のネタ帳
• ユーザーの視線を誘導する３つのユーザビリティ改善方法：ホームページを作る人のネタ帳
• ウェブサイトでやってしまいがちなユーザビリティのミス：coliss

5.文字・文章

• Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き：WEBデザインレシピ
• 文字組みについて本気出して考えてみた：Stocker.jp
• Web制作における文章の可読性について考える：YATのBLOG（当ブログです）
• Webの「読みやすい」を僕も考えてみた。：MAKA-VELI.COM

6.フォント

• 溺愛してやまない激オススメなシンプルフリーフォント、そして有料フォント：バンクーバーのうぇぶ屋
• 今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々：バンクーバーのうぇぶ屋

7.コーディング

• HTMLタグリファレンス
• CSS-HAPPYLIFE
• CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ：WEBデザインレシピ
• CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ：WEBデザインレシピ
• IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎：KOJIKA17

8.著作権

• Webデザイナーが覚えておく、代表的なライセンスまとめ：KOJIKA17
• 著作権について知っておくべき10のこと：KOJIKA17

9.グラフィックツール関係

• Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能：WEBデザインレシピ
• Photoshopの切り抜き、選択範囲いろいろ：で、結局どれがいいの？：WEBデザインレシピ
• アドビフォトショップショートカット一覧：ビスクスタジオ
• fireworksマニア

10.チュートリアル等

• ウェブデザインライブラリー
• カーニング：Kern Type

WEBの世界は覚えることが非常に多く、これらの記事はあくまで一部でしか有りません。これから先大事なのはこういったノウハウを自分の引き出しにどれだけ詰め込んでいけるかという事です。

自分のやりやすいやり方で構いませんので、様々なスキルやノウハウを取り入れ、自身の制作に役立てて行って下さい。それを積み重ねていくことで自分自身の力がついてきますよ。

お役に立てたらお願いします🙇