【Webデザイナー必見】インスピレーションやデザインの学習にオススメなサイト19選

プログラミング学習

公開日 : 2019年11月14日 | [更新日] 2023年06月01日

これからデザイナー、フロントエンドエンジニアを目指す方必見！(もちろんすでにデザイナ、フロントエンドエンジニアの方も)

デザインする上でのインスペレーションや、Web上での実装方法、注意点、お役立ちTipsなどなど。

デザインに関する情報を発信しているメディア、個人ブログをまとめました。

自分の興味関心にあったメディアを見つけてみてください。

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

Webクリエイターボックスは、デザイン系の情報の発信とデザイン系のツイートをまとめた記事を紹介してくれています。

デザイン系の記事では、CSSでの表の作り方や、デザインを学ぶ人にオススメの本を紹介してくれています。

デザイン関連のツイートをまとめた記事では最新の動向を知ることができるので要チェックです。

サイトURL: https://www.webcreatorbox.com/

2.PhotoshopVIP

PhotoshopVIPでは、Photoshopに関することはもちろんのこと、フォントや、デザイン関連のフリー素材に関しての記事を紹介しています。

Photoshopに関する記事では、Photoshopの使い方といった基礎的な内容から、最近導入されたPhotoshopの新機能をまとめた記事が紹介されています。

デザインのインスピレーションをまとめた記事もあるので、デザイナーでアイデアに詰まった時も効果的に活用することができます。

サイトURL: http://photoshopvip.net/

3.LIG

LIGはWeb制作会社で、そのほかにもメディア事業やコワーキング事業、ゲストハウス事業など様々な事業を行なってる会社です。

メディア事業では、実際に働く人が面白おかしく紹介していて、社員の方が体をはって紹介してくれています。

実際の失敗も紹介してくれているので、とても好感をもってしまいます。

サイトの見せ方や、メディアの運営自体がかなりデザインされているので、メディアの記事の中身はもちろんのこと、サイトを認知してもらうためのデザイン(ブランディング)はとても勉強になります。

サイトURL: https://liginc.co.jp/

4.ferret

ferretでは、マーケティングに関する記事を紹介しています。

マーケティング界隈ではとても有名なサイトです。

Webのデザインというよりは、サイトの魅力をライティングや表現の仕方でどう伝えるかといった領域のデザインに関して紹介してくれています。

サイトURL: https://ferret-plus.com/

5.Arch

ユーザーの視点でどのようなUI/UXにすべきかという指南記事がたくさん掲載されています。

UI/UXを考える時の注意点や、実行した内容の具体例など、実践前の準備情報から、実践する際の参考記事としても利用できます。

UI/UXはこうしていくべきだといった独自の意見を述べる記事もあり、タメになる記事ばかりです。

サイトURL: http://www.ar-ch.org/

6.コムテブログ

コムテブログでは、WebデザインやWeb制作に関する記事を紹介しています。

デザインに関する記事では、CSSやJQueryに関する記事が紹介されています。

そのほかにもフォントに関しての記事や、Webデザインについても執筆されていて、どの記事もとても参考になります。

サイトURL: https://commte.net/

7.NxWorld

NxWorldでは、デザインギャラリーの記事はもちろんのこと、Web、イラストなどのデザインを行う上で気をつけるべきことや、オススメの魅せ方を紹介してくれています。

Web上でCSSを用いてどのように実装するかの記事も数多くストックされているので、フロントエンドエンジニアの方にオススメのメディアです。

サイトURL: https://www.nxworld.net/

8.creive

creiveでは、Webデザイン、プログラミング、マーケティング、Webサービスといった情報を発信しています。

Webサービスの記事が多かったりしますが、過去記事では、デザインに関する記事がストックされています。

デザインの情報を得たい人はもちろんのこと、何かデザインに関するインスピレーションを得たい人にオススメです。

サイトURL: https://creive.me/

9.Coliss

Colissでは、ライティング、デザイン、CSS、Javascript、SEOなど、Web周りに関して幅広く記事が掲載されています。

更新頻度が高く、その時のトレンドを紹介してくれています。

Webデザインに関しても、手書きのイラストの方のデザインに関しても紹介されており、デザインというくくりで幅広く興味がある人にオススメです。

サイトURL: https://coliss.com/

10.かちびと.net

かちびと.netはWebエンジニア向けにWordpressやCSS、Javascriptなどの情報を発信しているメディアになります。

筆者自身がWordpress(CMS)やJavascript、CSSを使って便利なサービスを作り、どうやってそれを実現したのかをソースコードと共に紹介してくれています。

