Webデザイナー初心者の方は、日々の仕事で知識やスキル不足に頭を悩ませる場面が多いのではないでしょうか。だけど時間もお金も足りない新人にとって、学校に通ったり、腰を据えて教科書を読んだりというのはなかなか難しいもの。
そんなときは、Web上の有益なサイトで勉強するのはいかがでしょう。今回はWebで見ることができる、教科書並の情報量のサイトや、Webデザインの参考になるサイトなど、全部で20サイトをまとめました。
目次
Webデザインの教科書として読みたいサイト
まずは、Webデザインの基本から応用まで網羅的に揃っていて、まさに教科書のように使えるサイトを紹介します。どれもブラウザに開いて常備したいサイトばかりです。
1. Webデザインレシピ
※2020年8月現在、掲載終了
一つひとつの記事にボリュームがあり、ここを読めばWebデザインについて体系的に学べる、まさに教科書のようなサイトです。サイトを運営するのは、フリーランスのWebデザイナー・高橋のりさん。WebデザインとWordpressについての本も出版しています。高橋さんの経験にもとづいているので、とても説得力があり本当に参考になりますよ。
2. Webクリエイターボックス
Webデザイナーに必要な知識を網羅した総合的なノウハウサイト。メニューバーからカテゴリを選べるので、教科書的に使えて便利です。初心者向けの記事も充実。
サイトを運営するのはカナダやイギリスなどでも働いていた経験を持つManaさん。海外のWebデザイナー事情や海外との比較などの、海外経験のある人ならではの視点もあります。海外での仕事を考えている人にとっても、役に立つはずです。
＜おすすめ記事＞
デッサン力とWebデザイン
Webデザインのスキルを磨こう！Webサイト模写のススメ
世界各国のWebデザインと日本のWebデザインの特徴
3. コムテブログ
Web制作全般に関するノウハウサイトです。まとめ記事が豊富で、デザインの参考にしたいサイト事例が知りたいという方は、ここを見ればきっと見つかるはず。デザインの具体的なノウハウについてもしっかりと紹介されているので、見ているだけでデザイン知識が身につきます。
＜おすすめ記事＞
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ
センス上がった！タイプ別に分けたWebデザインの参考になるサイトまとめ
Webデザイナー必見、実務で役立つ逆引きレイアウト集
4. コリス
Webデザインについて幅広い記事を更新しているブログ。更新頻度が高く、ニュース性の高い最新トレンド記事もあるので、定期的にチェックするブログのひとつに加えてみてはいかがでしょうか。
＜おすすめ記事＞
デザインツールの革命と言っていいかも！サイズ指定を「%」でできるSketchのプラグイン -Fluid
商用利用無料、紙・布・生地・黒板などのテクスチャをシームレスに使えるパターン素材のまとめ
厳選！オリジナルのフォントが作成できる無料オンラインサービスのまとめ -フォントの専門知識がなくても大丈夫
5. Lopan.jp
記事の本数は少ないですが、一つひとつの記事が非常に丁寧なサイトです。特にWebサイトの作り方についてまとめた記事は秀逸で、読むだけでWebサイト制作の流れを理解することができます。WebデザイナーでもWeb制作全体の流れを理解したうえで、デザインをすることは重要です。この記事は一読の価値ありです。
＜おすすめ記事＞
Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。
Webサイトの作り方のまとめ！番外。
Webサイトの作り方のまとめ！コーディングまで。
6. WebNAUT
Web制作会社ビーワークスが運営する、制作で培ったノウハウを紹介するサイト。デザインや色彩の原理・原則についての記事が勉強になります。
＜おすすめ記事＞
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」
「色相環」とか「トーン」ってどう使うの？配色のコツは「ジャッドの色彩調和論」
【検証】クリックされるボタンの色は？
定期的にチェックしたい、デザイン系記事が充実したWebメディア
教科書代わりのサイトの次は、デザイン系のニュース記事やコラム記事が豊富なWebメディアを紹介します。更新頻度が高いので、ブックマークやRSSリーダーに入れて、定期的にチェックしましょう。
7. MdN Design Interactive
デザインとグラフィックの総合情報サイト。デザイン専門誌『MdN』を刊行する株式会社エムディエヌコーポレーションが運営するWebメディアで、デザイナーであれば欠かさずチェックしたいですね。
8. LIGブログ
ご存知LIGブログ。Web業界にいる人で知らない人はいないはず。職種別にカテゴリ分けされていて、デザイナーカテゴリからデザイン関連の記事を一覧できます。Web制作会社なので、実務に直接役立つ記事ばかりです。
9. ferret
Webマーケティングの総合サイト。マーケティング系の記事が多いですが、デザインやグラフィック関連の記事も充実しています。チェックしていると、デザイナーに必要なマーケティングの知識も自然と身につくはず。
デザインの参考にしたい、美しいWebサイトを集めたギャラリーサイト
10. MUUUUU.ORG
デザインに煮詰まったときに開いて参考にしたい、Webサイトのギャラリーサイト。こちらは日本のサイト中心に集めています。カテゴリを選んで検索できて便利です。
11. Web Design Clip
こちらも日本のサイトが中心。カテゴリやカラーやレイアウトを選んで検索できます。さらに、お気に入りのサイトをWeb上でクリップすることがで、実用性が高いです。
12. I/O 3000
こちらも日本のサイトを中心に集めていて、更新頻度が高いため、定期的にチェックしたいサイトです。TumblrなどのSNSでシェアするネタとしてもぜひ。
13. AWWWARDS
こちらも海外サイトが中心。ユーザーからの投票で登録されたサイトの評価が数値として出され、ランキング化されるというユニークなサイトです。評価項目はデザイン、ユーザビリティ、クリエイティビティ、コンテンツの4つ。評価の高い、優れたデザインのサイトを見ることができて、非常に便利です。
14. site inspire
ここは海外のサイトメインで集めています。スタイルやタイプなどのタグで細かく検索できます。探したいデザインのサイトを見つけることができるはず。
15. iPhoneデザインボックス
スマホから見たときにUIが美しいサイトを集めているギャラリーサイトです。実際のスマホの表示の画面キャプチャを一覧できるので、スマホサイトを作るときに非常に便利。ファッション、教育・学校、ECサイト、色などカテゴリ別に検索もできるので探しやすいですね。
見ているだけでデザインセンスが身につくサイトやサービス
16. Pinterest
気になった画像やイラストを”ピン”という機能でクリップできる、画像収集系SNS。アメリカ発のサービスでインスタグラムと並ぶ人気を誇ります。デザイン感度の高いユーザーが多いため、優れたデザインや素材を探してクリップしていくだけで、デザインの勉強になります。
17. Tumblr
画像に特化したブログ兼SNSサービスのTumblrは、グラフィックやデザインに優れたブログが数多くあります。気に入った画像があれば“リブログ”という機能でシェアすることができます。そうしたブログをフォローして、日常的に大量の画像をリブログすることで、自然とデザインセンスが磨かれます。
18. Behance
オンラインポートフォリオサイトのBehance。世界中のクリエイターの優れた作品を見ることができます。UI/UXやWebデザインといったカテゴリでの検索もできて実用的です。デザインセンスを磨くには、優れた作品を見るのが一番です。
19. Dribbble
完全招待制のデザイナー向けSNS。プロの作った優れたデザインを見ることができるので、非常に勉強になります。ここでプロのデザイナーの作品を見ることで、自分の目標とするデザインを見つけてみてはいかがでしょうか。
20. HUE/360
カラーコードが一目でわかるWebの色見本です。簡単に色を見比べることができるので、色彩感覚を身につけるのに役立ちます。配色に悩んだときにもぜひ。
Webを最大限活用して独学でスキルアップ！
初心者デザイナーが独学でデザインの知識やノウハウを勉強できて、見るだけでセンスを磨ける20のサイトをご紹介しました。
駆け出しの新人は仕事が忙しく、腰を据えて学ぶ時間はなかなか取れません。ぜひWebを最大限活用して、Webデザイナーとしてスキルアップを目指しましょう。
※掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談していただくなど、ご自身の判断でご利用ください。