参考になるWebデザインを学べるサイト、記事、ブログ20選

マークアップ、フロントの学習を進めている方や、サーバーサイドはできるけど、サイトのデザインはそんなに得意ではない、そういう方っていらっしゃいますよね。今回は、デザインを学びたい時に見て欲しい、デザイン関連のサイトを20サイト紹介していきます。

Webデザイン見本サイト

1.最新のWebデザインが集まったサイト「muuuuu.org」


ムーオルグは、後発だからこそできる、魅力的、使いやすさの優れたサイトを掲載しています。非営利で運営していることもあり、偏りなく、オーソドックスに美しいサイトがまとまっています。
奇抜なデザインではないからこそ、サイトのデザインを学習する際や、デザインの参考にする際に利用しやすいことが特徴でしょう。

2.優れたデザインが豊富に掲載。完全招待制のまとめサイト「Dribbble」

こちらはサイトというよりは、グラフィック、イラストが多く集まるサイト。
グラフィックの参考に利用してみてはいかがでしょう。

3.Design Iketeru

こちらは個人の方が運営されているサイト紹介サイト。
若干営利目的でもあるようで、洗練性はかけますが、種類は多く、テイスト、カテゴリ、カラーからサイトを探すことができるので、目的を持って探す方はおすすめです。

4.Pinterest


Pinterestは、アメリカで流行している画像共有サイトです。
ユーザーがお気に入りの画像をpinして、一覧で閲覧することができるので、参考にしたい画像、サイトやカテゴリ名などで検索するといいでしょう。
日本語で探すより、英語で探すことをおすすめします。

5.見出しのみ「フッターデザイン.com」

Webサイトそのものではなく、フッターのデザインのみ集めたサイト。
ユニークなフッター、オーソドックスなフッターまで多様なフッターを見れるのは少しおもしろいですよ。

6.見出しデザイン.com

こちらも部分的に見本となるサイトですね。ブログやメディアはもちろん、サイトの制作をする時には必須ですよね。
見出しってシンプルだけど、そのサイトのカラーがより濃く反映されるので参考を見てみるとよさそう。

7.ファビコンギャラリー.com

ファビコンをまとめたサイト。ファビコンを普通のロゴにすることも多いですが、工夫しようと思ったら参考を見てはどうでしょう。

8.ブブンデザインアーカイブ

全ての「部分」を一挙に検索できるサイト。具体的にはヘッダー、フッター、アイコン、ファビコン、コンバージョン、見出し等です。
部分別にデザインを探すときに便利に使えそうですね。

9.Webデザインの見本帳


綺麗なデザインのサイトを紹介しているというより、多くのサイトを紹介しているというまとめサイト。
オーソドックス、堅めのデザインを探すときには使えるかも。

Webデザイン学習記事

10.ノンデザイナーこそ覚えておきたい!Webの配色パターン例まとめサイト! color-01-01

デザイナー以外がデザインをしなくてはいけない際や、基本的に覚えておきたい配色パターンを紹介している記事です。

11.配色・レイアウトの基礎が学べる厳選スライド集

こちらも、配色、レイアウトの基本を学べる記事。
デザイナー以外でも基礎知識は持っておきたいですよね。

12.UI/UXが学べる神スライド7選

UX(ユーザー経験)を高めるためにUI(ユーザーインターフェイス)の質を上げておきたいという内容や、UIとUXの関連について紹介された記事です。
魅力的なスライドが多く紹介されています

Webデザイン学習スライド

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

Webデザインの基礎について、かなり厚い情報を公開しているスライドです。
37万人に見られているスライドということで、その内容の濃さと信頼性が伺えますね。

14.これくらいはやってほしいWebデザイン

デザインのこだわり、技術などが洗練されていなくとも、最低限覚えておくべき内容を抑えておくと、こんなにきれいな、いい感じのデザインになるよ、というスライド。
たしかに、中で紹介されてる3点を抑えたら魅力的なデザインができそう。

情報発信系サイト

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

Webデザインを学習する人は必見のサイト。
コーダー、制作者など、学びたいときに学びたい情報が見つかるはず。

16.Webデザインレシピ


