無料で使えるWebデザインのお役立ちツール8個をまとめました

Webデザインをやっている中で、新たな便利ツールを発見するとワクワクした気持ちになりますよね。

制作の仕方は人それぞれだと思いますが、今回は参考までに私が使っていて便利だな～と思ったツールをとりあえず8個まとめてみました（しかも無料で使えます！）

他にもこれはデザインする時に便利だよ！というおすすめツールがあれば教えてください(^o^)

無料で使えるWebデザインのお役立ちツール8個

Evernote

普段様々な目的で使っている方も多いと思いますが、EvernoteはWebデザインをする上でも非常に役に立つ優れモノです！

画像やテキストやコードをそのままペタッと貼り付けられる上、タグで細かくノートを分類できるからです。

↓具体的にはこんな使い方ができます

「デザイン」「WordPress」「SEO」などタグ付けしておけば後から探しやすいですし、自分専用の辞書として活躍してくれます。

iLoveIMG

Webサイトを作る時は、できる限りページの読み込み速度を速くすることが大事になってきます。

読み込み速度の遅いページは訪れた人の離脱率が高くなってしまうだけでなく、SEO評価も低くなってしまうからです。

ではどうやってページを軽くすれば良いかいうと、基本的なのは画像を圧縮して軽くすることです。

圧縮サイトは色々あるのですが、1番有名なのは iLoveIMG ではないでしょうか。

複数の画像を一括で圧縮してくれたり、サイズを変更できたり、PNGなどの様々な保存形式の画像をJPGファイルに変換してくれる優れものです。

Webデザインをする方なら、お世話になる機会も多いと思います。

WordPressの場合は EWWW Image Optimizer というプラグインを入れておけば、画像をアップロードしただけで自動的に圧縮してくれます！

詳しくはこちらの記事で紹介しているので、WordPressをお使いの方はぜひ。

CodePen

ブラウザ上でササっと使えるエディター。

ちょっとしたボタンやパーツを作ったり、一部分のレイアウトを組んだりする時、検証ツールで作るのは大変だけど、でもいちいちエディターとファイルを開くのがめんどくさい・・・(´・ω・`)というめんどくさがり屋の私はよくCodePenにお世話になってます。

右にHTMLやCSSを書き込んだら、左の画面にすぐ反映されますし、画面幅を狭くすればそのままレスポンシブの確認もできます。

しかもAtomのEmmetと同じような機能が使えるので、速くコーディングすることもできます。保存して取っておくこともできます。便利すぎる・・・

Font Awesome

これは超便利です！Webアイコンフォントを使用できるサービスです。

Webアイコンフォントは、文字と同じように使用できるアイコンです。

画像ではないので重くなりませんし、拡大縮小しても綺麗に表示されるのがとっても便利。

↓このように色々な種類があります！猫のアイコンもありました🐈

使い方もそんなに難しくありません。

無料会員登録をしたら、『Kit』というコードが表示されているので、headタグ内に貼り付ければ準備完了です。

Kitはこんな感じのコードです。〇〇〇のところに自分の会員IDというか、個別番号が入ります。

<script src="https://kit.fontawesome.com/〇〇〇.js" crossorigin="anonymous"></script>

（昔は会員登録しなくても使えたので、ここが少し複雑になりました）

後はIcon一覧から使いたいアイコンを探して、iタグをコピペして使いたい場所に貼り付けるだけ。

これだったら上部に表示されている『i class=”fas fa-cat”』のところをクリックするだけでコピーできます。

色や大きさはCSSで調整して使いましょう。

アニメーションをつけて回転させたりバウンドさせたりもできるんですが、説明したら長くなるので割愛します。

Color Hunt

よく、絵が上手かったりセンスが良くないとWebデザイナーになれないと思っている方が居るのですが、絵が上手くなくても大丈夫です。

その証拠に私の絵心は小学生の落書きレベルですｗｗ

もちろんイラストが描けるデザイナーさんは他の人と差別化できますし、有利なスキルであることは間違いないのですが、必須スキルではありません。

Webデザインで大事なのは配色センスの方だったりします。

つまり配色の調和が取れていて、スッキリ整っていればそれなりに見えることも多いのですね。

とは言え初心者が感覚で色を選ぶと失敗しやすいので、最初のうちは配色ツールを使うのが安全です。

配色ツールは色々あるのですが、このColor Huntはバリエーションが豊富なのできっとイメージに合う配色が見つかるはずです。

Colormind

すごく便利な配色ツールを見つけました！！

色を選ぶと、人工知能が調和の取れた色を自動的に選んで提案してくれるというめちゃくちゃ賢いヤツです。

それだけでなく、アップロードした画像から自動的に色を抽出してカラーパレットを作る、なんてこともできてしまいます。便利ですね！

GradPad

簡単にグラデーションが作れる超便利なやつです！！

しかも作ったグラデーションのCSSをコピペしてすぐに使うことができます。

（そして左下のハシゴを登ってくるおっさんが可愛い）

左右の白い丸を動かしたり、増やすこともできるので、グラデーションの角度や色合いを直感的に調整することもできます。

グラデーションの背景やボタンも流行っているので、使う機会も多いかもしれません🙂

W3Cのバリデーションサービス

最後にすごーく定番なやつなので使っている方も多いと思いますが、W3C（Web技術の標準化を行う非営利団体）により提供されている、バリデーションを無料で行ってくれるサイトです。

バリデーションというのは、HTMLやCSSの文法にミスがないか自動的にチェックしてくれる機能のことを言います。

人間だからどうしてもミスはしてしまうものなので、全部コードを書き終わったらこれで確認するようにすると、綺麗なコードに仕上げることができます。

無料のツールを使えば快適にWebデザインができます！

以上、無料で使えるWebデザインのお役立ちツール8個を紹介させて頂きました。

無料で公開されているサービスはここで紹介した以外にもまだまだたくさんあるし、どんどん新しいサービスが生まれています。

ググれば必ずと言っていいほど自分の求めている便利ツールが見つかるのが、Webデザインのすごいところだなぁと思います。

なので、ぜひ自分にぴったりのツールを探してみて下さいね！