ShunNote 
こんにちは。デザイナーのしゅん(@shun_webdesign)です。
皆さんはWeb制作やデザインを作る時にツールを使うことはありますか？
ボクがWebデザインの学習を始めた当初「画像探すの大変だなー」とか「コーディングのときにクラス名決められない」「配色どの色がいいのかな」って悩んだ末にお役立ちツールを見つけた時は「こんな便利なツールが世の中にはたくさんあるんだ」と感動した覚えがあります。
そうした気持ちから毎月ツール集の紹介記事を投稿しています。そんな悩みの解決に少しでもお役にたてたら幸いです。
それでは今月もお役立ちWebツールについてまとめさせていただきましたのでご覧ください。
関連記事
誰でも簡単操作で使えるWebデザインツール集【2020年8月】
Web制作をさらに便利にするツール集【2020年7月】
Web制作に役立つリンク、ツール集【2020年6月まとめ】
a11yresources
Webツールやお役立ちリンクをまとめたサイト。これ一つブックマークするだけでツールには困らないです。
https://a11yresources.webflow.io/
AI Image Enhancer
画像の色彩を自動で加工してくれるツール。AI搭載の画像エンハンサーが画像の品質を向上させます。
https://imglarger.com/Enhancer
Limus
スクリーンショットや画像を様々な角度に加工、編集できます。
画像の背景透過にも対応しており、ブラウザの画面をスクリーンショットしてウェブサイトの紹介等にも使えそうです。
codic
ネーミングツール。コーディングの際にクラス名を決めるのに便利です。 VScodeの拡張機能にも対応しています。
Ztext.js
文字を立体的に見せるJSライブラリ。
https://bennettfeely.com/ztext/
Beautiful CSS box-shadow examples
サービスやアプリのbox-shadowを使えるサイト。
80種類以上あってどれもクリックするだけでコピーできて貼り付けれます。
https://getcssscan.com/css-box-shadow-examples
Gradient Magic
ユニークなCSSグラデーションの無料ギャラリー。CSSコードをコピーするだけで手軽に使うことができて、カラフルなものからシンプルな背景まで数多く取り揃えています。
https://www.gradientmagic.com/
Iconscout Converter
画像変換ツール。下記画像の通り、SVGからPNG、JPG、PDFに変換などに対応しています。
フォトショやイラレなどが無くてもブラウザ上で変換することが可能です。
https://iconscout.com/converter/svg-to-png
Loaf
自由にアイコンをカスタマイズできるアイコンライブラリ。
3D Style Icons Pack by iconshock
3Dアイコンセット。
50個のアイコン、1080x1080px 1つのアイコン、4000x4000px 1つのカラーパレット 1つの視点のみ 透明なPNGファイル 個人使用のみ
https://www.iconshock.com/3d-icons/
iconhub
約100種類のアイコンをサイズや色、線の太さ等自由にカスタマイズができるアイコンセット。
Emblemicons
約1000種類あるアイコンからSVG,PNG,JPG,PDFでダウンロードすることが可能です。
Noun Project Photos
約300万種類のアイコンと画像の検索ができるサービス。
Marker Illustrations
個人または商用可能のフリーイラスト集。
https://usepastel.com/marker-illustrations
Pixeltrue
様々なタッチのフリーイラストがダウンロードできます。中に動くイラストもあり、クオリティが高いです。
https://www.pixeltrue.com/free-illustrations
MergeURL
最大5つまでリンクをまとめて短縮してくれるツール。
最後に
気になるお役立ちツールはありましたか？
ツールを使用するのはあくまでも手段の一つですので今後皆さんのお役にたてたら幸いです。
最後まで見ていただきありがとうございます。是非記事のシェアをよろしくお願いします。
