デザインっぽいことをする時に使うWebデザインツール/サイト45個
- 下村 智毅
- 記事制作日2020年11月28日
- 更新日2020年11月28日
- 1いいね!
こんにちは。しもむら です。
最近はWeb制作会社でエンジニアとして働きながらWeb制作を個人でも受託しています
個人での受託をしていく中でクライアントさんから
「いいツールやサイトないですか?」
と聞かれることが多かったので
この記事ではデザイナーじゃない僕がデザインっぽいことをするときによく使うデザインツール/サイトをまとめてご紹介してみようと思います
なお、プログラミングやWebデザインしてきた独学した経験をTwitterやブログ、YouTubeでも発信しています。
皆さんのクリエイティブにご活用ください。
まとめサイト

「良いデザインのサイトはないかな〜」という時に便利
Web制作でも参考サイトがあると制作しやすいです
SANKOU!
メインビジュアルをみて気になるサイトを見つけていく
Parts. - SaaS/LPのパーツ別Webデザイン集
パーツごとにデザインがまとまっているサイト
ランディングページ アーカイブ
業界ごとにランディングページを探せる
WebデザインClip
https://www.webdesignclip.com/
WordPressを使っているサイトなども絞り込み可能
画像素材サイト

画像素材サイトはたくさんありますが今回は7個だけ。
無料の素材サイトもありますが有料の方がおすすめです
ありきたり感が排除できます
O-DAN
無料の素材をいろんなサイトを横断して探せる
Freepik
外国風の画像多め
stories by Freepik
ベクター画像。色も変えられる
ソコスト
シンプルなイラスト素材集。
Shutterstock
https://www.shutterstock.com/ja/
PIXTA
日本人多め
Adobe Stock
日本人多め
画像加工
remove.bg
画像の背景を簡単に削除できます!
JPEGmini
重たいサイトでは重たい画像が使われていることが多いです
画像を劣化させずに容量を小さくするときに便利。
色

あまりいろんな色を入れすぎると見にくいサイトになります。
ベースとなる色を決めたらその他の色を選んでくれるサイト
カラーホイール
https://color.adobe.com/ja/create/color-wheel
colorhunt
flatuicolors
デザインツール
Webサイトの制作でよく使うツール
Adobe
Adobeは説明不要ですよね。
イラレやフォトショなどは機能が多すぎるので最初はXDから入るのが良いかなと
Figma
Webサイトのワイヤーフレームを作ったりデザインを作ったりするときに便利。
リンクで共有も簡単
canva
Photoshopやillustratorなどは非デザイナーでは難易度が高いです。
デザインを簡単に作りたい場合はCanvaがおすすめ
テンプレートを選べばそれっぽいバナーが簡単に作れます
便利なツール

skitch
https://evernote.com/intl/jp/products/skitch
ちょっとした矢印とか説明をするときに便利です。
Digital Color Meter (Mac)
この色のカラーコードが知りたいときにはこれを使うのは便利。
Kap
GIFを取るときに便利。
CSS/JS
CSSやJavaScriptのアニメーションやデザインなどに役立つサイト集
fontawesome
アイコン集ハンバーガーメニューやアイコンが簡単に使える
CodePen
CSS Design Awards
https://www.cssdesignawards.com/
Animate.css
CSSだけで簡単にアニメーションの実装が出来る
フォント
フォントを変えるだけでコンバージョンが上がったなどの例もあります
Google Fonts
Adobe Fonts
WhatTheFont
https://www.myfonts.com/WhatTheFont
画像からそのフォントがわかるやつ
ディベロッパーツールなどからみることもできるのですが画像の場合はわから無いですよね。
ノーコードでWebサイトが作れるツール

Webサイトを作るためにはプログラミングが必要と思うかもですがコーディングなしで作ることもできます
ただ、便利ですが機械的に作るのでSEOに弱かったりカスタマイズがしにくい部分があるのでしっかり作りたいなら制作会社に任せましょう
Googleサイト
ペライチ
Wix
STUDIO
webflow
ノーコードツールというかデザインツールかもしれないですが、デザインをしたらそのままサイトになって公開できるツールです。
高度なアニメーションとかも実装できます
使ってみたのですが、AirPodsみたいサイトが作れました
https://twitter.com/shimo_tmk/status/1263043609898569729
anima
XDやFigmaなどのデザインツールから自動でコーディングしてくれるツール
僕も使ってみましたがスゴいなと感じました。
WordPress

世界で一番使われているCMS
この記事を書いている私もWordPressを使ったサイト制作を得意としています
Avada
https://avada.theme-fusion.com/
Diver
SANGO
snow-monkey
WordPressはもっと書きたいものもあるのですがこの辺りにしておきます
WordPressテーマは好みなので好きなテーマがあればそれを使うのが良いと思います
音楽
YouTube オーディオ ライブラリ
YouTube Studioから入手できる
NoCopyrightSounds
https://www.youtube.com/NoCopyrightSounds
evokemusic
AIが勝手に曲を作ってくれる
Epidemic Sound
artlist
envato market
もう全部!
終わりに
最後まで読んでいただきありがとうございました。
デザインだけでなくコーディングなどの関連したツールも混じってしまいましたがいかがでしたでしょうか。
記事を書き始めたときはそんなに長くならないだろうなと思っていたのですが、書けば書くほど「これも便利だな、これも便利」といった感じで長くなってしましました
少しでも皆さんのお役に立てば幸いです
記事は以上となります。
なお、この記事を書いた僕はWeb制作から集客などをやっておりますので、気になる方は下記TwitterからDMください。
- この記事にいいね!する
この記事を書いた人
- 1いいね!
稼働ステータス
◎現在対応可能
- 下村 智毅
職種
エンジニア
プログラマー
希望時給単価
3,000円~5,000円
プロフィールをご覧いただきありがとうございます。神奈川県でWebs制作会社でエンジニアとして活動しております 個人でもサイト制作を請け負っています 制作実績 https://shimotmk.com/performance/ Webサイトを読む読者の方を思ったWebサイト設計をしますので、よろしくお願い致します。
スキル
WEBサイト設計
PHP
SEO
・・・(登録スキル数:9)
スキル
WEBサイト設計
PHP
SEO
・・・(登録スキル数:9)