こんにちは。しもむら です。

 

最近はWeb制作会社でエンジニアとして働きながらWeb制作を個人でも受託しています

 

個人での受託をしていく中でクライアントさんから

 

「いいツールやサイトないですか?」

と聞かれることが多かったので

 

この記事ではデザイナーじゃない僕がデザインっぽいことをするときによく使うデザインツール/サイトをまとめてご紹介してみようと思います

 

なお、プログラミングやWebデザインしてきた独学した経験をTwitterブログYouTubeでも発信しています。

 

皆さんのクリエイティブにご活用ください。

 


まとめサイト


「良いデザインのサイトはないかな〜」という時に便利


Web制作でも参考サイトがあると制作しやすいです

 

pinterest

https://www.pinterest.jp/

 

SANKOU!

https://sankoudesign.com/sp/

メインビジュアルをみて気になるサイトを見つけていく

 

Parts. - SaaS/LPのパーツ別Webデザイン集

https://partsdesign.net/

パーツごとにデザインがまとまっているサイト


ランディングページ アーカイブ

https://rdlp.jp/lp-archive

業界ごとにランディングページを探せる


WebデザインClip

https://www.webdesignclip.com/

WordPressを使っているサイトなども絞り込み可能



画像素材サイト



画像素材サイトはたくさんありますが今回は7個だけ。


無料の素材サイトもありますが有料の方がおすすめです


ありきたり感が排除できます


O-DAN

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

無料の素材をいろんなサイトを横断して探せる


Freepik

https://jp.freepik.com/home

外国風の画像多め


stories by Freepik

https://stories.freepik.com/

ベクター画像。色も変えられる


ソコスト

https://soco-st.com/

シンプルなイラスト素材集。


Shutterstock

https://www.shutterstock.com/ja/


PIXTA

https://pixta.jp/

日本人多め


Adobe Stock

https://stock.adobe.com/jp/

日本人多め



画像加工

remove.bg

https://www.remove.bg/ja

画像の背景を簡単に削除できます!


JPEGmini

https://www.jpegmini.com/

重たいサイトでは重たい画像が使われていることが多いです

画像を劣化させずに容量を小さくするときに便利。




あまりいろんな色を入れすぎると見にくいサイトになります。


ベースとなる色を決めたらその他の色を選んでくれるサイト


カラーホイール

https://color.adobe.com/ja/create/color-wheel


colorhunt

https://colorhunt.co/


flatuicolors

https://flatuicolors.com/



デザインツール


Webサイトの制作でよく使うツール


Adobe

https://www.adobe.com/

Adobeは説明不要ですよね。

イラレやフォトショなどは機能が多すぎるので最初はXDから入るのが良いかなと


Figma

http://figma.com/

Webサイトのワイヤーフレームを作ったりデザインを作ったりするときに便利。

リンクで共有も簡単


canva

https://www.canva.com/ja_jp/

Photoshopやillustratorなどは非デザイナーでは難易度が高いです。


デザインを簡単に作りたい場合はCanvaがおすすめ


テンプレートを選べばそれっぽいバナーが簡単に作れます




便利なツール


skitch

https://evernote.com/intl/jp/products/skitch

ちょっとした矢印とか説明をするときに便利です。


Digital Color Meter (Mac)

この色のカラーコードが知りたいときにはこれを使うのは便利。


Kap

https://getkap.co/

GIFを取るときに便利。



CSS/JS

CSSやJavaScriptのアニメーションやデザインなどに役立つサイト集


fontawesome

https://fontawesome.com/

アイコン集ハンバーガーメニューやアイコンが簡単に使える


CodePen

https://codepen.io/trending


CSS Design Awards

https://www.cssdesignawards.com/


Animate.css

https://animate.style/

CSSだけで簡単にアニメーションの実装が出来る



フォント

フォントを変えるだけでコンバージョンが上がったなどの例もあります


Google Fonts

https://fonts.google.com/


Adobe Fonts

https://fonts.adobe.com/


WhatTheFont

https://www.myfonts.com/WhatTheFont


画像からそのフォントがわかるやつ

ディベロッパーツールなどからみることもできるのですが画像の場合はわから無いですよね。



ノーコードでWebサイトが作れるツール



Webサイトを作るためにはプログラミングが必要と思うかもですがコーディングなしで作ることもできます


ただ、便利ですが機械的に作るのでSEOに弱かったりカスタマイズがしにくい部分があるのでしっかり作りたいなら制作会社に任せましょう



Googleサイト

https://sites.google.com/


ペライチ

https://peraichi.com/


Wix

https://ja.wix.com/


STUDIO

https://studio.design/ja


webflow

https://webflow.com/dashboard

ノーコードツールというかデザインツールかもしれないですが、デザインをしたらそのままサイトになって公開できるツールです。


高度なアニメーションとかも実装できます


使ってみたのですが、AirPodsみたいサイトが作れました

https://twitter.com/shimo_tmk/status/1263043609898569729



anima

https://www.animaapp.com/

XDやFigmaなどのデザインツールから自動でコーディングしてくれるツール


僕も使ってみましたがスゴいなと感じました。





WordPress



世界で一番使われているCMS

この記事を書いている私もWordPressを使ったサイト制作を得意としています


Avada

https://avada.theme-fusion.com/


Diver

https://tan-taka.com/diver/


SANGO

https://saruwakakun.design/


snow-monkey

https://snow-monkey.2inc.org/


WordPressはもっと書きたいものもあるのですがこの辺りにしておきます


WordPressテーマは好みなので好きなテーマがあればそれを使うのが良いと思います



音楽


YouTube オーディオ ライブラリ

YouTube Studioから入手できる


NoCopyrightSounds 

https://www.youtube.com/NoCopyrightSounds


evokemusic

https://evokemusic.ai/ja

AIが勝手に曲を作ってくれる


Epidemic Sound

https://epidemicsound.jp/


artlist

https://artlist.io/jp/


envato market

https://themeforest.net/


もう全部!



終わりに

最後まで読んでいただきありがとうございました。


デザインだけでなくコーディングなどの関連したツールも混じってしまいましたがいかがでしたでしょうか。


記事を書き始めたときはそんなに長くならないだろうなと思っていたのですが、書けば書くほど「これも便利だな、これも便利」といった感じで長くなってしましました


少しでも皆さんのお役に立てば幸いです


記事は以上となります。


なお、この記事を書いた僕はWeb制作から集客などをやっておりますので、気になる方は下記TwitterからDMください。

https://twitter.com/shimo_tmk