ブログ
無料で使えるWEB開発に役に立つツールやサイト
はじめまして！
2021年4月にウイングドアにJOINしましたR.Tです。
現在は、Laravel・PHP等でWebシステムの開発・保守を担当しております。
Webシステムの開発業務において、様々なツールやサイトを利用しています。
便利なツールやサイトは多数あり、有料なものも多いです。
今回は、その多数ある便利なツールやサイトで、私が取り入れ済みものや今後取り入れたいと考えているものの中で、特に「無料」で使えるもののみに厳選して紹介したいと思います。
なお、今回紹介するものは、全て商用利用可能です。
目次
coolors
coolorsというサイトです。
こちらは、配色を決める際に参考になるサイトです。
coolorsは、5色の配色を自動で作成してくれます。
システム画面に色を使いすぎたり、メインの色が原色だと結構見づらくなってしまいます。
このサイトを使用し、色合いを確認してから、システム画面やパワーポイントでの資料等を作ってみると見た目のよいものになると思います。
またこちらのサイトはユーザー登録等なしでも使用できますので、お勧めです。
Font Awesome
Font Awesomeというサービスです。
こちらは、無料で使える「Webアイコンフォント」が紹介されています。
「Webアイコンフォント」とは、画像ではなく文字として扱えるアイコンのことです。
文字として扱うことができるので、CSSで簡単にサイズや色を変更することができます。
簡単なCSSで柔軟にアイコンのデザインを変更することができるので、非常に便利です。
storyset
storysetというサイトです。
こちらは、ビジネスやパワーポイント資料で使えそうなイラストがとても多く紹介されています。
また、こちらのサイトでは色を変更することができるので、
メインカラーに合わせたイラストを作成することができます。
なお、無料で使う場合は、クレジット表記が必要です。
有料登録すれば、クレジット表記が不要になります。
Unsplash
Unsplashというサイトです。
こちらは、無料とは思えないぐらいクオリティが高い写真素材が提供されています。
綺麗な画像を使うと見栄えが一気に変わるので、写真素材を探す場合には、ぜひ一度使ってみてください。
codic
codicというサイトです。
開発をしている際には変数やメソッドなどの命名を多く行う必要が出てきます。
その命名に迷った時等に使えるのが、こちらのサービスです。
日本語を入力すると、自動で英語の名前を作成してくれます。
また、「snake case」や「camel case」ケースといった規則にも対応していますので、
自動生成されたネーミングをそのまま使用することも可能です。
Google Chromeの拡張機能
ここからはGoogle Chromeの拡張機能を紹介していきます。
Responsive Viewer
最初に紹介するのは、Responsive Viewerというツールです。
パソコンで表示するときれいに表示されているんですが、
スマホで表示させると表示が崩れてしまうサイトとかを見たことがあると思います。
これは、さまざまな画面サイズに対応されてないためですが、
これを簡単に確認できるツールが、Responsive Viewerです。
このツールを使えば、レスポンシブデザインを確認したい画面を開いて、
ボタンをクリックするだけで、簡単に様々な画面の表示を確認することができます。
レスポンシブデザインの確認をする際には、ぜひ一度使ってみてください。
PageSpeed Insights
続いて、PageSpeed Insightsというツールです。
こちらは、サイトの表示速度をチェックしてくれるツールです。
このツールは、チェックしたいURLを入力すると解析が始まり、
表示速度に関するスコアや改善点を指摘してくれます。
こちらを活用することで、自分では気がつかなかった表示速度の課題を発見して、
ユーザビリティを向上させることができます。
また、こちらのサービスは、WEBページからも使うことが可能です。
ブックマーク登録だけで使用できるので、こちらの方が使いやすいかもしれません。
Lighthouse
続いて、Lighthouseというツールです。
こちらは、検索エンジン対策（SEO）の観点でサイトをチェックしてくれるツールです。
解析したいサイトを開いた状態でアドオンを実行すると解析が始まります。
解析が完了すると、「パフォーマンス」・「アクセシビリティ」・「ベストプラクティス」・「SEO」・「Progressive Web App」の５つの指標で、レポートを作成してくれます。
PageSpeed insightsと同様に、自分では気づけなかった課題や改善点を発見することができる場合があります。
HTMLエラーチェッカー
続いて、HTMLエラーチェッカーというツールです。
このツールは、WEBページのレイアウト崩れや表示不具合の原因となる、
タグの閉じ忘れ（HTMLの構文ミス）を検出してくれるツールです。
タグの閉じ忘れは、コーディング時の発生しがちなミスです。
しかし、このツールを使えば、そういったミスを防ぐことができます。
サイトの公開前や納品前のチェック作業時だけでも使用することをお勧めします。
今回は、無料で使えるWEB開発に役に立つツールやサイトを紹介していきました。
作業効率を上げてくれるツールや、自分で気づかなかった改善点を指摘してくれるツールやサイトは、
他にも数多くいろいろなものがあります。
今後も、定期的に便利なツールの情報を発信していきたいと思います。
株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！