デザインの知識を独学で身につける!デザイナー初心者が絶対に見るべきサイト20選

読了まで約 8

Webデザイナー初心者の方は、日々の仕事で知識やスキル不足に頭を悩ませる場面が多いのではないでしょうか。だけど時間もお金も足りない新人にとって、学校に通ったり、腰を据えて教科書を読んだりというのはなかなか難しいもの。

そんなときは、Web上の有益なサイトで勉強するのはいかがでしょう。今回はWebで見ることができる、教科書並の情報量のサイトや、Webデザインの参考になるサイトなど、全部で20サイトをまとめました。

Webデザインの教科書として読みたいサイト

まずは、Webデザインの基本から応用まで網羅的に揃っていて、まさに教科書のように使えるサイトを紹介します。どれもブラウザに開いて常備したいサイトばかりです。

1. Webデザインレシピ

WebデザインレシピWebデザインレシピ

一つひとつの記事にボリュームがあり、ここを読めばWebデザインについて体系的に学べる、まさに教科書のようなサイトです。サイトを運営するのは、フリーランスのWebデザイナー・高橋のりさん。WebデザインとWordpressについての本も出版しています。高橋さんの経験にもとづいているので、とても説得力があり本当に参考になりますよ。

<おすすめ記事>
CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ
これからIllustratorを始めてみようという人のための基本操作とかいろいろ
デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

2. Webクリエイターボックス

WebクリエイターボックスWebクリエイターボックス

Webデザイナーに必要な知識を網羅した総合的なノウハウサイト。メニューバーからカテゴリを選べるので、教科書的に使えて便利です。初心者向けの記事も充実。

サイトを運営するのはカナダやイギリスなどでも働いていた経験を持つManaさん。海外のWebデザイナー事情や海外との比較などの、海外経験のある人ならではの視点もあります。海外での仕事を考えている人にとっても、役に立つはずです。

<おすすめ記事>
デッサン力とWebデザイン
Webデザインのスキルを磨こう!Webサイト模写のススメ
世界各国のWebデザインと日本のWebデザインの特徴

3. コムテブログ

コムテブログコムテブログ

Web制作全般に関するノウハウサイトです。まとめ記事が豊富で、デザインの参考にしたいサイト事例が知りたいという方は、ここを見ればきっと見つかるはず。デザインの具体的なノウハウについてもしっかりと紹介されているので、見ているだけでデザイン知識が身につきます。

<おすすめ記事>
デザインのレベルを上げる!レイアウトやタイポグラフィに関するまとめ
センス上がった!タイプ別に分けたWebデザインの参考になるサイトまとめ
Webデザイナー必見、実務で役立つ逆引きレイアウト集

4. コリス

コリスコリス

Webデザインについて幅広い記事を更新しているブログ。更新頻度が高く、ニュース性の高い最新トレンド記事もあるので、定期的にチェックするブログのひとつに加えてみてはいかがでしょうか。

<おすすめ記事>
デザインツールの革命と言っていいかも!サイズ指定を「%」でできるSketchのプラグイン -Fluid
商用利用無料、紙・布・生地・黒板などのテクスチャをシームレスに使えるパターン素材のまとめ
厳選!オリジナルのフォントが作成できる無料オンラインサービスのまとめ -フォントの専門知識がなくても大丈夫

5. Lopan.jp

Lopan.jpLopan.jp

記事の本数は少ないですが、一つひとつの記事が非常に丁寧なサイトです。特にWebサイトの作り方についてまとめた記事は秀逸で、読むだけでWebサイト制作の流れを理解することができます。WebデザイナーでもWeb制作全体の流れを理解したうえで、デザインをすることは重要です。この記事は一読の価値ありです。

<おすすめ記事>
Webサイトの作り方のまとめ!デザイン制作からコーディング手前まで。
Webサイトの作り方のまとめ!番外。
Webサイトの作り方のまとめ!コーディングまで。

6. WebNAUT

WebNAUTWebNAUT

Web制作会社ビーワークスが運営する、制作で培ったノウハウを紹介するサイト。デザインや色彩の原理・原則についての記事が勉強になります。

<おすすめ記事>
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」
「色相環」とか「トーン」ってどう使うの?配色のコツは「ジャッドの色彩調和論」
【検証】クリックされるボタンの色は?

定期的にチェックしたい、デザイン系記事が充実したWebメディア

教科書代わりのサイトの次は、デザイン系のニュース記事やコラム記事が豊富なWebメディアを紹介します。更新頻度が高いので、ブックマークやRSSリーダーに入れて、定期的にチェックしましょう。

7. MdN Design Interactive

MdNMdN Design Interactive

デザインとグラフィックの総合情報サイト。デザイン専門誌『MdN』を刊行する株式会社エムディエヌコーポレーションが運営するWebメディアで、デザイナーであれば欠かさずチェックしたいですね。

