みなさんこんにちは、高卒ノマドのたいぺーです！
みなさんは効率化についてしっかりと考えていますか？
web制作の時にいかに効率化ができるかどうかはとても重要になります。
特にフリーランスでやっている方なんかは自分の時給をいかに上げれるかというのが重要になってくるので効率化できているか否かで後々大きな差が出てきます。
今回の記事ではweb制作をしていく上で効率化を図れるツールを紹介していきます！
web制作における効率化ツールを知れる。
それではみていきましょう！
google chromeの拡張機能
web制作をする環境は色々あるとは思いますが僕は「Google Chrome」をおすすめしています。
というのも、Google Chromeは拡張機能が多くその中でも使えるものがたくさんあるからです。
まずはGoogle Chromeの拡張機能の中でおすすめのものを紹介していきます。
ato-ichinen
ato-ichinenは検索する時に直近の一年で投稿された記事のみを表示することができます。（一年より短くもできます。）
web制作をしていると、随時情報がアップデートされていきます。常に最新の情報でwebサイトを作成する必要があります。
そんな時にato-ichinenがあると最新の情報のみをピックアップしてゲットすることができるのでおすすめです。
url render
URL renderは検索時に各ページのタイトルの上にカーソルを持ってきただけでサイトの中身を表示してくれるツールです。
実装方法などを検索している時にわざわざクリックしてサイトの中に入らなくても中身を確認することができるのでお勧めです。
時間短縮になりますね。
ColorPick Eyedropper
ColorPick Eyedropperはwebサイト内の色をピックアップできるツールです。
こんな風に簡単に色をカラーコードで知ることができます。
Image Downloader
Image Downloaderはサイト上にある画像を一気にダウンロードすることができるツールです。
サイト模写をする際なんかには役立つかもしれません。
WordPress Theme Detector and Plugins Detector
「WordPress Theme Detector and Plugins Detector」はサイトに使われているwordpressのテーマやプラグインを確認することができます。
「このサイトいけてるなー、どのテーマ使ってるんだろう。」「どんなプラグインを入れてるんだろう」という疑問に答えてくれます。
気になるサイトがある方は是非調べてみてください！
What Font
What Fontはサイトに使われているフォントの種類を教えてくれます。
何かいい感じのサイトを見つけてそのフォントを自分のサイトにも利用したい時などに使えます。
PerfectPixel by WellDoneCode
PerfectPixel by WellDoneCodeはコーディングの際に大活躍します。
このツールの詳しい仕様方法は、はにわまんさんのこちらの記事に書いてあります。
簡単に説明すると、自分のコーディングとデザインカンプがずれていないかを知ることができるツールです。
デザインカンプをサイト上において透かせることで比べることができます。
Web Maker
Web Makerは環境構築しなくてもHTML/CSS/JSの挙動を確認することができるツールです。
「ちょっとこのCSSやJSを書いたらどうなるかなー」とかいう時に使えます。
Take Webpage Screenshots Entirely – FireShot
Take Webpage Screenshots Entirely – FireShotはサイトの画像キャプチャをとることができるツールです。
スクリーンショットでもいいじゃんと思うかもしれませんが、こちらはサイト全体を縦長にスクリーンショットすることができます。
クライアントさんに軽く確認する際にはよく使うので使ってみてください！
その他便利ツール
Emmet
EmmetはHTMLやCSSを高速で入力することができるようになるツールです。
最初は多少文法を覚えないといけませんが、一度覚えてしまえばとてつもなく早くコードを書くことができるようになります。
例えば「display:block;」であればdbと書いてtabキーを押すだけで自動的に書かれます。
emmetでよく使うパターンはこれまたはにわまんさんのこちらの記事に書かれているので見てみてください！
ちなみにemmetはテキストエディタ上でインストールするのですが、対応エディタは下記のようです。（emmet公式ページ抜粋）
なぜかここにはないですが有名どころでいうと「vscode」でも導入可能です。
emmetを使えないのは割と致命的になるので、これら以外のテキストエディタを使っている方はなるべく早くemmetが使えるものに変えましょう！
Skitch
Skitchはスクリーンショットをしてそのまますぐに編集できるツールです。
例えば、コーディングの際にある箇所を修正してほしいという時。Skitchを使えばすぐにスクショして編集して相手に送ることができます。
Evernoteとも紐付けされているのでスクショして編集してすぐにevernoteに送ることもできます。
Cheet Sheet
Cheet Sheetはmac限定になってしまうのですが、ショートカットを覚えるのが苦手という方のためのアプリです。
あらゆるアプリで普通はショートカットというものがあります。でもこのショートカットってなかなか覚えるのが大変ですよね。
Cheet Sheetがあれば何かのアプリを使用中にcommandボタンを長押しするだけでショートカットがまとめられたものが出てきます！
僕も普段なかなかショートカットを覚えられないので助かっています。
まとめ
普段やっている作業に慣れてしまうと中々自分では「よしっ、効率化をしよう！」とは思わないと思います。
なので僕は人がおすすめしているのをみたらまずインストールして使ってみることをお勧めしています。
そこで自分に合わなければアンインストールすればいいだけです。
せっかく自分の時間を最大限に効率化するチャンスが目の前にあるのにめんどくさがってインストールしないのは相当勿体無いですよ！