そのほかにも、今トレンドのサービスや、便利なサービスを紹介してくれています。

サイトURL: http://kachibito.net

11.to-R

株式会社トゥーアールが運営するto-Rのメディアです。

株式会社トゥーアールではフロントエンドに特化したWeb制作を行なっており、制作時のポイントを記事にまとめてくれています。

特にJavaScriptやCSS、React/Angularまわりの情報を提供しています。

〇〇なエラーが出た時の対処法、〇〇を作りたい時はこうするといった事例をもとに紹介されているので、Webデザイナーやフロントエンドエンジニアとして働く人にとてもオススメのメディアです。

サイトURL: https://blog.webcreativepark.net/

12.Stocker.jp

Stocker.jpでは、Web技術やWebデザイン、ライフハックに関しての記事を紹介してくれています。

月ごとにWeb関連の動きを紹介してくれています。

Webデザイン/UI、Wordpress、プログラミングなど、カテゴリーごとにその月の動きを紹介してくれています。

最新の動向を抑えるならStockers.jpです。

サイトURL: https://stocker.jp/diary/

13.Webpark

Web制作をするにあたって、見た目の部分をどのようにデザインするかについての具体的な記事が紹介されています。

CSSやjQuery の技術を使ってどのようにデザインすることができるか事例ごとに紹介されています。

サイトURL: http://weboook.blog22.fc2.com/

14.ランディングページ集めました

様々なサイトのランディングページがまとめられたメディアです。

デザインのインスピレーションが欲しい時や、どのようなデザインの傾向が多いのかなど。

自分がランディングページのデザインを任された時に参考になるランディングページがきっとみつかるはずです。

サイトURL: http://lp-web.com/

似たようなサイトには以下もあるのでぜひこちらもチェックしてください。

https://www.ikesai.com/
http://muuuuu.org/
https://io3000.com/
https://onepagelove.com/
https://www.webdesignclip.com/

15.バズ部

バズ部では、コンテンツマーケという視点で数多くの記事が紹介されています。

どのようにユーザーに訴求することでより多くの人に見てもらうことができるのかといった少し上流のデザインの部分の記事がメインになります。

売れる、見られるといった視点でのデザインに興味がある方にとてもオススメです。

サイトURL: https://bazubu.com/

16.DesignWalker

Webクリエイターとして働くカワチヤスカズさんのブログ。

自らもWebクリエイターとして働く中で実践したことや、最新のデザインのトレンド、デザインに関する具体的な実行方法などなど、様々な記事が紹介されています。

デザインのことだけでなく、ブログを運営していく中でのノウハウや、自身がアメリカにいることから、アメリカ関連の記事も多いです！

海外で働くことに興味がある方にもオススメです。

サイトURL: http://www.designwalker.com/

17.HTMLクイックリファレンス

HTMLとCSSのタグがカテゴリー別でまとめられているサイトになります。

サイトを作る上で、HTMLとCSSでのマークアップが必要とされるのですが、タグが多いため、時には忘れてしまうこともあると思います。

そんな時にオススメなのがHTMLクイックリファレンスです。

困った時には、このサイトを辞書代わりにして検索すればすぐに解決できるでしょう。

サイトURL: http://www.htmq.com/

18.UX MILK

UXに関する最新の動向がまとめられた記事になります。

サイトやプロダクトをユーザー体験という視点にたって、施策や注意点を紹介してくれるメディアになります。

ほぼ毎日記事が更新されているので、毎朝牛乳(ミルク)を飲むように、習慣化して読むと知識として蓄積できます。

サイトURL: https://uxmilk.jp/

19.Design Develop

Design Developでは、デザインを開発するという視点で情報発信をされているメディアになります。

Webで使えるフリーフォントやInstagramで使える無料のテンプレートなど、Web、アプリ問わず様々な媒体で活用できるデザインTipsを紹介されています。

特にWebのデザインに従事している方にオススメのメディアになります。

サイトURL: https://design-develop.net/

まとめ

今回は、デザイナーやフロントエンドエンジニアの方にオススメなメディアをまとめました。

全部で19個紹介しましたが、いかがでしたでしょうか。

どれも勉強になる情報を発信してくれてるので、気になるメディアをブックマークして定期的に見ることをオススメします。

もし、今回紹介できていないメディアがありましたら、@codeleran_jpまで気軽にご連絡いただけると嬉しいです！

【商用利用可・無料】おすすめフリーアイコン素材サイト20選