8. LIGブログ

LIGブログLIGブログ

ご存知LIGブログ。Web業界にいる人で知らない人はいないはず。職種別にカテゴリ分けされていて、デザイナーカテゴリからデザイン関連の記事を一覧できます。Web制作会社なので、実務に直接役立つ記事ばかりです。

9. ferret

ferretferret

Webマーケティングの総合サイト。マーケティング系の記事が多いですが、デザインやグラフィック関連の記事も充実しています。チェックしていると、デザイナーに必要なマーケティングの知識も自然と身につくはず。

デザインの参考にしたい、美しいWebサイトを集めたギャラリーサイト

10. MUUUUU.ORG

MUUUUU.ORGMUUUUU.ORG

デザインに煮詰まったときに開いて参考にしたい、Webサイトのギャラリーサイト。こちらは日本のサイト中心に集めています。カテゴリを選んで検索できて便利です。

11. Web Design Clip

Web Design ClipWeb Design Clip

こちらも日本のサイトが中心。カテゴリやカラーやレイアウトを選んで検索できます。さらに、お気に入りのサイトをWeb上でクリップすることがで、実用性が高いです。

12. I/O 3000

I:O 3000I/O 3000

こちらも日本のサイトを中心に集めていて、更新頻度が高いため、定期的にチェックしたいサイトです。TumblrなどのSNSでシェアするネタとしてもぜひ。

13. AWWWARDS

AWWWARDSAWWWARDS

こちらも海外サイトが中心。ユーザーからの投票で登録されたサイトの評価が数値として出され、ランキング化されるというユニークなサイトです。評価項目はデザイン、ユーザビリティ、クリエイティビティ、コンテンツの4つ。評価の高い、優れたデザインのサイトを見ることができて、非常に便利です。

14. site inspire

site inspiresite inspire

ここは海外のサイトメインで集めています。スタイルやタイプなどのタグで細かく検索できます。探したいデザインのサイトを見つけることができるはず。

15. iPhoneデザインボックス

designiPhoneデザインボックス

スマホから見たときにUIが美しいサイトを集めているギャラリーサイトです。実際のスマホの表示の画面キャプチャを一覧できるので、スマホサイトを作るときに非常に便利。ファッション、教育・学校、ECサイト、色などカテゴリ別に検索もできるので探しやすいですね。

見ているだけでデザインセンスが身につくサイトやサービス

16. Pinterest

PinterestPinterest

気になった画像やイラストを”ピン”という機能でクリップできる、画像収集系SNS。アメリカ発のサービスでインスタグラムと並ぶ人気を誇ります。デザイン感度の高いユーザーが多いため、優れたデザインや素材を探してクリップしていくだけで、デザインの勉強になります。

17. Tumblr

TumblrTumblr

画像に特化したブログ兼SNSサービスのTumblrは、グラフィックやデザインに優れたブログが数多くあります。気に入った画像があれば“リブログ”という機能でシェアすることができます。そうしたブログをフォローして、日常的に大量の画像をリブログすることで、自然とデザインセンスが磨かれます。

18. Behance

BehanceBehance

オンラインポートフォリオサイトのBehance。世界中のクリエイターの優れた作品を見ることができます。UI/UXやWebデザインといったカテゴリでの検索もできて実用的です。デザインセンスを磨くには、優れた作品を見るのが一番です。

19. Dribbble

DribbbleDribbble

完全招待制のデザイナー向けSNS。プロの作った優れたデザインを見ることができるので、非常に勉強になります。ここでプロのデザイナーの作品を見ることで、自分の目標とするデザインを見つけてみてはいかがでしょうか。

20. HUE/360

HUE:360HUE/360

カラーコードが一目でわかるWebの色見本です。簡単に色を見比べることができるので、色彩感覚を身につけるのに役立ちます。配色に悩んだときにもぜひ。

Webを最大限活用して独学でスキルアップ!

初心者デザイナーが独学でデザインの知識やノウハウを勉強できて、見るだけでセンスを磨ける20のサイトをご紹介しました。

駆け出しの新人は仕事が忙しく、腰を据えて学ぶ時間はなかなか取れません。ぜひWebを最大限活用して、Webデザイナーとしてスキルアップを目指しましょう。

BIZ KARTE編集部

「BIZ KARTE Powered by マネーフォワード クラウド」は株式会社マネーフォワードが運営している公式メディアです。
マネーフォワード クラウドに関係する会計や経理などのバックオフィス業務をはじめとしたビジネスに役立つ情報を更新しています。



関連するマネーフォワード クラウドシリーズはこちら
マネーフォワード クラウド会計(法人会計ソフト)



「マネーフォワード クラウド」シリーズのサービス資料