Web制作 
Webマーケティング 
その他
2016.04.18 Web制作
初心者Webデザイナー必読！Webデザインを独学で学べるおすすめWebサイト・記事20選
Webデザインには興味があるんだけど、どこから始めればいいのかわからない…という方は多いのではないでしょうか。そんな初心者の方でも今すぐ、独学でWebデザインの基礎を学べるサイトや記事を20個集めました。
今回、カテゴリをWebサイト制作に最低限必要な知識である、「Webサイト制作の流れ」、「HTML/CSS」、「Webサイトのデザイン」の3つに分けて紹介しています。このカテゴリごとにしっかり学べば、きっとWebサイト制作ができるようになるはずです！
Webサイト制作の流れを学ぶ
1. これからwebサイトの制作をしたいけれど、何から勉強したらいいの？っていう人のためのガイド
Webデザイナー高橋のりさんが運営するブログ「Webデザインレシピ」より、Webサイトの基礎の基礎をまとめた記事。「そもそもWebサイト制作って何を勉強すればいいの？」という初心者の方でも、この記事を読めばWeb制作のいろはを学ぶことができます。
こちらサイトは本当に丁寧に説明しているので、初心者の方にはとても参考になるはず。
2. Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
「Webデザインレシピ」より、制作の準備からサイト公開の手順まで、制作フローの流れを説明した記事です。「何のためのWebサイトか？」という部分を明確にするための、ゴールとターゲットの設定など、Webサイト制作において大切なことが書かれています。
クライアントのWebサイト制作を手がける機会がある方は、ぜひ読んでみてください。
3. Web担当初心者がまず知っておきたいHTMLやCSSに関する基礎知識【実例付き】
株式会社LIGが運営する「LIGブログ」の、Webサイトの仕組みをHTMLやCSSの基本的なことを解説している記事です。Webサイトの構造を知らない人でも、基本的なマークアップ言語の知識はあると便利。
この記事を読めば、Webサイトの構造がどうなっているのかがわかるので、初心者の方は必読です！
4. Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。
「Lopan.jp」は記事の本数が少ないながら、非常に丁寧なWebサイト制作のハウツー記事が揃っているサイトです。ここにある記事を全て読めば、サイト制作に必要な知識を網羅することができるはず。
この記事では、デザイン制作からコーディングまでを説明しています。Web制作に必要な情報のまとめ方から、デザイン制作の手法を細かく記してあり、ともてわかりやすいです。
5. Webサイトの作り方のまとめ！番外。
こちらも「Lopan.jp」より、クライアントからの修正の進め方を説明した記事。クライアントからの修正依頼に対して、速やかに改善するにはどうするべきか？は悩みのタネです。この記事を読めば、そんな悩みを解決してくれますよ。そもそも、クライアント対応について書かれたWeb制作解説記事なんてなかなかないですよね。
6. Webサイトの作り方のまとめ！コーディングまで。
引き続き「Lopan.jp」より、コーディングをまとめた記事。Webデザインのコーディングに必要な、ソフト、スキルを解説しています。コーディングの下準備、web開発環境に必要なものから、マークアップ(HTML)やレイアウト(CSS)について、コーディングの基本的な部分を学ぶことができます。
7. Webサイトの作り方のまとめ！トップページ完成まで。
またまた「Lopan.jp」より、トップページデザインの過程についてまとめた記事です。トップページにツイート、Like Boxなどの表示の仕方や、Webサイトに動きを加える、Java scriptの実装、webサーバーにファイルをアップロードする方法など手順を追って説明しています。
ここまで読んだことを身に付ければ、もうWebサイト制作ができるようになるはず。何度も読んで、手を動かして習得していきましょう。
8. Webサイトの作り方のまとめ！ブラウザチェック。
「Lopan.jp」のWebサイト制作シリーズの最後にあたる、ブラウザチェックについての記事です。アップロードしたファイルが、ちゃんと表示されるのかを試していきましょう。
せっかく作ったものでも、エンドユーザーが見れる形になっていなければ意味がありません。世界中の人に見てもらうために、ブラウザチェックまで手を抜かずにやりましょう。
HTML/CSSを独学で学ぶ
9. ドットインストール
1本3分の動画でプログラミングが学べる学習サイトです。HTMLやCSSなどの言語から、アプリ開発の作り方まで、音声動画で解説してくれます。さらに、動画と同時にエディタでコーディングを進めることによって、動作確認をすることもできます。
これだけ充実していて、基本的には無料で使えるので、コーディングやプログラミング初学者の方はぜひお試しください。
10. schoo
2000本以上のオンライン動画で、様々な授業を受けられるサービス。無料でも利用できるので、敷居が低いです。WebデザインやプログラミングといったWeb制作に関係するジャンルの授業も豊富。
さらに、月額980円から始められるプレミアムサービスに登録すると、Webデザイナー、グラフィックデザイナー、エンジニアなど、なりたい職種別のコースで、それぞれの必要な授業を体系的に受けることができます。学校に通う時間のない方は、schooを利用しない手はないですよ！
11. Progate
プログラミングを無料で学べる学習サイト。6つある中のジャンルから、基本編と応用編に分けて学ぶことができます。また、Progateのポリシーとして、「プロダクトを創る」、「ググる力をつける」、「現場で使えるスキルを身につける」ということを、掲げています。
進め方は「スライドを見る」、「エディタにコードを書く」、「プレビューで表示を確認」の3ステップで、実際に手を動かして学ぶことができるので、とても実践的です。
12. HTMLクイックリファレンス
こちらは学習サイトというよりも、わからないタグがあったら調べる辞書的な使い方に便利なサイト。HTMLとCSSについてだけでなく、Java Script、フォント、カラーについてのリファレンスも揃っています。
ABCの索引から調べることができるので、「このタグなんだっけ？」というときにぜひ。ブラウザに常備しておきたいサイトです。
Webサイトのデザインを学ぶ
13. CodyHouse
こちらは、最新のWebデザインがまとめられているWebサイトです。サンプルコードをダウンロードできたり、解説記事を読むことができたりと充実しています。使いたいUIパーツやWebデザインを見つけたら、自分のWebサイトに使ってカスタマイズしてみてはいかがでしょうか。 見るだけでも流行のWebデザインを仕組みから学べて、勉強になりますよ。
14. TETHR
スマホ用のWebデザインをまとめたギャラリーサイトです。130種類以上のデザインテンプレートと、250種類以上のUIデザインが揃っています。マルチメディア、ナビゲーション、ソーシャルメディア、といった系統別のデザインが充実しているので、作りたいスマホサイトのジャンルに応じて参照することができ便利です。
15. I/O 3000
人気の高いWebデザインのギャラリーサイト。日本国内または、海外など質の高いクリエイター達によるハイクオリティなWebサイトが、特徴、色ごとにカテゴライズされており、好みのデザインを見つけることができます。検索もしやすいので、参考になるデザインもきっと見つかるはず。
16. AWWWARDS
海外サイト中心のギャラリーサイト。ユーザー投票でWebサイトの評価が変動し、ランキングにされるというユーザー参加型の要素があります。評価項目はデザイン、ユーザビリティ、クリエイティビティ、コンテンツの4つ。 多くの人に評価されたデザインのサイトを見ることができるので、人気のあるサイトを探したいときはぜひ。
17. ブブンデザインアーカイブ
その名の通り、Webデザインのパーツに特化したギャラリーサイトです。ブブン別、業界別に検索できるので、実務で重宝します。Webデザイナーにとって、助け舟となるようなサイトかもしれません。 このほか姉妹サイトとして、「モバイルデザインアーカイブ」、「iphoneデザインアーカイブ」もあります。
18. UI-Patterns
こちらはUIをパターン別に集めたギャラリーサイト。普段何気なく使用している、ナビゲーションやメニューなど、そのほか数多くのUIが揃っています。デザインだけではなく、ユーザーが使いやすくするにはどうするのか、というユーザビリティを考えたUI/UXも学べますよ。
19. House of Buttons
Webサイトには、よくボタンが使われることがあります。そこでボタン選びに迷ったときには、ボタン素材だけを集めたこちらのサイトが便利。各ページには、どのようにボタンが使われているのかを紹介しているうえ、元ページにも飛べるのでとても使いやすいです。
20. Gridgum
最近のトレンドである、レスポンシブデザインに特化したギャラリーサイト。レスポンシブデザインとは、PCやスマホやタブレットなど、画面サイズが異なる様々な機器に、ひとつのファイルで対応できるデザインのこと。 ただ最新のものを集めただけではなく、しっかりハイクオリティなデザインが揃っているので、初心者からプロまで参考になるサイトです。
早速Webデザインの勉強をはじめよう！
Webデザインの知識ゼロからでも、すぐに勉強をスタートできるようになるサイト・記事を集めて紹介してきました。今回は、これさえわかればWebサイトが作れる、というようなWebデザインの基礎をまとめたものを集めています。
ここで紹介したサイトや記事を参考にして、早速、自分のPCでWebデザインの勉強をはじめてみてはいかがでしょうか。
WEBサイト・ホームページの制作をご検討の方
フライング・ハイ・ワークスの紹介
フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。
実績
デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。
また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。
500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。