こちらもWebクリエイターボックスと同様に定評のあるサイト。
基礎から発展まで、こちらは特にイラレなどの使い方を学ぶときに便利です。

17.Design Develop

こちらもデザインの情報、ハウツーなどを紹介しているサイトですが、更新頻度も高く参考にしやすそう。

18.ウェビメモ

フリーランスのWebデザイナーが運営しているデザインブログ。更新頻度は高くはないものの、季節によってデザインを変えていたり、質の高い記事が更新されていたりと定期でチェックしておきたいブログですね。

19.Webデザインクリップ

クソバズ記事を何度も作成してるブログ。
更新は鈍っていますが、こちらのブログも定期でチェックしておくと良さそうですね。

20.MdN Design Interactive

デザイン、グラフィックの情報を発信しているメディア。
Webデザインはもちろん、グラフィック、ハードのデザインなども紹介しているので、デザインの視点を広めたい方におすすめです。

コーダー、エンジニアもデザインの基礎は抑えよう。

いかがでしょう。ブログ、メディア、サイト、記事を紹介しましたが、こちらを参考に、デザインの基礎を抑えてみてはいかがでしょう。
デザインの基礎までできたら、自分でサービスを開発するときや、コーディングをする際にもデザイン視点を持って開発をすすめることができます。もしくは、デザインまで一通り行うことで、エンジニアとしてのレベルも上がるのではないでしょうか?
ぜひ、デザインの基礎を抑えて、スキルアップを計ってくださいね。

「プログラミングはできるけどデザインって難しい」

マークアップ、フロントの学習を進めている方や、サーバーサイドはできるけど、サイトのデザインはそんなに得意ではない、そういう方っていらっしゃいますよね。
デザイン、コーディング両方得意という方はプロのWebデザイナーとして活躍されているかもしれません。ですが、そうではなくてもやはりデザインの基礎や、デザインをする必要がある機会に学習するつては必要ですよね。今回は、そんな、デザインを学びたい時に見て欲しい、デザイン関連のサイトを20サイト紹介していきます。

 

 

Webデザイン見本サイト

1.最新のWebデザインが集まったサイト「muuuuu.org」

スクリーンショット (47)

muuuuu.org

ムーオルグは、後発だからこそできる、魅力的、使いやすさの優れたサイトを掲載しています。非営利で運営していることもあり、偏りなく、オーソドックスに美しいサイトがまとまっています。
奇抜なデザインではないからこそ、サイトのデザインを学習する際や、デザインの参考にする際に利用しやすいことが特徴でしょう。

2.優れたデザインが豊富に掲載。完全招待制のまとめサイト「Dribbble」

スクリーンショット (48)

dribbble

こちらはサイトというよりは、グラフィック、イラストが多く集まるサイト。
グラフィックの参考に利用してみてはいかがでしょう。

3.Design Iketeru

スクリーンショット (49)

designiketeru

こちらは個人の方が運営されているサイト紹介サイト。
若干営利目的でもあるようで、洗練性はかけますが、種類は多く、テイスト、カテゴリ、カラーからサイトを探すことができるので、目的を持って探す方はおすすめです。

4.Pinterest

スクリーンショット (51)

pinterest

Pinterestは、アメリカで流行している画像共有サイトです。
ユーザーがお気に入りの画像をpinして、一覧で閲覧することができるので、参考にしたい画像、サイトやカテゴリ名などで検索するといいでしょう。
日本語で探すより、英語で探すことをおすすめします。

5.見出しのみ「フッターデザイン.com」

スクリーンショット (52)

 

フッターデザイン.com

Webサイトそのものではなく、フッターのデザインのみ集めたサイト。
ユニークなフッター、オーソドックスなフッターまで多様なフッターを見れるのは少しおもしろいですよ。

6.見出しデザイン.com

スクリーンショット (53)

見出しデザイン.com

こちらも部分的に見本となるサイトですね。ブログやメディアはもちろん、サイトの制作をする時には必須ですよね。
見出しってシンプルだけど、そのサイトのカラーがより濃く反映されるので参考を見てみるとよさそう。

7.ファビコンギャラリー.com

スクリーンショット (54)

ファビコンギャラリー.com

