【無料で使える】WEB開発に役にたつツールやサイト

無料で使えてWEB開発に役にたつツールやサイトを紹介したいと思います。

coolors

Coolors - The super fast color palettes generator!

配色を決める際に参考になるサイトを紹介します。
それは、coolorsというサイトです。
coolorsは5色の配色を自動で作成してくれます。
システム画面に色を使いすぎたり、メインの色が原色だと結構見づらくなってしまいます。
このサイトを使って、色合いを確認してからシステム画面を作ってみると
見た目のよいシステムになると思います。
またこちらのサイトはユーザー登録等なしでも使用できますので、お勧めです。

Font Awesome

Font Awesome

アイコンやロゴ・イラスト素材を探せるサイトを紹介します。
こちらのサイトは、全てフリー素材でを使っていくのがいいと思います。
ただし、いかにもフリー素材ぽいものを使ってしまったり、
サイト全体の配色に合わないものを使ってしまうと、
一気にダサいサイトになってしまうので、このあたりも考慮した
イイ感じの素材を提供してくれるサイトを紹介していきます。

まずアイコンで紹介していきたいのは、Font Awesomeというサービスです。
Font Awesome は無料で使えるアイコンが紹介されているのですが、
Font Awesome の最大の特徴はアイコン をすべて文字として扱えるということです。
例えば実際にFont Awesomeを使ってみるとまずこのように
Font Awesome のアイコンを画面上に表示させてみます。
このアイコンは、文字として扱うことができるので、
CSS で簡単にサイズや色を変更することができます。
簡単な CSS で柔軟にアイコンのデザインを変更することができるので非常に便利です。

Storyset

Storyset | Customize, animate and download illustration for free

次に、イラスト系の素材で紹介したいのはStorysetというサイトです
このストーリーセットではビジネスや パワポの資料に使えそうなイラスト
がとても多く紹介されていることが特徴です
色も変更することができるのでメインカラーに合わせたものを作成することができます

Unsplash

People | Unsplash

次に写真素材のサイトで紹介したいのは
Unsplashというサイトです。
Unsplashでは無料とは思えないぐらい
クオリティーが高い写真素材が提供されています。
綺麗な画像を使うとサイトの見栄えが一気に変わるので写真素材を探す場合には、ぜひ一度使ってみてください

codic

codic - プログラマーのためのネーミング辞書

次にネーミング辞書codicを紹介します。
開発をしている際には変数やメソッドなどの命名を多く行うと思います。
その命名が、しっくりこないなと思った時に使ってほしいのが、
こちらのサービスです。
日本語を入力すると、自動で命名を作成してくれます。
また、「snake case」や「camel case」ケースといった規則にも対応していますので、
自動生成されたネーミングをそのまま使用することも可能です。

Responsive Viewer

Responsive Viewer

ここからはchromeの拡張機能を紹介していきます。

最初に紹介するのは、Responsive Viewerというツールです。
パソコンで表示するときれいに表示されているんですが、
スマホで表示させると表示が崩れてしまうサイトとかを見たことがあると思います。
これは、マルチスクリーンに対応できていないためですが、
これを簡単に確認できるツールがResponsive Viewerというツールです。
このツールを使えば、マルチスクリーンを確認したい画面を開いて、
ボタンをクリックするだけで簡単に様々な画面の表示を確認することができます。
マルチスクリーンの確認をする際にはぜひ一度使ってみてください

PageSpeed insite

PageSpeed Insights

続いて画面の表示速度をチェックしてくれるツールを紹介します。
それがPageSpeed insiteというツールです
これは Google が提供しているサービスで、
チェックしたい URL を入力すると解析が始まり、
表示速度に関するスコアや改善点を指摘してくれるというツールになります。
これを活用することで自分では気がつかなかった表示速度の課題を
発見して、ユーザビリティを上げることができます。

Light house

Lighthouse によるウェブアプリの監査  |  Tools for Web Developers  |  Google Developers

続いてLight houseというツールです。

こちらは、検索エンジン対策（SEO）の観点でサイトを
チェックしてくれるツールです。
Google が提供している Chrome のアドオンになります。

解析したいサイトを開いた状態でアドオンを実行すると解析が始まります。解析が完了すると、「パフォーマンス」・「アクセシビリティ」・「ベストプラクティス」・「SEO」・「Progressive Web App」の５つの指標で、レポートを作成してくれます。
PageSpeed insightsと同様に自分では気づけなかった課題や改善点を発見することができる場合があります。

まとめ

今回は、無料で使えてWEB開発に役にたつツールを紹介していきました。
作業効率を上げてくれるツールや自分が気がつかなかった改善点を指摘してくれるツールは、他にも数多くいろいろなものがあります。
こっちのほうが便利だので、ぜひ一度自分でも探してみて取り入れてみてください。