Webデザインを勉強する時に参考にしたいまとめサイト・記事15選

Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事を15個集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。

Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか?

そこで、今回はWebデザイン(ホームページ)を勉強する時に参考にしたいまとめサイト・記事を15個集めてみました。今後のWebデザインの勉強方法の参考になるはずです。

 

Web制作初心者の方への指南から、サイトのコーディング、美しいデザインなど、Webサイトのデザインを考える上でとても参考になるものばかりです。Webデザイナーを目指して、独学で勉強したい方は参考にしてみてください。

 

なお、今回紹介する内容は、TechAcademyのオンラインブートキャンプWebデザインコースでも学べます。

 

Webデザインのスライド資料

Web上にはSlideShareで共有されているWebデザインに関する資料が数多くあります。そんなスライド資料を中心にまとめた記事です。

 

1. Web制作のおすすめスライド デザイン編

W3Q

Webデザイン全般に役立つSlideShareのスライドを紹介している記事です。

かなり数が多いので、長めのお休みに一気に読んでみるのも良いかもしれません。

W3Q

 

2. ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27

commte

HTML/CSSからPhotoshopやIllustratorまで、これさえあれば本当にひとりでWeb制作ができてしまうかもというくらい丁寧にまとめられています。

Webデザイン初心者の方はまずはチェックしてみてください。

コムテブログ

 

3. もうCSS設計で悩まない!「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選

webdes1

CSSはWebサイトのデザインで必要不可欠なものです。

コーディングをしていく際にある程度の決まりごとを作っておかないと、あとになって自分自身やWeb制作チームのメンバーの中で齟齬がうまれてしまいます。この記事を参考に、CSSコーディングのガイドラインを制定してみてはいかがでしょうか。

SQUEEZE

 

4. Webデザインのセオリーを学ぼう

スクリーンショット 2016-05-20 11.05.13

Webデザインのそもそもを勉強する資料としては十分な内容です。

デザインとアートは全く違うという意見がありますが、デザインはどう考えるべきものなのか理解できるはずです。

SlideShare

 

5. AppleとGoogleのデザインガイドライン比較

スクリーンショット 2016-05-20 11.09.57

今やスマホ対応のデザインが必須となっています。とはいえiPhoneとAndroidというようにデバイス毎にデザインが違うのも事実です。

それぞれどういった考えてデザインされているのか資料で見ていきましょう。フォントやボタンのサイズ、配色など細かい部分まで参考になるはずです。

SlideShare

 

Webデザインの見本サイト

どんなデザインのWebサイトが他にあるのかを調べる時に使えるのが見本サイトです。

 

6. 美しいWebデザインをタイプ別に!見ないと損する目的別厳選Web見本サイトのまとめ

LIG

Webデザインの参考になる見本サイトのまとめ記事です。

どのサイトにも一度は目を通して、必要になったときに参考として使ってみましょう。

LIG

 

7. 新人デザイナーならブクマして損なしのWebデザインギャラリーサイト

W3Q2

国内・海外問わずWebデザインギャラリーサイトをまとめた記事です。

このまとめを参考にすれば、これでもかというほど数多くのWebデザインを見ていくことができます。

W3Q

 

 

8. Design Link Database

Webdes10

管理人さんがセレクトした優れたWebデザインを1日1~2つ紹介されるサイトです。個人で管理しているサイトにもかかわらず、twitterのフォロワーは4万人近くもいます。Webデザインに迷ったらここ、というサイトです。

Design Link Database

 

PR

Webデザインに使えるテクニック

実際にデザインをする際に参考になるテクニックをまとめた記事です。

 

9. 次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集

Design Develop

Webサイトを制作する際に参考にしたいCSSとJavaScriptのテクニック集を集めた記事です。

iOS7の登場によりますます活気づいいる「フラットデザイン」についてのテクニックも紹介されています。

Design Develop

 

10. スマートフォンサイトのhtmlコーディングメモ12個

LIG2

スマートフォン用のサイトのデザインを考えるときに参考にしたいまとめです。

htmlの段階でもできることはたくさんあるので、覚えておきましょう。

LIG

 

11. ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

Find Job !スタートアップ

大手企業などの既存サイトの配色を解説した記事です。

デザイナーに依頼するときにも知っておきたい内容がまとめられています。

Find Job !スタートアップ

 

12. ワンパターンなウェブデザインから抜け出すための10のヒント

coliss

同じ人物が作ったサイトは、同じようなデザインになりがちかも・・そんな悩みを持った人向けの記事です。
クリエイティビティを引き上げる10のヒントが紹介されています。

coliss

 

13. ウェブデザイナーが見直しておきたい、2016年のウェブデザイントレンド10個まとめ

スクリーンショット 2016-05-20 11.17.40

2016年のデザイントレンドをまとめています。サイト上にはどういったものを載せて、どういう色でなど今年のトレンドが分かるはずです。

PHOTOSHOP VIP

 

14. CSSのみで実装するボタンデザインやホバーエフェクト20+α

スクリーンショット 2016-05-20 11.38.00

最近は動きの出るWebサイトが増えてきました。この記事ではホバーエフェクトに焦点を当てて、デモとソースコードを紹介してくれています。

そのままコピペして自分用に使えるので、初心者の方でもすぐに動きを再現できるはずです。

NxWorld

 

15. Appleのヒューマンインターフェースガイドラインから学ぶ5つの優れたUIの秘密

スクリーンショット 2016-05-20 11.54.18

AppleのUIデザインに関する記事を翻訳した記事になります。

普段からMacやiPhoneを使っている人は多いと思います。Apple製品はデザインが素晴らしいとよく言われていますが、どういったプロセスでデザインが出来上がっているのか必見です。

memopatch

 

今回の記事はいかがでしたか?

Webデザインについての情報はソーシャルメディア上でもよく流れてくるので、定期的にチェックしていきましょう!

Webデザインをさらに勉強したい場合は、Webデザインスクールに通ってみるのもよいかもしれません。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。