無料で利用できる便利なデザイン関連サイト-まとめ-

Web Design

ここでは、これからブログやアプリ作成で始めてデザインに触れる方に、「無料で利用できる便利なサイト」をまとめています。

この記事の対象

  • 参考になるサイトを知りたい方
  • 無料で利用できるサイトを知りたい方
  • これから副業等でデザインについて知りたい方
スポンサーリンク
スポンサーリンク

Webデザイン全般

サルワカ

https://saruwakakun.com/ より

サルワカ」はWeb design全般について初心者向けにHTML~デザインツールの使用方法まで広くまとめられているサイトです。

個人的には「初心者向け「デザイン」の基本とコツ」の記事を何度も読んで参考にさせてもらっています。

Web Design Trends

https://webdesign-trends.net/ より

Web Design Trends」は最新デザインのまとめ記事や初心者向けの最新デザインツールのまとめ記事など知っておくと良いことを吸収できるサイトです。

更新頻度も比較的高いのでトレンドのキャッチアップに最適なサイトです。

SeleQt

https://www.seleqt.net/ より

SeleQt」はデザインだけではなく、プログラミング、マーケティング、知っておくと便利なIT系にまつわる内容を取り扱っているサイトです。

「Web Design Trends」同様、こちらも最新情報のキャッチアップにもってこいのサイトです。

画像

O-DAN

https://o-dan.net/ja/ より

O-DAN」は複数サイトを横断して、無料で使用できる画像を検索できるサイトです。

弊ブログの画像でも使用させていただいており、フリー画像に困ったときに便利なサイトです。

photo AC

https://www.photo-ac.com/ より

photo AC」は無料で使用できる画像まとめサイトです。人物画像が豊富な上、加工や商用利用が可能です。

人物画像を探す場合は、このサイトがおすすめです。

アイコン

FLAT ICON DESIGN

http://flat-icon-design.com/ より

FLAT ICON DESIGN」はフラットデザインのアイコン素材が豊富なサイトです。UIで使用したい方には便利なサイトです。

個人的にはパワポなどの資料作成時に使用しています。

ヒューマンピクトグラム2.0

https://pictogram2.com/ より

ヒューマンピクトグラム2.0」はピクトグラムが集められているサイトです。どれも商用利用可能なのでおすすめです。

面白いピクトグラムが多く、斬新なものも豊富で魅力的です。

Icons – Google Fonts

https://fonts.google.com/icons?selected=Material+Icons より

Icons – Google Fonts」はGoogleのデザインチームが作成しているマテリアルデザインのアイコンを集めたサイトです。

個人的には、こちらもUIだけではなく資料作成時に使用しています。

ICOOON MONO

https://icooon-mono.com/ より

ICOOON MONO」は商用利用可能なモノトーンのアイコンが集められているサイトです。

シンプルなデザインが多く、「FLAT ICON DESIGN」と使い分けるのがおすすめです。

イラスト

unDraw

https://undraw.co/illustrations より

unDraw」はオシャレなデザインのイラスト素材を集めたサイトです。

個人的にはアイキャッチなどに使用しています。

HTMLカラーコード

https://html-color-codes.info/japanese/ より

HTMLカラーコード」はカラーコードを簡単に調べられるサイトです。

色からカラーコードを調べたいときに便利なサイトです。

SCHEM COLOR

https://www.schemecolor.com/ より

SCHEM COLOR」はカラーの組み合わせを紹介しているサイトです。

WEBデザイン、アプリUIなどでの色の組み合わせで迷ったときに参考にすると良いです。

UI参考サイト

マネるデザイン研究所

https://maneru-design-lab.net/ より

マネるデザイン研究所」はマネてデザインを勉強することに重きを置いている参考サイトです。

色使いや画像の使用方法の参考になります。

おすすめの書籍

これからWEBデザインに挑戦される方で一冊は手元に置いておくと役立つ書籍を紹介しています。

・動くWebデザインアイディア帳

「動くWebデザインアイディア帳」は基本的な動きを学べるデザイン帳です。jQueryとCSSでのコードが紹介されているのでそのまま転記して利用できます。辞書的な位置付けとして持っていると便利です。

サイトも便利なのでおすすめです。

・動くWebデザインアイディア帳 実践編

「動くWebデザインアイディア帳 実践編」は「動くWebデザインアイディア帳」の応用編です。サンプルサイトを基に動きを紹介しているので、取り入れる際のイメージがわくのでおすすめです。

・1冊ですべて身につくHTML & CSSとWebデザイン入門講座

「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は基本的なことを学ぶのに適した一冊です。「Webデザインとは」から実践的なところも吸収できるのでおすすめです。

タイトルとURLをコピーしました