ファビコンをまとめたサイト。ファビコンを普通のロゴにすることも多いですが、工夫しようと思ったら参考を見てはどうでしょう。

8.ブブンデザインアーカイブ

スクリーンショット (55)

ブブンデザインアーカイブ

全ての「部分」を一挙に検索できるサイト。具体的にはヘッダー、フッター、アイコン、ファビコン、コンバージョン、見出し等です。
部分別にデザインを探すときに便利に使えそうですね。

9.Webデザインの見本帳

スクリーンショット (56)

Webデザインの見本帳

綺麗なデザインのサイトを紹介しているというより、多くのサイトを紹介しているというまとめサイト。
オーソドックス、堅めのデザインを探すときには使えるかも。

Webデザイン学習記事

10.ノンデザイナーこそ覚えておきたい!Webの配色パターン例まとめサイト!

color-01-01

Webサイト配色パターンまとめサイト

デザイナー以外がデザインをしなくてはいけない際や、基本的に覚えておきたい配色パターンを紹介している記事です。

11.配色・レイアウトの基礎が学べる厳選スライド集

topnon3

配色・レイアウトの基礎が学べる7個の厳選スライド

こちらも、配色、レイアウトの基本を学べる記事。
デザイナー以外でも基礎知識は持っておきたいですよね。

12.UI/UXが学べる神スライド7選

god-slides-01

UI/UXが学べる神スライド7選

UX(ユーザー経験)を高めるためにUI(ユーザーインターフェイス)の質を上げておきたいという内容や、UIとUXの関連について紹介された記事です。
魅力的なスライドが多く紹介されています。

Webデザイン学習スライド

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

スクリーンショット (57)

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

Webデザインの基礎について、かなり厚い情報を公開しているスライドです。
37万人に見られているスライドということで、その内容の濃さと信頼性が伺えますね。

14.これくらいはやってほしいWebデザイン

スクリーンショット (58)

これくらいはやってほしいWebデザイン

デザインのこだわり、技術などが洗練されていなくとも、最低限覚えておくべき内容を抑えておくと、こんなにきれいな、いい感じのデザインになるよ、というスライド。
たしかに、中で紹介されてる3点を抑えたら魅力的なデザインができそう。

情報発信系サイト

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

スクリーンショット (59)

Webクリエイターボックス

Webデザインを学習する人は必見のサイト。
コーダー、制作者など、学びたいときに学びたい情報が見つかるはず。

16.Webデザインレシピ

スクリーンショット (60)

Webデザインレシピ

こちらもWebクリエイターボックスと同様に定評のあるサイト。
基礎から発展まで、こちらは特にイラレなどの使い方を学ぶときに便利です。

17.Design Develop

スクリーンショット (61)

DesignDevelop

こちらもデザインの情報、ハウツーなどを紹介しているサイトですが、更新頻度も高く参考にしやすそう。

18.ウェビメモ

スクリーンショット (62)

ウェビメモ

フリーランスのWebデザイナーが運営しているデザインブログ。更新頻度は高くはないものの、季節によってデザインを変えていたり、質の高い記事が更新されていたりと定期でチェックしておきたいブログですね。

19.Webデザインクリップ

スクリーンショット (63)

Webデザインクリップ

クソバズ記事を何度も作成してるブログ。
更新は鈍っていますが、こちらのブログも定期でチェックしておくと良さそうですね。

20.MdN Design Interactive

スクリーンショット (64)

MdN DesignInteractive

デザイン、グラフィックの情報を発信しているメディア。
Webデザインはもちろん、グラフィック、ハードのデザインなども紹介しているので、デザインの視点を広めたい方におすすめです。

コーダー、エンジニアもデザインの基礎は抑えよう。

いかがでしょう。ブログ、メディア、サイト、記事を紹介しましたが、こちらを参考に、デザインの基礎を抑えてみてはいかがでしょう。
デザインの基礎までできたら、自分でサービスを開発するときや、コーディングをする際にもデザイン視点を持って開発をすすめることができます。もしくは、デザインまで一通り行うことで、エンジニアとしてのレベルも上がるのではないでしょうか?
ぜひ、デザインの基礎を抑えて、スキルアップを計ってくださいね。