見出し画像

新米webディレクターおすすめ!拡張機能5選

みなさんこんにちは!
本日はいつものinstagramの運用法ではなく、
新米webディレクターの私が日々の業務で便利だな〜と感じる(実際に使っている)オススメの拡張機能5選をご紹介したいと思います。

※webディレクターと言っても、やっていることは人それぞれ違うと思うのであくまで私の主観的なオススメ拡張機能になりますのでご了承ください。

①check my links
ページ内のリンク切れをワンクリックでチェックしてくれる拡張機能。

webページでは多くのリンクが埋め込まれており、一つずつクリックして確認するのはとても時間がかかり大変ですよね、、
そんな時にこちらの拡張機能が大活躍します!

【Vaild links】
【Redirect links】
【Warnings】
【Invaild links】
上記4つに分かれて各リンクのチェック結果が表示され、リンク切れのものに関しては赤色で場所を表示してくれるため、修正箇所が判別しやすい形となっておりとても便利です!

②htmlエラーチェッカー
ページのhtmlタグの記述ミスや開始タグや閉じタグの不足などをチェックしてくれる拡張機能。

サイト公開前にHTMLの記述ミス等による事故を事前に防ぐために、このエラーチェッカーを使います。私はこの拡張機能をピン留めしておき、開いたページを自動でチェックしてくれるように設定しておくことで、ページ制作の途中経過の段階からエラーを確認できるようにしています。

ページリリース直前の発見よりも、余裕を持って確認できればリリース後の事故発生の確率を下げることができるのでとてもお勧めです!

③pasty
複数リンクを一気に開くことができる拡張機能。

ページチェックは1ページのみというよりも、複数ページをチェックすることの方が多いと思います。そんな時に役立つのがpastyになります!
エクセルなどに記載されているチェックしたいページのURLを全て選択してコピーし、この拡張機能を起動させることで一気にページを開くことができます。

④full page screen
ページ全体のキャプチャを取得できる拡張機能。

ページの構成やデザインなどを保存しておくためにキャプチャを取得しておくことが多いと思うのですが、ページ全体のキャプチャを撮るのって意外と面倒ですよね。ページが長いと全体のキャプチャを撮ることが難しかったりすると思うのですが、こちらの拡張機能では簡単にページ全体のキャプチャを撮り、保存しておくことができます。


⑤whatFont
ページ内のフォントが何のフォントなのかが瞬時に判別できる拡張機能。

参考サイトなどのwebサイトに使われているフォントが何のフォントかが知りたいときにとても便利なのがこちらの拡張機能です。こちらもツールを起動させ、気になるフォントの場所にカーソルを持ってくるだけで何のフォントかが簡単にわかるため、わざわざcssや似たフォントを探す時間を省くことができます!
※画像文字などは判別不可なのでそこだけご注意を…!

いかがでしたでしょうか?
拡張機能はこれ以外にもたくさんの便利な機能があるので、またおすすめの拡張機能が見つかった際に紹介させていただきます!
ぜひ皆さんも上記の拡張機能を参考に使ってみてください✨

この記事が気に入ったらサポートをしてみませんか?