SUNABACO 
web開発をしている人にとって効率の良さはとても大切だと思います
オンラインツールを使えば、仕事を速くすることができます！
Metatags.io
このツールを使用すると、Google、Facebook、またはTwitterで表示したときのWebサイトのプレビューをテストが確認できます。ウェブサイトのタイトル、説明、画像は、訪問者が見ているとおりに表示されるので、user目線でプロダクトの確認ができます。
また、ウェブサイトを変更せずに画像をアップロードして、ウェブサイトのタイトルと説明タグを変更することもできます。
https://metatags.io/
ExtractCSS
こちらはHTMLドキュメントから要素ID、クラス、およびインラインスタイルを抽出し、CSSスタイルシートとして出力することができます。HTMLを入力するか、コピーして貼り付ける以外に何もする必要はないのです。このツールで作業を完了できちゃう。
http://extractcss.com/
WhatRuns
これはかなり便利です！ このツールは、使用されている他のサイトのテーマ、プラグイン、サーバー情報を確認するのに役立ちます。 WhatRunsは、コンピュータのメモリに多くのスペースを占有することなく、FirefoxとChromeにインストールできます。
https://www.whatruns.com/
Unminify
JavaScript、CSS、HTML、XML、JSONコードを最小化（解凍、難読化解除）する無料のツールで、読みやすくきれいできるツールです。
https://unminify.com/
Octotree
この拡張機能は探索に使えます。探しているものが正確にわかっている場合は、キーボードの「T」を押して、リポジトリ内のファイル名をすぐに検索することが可能です。 時間の節約に役立つでしょう。
https://www.octotree.io/
Web Developer Checklist
webサイトを開発するときに、忘れがちなことってありますよね？ このチェックリストを使い始めると、フロントエンドのSEOからモバイルまで、Webサイトでチェックすべき重要なことを常に思い出させてくれます。
https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en
Web Developer Form Filler
このツールは、開発者がフォームの機能をテストするのに役立ちます。 これにより、必要な詳細を入力する時間を節約できるだけでなく、より迅速に行うことができます。
https://chrome.google.com/webstore/detail/web-developer-form-filler/gbagmkohmhcjgbepncmehejaljoclpil?hl=en
EditThisCookie
Web開発者にとってなくてはならないものです。Cookieの編集などを簡単に行うことができるツールです。 あなたが行うことは、クリックするだけです。
https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg/related?hl=en
GTMetrix
特定した問題を修正すると、サイトの速度が低下している原因を特定し、コンバージョンを増やすことができるツールです。 場合によっては、問題がサーバーに関連する場合や、問題が超大型画像、コードの問題に関連していることがあり、それらの解決に役立つかもしれません。
https://gtmetrix.com/
Google Page Speed
このツールを使用して、ページの読み込みが遅くなる原因など、改善が必要なバックエンドの問題がないかWebサイトをスキャンしてみましょう！
https://developers.google.com/speed/pagespeed/insights/
Browserling
これを利用すると、Opera、Chrome、Firefoxなどのさまざまなブラウザで任意のWebサイトを表示できます。ブラウザによって表示が異なるので、確認は必須ですよね。また、WindowsやAndroidテクノロジなど、アクセス元のオペレーティングシステムを変更することもできます。
https://www.browserling.com/
Responsively App
このブラウザは、さまざまなデバイスでWebサイトがどのように表示されるかを一度に確認できます。一度にさまざまなデバイスでWebサイトをチェックするには時間がかかります。それを一度に行えるというのは便利ですよね。
https://responsively.app/
フロントエンド開発に役立つ11個のツールについては、また紹介いたします。
Compressior.io
携帯電話とデジタル一眼レフカメラでキャプチャされた画像を縮小できます。デフォルトでは、ファイルサイズが1MBを超えており、画像としては重くなりがちです。 品質は変えずに、サイズを変えたいですよね。
このツールを使用すると、JPEG、PNG、SVG、GIF、およびWEBP画像をオンラインで最適化および圧縮できます。
https://compressor.io/
DrawKit
Webデザインで無料のベクターイラストを探しています。 これらのデザインは綺麗でプロフェッショナルであり、誰もが使用できるWebサイト向けに設計されています。
https://www.drawkit.io/
少しでも皆さんの役に立つ事を願っております！
SUNABACOデザインスクール募集しております！
SUNABACOプログラミングスクールでは2カ月間で徹底的にプログラミングやデザインを学びます！
またSUNABACOの特徴でもあるのがプログラミングだけを学ぶのが目的でなく、プログラミングを使って人に価値を提供する、世の中にある困りごとをどのように解決するかを学ぶスクールです！