キャンペーン ツイートでAmazonギフト券10,000円もらえる!締め切り間近!

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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

そこで、今回はWebデザイン(ホームページ)を勉強する時に参考にしたいまとめサイト・記事を集めてみました。今後の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

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

Webデザインの見本サイト

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

 

6. bookma! v3

スクリーンショット 2016-09-07 10.59.42

Webサイトのデザインを決める上で参考にしたいギャラリーサイトです。

配色やテイスト、Webサイトのカテゴリーから検索することもできるので1日中見ていても飽きませんね。ファーストビューに大きな画像を表示しているサイトが多いですが、参考になるはずです。

bookma! v3

 

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

LIG

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

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

LIG

 

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

W3Q2

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

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

W3Q

 

9. WebDesignClip

スクリーンショット 2016-09-07 11.07.56

クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。

自分が気に入ったサイトを「MyClip」として保存することもできるので、Webサイトの作成に役立つはずです。洗練されたサイトも1000以上登録されているので、ぜひ参考にしてみてください。

また、自分のサイトを提出することも可能です。

WebDesignClip

 

10. WebDesignFile

スクリーンショット 2016-09-07 11.11.31

上で紹介したWebDesignClipの姉妹サイトでこちらは海外のサイトのみを掲載しています。

より最新のトレンドを知りたいと思ったら海外の事例を参考にすると良いでしょう。英語のフォントを取り入れたサイト作成に役立つはずです。

WebDesignFile

 

11. Design Link Database

Webdes10

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

Design Link Database

 

12. イラストブックマーク

スクリーンショット 2016-09-07 11.14.39

イラストが使用されたWebサイトを集めたギャラリーサイトです。

実際の人ではなくイラストやアイコンを使うことで、コミカルな印象を与えることができます。会社のコーポレートサイトや堅いビジネスを行っている企業はイラストを使うことで記憶に残るでしょう。

どのサイトも色が多くポップなサイトが多いのが特徴です。

イラストブックマーク

 

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

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

 

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

Design Develop

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

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

Design Develop

 

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

LIG2

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

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

LIG

 

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

Find Job !スタートアップ

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

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

Find Job !スタートアップ

 

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

coliss

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

coliss

 

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

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

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

PHOTOSHOP VIP

 

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

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

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

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

NxWorld

 

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

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

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

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

memopatch

 

20. Code My UI

スクリーンショット 2016-09-07 11.21.45

海外のサイトですが、ちょっとしたテクニックを動きを確認しながら学べるサイトです。

ボタンを押したときの動きやマウスオーバーした時の動きなど、ユニークな実装が多く見ているだけでも楽しめます。ぜひ自分のサイトにも取り入れてみてください。

Code My UI

 

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

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

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

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