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

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

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

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

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

 

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

 

なお、今回紹介する内容は、TechAcademyのWebデザインスクールでも学べます。

 

目次

 

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

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

 

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

W3Q

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

かなり数が多いので、休みのタイミングで一気に読んでみるのも良いかもしれません。初めてWeb制作に取り組む人やどういう流れでWeb制作に取り掛かれば良いかよく分からない人は必見のスライド資料ですね。

ディレクターやプロデューサーはまず最初に知っておきたい内容でしょう。

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サイトを集めたギャラリーサイトです。

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

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

イラストブックマーク

 

13. I/O 3000

かなり個性的なWebサイトが多いギャラリーサイトです。

音楽やグルメ、旅行や教育、スポーツなどのカテゴリやタグ、そして色で絞り込むことができます。

イベントのキャンペーンサイトやコーポレートサイトの作成でも迷ってしまうくらい事例が多いので、良いインスピレーションが得られるはずです。

I/O 3000

 

14. 81-web.com

採用ページ、商品紹介ページ、オフィシャルページが多く並んでいるギャラリーサイトです。

単純に見ているだけでもどんなWebデザインが流行っているのか何となく分かるはずです。トレンドを取り入れたいと思っている方はぜひ見ておきたいサイトでしょう。

81-web.com

 

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

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

 

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

Design Develop

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

iOS7の登場によりますます活気づいている「フラットデザイン」についてのテクニックも紹介されています。アプリのデザインやモバイルのデザインに関わる人には重要な内容です。

Design Develop

 

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

LIG2

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

htmlの段階でもできることはたくさんあるので、覚えておきましょう。Webデザイナーに限らず、コーダーやマークアップエンジニア、ディレクターに役立つメモになるでしょう。

とても細かい点ですが、ユーザーにとって使いやすいデザインを再現できるので、細部にもこだわりましょう。

LIG

 

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

Find Job !スタートアップ

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

デザイナーに依頼するときにも知っておきたい内容がまとめられています。Webサイトやバナー、ボタン1つを取っても色のバランスはとても重要です。

ノンデザイナーこそ知っておきたい内容なので、必読の記事と言えるはずです。

Find Job !スタートアップ

 

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

coliss

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

Webサイトに関わらず「新しい発想が欲しいな」と思ったら見ておきたい記事になります。ぜひいろんな引き出しを作っておきましょう。

coliss

 

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

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

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

アニメーションや色、フォントなど様々なトレンドが分かります。今取り入れておきたい要素などもあるので、デザインに関わる人は要チェックでしょう。

PHOTOSHOP VIP

 

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

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

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

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

実際に書きながらどんな変化があるのか確認してみてください。

NxWorld

 

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

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

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

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

このブログ自体、Goodpatch(グッドパッチ)という日本を代表するUIデザインに特化したデザインカンパニーなので、勉強になる記事が多くあります。

最新のデザイン事情やデザイナーを目指している方は、ぜひともブックマークしておきたいサイトの1つでしょう。

memopatch

 

22. Code My UI

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

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

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

Code My UI

 

23. 意味のあるデザインを!自然なアニメーションの作り方

海外のアプリ、モバイルサイトを事例に優れたアニメーションの載せ方を紹介しています。

アニメーションは動きがあって、一瞬でかっこいいや美しいと思ってしまいがちですが、使うシーンがとても重要です。

ユーザーにとって使いやすいWebデザインを実現するためには必要不可欠な知識だと思うので、ぜひチェックしておきましょう。

TechAcademyマガジン

 

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

Webデザインについての情報はソーシャルメディア上でもよく流れてくるので、定期的にチェックしていきましょう!TechAcademyも日々新しい記事を掲載しているので、TwitterFacebookでもフォローしてもらえれば幸いです。

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

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインを基礎から身につけたいという方はぜひご覧ください!

現役のデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。