日常・ライフハック

WEB制作者必須の作業効率化ツールを公開します【全て無料】

みなさんこんにちは、高卒ノマドのたいぺーです!

みなさんは効率化についてしっかりと考えていますか?

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 Eyedropperwebサイト内の色をピックアップできるツールです。

こんな風に簡単に色をカラーコードで知ることができます。

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ボタンを長押しするだけでショートカットがまとめられたものが出てきます!

僕も普段なかなかショートカットを覚えられないので助かっています。

まとめ

普段やっている作業に慣れてしまうと中々自分では「よしっ、効率化をしよう!」とは思わないと思います。

なので僕は人がおすすめしているのをみたらまずインストールして使ってみることをお勧めしています。

そこで自分に合わなければアンインストールすればいいだけです。

せっかく自分の時間を最大限に効率化するチャンスが目の前にあるのにめんどくさがってインストールしないのは相当勿体無いですよ!

ABOUT ME
たいぺー
現在、web制作で生きているフリーランスです。 趣味は旅行。 色々なことに興味が出てくるお年頃なのでたくさんのことにチャレンジしています。