Web制作をする上で入れておいた方がいいWebツールを知りたいわ、、
そんな方のために入れておくべき無料のWebツールを紹介します！
この記事で得られることは次の通りです。
・Webツールが何かがわかる
・Webデザイン業務で使えるツールがわかる
・Web全般に関わる業務の効率化ができる
こんにちは！ががりんです！
実際に日々の業務で役立つ、ツールを紹介していきたいと思います！
あまりWebツールという言い方はしないのですが、今回はブラウザで動くツールをWebツールと言いたいと思います。
１：デザインに役立つツール
MUUUUU.ORG
よくチェックしているWebデザイン参考まとめサイトで、最新の縦長サイトをチェックすることができます。
また、参考まとめサイトにはLP特化やバナー特化などもあるので、その時自分が参考にしたいサイトを探してブックマークしておきましょう。
Color Space
使いたい色を1色選ぶことでそれに合った色の組み合わせを作成してくれるツールです。
どういった色が合うのか見て確かめたい人におすすめのツールです。
2：コーディングに役立つツール
TinyPNG
大きい画像を圧縮するツールです。
画像サイズが必要以上に大きいとサイト表示の遅延、Googleから評価低下の恐れもあります。
圧縮率を設定しなくても適正な圧縮をかけてくれることろがポイントです。
css2sass
CSSをSassかScssに変換してくれるサービスです。
変換したいCSS を左側のフォームに入力して、真ん中の矢印ボタンからSASSかSCSSをクリックすることで、右側のフォームへ簡単に変換することができます。
サイトを既にあるサイトを改修する際に変換することで更新等しやすくなります。
Snazzy Maps
Google Mapを埋め込む際にサイトに合わせたデザインに変更できるツールです。
デザインを選ぶとそのCSSが表示されますので、そちらを使用してデザインを変更が可能です。
動くWebデザインアイディア帳
再現したい動きからソースを探すことができるツールです。
非常に分かりやすいサイトで動きをつけるのが苦手な人でも使いやすいツールになっています。
Google Fonts
Googleが提供しているWebフォントです。
日本語は少ないのですが、英語フォントは豊富なので英語や数字には積極的に利用したいところです。
日本語フォントはGoogleがまとめているページがありますので、こちらを参考いただくと分かりやすいかと思います。
Google Fonts + 日本語
【まとめ】
以上WebデザイナーにおすすめのWebツール紹介でした。
便利なWebツールを活用して効率的にサイト制作を行いましょう！
少しでも参考になったと思ったらシェアしてもらえると嬉しいです！
記事のリンクも大歓迎だよ。
